import Image from "next/image"
import { notFound } from "next/navigation"
import { cookies } from "next/headers"
import Link from "next/link"
import { ChevronLeft } from "lucide-react"
import prisma from "@/lib/prisma"
import { Button } from "@/components/ui/button"
import { PlanLoginForm } from "@/components/plan-login-form"
import { PlanDashboard } from "./_components/plan-dashboard"
import { getDictionary } from "@/get-dictionary"

export default async function DashboardPage({
    params
}: {
    params: Promise<{ planId: string, lang: string }>
}) {
    const { planId, lang } = await params
    const dict = await getDictionary(lang as any)

    const plan = await prisma.plan.findUnique({
        where: { id: planId },
        include: { bookings: true },
    })

    if (!plan) {
        notFound()
    }

    const cookieStore = await cookies()
    const isAuthenticated = cookieStore.get(`plan_auth_${plan.id}`)?.value === "true"

    if (!isAuthenticated) {
        return (
            <main className="flex min-h-screen flex-col items-center p-4">
                <PlanLoginForm planId={plan.id} dict={dict.login} />
            </main>
        )
    }

    return (
        <main className="flex min-h-screen flex-col items-center p-4">
            <div className="w-full max-w-4xl space-y-6">
                <div className="flex flex-col gap-4">
                    <Button variant="ghost" size="sm" asChild className="w-fit -ml-2 text-muted-foreground">
                        <Link href={`/${lang}`}>
                            <ChevronLeft className="w-4 h-4 mr-1" />
                            {dict.dashboard.backToHome}
                        </Link>
                    </Button>

                    <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                        <div className="flex items-center gap-4">
                            <div className="bg-white p-1.5 rounded-xl shadow-sm border border-primary/10">
                                <Image
                                    src="/icon.png"
                                    alt="Logo"
                                    width={48}
                                    height={48}
                                    className="rounded-lg"
                                />
                            </div>
                            <div>
                                <h1 className="text-2xl font-bold">{plan.title}</h1>
                                <p className="text-muted-foreground text-sm">
                                    {plan.startDate.toLocaleDateString(lang)} - {plan.endDate.toLocaleDateString(lang)}
                                </p>
                            </div>
                        </div>
                        <div className="text-sm bg-muted px-3 py-1 rounded-md">
                            Plan ID: <span className="font-mono font-bold">{plan.id}</span>
                        </div>
                    </div>

                    <div className="p-4 border rounded-lg bg-card text-card-foreground shadow-sm">
                        <PlanDashboard plan={plan} dict={dict.dashboard} settingsDict={dict.settings} lang={lang} />
                    </div>
                </div>
            </div>
        </main>
    )
}