import Link from "next/link";
import { getAllUniversiteler, type UniOzet } from "../katalog-queries";
import { trBaslikDuzeni } from "@/lib/slug";
import { CtaSiraForm } from "@/features/sihirbaz/components/cta-sira-form";
import { PagePixelDivider } from "@/components/pixel-decor";
import { UniLogo } from "@/components/uni-logo";
import { Skeleton } from "@/components/ui/skeleton";

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

function UniLinkleri({ uniler }: { uniler: UniOzet[] }) {
  return (
    <ul className="mt-4 grid gap-x-6 gap-y-2 sm:grid-cols-2">
      {uniler.map((u) => (
        <li key={u.slug}>
          <Link
            href={`/universite/${u.slug}`}
            className="group flex items-center gap-3 text-sm text-slate-700 hover:text-primary"
          >
            <UniLogo slug={u.slug} ad={u.ad} boy="sm" />
            <span className="min-w-0">
              <span className="block truncate group-hover:underline">
                {u.ad}
              </span>
              <span className="block text-xs text-slate-400">
                {u.il ? `${trBaslikDuzeni(u.il)} · ` : ""}
                {sayi(u.programSayisi)} program
              </span>
            </span>
          </Link>
        </li>
      ))}
    </ul>
  );
}

export function UniversiteKatalogu() {
  const hepsi = getAllUniversiteler();
  // Tek geçişte üç grup — filter×3 + includes'lı O(n²) tarama yerine
  const devlet: UniOzet[] = [];
  const vakif: UniOzet[] = [];
  const digerUniler: UniOzet[] = [];
  for (const u of hepsi) {
    if (u.unitur === "DEVLET") devlet.push(u);
    else if (u.unitur === "VAKIF" || u.unitur === "VAKIF MYO") vakif.push(u);
    else digerUniler.push(u);
  }

  return (
    <>
      <p className="mt-4 max-w-3xl text-sm leading-7 text-slate-600">
        {sayi(hepsi.length)} üniversitenin 2025 YKS yerleştirme verileri.
        Üniversiteye tıklayınca tüm programlarının taban puanlarını, başarı
        sıralamalarını ve kontenjanlarını fakülte fakülte 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={63} className="mt-8" />

      <section className="mt-8">
        <h2 className="font-heading text-2xl font-bold text-slate-900">
          Devlet Üniversiteleri
          <span className="ml-2 text-sm font-normal text-slate-400">
            {sayi(devlet.length)}
          </span>
        </h2>
        <UniLinkleri uniler={devlet} />
      </section>

      <section className="mt-10">
        <h2 className="font-heading text-2xl font-bold text-slate-900">
          Vakıf Üniversiteleri
          <span className="ml-2 text-sm font-normal text-slate-400">
            {sayi(vakif.length)}
          </span>
        </h2>
        <UniLinkleri uniler={vakif} />
      </section>

      {digerUniler.length > 0 ? (
        <section className="mt-10">
          <h2 className="font-heading text-2xl font-bold text-slate-900">
            KKTC ve Yurt Dışı
            <span className="ml-2 text-sm font-normal text-slate-400">
              {sayi(digerUniler.length)}
            </span>
          </h2>
          <UniLinkleri uniler={digerUniler} />
        </section>
      ) : null}

      <div className="mt-12">
        <CtaSiraForm />
      </div>
    </>
  );
}

export function UniversiteKataloguSkeleton() {
  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-9 w-full max-w-2xl" />
        ))}
      </div>
    </div>
  );
}
