import Link from "next/link";
import { getAllBolumler, type BolumOzet } from "../katalog-queries";
import { KATEGORILER } from "@/lib/kategoriler";
import { CtaSiraForm } from "@/features/sihirbaz/components/cta-sira-form";
import { PagePixelDivider } from "@/components/pixel-decor";
import { Skeleton } from "@/components/ui/skeleton";

const sayi = (n: number) => n.toLocaleString("tr-TR");

function BolumLinkleri({ bolumler }: { bolumler: BolumOzet[] }) {
  return (
    <ul className="mt-3 grid gap-x-6 gap-y-1.5 sm:grid-cols-2 lg:grid-cols-3">
      {bolumler.map((b) => (
        <li key={b.slug}>
          <Link
            href={`/bolum/${b.slug}`}
            className="group inline-flex items-baseline gap-2 text-sm text-slate-700 hover:text-primary"
          >
            <span className="group-hover:underline">{b.ad}</span>
            <span className="text-xs text-slate-400">
              {sayi(b.programSayisi)}
            </span>
          </Link>
        </li>
      ))}
    </ul>
  );
}

function KategoriGruplari({
  bolumler,
  seviye,
}: {
  bolumler: BolumOzet[];
  seviye: "lisans" | "onlisans";
}) {
  // Tek geçişte kategori index'i — kategori×bölüm çapraz filter yerine.
  // Bir bölüm birden çok kategoride görünebilir; hiçbirinde yoksa "Diğer"e düşer.
  const uyeMap = new Map<string, BolumOzet[]>();
  const diger: BolumOzet[] = [];
  const gecerli = new Set<string>(KATEGORILER);
  for (const b of bolumler) {
    let eslesti = false;
    for (const kategori of b.kategoriler as readonly string[]) {
      if (!gecerli.has(kategori)) continue;
      const grup = uyeMap.get(kategori);
      if (grup) grup.push(b);
      else uyeMap.set(kategori, [b]);
      eslesti = true;
    }
    if (!eslesti) diger.push(b);
  }
  const gruplar = KATEGORILER.filter((k) => uyeMap.has(k)).map((kategori) => ({
    kategori: kategori as string,
    uyeler: uyeMap.get(kategori)!,
  }));
  if (diger.length > 0) gruplar.push({ kategori: "Diğer", uyeler: diger });

  return (
    <>
      {gruplar.map(({ kategori, uyeler }) => (
        <section key={`${seviye}-${kategori}`} className="mt-8">
          <h3 className="font-heading text-lg font-bold text-slate-900">
            {kategori}
            <span className="ml-2 text-xs font-normal text-slate-400">
              {sayi(uyeler.length)} bölüm
            </span>
          </h3>
          <BolumLinkleri bolumler={uyeler} />
        </section>
      ))}
    </>
  );
}

export function BolumKatalogu() {
  const hepsi = getAllBolumler();
  const lisans = hepsi.filter((b) => b.lisans);
  const onlisans = hepsi.filter((b) => b.onlisans && !b.lisans);

  return (
    <>
      <p className="mt-4 max-w-3xl text-sm leading-7 text-slate-600">
        {sayi(hepsi.length)} bölümün 2025 YKS yerleştirme verileri: taban
        puanları, başarı sıralamaları, kontenjanlar ve devlet/vakıf dağılımı.
        Bölüme tıklayınca o bölümü sunan tüm üniversitelerin tablosunu görürsün.
        Veriler YÖK Atlas 2025 yerleştirme sonuçlarına dayanır; 2026 tercihleri
        için rehber niteliğindedir.
      </p>

      <PagePixelDivider seed={29} className="mt-8" />

      <section className="mt-8">
        <h2 className="font-heading text-2xl font-bold text-slate-900">
          Lisans Bölümleri (4 Yıllık)
        </h2>
        <KategoriGruplari bolumler={lisans} seviye="lisans" />
      </section>

      <div className="mt-12">
        <CtaSiraForm />
      </div>

      <section className="mt-12">
        <h2 className="font-heading text-2xl font-bold text-slate-900">
          Önlisans Bölümleri (2 Yıllık — TYT)
        </h2>
        <KategoriGruplari bolumler={onlisans} seviye="onlisans" />
      </section>
    </>
  );
}

export function BolumKataloguSkeleton() {
  return (
    <div>
      <Skeleton className="mt-4 h-5 w-full max-w-3xl" />
      <div className="mt-8 space-y-4">
        <Skeleton className="h-8 w-72" />
        {Array.from({ length: 4 }, (_, i) => (
          <Skeleton key={i} className="h-6 w-full max-w-2xl" />
        ))}
      </div>
    </div>
  );
}
