import { Section, DataTable } from "@/components/sip/Section";
import { Badge } from "@/components/ui/badge";
import { TriangleAlert, Paperclip, Image as ImageIcon } from "lucide-react";
import { useSip } from "@/lib/sip-data";

/** Semester berjalan: Januari–Juni (Genap) atau Juli–Desember (Ganjil). */
function semesterRange(ref = new Date()) {
  const y = ref.getFullYear();
  const ganjil = ref.getMonth() >= 6;
  return {
    label: ganjil ? `Ganjil ${y}/${y + 1}` : `Genap ${y - 1}/${y}`,
    start: ganjil ? `${y}-07-01` : `${y}-01-01`,
    end: ganjil ? `${y}-12-31` : `${y}-06-30`,
  };
}

function riskLevel(count: number) {
  if (count >= 10) return { cls: "bg-risk-high text-risk-high-foreground", label: "Kritis (≥10 pelanggaran)" };
  if (count >= 6) return { cls: "bg-risk-mid text-risk-mid-foreground", label: "Berat (≥6 pelanggaran)" };
  if (count >= 3) return { cls: "bg-risk-low text-risk-low-foreground", label: "Perhatian (≥3 pelanggaran)" };
  return { cls: "", label: "Aman" };
}

export function LaporanAnak() {
  const { currentUser, pelanggaran, izin, prestasi } = useSip();
  const anak = currentUser?.anak ?? "";
  const kelas = currentUser?.keterangan ?? "";
  const semester = semesterRange();

  const dataPelanggaran = pelanggaran.filter((p) => p.nama === anak && p.kelas === kelas);
  const dataIzin = izin.filter((i) => i.nama === anak && i.kelas === kelas);
  const dataPrestasi = [...prestasi]
    .filter((p) => p.nama === anak && p.kelas === kelas)
    .sort((a, b) => (a.tanggal < b.tanggal ? 1 : -1));

  const jumlahSemester = dataPelanggaran.filter(
    (p) => p.tanggal >= semester.start && p.tanggal <= semester.end,
  ).length;
  const risk = riskLevel(jumlahSemester);

  return (
    <div className="space-y-6">
      <p className="text-muted-foreground text-sm">
        Laporan untuk ananda <span className="text-foreground font-semibold">{anak || "-"}</span> ·
        kelas <span className="text-foreground font-semibold">{kelas || "-"}</span>
      </p>

      {risk.cls ? (
        <div className={`flex items-start gap-3 rounded-xl p-4 ${risk.cls}`}>
          <TriangleAlert className="mt-0.5 h-5 w-5 shrink-0" />
          <div className="text-sm">
            <p className="font-bold">Peringatan Pelanggaran Berulang — {risk.label}</p>
            <p className="opacity-90">
              Ananda tercatat melakukan <strong>{jumlahSemester}x</strong> pelanggaran pada semester{" "}
              {semester.label}. Mohon kerja sama orang tua/wali untuk pembinaan bersama Guru BK.
            </p>
          </div>
        </div>
      ) : (
        <div className="surface-card text-muted-foreground p-4 text-sm">
          Akumulasi pelanggaran semester {semester.label}:{" "}
          <span className="text-foreground font-semibold">{jumlahSemester}x</span> — status aman.
        </div>
      )}

      <Section title="Laporan Pelanggaran (dari Petugas Piket & Guru BK)">
        <DataTable
          head={["Tanggal", "Waktu", "Jenis Pelanggaran", "Tindakan", "Status"]}
          empty="Tidak ada catatan pelanggaran."
          rows={dataPelanggaran.map((p) => [
            p.tanggal,
            p.waktu,
            risk.cls ? (
              <span className={`rounded-md px-2 py-1 font-semibold ${risk.cls}`}>{p.jenis}</span>
            ) : (
              p.jenis
            ),
            p.tindakan,
            risk.cls ? (
              <span className={`rounded-md px-2 py-1 text-xs font-semibold ${risk.cls}`}>
                {risk.label}
              </span>
            ) : (
              <span className="text-muted-foreground text-xs">Aman</span>
            ),
          ])}
        />
      </Section>

      <Section title="Laporan Izin Keluar">
        <DataTable
          head={["Tanggal", "Keluar", "Kembali", "Alasan", "Status"]}
          empty="Tidak ada catatan izin keluar."
          rows={dataIzin.map((i) => [
            i.tanggal,
            i.waktu_keluar,
            i.waktu_kembali,
            i.alasan,
            <Badge variant="secondary">{i.status}</Badge>,
          ])}
        />
      </Section>

      <Section title="Prestasi Ananda (dari Waka Kesiswaan)">
        <DataTable
          head={["Tanggal", "Jenis", "Kegiatan", "Tingkat", "Prestasi", "Penyelenggara", "Bukti"]}
          empty="Belum ada catatan prestasi."
          rows={dataPrestasi.map((p) => [
            <span className="text-muted-foreground whitespace-nowrap">{p.tanggal}</span>,
            <Badge variant="outline">{p.jenis}</Badge>,
            p.kegiatan,
            <Badge variant="secondary">{p.tingkat}</Badge>,
            <span className="font-semibold">{p.peringkat}</span>,
            p.penyelenggara,
            <div className="flex flex-wrap gap-2">
              {p.sertifikatUrl ? (
                <a
                  href={p.sertifikatUrl}
                  target="_blank"
                  rel="noreferrer"
                  className="text-primary inline-flex items-center gap-1 text-xs font-medium underline"
                >
                  <Paperclip className="h-3.5 w-3.5" /> Sertifikat
                </a>
              ) : null}
              {p.fotoUrl ? (
                <a
                  href={p.fotoUrl}
                  target="_blank"
                  rel="noreferrer"
                  className="text-primary inline-flex items-center gap-1 text-xs font-medium underline"
                >
                  <ImageIcon className="h-3.5 w-3.5" /> Foto
                </a>
              ) : null}
              {!p.sertifikatUrl && !p.fotoUrl ? (
                <span className="text-muted-foreground text-xs">-</span>
              ) : null}
            </div>,
          ])}
        />
      </Section>
    </div>
  );
}