import Link from "next/link";
import { Suspense } from "react";
import { connection } from "next/server";
import { SiteHeader } from "@/components/public/site-header";
import { CommissionRequestForm } from "@/components/commission/request-form";
import { CommissionIntro } from "@/components/commission/commission-intro";
import { Button } from "@/components/ui/button";
import { Card, CardHeader } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { getCustomerSession } from "@/lib/auth/server";
import { getCatalogOptions } from "@/lib/guides/queries";
import { getCommissionAvailability } from "@/lib/commission/availability";

export const instant = false;

async function CommissionContent() {
  await connection();
  const availability = await getCommissionAvailability();
  if (!availability.isOpen) return <div className="flex flex-col gap-8"><div className="flex flex-col gap-4 rounded-xl border p-6">
    <h2 className="font-heading text-xl font-semibold">ปิดรับ Commission ชั่วคราว</h2>
    <p className="whitespace-pre-wrap">{availability.closureMessage}</p>
    <Button variant="outline" nativeButton={false} render={<Link href="/commission/tickets" />}>
      ดูคำขอของฉัน
    </Button>
  </div><CommissionIntro /></div>;
  const session = await getCustomerSession();
  if (!session) return <div className="flex flex-col gap-8"><div className="flex flex-col gap-4 rounded-xl border p-6">
    <h2 className="font-heading text-xl font-semibold">เริ่มคำขอ</h2>
    <p>เข้าสู่ระบบหรือสมัครสมาชิกเพื่อบันทึกคำขอ ติดตามผล และพูดคุยกับทีมงาน</p>
    <div className="flex flex-wrap gap-2">
      <Button nativeButton={false} render={<Link href="/auth/login?next=%2Fcommission" />}>เข้าสู่ระบบ</Button>
      <Button variant="outline" nativeButton={false} render={<Link href="/auth/register?next=%2Fcommission" />}>สมัครสมาชิก</Button>
    </div>
  </div><CommissionIntro /></div>;
  const catalog = await getCatalogOptions();
  if (!catalog) return <p>ยังไม่มีข้อมูลตัวละครสำหรับสร้างคำขอ</p>;
  return <div className="flex flex-col gap-6">
    <div className="flex items-center gap-3"><Button variant="outline" nativeButton={false} render={<Link href="/commission/tickets" />}>ดูคำขอของฉัน</Button></div>
    <CommissionRequestForm key={session.user.id} catalog={catalog} userId={session.user.id} />
  </div>;
}

export default function CommissionPage() {
  return <div className="min-h-svh"><SiteHeader />
    <main className="mx-auto flex w-full max-w-5xl flex-col gap-6 p-4 py-10 sm:p-8">
      <header><h1 className="font-heading text-3xl font-semibold">จ้างคำนวณทีม</h1>
        <p className="text-muted-foreground">ขอทีม เปรียบเทียบอาวุธหรือกลุ่มดาวตามที่ต้องการ</p></header>
      <Suspense fallback={<Card><CardHeader><Skeleton className="h-6 w-48" /><Skeleton className="h-4 w-full max-w-md" /></CardHeader></Card>}><CommissionContent /></Suspense>
    </main>
  </div>;
}