import { Metadata } from "next";
import { notFound } from "next/navigation";
import React from "react";
import { Shell } from "@/components/shell";
import { createHelpers } from "@/lib/trpc/server";
import { PriceEditor } from "@/components/dashboard/payment/price-editor";

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

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

    const helpers = await createHelpers();

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

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

    return {
        title: `Edit Price: ${price.name || "Untitled Price"}`,
        description: `Edit ${price.name || "this price"}`
    };
}

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

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

    if(!price) {
        notFound();
    }

    return (
        <Shell className="gap-4">
            <div className="flex items-center gap-4 px-4">
                <div>
                    <h1 className="text-2xl font-bold">Edit Price</h1>
                </div>
            </div>

            <PriceEditor id={price.id} price={price} />
        </Shell>
    );
}