import Link from "next/link";
import { EyeIcon, FileTextIcon, LayoutTemplateIcon, PlusIcon } from "lucide-react";
import { redirect } from "next/navigation";
import { connection } from "next/server";

import { AdminSidebar } from "@/components/admin/admin-sidebar";
import { LiveRefresh } from "@/components/live-refresh";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { getAdminSession } from "@/lib/auth/server";
import { loadAdminNavigation } from "@/lib/content/loaders";

export default async function AdminPage() {
  await connection();
  if (!(await getAdminSession())) redirect("/admin/login");
  const navigation = await loadAdminNavigation();

  return (
    <SidebarProvider>
      {process.env.BUZZ_DEMO_MODE === "true" ? null : (
        <LiveRefresh endpoint="/api/events/admin" />
      )}
      <AdminSidebar navigation={navigation} />
      <SidebarInset>
        <header className="flex min-h-14 items-center gap-3 border-b px-4">
          <SidebarTrigger />
          <div className="min-w-0 flex-1">
            <h1 className="font-heading font-semibold">ภาพรวมเนื้อหา</h1>
            <p className="text-xs text-muted-foreground">ตัวละคร หน้า และสถานะการเผยแพร่</p>
          </div>
          <Button variant="outline" render={<Link href="/admin/templates" />}>
            <LayoutTemplateIcon />เทมเพลต
          </Button>
        </header>
        <main className="mx-auto w-full max-w-6xl space-y-8 p-4 sm:p-6 lg:p-8">
          <div className="flex flex-wrap items-end justify-between gap-4">
            <div>
              <p className="text-sm font-medium text-primary">คลังคู่มือ</p>
              <h2 className="mt-1 font-heading text-2xl font-semibold">ตัวละครทั้งหมด</h2>
            </div>
            <Button render={<Link href="/admin/templates" />}><PlusIcon />สร้างจากเทมเพลต</Button>
          </div>
          {navigation.characters.length > 0 ? (
            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
              {navigation.characters.map((character) => (
                <Card key={character.id}>
                  <CardHeader>
                    <CardTitle>{character.nameTh}</CardTitle>
                    <CardDescription>{character.nameEn ?? character.slug}</CardDescription>
                    <CardAction>
                      <Badge variant={character.visible ? "default" : "outline"}>
                        {character.visible ? "เผยแพร่" : "ซ่อน"}
                      </Badge>
                    </CardAction>
                  </CardHeader>
                  <CardContent className="space-y-2">
                    {character.pages.map((page) => (
                      <div key={page.id} className="flex min-h-11 items-center gap-2 rounded-lg border px-3">
                        <FileTextIcon className="size-4 text-muted-foreground" />
                        <Link href={`/admin/${character.slug}/${page.slug}`} className="min-w-0 flex-1 truncate text-sm font-medium hover:text-primary">
                          {page.title}
                        </Link>
                        <Badge variant="outline">v{page.version}</Badge>
                        {page.visible && character.visible ? (
                          <Button variant="ghost" size="icon-xs" render={<Link href={`/${character.slug}/${page.slug}`} target="_blank" />} aria-label={`เปิด ${page.title}`}>
                            <EyeIcon />
                          </Button>
                        ) : null}
                      </div>
                    ))}
                  </CardContent>
                </Card>
              ))}
            </div>
          ) : (
            <Card className="border-dashed"><CardContent className="grid min-h-48 place-items-center text-center text-muted-foreground">ยังไม่มีตัวละคร เริ่มต้นด้วยเทมเพลตที่เตรียมไว้</CardContent></Card>
          )}
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}