"use client";

// Sonuç sayfasının Yapay Zeka'sız ham listesi: yalnızca başarı sıralamasıyla
// yokatlas'tan gelen programlar, dilim sekmeleri halinde ve yakından uzağa
// sayfalanır ("daha fazla göster" /api/programlar'dan akıtır). Her satırın "+"
// butonu programı manuel 24'lük listeye ekler (bkz. manuel-liste/store).

import { useMemo, useState } from "react";
import Link from "next/link";
import { motion, useReducedMotion } from "motion/react";
import {
  ChevronDown,
  Rocket,
  Scale,
  ShieldCheck,
} from "lucide-react";
import type {
  DilimKey,
  ProgramListeSatiri,
  PuanTuruKey,
  RankResultsListe,
} from "@/types/yokatlas";
import { riskHesapla, type RiskSeviyesi } from "@/lib/risk";
import { bolumSayfaSlug, uniSayfaSlug } from "@/lib/slug";
import {
  ProgramSiraGecmisi,
  ProgramTabanTrendi,
  programEtkinSira,
} from "@/components/program-liste-verileri";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ProgramEkleButonu } from "@/features/liste/components/program-ekle-butonu";
import { preloadTercihHaritasi } from "@/features/liste/components/tercih-haritasi-lazy";
import { ProgramNetleriButonu } from "@/features/katalog/components/program-netleri";
import { UniLogo } from "@/components/uni-logo";

const DILIMLER: {
  key: DilimKey;
  etiket: string;
  icon: typeof Rocket;
  renk: string;
  // Aktif hap koyu (slate-900) — ikon tonu okunurluk için bir kademe açılır
  renkAktif: string;
}[] = [
  {
    key: "hayal",
    etiket: "Hayal",
    icon: Rocket,
    renk: "text-red-500",
    renkAktif: "text-red-400",
  },
  {
    key: "dengeli",
    etiket: "Dengeli",
    icon: Scale,
    renk: "text-amber-500",
    renkAktif: "text-amber-400",
  },
  {
    key: "garanti",
    etiket: "Garanti",
    icon: ShieldCheck,
    renk: "text-emerald-600",
    renkAktif: "text-emerald-400",
  },
];

const RISK_NOKTA: Record<RiskSeviyesi, string> = {
  guvenli: "bg-emerald-500",
  "az-riskli": "bg-amber-500",
  riskli: "bg-red-500",
};

const BOS_EKSTRA: Record<DilimKey, ProgramListeSatiri[]> = {
  hayal: [],
  dengeli: [],
  garanti: [],
};

// Dengeli ve hayal dilimleri tamamen boşsa (sıralama çok gerideyse) boş bir
// "dengeli" sekmesi yerine dolu olan "garanti" ile açılır.
function varsayilanDilim(sonuclar: RankResultsListe): DilimKey {
  return sonuclar.toplam.dengeli === 0 && sonuclar.toplam.hayal === 0
    ? "garanti"
    : "dengeli";
}

export function ProgramTablosu({
  sonuclar,
  adaySira,
  tur,
  filtreIller,
  filtreTip,
}: {
  sonuclar: RankResultsListe;
  adaySira: number;
  tur: PuanTuruKey;
  filtreIller?: string[];
  filtreTip?: "devlet" | "vakif";
}) {
  const [aktifDilim, setAktifDilim] = useState<DilimKey>(() =>
    varsayilanDilim(sonuclar),
  );
  const hareketAzalt = useReducedMotion();
  // Sihirbaz seçimlerinden profil çerezine yazılıp SSR'da prop olarak gelen
  // filtreler — sayfalama isteklerinde ve veri anahtarında kullanılır.
  const iller = useMemo(() => filtreIller ?? [], [filtreIller]);

  // "Daha fazla göster" ile sayfalanan devam satırları. Sıra/tür/filtre
  // değişince (puan türü seçici aynı bileşeni yeniden render eder, remount
  // etmez) render sırasında sıfırlanır ki eski kümenin satırları karışmasın.
  const [ekstra, setEkstra] = useState(BOS_EKSTRA);
  const [yuklenen, setYuklenen] = useState<DilimKey | null>(null);
  const veriAnahtari = `${adaySira}-${tur}-${iller.join(",")}-${filtreTip ?? ""}`;
  const [oncekiAnahtar, setOncekiAnahtar] = useState(veriAnahtari);
  if (veriAnahtari !== oncekiAnahtar) {
    setOncekiAnahtar(veriAnahtari);
    setEkstra(BOS_EKSTRA);
    // Yeni sıra/türde dengeli+hayal boş kaldıysa boş sekmede bırakma
    if (varsayilanDilim(sonuclar) === "garanti" && aktifDilim !== "garanti") {
      setAktifDilim("garanti");
    }
  }

  // Görünmeyen sekmeler dahil 3 dilimin spread'i her render'da tekrarlanmasın
  const tumSatirlar = useMemo(() => {
    const r = {} as Record<DilimKey, ProgramListeSatiri[]>;
    for (const d of DILIMLER) r[d.key] = [...sonuclar[d.key], ...ekstra[d.key]];
    return r;
  }, [sonuclar, ekstra]);

  async function dahaFazlaYukle(dilim: DilimKey, offset: number) {
    setYuklenen(dilim);
    try {
      const q = new URLSearchParams({
        sira: String(adaySira),
        tur,
        dilim,
        offset: String(offset),
      });
      for (const il of iller) q.append("il", il);
      if (filtreTip) q.set("tip", filtreTip);
      const res = await fetch(`/api/programlar?${q}`);
      if (!res.ok) return;
      const veri = (await res.json()) as { programlar: ProgramListeSatiri[] };
      // Aynı sayfanın iki kez istenmesine karşı id bazında tekilleştir
      setEkstra((mevcut) => {
        const eldekiler = new Set(
          [...sonuclar[dilim], ...mevcut[dilim]].map((p) => p.id),
        );
        return {
          ...mevcut,
          [dilim]: [
            ...mevcut[dilim],
            ...veri.programlar.filter((p) => !eldekiler.has(p.id)),
          ],
        };
      });
    } catch {
    } finally {
      setYuklenen(null);
    }
  }

  return (
    <section
      className="mt-16"
      aria-label="Sıralamanla açılan programlar"
      // Tabloya niyet gösteren kullanıcı büyük ihtimalle ＋ ile harita
      // çizdirecek — chunk'ı görünmeden ısıt (bundle-preload)
      onPointerEnter={preloadTercihHaritasi}
      onFocusCapture={preloadTercihHaritasi}
    >
      <Tabs
        value={aktifDilim}
        onValueChange={(v) => setAktifDilim(v as DilimKey)}
      >
        {/* Dilim sekmeleri tablonun hemen üstünde; puan türü burada değil,
            navbar'daki sıralama rozetinden değiştirilir. Aktif hap, nav'daki
            "Giriş yap" butonuyla aynı dilde (koyu, rounded-full) ve layoutId
            ile sekmeler arasında kayarak taşınır. */}
        <TabsList variant="pill" className="self-center">
          {DILIMLER.map((d) => {
            const aktif = aktifDilim === d.key;
            return (
              <TabsTrigger
                key={d.key}
                value={d.key}
                className="relative cursor-pointer px-3 py-1.5 transition-colors duration-200 hover:bg-slate-100 sm:px-4 sm:py-2"
              >
                {aktif ? (
                  <motion.span
                    layoutId="dilim-aktif-hap"
                    className="absolute inset-0 rounded-full bg-slate-900"
                    transition={
                      hareketAzalt
                        ? { duration: 0 }
                        : { type: "spring", duration: 0.4, bounce: 0.15 }
                    }
                    aria-hidden
                  />
                ) : null}
                <span className="relative z-10 inline-flex items-center gap-1.5">
                  <d.icon
                    className={`size-3.5 ${aktif ? d.renkAktif : d.renk}`}
                    aria-hidden
                  />
                  {d.etiket}
                  <span className="text-xs tabular-nums text-slate-400">
                    {sonuclar.toplam[d.key].toLocaleString("tr-TR")}
                  </span>
                </span>
              </TabsTrigger>
            );
          })}
        </TabsList>

        {DILIMLER.map((d) => {
          const satirlar = tumSatirlar[d.key];
          const toplam = sonuclar.toplam[d.key];
          return (
            <TabsContent key={d.key} value={d.key}>
              <div className="mt-3 overflow-hidden rounded-2xl border border-slate-200 bg-white">
                {satirlar.length === 0 ? (
                  <p className="px-5 py-8 text-center text-sm text-slate-500">
                    Bu dilimde filtrene uyan program bulunamadı.
                  </p>
                ) : (
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead className="w-8" />
                        <TableHead>Program</TableHead>
                        <TableHead className="hidden text-right md:table-cell">
                          Son 5 yıl
                        </TableHead>
                        <TableHead className="hidden text-right sm:table-cell">
                          Kontenjan
                        </TableHead>
                        <TableHead className="text-right">Taban sıra</TableHead>
                        <TableHead className="w-24 text-right">
                          <span className="sr-only">Netler ve listeye ekle</span>
                        </TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {satirlar.map((p) => (
                        <ProgramSatiri
                          key={p.id}
                          program={p}
                          adaySira={adaySira}
                          tur={tur}
                        />
                      ))}
                    </TableBody>
                  </Table>
                )}
              </div>
              {satirlar.length < toplam ? (
                <div className="mt-3 flex flex-col items-center gap-1">
                  <button
                    type="button"
                    disabled={yuklenen === d.key}
                    onClick={() => dahaFazlaYukle(d.key, satirlar.length)}
                    className="inline-flex cursor-pointer items-center gap-1.5 rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors duration-150 hover:border-slate-300 hover:bg-slate-50 disabled:cursor-default disabled:opacity-60"
                  >
                    <ChevronDown className="size-4" aria-hidden />
                    {yuklenen === d.key ? "Yükleniyor…" : "Daha fazla göster"}
                  </button>
                  <span className="text-xs tabular-nums text-slate-400">
                    {satirlar.length.toLocaleString("tr-TR")} /{" "}
                    {toplam.toLocaleString("tr-TR")} program
                  </span>
                </div>
              ) : null}
            </TabsContent>
          );
        })}
      </Tabs>
    </section>
  );
}

function ProgramSatiri({
  program: p,
  adaySira,
  tur,
}: {
  program: ProgramListeSatiri;
  adaySira: number;
  tur: PuanTuruKey;
}) {
  const taban = programEtkinSira(p);
  const risk = riskHesapla(taban, adaySira);
  const devlet = p.unitur === "DEVLET";

  return (
    <TableRow className="kt-cv-satir">
      <TableCell className="pl-4 pr-0">
        {risk ? (
          <span
            className={`block size-2.5 rounded-full ${RISK_NOKTA[risk]}`}
            aria-hidden
          />
        ) : null}
      </TableCell>
      <TableCell className="max-w-0 w-full">
        <span className="flex min-w-0 items-center gap-2.5">
          <UniLogo ad={p.universite} boy="sm" />
          <span className="min-w-0 flex-1">
            <Link
              href={`/bolum/${bolumSayfaSlug(p.isim)}`}
              className="block truncate text-sm font-semibold hover:text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
              title={`${p.isim} bölüm sayfası`}
              onClick={(e) => e.stopPropagation()}
            >
              {p.isim}
            </Link>
            <span className="mt-0.5 flex items-center gap-1.5 text-xs text-slate-500">
              <span
                className={`shrink-0 rounded px-1 py-px text-[10px] font-medium leading-4 ${
                  devlet
                    ? "bg-slate-100 text-slate-600"
                    : "bg-violet-50 text-violet-600"
                }`}
              >
                {devlet ? "Devlet" : "Vakıf"}
              </span>
              <span className="truncate">
                <Link
                  href={`/universite/${uniSayfaSlug(p.universite)}`}
                  className="hover:text-primary hover:underline"
                  title={`${p.universite} taban puanları sayfası`}
                  onClick={(e) => e.stopPropagation()}
                >
                  {p.universite}
                </Link>
                {p.il ? ` · ${p.il.toLocaleLowerCase("tr-TR")}` : ""}
              </span>
              {p.sure ? (
                <span className="shrink-0 text-slate-400">· {p.sure} yıl</span>
              ) : null}
            </span>
          </span>
        </span>
      </TableCell>
      <TableCell className="hidden text-right text-xs md:table-cell">
        <ProgramSiraGecmisi program={p} />
      </TableCell>
      <TableCell
        className="hidden text-right text-xs tabular-nums text-slate-500 sm:table-cell"
        title={
          p.kontenjan2025 != null && p.yerlesen2025 != null
            ? `${p.kontenjan2025} kontenjan, ${p.yerlesen2025} yerleşen`
            : undefined
        }
      >
        {p.kontenjan2025 != null ? (
          <span className="inline-flex items-center gap-1.5">
            {p.yerlesen2025 != null && p.yerlesen2025 < p.kontenjan2025 ? (
              <span className="rounded bg-amber-50 px-1 py-px text-[10px] font-medium leading-4 text-amber-600">
                boş kaldı
              </span>
            ) : null}
            {p.kontenjan2025.toLocaleString("tr-TR")} kişi
          </span>
        ) : (
          "—"
        )}
      </TableCell>
      <TableCell className="text-right text-xs tabular-nums text-slate-500">
        <span className="inline-flex items-center gap-1">
          <ProgramTabanTrendi program={p} />
          {taban != null ? `~${taban.toLocaleString("tr-TR")}.` : "—"}
        </span>
      </TableCell>
      <TableCell className="pr-4 text-right">
        <span className="inline-flex items-center gap-1.5">
          <ProgramNetleriButonu
            programId={p.id}
            isim={p.isim}
            universite={p.universite}
            className="size-8 min-h-8 min-w-8"
          />
          <ProgramEkleButonu
            program={p}
            kaynak="sonuc"
            adaySira={adaySira}
            adayTur={tur}
            className="size-8 min-h-8 min-w-8"
          />
        </span>
      </TableCell>
    </TableRow>
  );
}
