import React from "react";
import { Metadata } from "next";
import { notFound } from "next/navigation";
import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
import { DashboardLayout } from "@/components/layout/dashboard";
import { createHelpers } from "@/lib/trpc/server";
import { PlanView } from "@/components/dashboard/payment/plan-view";

type Props = {
    params: Promise<{ id: string }>;
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
    const { id } = await params;

    const helpers = await createHelpers();

    const plan = await helpers.payment.plan.get.fetch({ id, access: "dashboard" });

    if (!plan) {
        return {
            title: "Plan not found",
            description: "The requested plan could not be found."
        };
    }

    return {
        title: `Plan: ${plan.name || "Untitled Plan"}`,
        description: `View ${plan.name || "this plan"}`
    };
}

export default async function Page({ params }: Props) {
    const { id } = await params;

    const helpers = await createHelpers();
    const plan = await helpers.payment.plan.get.fetch({
        id,
        access: "dashboard"
    });

    if(!plan) {
        notFound();
    }

    await Promise.all([
        helpers.payment.planPrice.count.prefetch({
            access: "dashboard",
            planId: plan.id
        }),
        helpers.payment.planPrice.list.prefetch({
            access: "dashboard",
            planId: plan.id,
            limit: 15,
            offset: 0,
            orderDir: "desc"
        })
    ]);

    return (
        <HydrationBoundary state={dehydrate(helpers.queryClient)}>
            <DashboardLayout>
                <PlanView plan={plan} />
            </DashboardLayout>
        </HydrationBoundary>
    );
}