import { useSip, jenjangOfKelas } from "@/lib/sip-data";
import { Section } from "@/components/sip/Section";
import { Megaphone, ScrollText, CalendarClock, ExternalLink, FileText } from "lucide-react";
import type { Tautan } from "@/lib/sip-data";

function TautanGrid({ items, empty }: { items: Tautan[]; empty: string }) {
  if (items.length === 0) return <p className="text-muted-foreground text-sm">{empty}</p>;
  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {items.map((t) => (
        <a
          key={t.id}
          href={t.url}
          target="_blank"
          rel="noopener noreferrer"
          className="border-border bg-muted/30 hover:border-primary group block overflow-hidden rounded-xl border transition-colors"
        >
          <div className="bg-muted flex h-40 items-center justify-center overflow-hidden">
            {t.gambar ? (
              <img
                src={t.gambar}
                alt={t.judul}
                loading="lazy"
                className="h-full w-full object-cover transition-transform group-hover:scale-105"
              />
            ) : (
              <FileText className="text-primary h-12 w-12" />
            )}
          </div>
          <div className="flex items-center justify-between gap-2 p-3">
            <div>
              <p className="text-sm font-bold">{t.judul}</p>
              <p className="text-muted-foreground text-xs">
                {t.kelas ? `Kelas ${t.kelas}` : "Semua kelas"}
              </p>
            </div>
            <ExternalLink className="text-primary h-4 w-4 shrink-0" />
          </div>
        </a>
      ))}
    </div>
  );
}

export function InfoSekolah() {
  const { currentUser, pengumuman, tautan } = useSip();
  const kelas = currentUser?.keterangan ?? "-";
  const jenjang = jenjangOfKelas(kelas);
  const pengumumanKelas = pengumuman.filter(
    (p) => !p.jenjang || p.jenjang === "Semua" || p.jenjang === jenjang,
  );
  const tertibLinks = tautan.filter(
    (t) => t.jenis === "Tata Tertib" && (!t.kelas || t.kelas === kelas),
  );
  const jadwalLinks = tautan.filter(
    (t) => t.jenis === "Jadwal Pelajaran" && (!t.kelas || t.kelas === kelas),
  );

  return (
    <div className="space-y-6">
      <div className="surface-card p-6">
        <h3 className="text-lg font-bold">Selamat Datang, {currentUser?.nama}</h3>
        <p className="text-muted-foreground mt-2">
          Informasi sekolah untuk ananda{" "}
          <span className="text-primary font-bold">{currentUser?.anak}</span> kelas{" "}
          <span className="text-primary font-bold">{kelas}</span>.
        </p>
      </div>

      <Section
        title="Pengumuman Resmi Sekolah"
        action={<Megaphone className="text-primary h-5 w-5" />}
      >
        {pengumumanKelas.length === 0 ? (
          <p className="text-muted-foreground text-sm">Belum ada pengumuman.</p>
        ) : (
          <div className="space-y-3">
            {pengumumanKelas.map((p) => (
              <article key={p.id} className="border-border bg-muted/40 rounded-lg border p-4">
                <div className="flex items-center gap-2">
                  <p className="text-muted-foreground text-xs font-semibold">{p.tanggal}</p>
                  <span className="bg-primary/10 text-primary rounded-full px-2 py-0.5 text-[11px] font-bold">
                    {p.jenjang && p.jenjang !== "Semua" ? `Kelas ${p.jenjang}` : "Semua Jenjang"}
                  </span>
                </div>
                <h4 className="mt-1 font-bold">{p.judul}</h4>
                <p className="text-muted-foreground mt-1 text-sm whitespace-pre-line">{p.isi}</p>
                {p.lampiran ? (
                  <a
                    href={p.lampiran}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-primary mt-2 inline-block text-sm font-semibold underline"
                  >
                    Lihat / Unduh Lampiran
                  </a>
                ) : null}
              </article>
            ))}
          </div>
        )}
      </Section>

      <Section title="Tata Tertib Sekolah" action={<ScrollText className="text-primary h-5 w-5" />}>
        <p className="text-muted-foreground mb-4 text-sm">
          Klik gambar untuk membuka atau mengunduh dokumen tata tertib.
        </p>
        <TautanGrid items={tertibLinks} empty="Belum ada tautan tata tertib dari admin." />
      </Section>

      <Section
        title={`Jadwal Pelajaran Kelas ${kelas}`}
        action={<CalendarClock className="text-primary h-5 w-5" />}
      >
        <p className="text-muted-foreground mb-4 text-sm">
          Klik gambar untuk membuka atau mengunduh jadwal pelajaran.
        </p>
        <TautanGrid items={jadwalLinks} empty="Belum ada tautan jadwal pelajaran dari admin." />
      </Section>
    </div>
  );
}