import { Section, DataTable } from "@/components/sip/Section";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Printer } from "lucide-react";
import { useSip } from "@/lib/sip-data";

export function RekapData() {
  const { pelanggaran, tamu, izin, siswa, izinGuru, currentUser } = useSip();
  const bolehLihatIzinGuru =
    currentUser?.role === "Admin" || currentUser?.role === "Kepala Sekolah";

  return (
    <div className="space-y-6">
      <div className="surface-card flex flex-col items-start justify-between gap-3 p-5 md:flex-row md:items-center">
        <div>
          <h3 className="text-lg font-bold">Rekap & Laporan</h3>
          <p className="text-muted-foreground text-sm">
            Rekapitulasi seluruh aktivitas piket SMP Negeri 8 Palangka Raya.
          </p>
        </div>
        <Button variant="secondary" onClick={() => window.print()}>
          <Printer className="mr-2 h-4 w-4" /> Cetak / Simpan PDF
        </Button>
      </div>

      <Tabs defaultValue="pelanggaran">
        <TabsList>
          <TabsTrigger value="pelanggaran">Pelanggaran ({pelanggaran.length})</TabsTrigger>
          <TabsTrigger value="tamu">Buku Tamu ({tamu.length})</TabsTrigger>
          <TabsTrigger value="izin">Izin Keluar ({izin.length})</TabsTrigger>
          <TabsTrigger value="siswa">Siswa ({siswa.length})</TabsTrigger>
          {bolehLihatIzinGuru ? (
            <TabsTrigger value="izin_guru">Izin Guru ({izinGuru.length})</TabsTrigger>
          ) : null}
        </TabsList>

        <TabsContent value="pelanggaran" className="mt-4">
          <Section title="Rekap Pelanggaran Siswa">
            <DataTable
              head={["Tanggal", "Waktu", "Nama", "Kelas", "Jenis", "Tindakan"]}
              rows={pelanggaran.map((p) => [p.tanggal, p.waktu, p.nama, p.kelas, p.jenis, p.tindakan])}
            />
          </Section>
        </TabsContent>

        <TabsContent value="tamu" className="mt-4">
          <Section title="Rekap Buku Tamu">
            <DataTable
              head={["Tanggal", "Waktu", "Nama", "Instansi", "Keperluan", "Dituju"]}
              rows={tamu.map((t) => [t.tanggal, t.waktu, t.nama, t.instansi, t.tujuan, t.dituju])}
            />
          </Section>
        </TabsContent>

        <TabsContent value="izin" className="mt-4">
          <Section title="Rekap Izin Keluar">
            <DataTable
              head={["Tanggal", "Nama", "Kelas", "Alasan", "Keluar", "Kembali", "Status"]}
              rows={izin.map((i) => [
                i.tanggal,
                i.nama,
                i.kelas,
                i.alasan,
                i.waktu_keluar,
                i.waktu_kembali,
                i.status,
              ])}
            />
          </Section>
        </TabsContent>

        <TabsContent value="siswa" className="mt-4">
          <Section title="Rekap Data Siswa">
            <DataTable
              head={["NIS", "Nama", "Kelas", "L/P"]}
              rows={siswa.map((s) => [s.nis, s.nama, s.kelas, s.jk])}
            />
          </Section>
        </TabsContent>
        {bolehLihatIzinGuru ? (
          <TabsContent value="izin_guru" className="mt-4">
            <Section title="Rekap Izin / Ketidakhadiran Guru Mapel">
              <DataTable
                head={["Tanggal", "Nama Guru", "Mata Pelajaran", "Jenis", "Alasan", "Status"]}
                empty="Belum ada pengajuan izin guru."
                rows={izinGuru.map((g) => [
                  g.tanggal,
                  g.guru,
                  g.mapel,
                  g.jenis,
                  g.alasan,
                  g.status,
                ])}
              />
            </Section>
          </TabsContent>
        ) : null}
      </Tabs>
    </div>
  );
}