"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { ShieldAlert } from "lucide-react";
import { AdminSidebar } from "@/components/admin/sidebar";
import { AdminTopbar } from "@/components/admin/topbar";
import { canAccess } from "@/components/admin/nav";
import { Button } from "@/components/ui/button";
import { useSession } from "@/lib/use-session";

export function AdminShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();
  const { user, isLoading, isValidating, isError } = useSession();
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    setMobileOpen(false);
  }, [pathname]);

  useEffect(() => {
    if (!isError || isValidating) return;
    void fetch("/api/auth/logout", { method: "POST" }).finally(() => {
      router.replace("/login");
    });
  }, [isError, isValidating, router]);

  if (isLoading || !user) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-background">
        <div className="flex items-center gap-3 text-sm text-muted-foreground">
          <span className="h-4 w-4 animate-spin rounded-full border-2 border-muted border-t-primary" />
          Memuat sesi…
        </div>
      </div>
    );
  }

  const allowed = canAccess(user.role, pathname);

  if (pathname.endsWith("/cetak") || /^\/admin\/cetak-surat\/\d+$/.test(pathname)) {
    return <>{children}</>;
  }

  return (
    <div className="min-h-screen bg-background">
      <AdminSidebar
        role={user.role}
        nama={user.nama}
        mobileOpen={mobileOpen}
        onClose={() => setMobileOpen(false)}
      />
      <div className="lg:pl-64">
        <AdminTopbar user={user} onMenu={() => setMobileOpen(true)} />
        <main className="px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
          <div className="mx-auto max-w-7xl">
            {allowed ? (
              children
            ) : (
              <div className="mx-auto mt-10 max-w-md rounded-2xl border bg-card p-8 text-center shadow-sm">
                <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-red-50 text-red-600">
                  <ShieldAlert className="h-6 w-6" />
                </div>
                <h2 className="mt-4 text-lg font-bold">Akses ditolak</h2>
                <p className="mt-2 text-sm text-muted-foreground">
                  Peran <span className="font-semibold">{user.role}</span> tidak memiliki
                  izin untuk membuka halaman ini.
                </p>
                <Button asChild className="mt-5">
                  <Link href="/admin">Kembali ke dasbor</Link>
                </Button>
              </div>
            )}
          </div>
        </main>
      </div>
    </div>
  );
}