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 { PaywallBypassIpEditor } from "@/components/dashboard/paywall-bypass-ip/paywall-bypass-ip-editor";

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

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

    const helpers = await createHelpers();

    const item = await helpers.paywallBypassIp.get.fetch({ id });

    if (!item) {
        return {
            title: "IP Bypass not found",
            description: "The requested IP bypass could not be found."
        };
    }

    return {
        title: `Edit IP Bypass: ${item.ip}`,
        description: `Edit IP bypass for ${item.ip}`
    };
}

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

    const helpers = await createHelpers();
    const item = await helpers.paywallBypassIp.get.fetch({ id });

    if(!item) {
        notFound();
    }

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

            <PaywallBypassIpEditor mode="edit" id={item.id} item={item} />
        </Shell>
    );
}