import type { Metadata } from "next";
import Link from "next/link";
import { getAllUniversiteler, type UniOzet } from "@/lib/katalog";
import { trBaslikDuzeni } from "@/lib/slug";
import { JsonLd, breadcrumbJsonLd } from "@/lib/seo";
import { CtaSiraForm } from "@/components/cta-sira-form";
import { SiteFooter } from "@/components/site-footer";
import { PagePixelDivider } from "@/components/pixel-decor";
import { UniLogo } from "@/components/uni-logo";

export const metadata: Metadata = {
  title: "Üniversitelerin Taban Puanları ve Sıralamaları 2026",
  description:
    "Devlet ve vakıf üniversitelerinin 2025 yerleştirme taban puanları, başarı sıralamaları ve kontenjanları — üniversite üniversite, 2026 tercihleri için.",
  alternates: { canonical: "/universiteler" },
};

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 default function UniversitelerPage() {
  const hepsi = getAllUniversiteler();
  const devlet = hepsi.filter((u) => u.unitur === "DEVLET");
  const vakif = hepsi.filter(
    (u) => u.unitur != null && ["VAKIF", "VAKIF MYO"].includes(u.unitur),
  );
  const digerUniler = hepsi.filter(
    (u) => !devlet.includes(u) && !vakif.includes(u),
  );

  return (
    <>
      <main className="mx-auto w-full max-w-5xl px-4 py-12 sm:py-16">
        <JsonLd
          data={breadcrumbJsonLd([
            { name: "Ana Sayfa", path: "/" },
            { name: "Üniversiteler", path: "/universiteler" },
          ])}
        />

        <h1 className="font-heading text-3xl font-bold text-slate-900 sm:text-4xl">
          Üniversitelerin Taban Puanları ve Sıralamaları 2026
        </h1>
        <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>
      </main>
      <SiteFooter />
    </>
  );
}
