import Image from "next/image";
import Link from "next/link";
import { ArrowLeft, ExternalLink, LogOut } from "lucide-react";

import { AdminSessionGate } from "@/components/admin-dashboard";
import { Button } from "@/components/ui/button";
import { createAdminApiToken, getAdminUser } from "@/lib/admin-auth";

export const dynamic = "force-dynamic";

export default async function AdminPage() {
  const user = await getAdminUser();
  const apiToken = user ? createAdminApiToken(user.username) : "";
  return (
    <main className="min-h-screen bg-[#eef3ef] text-[#10251d]" dir="rtl">
      <header className="border-b border-emerald-950/10 bg-[#073c2b] text-white">
        <div className="mx-auto flex max-w-[1440px] flex-wrap items-center justify-between gap-4 px-5 py-5 lg:px-8">
          <div className="flex items-center gap-3">
            <Image src="/alstc-logo.webp" alt="ALSTC" width={52} height={52} className="size-13 rounded-full bg-white object-cover" />
            <div><h1 className="font-black">پنل مدیریت ALSTC</h1><p className="mt-1 text-xs text-emerald-100/60">{user?.displayName ?? "مدیر سایت"}</p></div>
          </div>
          <div className="flex flex-wrap gap-2">
            <Button asChild variant="outline" className="border-white/20 bg-white/5 text-white hover:bg-white/10 hover:text-white">
              <Link href="/" target="_blank">مشاهده سایت <ExternalLink /></Link>
            </Button>
            <Button asChild variant="ghost" className="text-emerald-50 hover:bg-white/10 hover:text-white">
              <Link href="/api/admin/logout">خروج <LogOut /></Link>
            </Button>
          </div>
        </div>
      </header>
      <div className="mx-auto max-w-[1440px] px-5 py-8 lg:px-8">
        <div className="mb-7 flex flex-wrap items-end justify-between gap-3">
          <div><p className="text-sm font-bold text-[#a67820]">فاز ۱C</p><h2 className="mt-2 text-3xl font-black">مدیریت محتوای سایت</h2><p className="mt-2 text-sm leading-7 text-[#60766e]">محتوا را جست‌وجو، ویرایش، تکثیر، پیش‌نمایش و با یک کلیک منتشر کنید.</p></div>
          <Link href="/" className="inline-flex items-center gap-2 text-sm font-bold text-[#0a5a3c]">بازگشت به سایت <ArrowLeft className="size-4" /></Link>
        </div>
        <AdminSessionGate initialToken={apiToken} />
      </div>
    </main>
  );
}