import { useEffect, useMemo, useState } from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  LayoutDashboard,
  UsersRound,
  GraduationCap,
  CalendarDays,
  FileText,
  TriangleAlert,
  BookUser,
  DoorOpen,
  ShieldCheck,
  Scale,
  Users,
  Bell,
  Menu,
  LogOut,
  Megaphone,
  Info,
  CalendarX,
  MailWarning,
  MessageSquareHeart,
  Clock3,
  Trophy,
  type LucideIcon,
  Database,
  ClipboardCheck,
} from "lucide-react";
import logoAsset from "@/assets/logo_smpn8.png.asset.json";
import { toast } from "sonner";
import { useSip, waliKelasOf } from "@/lib/sip-data";
import { Dashboard } from "@/components/sip/modules/Dashboard";
import { ManajemenAkun } from "@/components/sip/modules/ManajemenAkun";
import { LaporanAnak } from "@/components/sip/modules/LaporanAnak";
import { DataSiswa } from "@/components/sip/modules/DataSiswa";
import { JadwalPiket } from "@/components/sip/modules/JadwalPiket";
import { DataPelanggaran } from "@/components/sip/modules/DataPelanggaran";
import { BukuTamu } from "@/components/sip/modules/BukuTamu";
import { IzinKeluar } from "@/components/sip/modules/IzinKeluar";
import { RekapData } from "@/components/sip/modules/RekapData";
import { InfoSekolah } from "@/components/sip/modules/InfoSekolah";
import { KelolaInformasi } from "@/components/sip/modules/KelolaInformasi";
import { KehadiranGuru } from "@/components/sip/modules/KehadiranGuru";
import { PemberitahuanBK } from "@/components/sip/modules/PemberitahuanBK";
import { KotakSaran } from "@/components/sip/modules/KotakSaran";
import { JadwalMengajar } from "@/components/sip/modules/JadwalMengajar";
import { PrestasiSiswa } from "@/components/sip/modules/PrestasiSiswa";
import { PengaturanDatabase } from "@/components/sip/modules/PengaturanDatabase";
import { DataDapodik } from "@/components/sip/modules/DataDapodik";
import { ValidasiDataSiswa } from "@/components/sip/modules/ValidasiDataSiswa";

type MenuItem = { id: string; icon: LucideIcon; text: string };

export function AppShell() {
  const {
    currentUser,
    logout,
    izin,
    pelanggaran,
    izinGuru,
    pemberitahuanBk,
    saranOrtu,
    dismissedNotif,
    dismissNotif,
    dbStatus,
  } = useSip();
  const [active, setActive] = useState<MenuItem>(() =>
    currentUser?.role === "Orang Tua"
      ? { id: "info_sekolah", icon: Info, text: "Informasi Sekolah" }
      : { id: "dashboard", icon: LayoutDashboard, text: "Dashboard" },
  );
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [clock, setClock] = useState("");

  useEffect(() => {
    const tick = () =>
      setClock(
        new Date().toLocaleString("id-ID", {
          weekday: "long",
          day: "2-digit",
          month: "long",
          year: "numeric",
          hour: "2-digit",
          minute: "2-digit",
        }),
      );
    tick();
    const t = setInterval(tick, 30000);
    return () => clearInterval(t);
  }, []);

  const role = currentUser?.role;
  const kelasWali = waliKelasOf(currentUser);

  const menus = useMemo<MenuItem[]>(() => {
    const isOrtu = role === "Orang Tua";
    const list: MenuItem[] = [
      isOrtu
        ? { id: "info_sekolah", icon: Info, text: "Informasi Sekolah" }
        : { id: "dashboard", icon: LayoutDashboard, text: "Dashboard" },
    ];
    if (role === "Admin") {
      list.push(
        { id: "manajemen_akun", icon: UsersRound, text: "Manajemen Akun" },
        { id: "data_siswa", icon: GraduationCap, text: "Data Siswa" },
        { id: "jadwal_piket", icon: CalendarDays, text: "Kelola Jadwal Piket" },
        { id: "kelola_informasi", icon: Megaphone, text: "Kelola Informasi Sekolah" },
        { id: "rekap_data", icon: FileText, text: "Rekap & Laporan" },
        { id: "database", icon: Database, text: "Database & Backup" },
      );
    } else if (!isOrtu) {
      list.push({ id: "jadwal_piket", icon: CalendarDays, text: "Jadwal Petugas Piket" });
    }
    if (role === "Petugas Piket") {
      list.push(
        { id: "data_pelanggaran", icon: TriangleAlert, text: "Data Pelanggaran" },
        { id: "buku_tamu", icon: BookUser, text: "Buku Tamu" },
        { id: "izin_keluar", icon: DoorOpen, text: "Izin Keluar" },
        { id: "piket_guru_absen", icon: CalendarX, text: "Guru Tidak Hadir" },
        { id: "piket_jadwal_mengajar", icon: Clock3, text: "Guru Mengajar Sekarang" },
        { id: "rekap_data", icon: FileText, text: "Rekap & Laporan" },
      );
    }
    if (kelasWali) {
      list.push(
        { id: "rekap_kelas_pelanggaran", icon: TriangleAlert, text: "Pelanggaran Kelasku" },
        { id: "rekap_kelas_izin", icon: DoorOpen, text: "Izin Keluar Kelasku" },
        { id: "wali_jadwal_mengajar", icon: Clock3, text: "Guru Mengajar Kelasku" },
      );
    }
    if (role === "Guru BK")
      list.push(
        { id: "data_pelanggaran", icon: TriangleAlert, text: "Catat Pelanggaran Siswa" },
        { id: "bk_pemberitahuan", icon: MailWarning, text: "Pemberitahuan Orang Tua" },
      );
    if (role === "Guru Mapel")
      list.push(
        { id: "data_pelanggaran", icon: TriangleAlert, text: "Catat Pelanggaran Siswa" },
        { id: "izin_guru_saya", icon: CalendarX, text: "Permintaan Izin Saya" },
        { id: "jadwal_mengajar_saya", icon: Clock3, text: "Jadwal Mengajar" },
      );
    if (role === "Operator Dapodik")
      list.push({ id: "data_dapodik", icon: ClipboardCheck, text: "Data Siswa Dapodik" });
    if (role === "Orang Tua")
      list.push(
        { id: "validasi_dapodik", icon: ClipboardCheck, text: "Validasi Data Siswa" },
        { id: "laporan_anak", icon: Users, text: "Laporan Anak Saya" },
        { id: "ortu_pemberitahuan", icon: MailWarning, text: "Pemberitahuan Guru BK" },
        { id: "ortu_saran", icon: MessageSquareHeart, text: "Kotak Saran & Laporan" },
      );
    if (role === "Satpam") {
      list.push(
        { id: "satpam_izin", icon: ShieldCheck, text: "Verifikasi Izin" },
        { id: "buku_tamu", icon: BookUser, text: "Buku Tamu Hari Ini" },
      );
    }
    if (role === "Kepala Sekolah") {
      list.push(
        { id: "kepsek_pelanggaran", icon: TriangleAlert, text: "Daftar Pelanggaran" },
        { id: "kepsek_izin_guru", icon: CalendarX, text: "Izin Guru Mapel" },
        { id: "kepsek_jadwal_mengajar", icon: Clock3, text: "Guru Mengajar Sekarang" },
        { id: "kepsek_saran", icon: MessageSquareHeart, text: "Kotak Saran Orang Tua" },
        { id: "rekap_data", icon: FileText, text: "Rekap & Laporan" },
      );
    }
    if (role === "Waka Kesiswaan") {
      list.push(
        { id: "data_pelanggaran", icon: TriangleAlert, text: "Catatan Pelanggaran Siswa" },
        { id: "prestasi_siswa", icon: Trophy, text: "Catatan Prestasi Siswa" },
      );
    }
    return list;
  }, [role, kelasWali]);

  const notifications = useMemo(() => {
    const items: { id: string; title: string; body: string }[] = [];
    if (role === "Satpam") {
      izin
        .filter((i) => i.status === "Menunggu")
        .forEach((i) =>
          items.push({
            id: `izin-${i.id}`,
            title: "Verifikasi izin keluar",
            body: `${i.nama} (${i.kelas}) — ${i.alasan}`,
          }),
        );
    }
    if (kelasWali) {
      pelanggaran
        .filter((p) => p.kelas === kelasWali)
        .forEach((p) =>
          items.push({
            id: `pel-${p.id}`,
            title: "Pelanggaran siswa kelas Anda",
            body: `${p.nama} — ${p.jenis}`,
          }),
        );
      izin
        .filter((i) => i.kelas === kelasWali)
        .forEach((i) =>
          items.push({ id: `izinw-${i.id}`, title: "Izin keluar siswa", body: `${i.nama} — ${i.status}` }),
        );
    }
    if (role === "Kepala Sekolah") {
      izinGuru
        .filter((g) => g.status === "Menunggu")
        .forEach((g) =>
          items.push({
            id: `ig-${g.id}`,
            title: "Permintaan izin guru",
            body: `${g.guru} (${g.mapel}) — ${g.jenis}: ${g.alasan}`,
          }),
        );
    }
    if (role === "Kepala Sekolah") {
      saranOrtu
        .filter((s) => s.status === "Terkirim")
        .forEach((s) =>
          items.push({
            id: `sr-${s.id}`,
            title: `${s.jenis} dari orang tua`,
            body: `${s.pengirim} — ${s.judul}`,
          }),
        );
    }
    if (role === "Petugas Piket") {
      izinGuru
        .filter((g) => g.status !== "Ditolak")
        .forEach((g) =>
          items.push({ id: `pg-${g.id}`, title: "Guru tidak hadir", body: g.guru }),
        );
    }
    if (role === "Guru BK" || role === "Kepala Sekolah") {
      pelanggaran.forEach((p) =>
        items.push({ id: `bk-${p.id}`, title: "Pelanggaran baru", body: `${p.nama} (${p.kelas}) — ${p.jenis}` }),
      );
    }
    if (role === "Orang Tua") {
      pelanggaran
        .filter((p) => p.nama === currentUser?.anak && p.kelas === currentUser?.keterangan)
        .forEach((p) =>
          items.push({ id: `ortup-${p.id}`, title: "Laporan pelanggaran anak", body: `${p.jenis} — ${p.tindakan}` }),
        );
      izin
        .filter((i) => i.nama === currentUser?.anak && i.kelas === currentUser?.keterangan)
        .forEach((i) =>
          items.push({ id: `ortui-${i.id}`, title: "Izin keluar anak", body: `${i.alasan} — ${i.status}` }),
        );
      pemberitahuanBk
        .filter((p) => p.nama === currentUser?.anak && p.kelas === currentUser?.keterangan)
        .forEach((p) =>
          items.push({ id: `ortubk-${p.id}`, title: p.jenis + " dari Guru BK", body: p.judul }),
        );
    }
    return items.filter((n) => !dismissedNotif.includes(n.id));
  }, [role, kelasWali, izin, pelanggaran, izinGuru, pemberitahuanBk, saranOrtu, currentUser, dismissedNotif]);

  const renderModule = () => {
    switch (active.id) {
      case "dashboard":
        return <Dashboard />;
      case "info_sekolah":
        return <InfoSekolah />;
      case "kelola_informasi":
        return <KelolaInformasi />;
      case "manajemen_akun":
        return <ManajemenAkun />;
      case "izin_guru_saya":
      case "kepsek_izin_guru":
      case "piket_guru_absen":
        return <KehadiranGuru context={active.id} />;
      case "jadwal_mengajar_saya":
      case "piket_jadwal_mengajar":
      case "kepsek_jadwal_mengajar":
      case "wali_jadwal_mengajar":
        return <JadwalMengajar context={active.id} />;
      case "ortu_saran":
      case "kepsek_saran":
        return <KotakSaran context={active.id} />;
      case "bk_pemberitahuan":
      case "ortu_pemberitahuan":
        return <PemberitahuanBK context={active.id} />;
      case "prestasi_siswa":
        return <PrestasiSiswa />;
      case "data_dapodik":
        return <DataDapodik />;
      case "validasi_dapodik":
        return <ValidasiDataSiswa />;
      case "laporan_anak":
        return <LaporanAnak />;
      case "data_siswa":
        return <DataSiswa />;
      case "jadwal_piket":
        return <JadwalPiket />;
      case "data_pelanggaran":
      case "kepsek_pelanggaran":
      case "rekap_kelas_pelanggaran":
        return <DataPelanggaran context={active.id} />;
      case "buku_tamu":
        return <BukuTamu />;
      case "izin_keluar":
      case "satpam_izin":
      case "rekap_kelas_izin":
        return <IzinKeluar context={active.id} />;
      case "database":
        return <PengaturanDatabase />;
      case "rekap_data":
        return <RekapData />;
      default:
        return role === "Orang Tua" ? <InfoSekolah /> : <Dashboard />;
    }
  };

  return (
    <div className="bg-background flex h-[100dvh] overflow-hidden">
      {sidebarOpen ? (
        <div
          className="fixed inset-0 z-20 bg-black/50 md:hidden"
          onClick={() => setSidebarOpen(false)}
        />
      ) : null}

      <aside
        className={`bg-sidebar text-sidebar-foreground fixed inset-y-0 left-0 z-30 flex w-64 flex-col transition-transform duration-300 md:static md:translate-x-0 ${
          sidebarOpen ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        <div className="border-sidebar-border flex items-center gap-3 border-b p-5">
          <img
            src={logoAsset.url}
            alt="Logo SMP Negeri 8 Palangka Raya"
            className="h-9 w-9 object-contain"
          />
          <span className="font-display text-lg font-bold tracking-wide">SIP SMPN 8</span>
        </div>

        <div className="border-sidebar-border bg-sidebar-accent/40 border-b p-4">
          <p className="text-sidebar-foreground/60 text-[10px] font-bold tracking-wider uppercase">
            Pengguna Terhubung
          </p>
          <p className="mt-1 truncate text-sm font-bold">{currentUser?.nama}</p>
          <span className="bg-sidebar-accent mt-2 inline-block rounded-full px-2.5 py-0.5 text-xs font-medium">
            {currentUser?.role}
            {currentUser?.keterangan && currentUser.keterangan !== "-" ? ` · ${currentUser.keterangan}` : ""}
            {currentUser?.role === "Guru Mapel" && kelasWali ? ` · Wali ${kelasWali}` : ""}
          </span>
        </div>

        <nav className="flex-1 overflow-y-auto py-3">
          {menus.map((m) => (
            <button
              key={m.id}
              onClick={() => {
                setActive(m);
                setSidebarOpen(false);
              }}
              className={`hover:bg-sidebar-accent flex w-full items-center gap-3 border-l-4 px-5 py-3 text-sm font-medium transition-colors ${
                active.id === m.id
                  ? "border-sidebar-primary bg-sidebar-accent"
                  : "border-transparent"
              }`}
            >
              <m.icon className="h-4 w-4" />
              {m.text}
            </button>
          ))}
        </nav>

        <div className="border-sidebar-border border-t p-4">
          <Button
            variant="destructive"
            className="w-full"
            onClick={() => {
              logout();
              toast.success("Logout berhasil");
            }}
          >
            <LogOut className="mr-2 h-4 w-4" /> Keluar
          </Button>
        </div>
      </aside>

      <main className="flex h-full min-w-0 flex-1 flex-col overflow-hidden">
        <header className="bg-card border-border flex items-center justify-between gap-3 border-b px-4 py-3">
          <div className="flex items-center gap-3">
            <Button variant="ghost" size="icon" className="md:hidden" onClick={() => setSidebarOpen(true)}>
              <Menu className="h-5 w-5" />
            </Button>
            <h2 className="text-lg font-bold md:text-xl">{active.text}</h2>
          </div>

          <div className="flex items-center gap-2">
            <span
              className={`hidden rounded-full px-2 py-1 text-[11px] font-medium sm:inline ${
                dbStatus === "gagal"
                  ? "bg-destructive/10 text-destructive"
                  : "bg-muted text-muted-foreground"
              }`}
              title="Status sinkronisasi data ke Google Sheets"
            >
              {dbStatus === "memuat"
                ? "Memuat data…"
                : dbStatus === "menyimpan"
                  ? "Menyimpan…"
                  : dbStatus === "gagal"
                    ? "Gagal sinkron"
                    : "Tersimpan"}
            </span>

            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon" className="relative">
                  <Bell className="h-5 w-5" />
                  {notifications.length > 0 ? (
                    <span className="bg-destructive text-destructive-foreground absolute top-1 right-1 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-bold">
                      {notifications.length}
                    </span>
                  ) : null}
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-80 p-0">
                <div className="bg-primary text-primary-foreground flex items-center justify-between px-3 py-2 text-xs font-semibold">
                  <span>Notifikasi Masuk</span>
                  <Badge variant="secondary">{notifications.length} Baru</Badge>
                </div>
                <div className="max-h-64 overflow-y-auto">
                  {notifications.length === 0 ? (
                    <p className="text-muted-foreground p-4 text-center text-sm">
                      Tidak ada notifikasi baru.
                    </p>
                  ) : (
                    notifications.map((n) => (
                      <button
                        key={n.id}
                        onClick={() => dismissNotif(n.id)}
                        className="border-border hover:bg-muted w-full border-b p-3 text-left last:border-b-0"
                      >
                        <p className="text-sm font-semibold">{n.title}</p>
                        <p className="text-muted-foreground text-xs">{n.body}</p>
                      </button>
                    ))
                  )}
                </div>
              </DropdownMenuContent>
            </DropdownMenu>

            <span className="bg-muted text-muted-foreground hidden rounded-lg px-3 py-1.5 text-xs font-medium lg:inline">
              {clock}
            </span>
          </div>
        </header>

        <div className="flex-1 overflow-y-auto p-4 md:p-6">{renderModule()}</div>
      </main>
    </div>
  );
}