"use client";

// Girişsiz yapay zekâ tadımlığı (PRD İP-B): /sonuc'ta, sıra kovası + (varsa)
// sihirbaz alan tercihine uyan TEK örnek tercih satırı — gerçek rapor
// satırının detay bloğuyla (RaporSatirDetayi) birebir aynı formatta.
// İçerik batch üretilmiş havuzdan gelir; bu bileşen LLM'e istek attırmaz.
// SSR "genel" satırı render eder (prop), mount sonrası sihirbaz kategorisi
// varsa /api/tadimlik'ten kategoriye özel satır çekilip yerinde değiştirilir
// (seçim sunucuda kalır). Havuzda içerik yoksa hiç render edilmez.

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { UniLogo } from "@/components/uni-logo";
import { SectionEyebrow } from "@/components/pixel-decor";
import { RaporSatirDetayi } from "./rapor-listesi";
import {
  ProgramSiraGecmisi,
  ProgramTabanTrendi,
  programEtkinSira,
  raporSiraSerisi,
} from "@/components/program-liste-verileri";
import { useGorunumOlayi } from "@/components/use-gorunum-olayi";
import { olay, siraKovasi } from "@/lib/analitik";
import { dilimdenRisk, riskHesapla } from "@/lib/risk";
import { turkishSlugify } from "@/lib/slug";
import { PROFIL_DEGISTI_EVENT, sonucHref } from "@/features/sihirbaz/sihirbaz-sabitler";
import { tercihProfiliOku } from "@/features/sihirbaz/sihirbaz-profil";
import type { TadimlikSatir } from "@/lib/tadimlik-havuzu";

const GENEL = "genel";

export function TadimlikSatiri({
  sira,
  tur,
  ilk,
}: {
  sira: number;
  tur: string;
  /** SSR'da seçilmiş "genel" satır; havuz boşsa null. */
  ilk: TadimlikSatir | null;
}) {
  const [satir, setSatir] = useState<TadimlikSatir | null>(ilk);
  const yuklenenSlug = useRef(GENEL);

  // Sihirbaz kategorisi yalnızca localStorage'da yaşar; mount'ta ve profil
  // değiştikçe okunur, kategoriye özel satır sunucudan çekilir.
  useEffect(() => {
    const guncelle = () => {
      const profil = tercihProfiliOku();
      const kategori = profil?.secimler.kategoriler[0];
      const slug = kategori ? turkishSlugify(kategori) : GENEL;
      if (slug === yuklenenSlug.current) return;
      yuklenenSlug.current = slug;
      if (slug === GENEL) {
        setSatir(ilk);
        return;
      }
      fetch(
        `/api/tadimlik?sira=${sira}&tur=${encodeURIComponent(tur)}&kategori=${encodeURIComponent(slug)}`,
      )
        .then((yanit) => (yanit.ok ? yanit.json() : null))
        .then((veri: { tadimlik: TadimlikSatir | null } | null) => {
          // Yarış koruması: bu arada başka kategori yüklendiyse dokunma
          if (yuklenenSlug.current !== slug) return;
          if (veri?.tadimlik) setSatir(veri.tadimlik);
        })
        .catch(() => {});
    };
    guncelle();
    window.addEventListener(PROFIL_DEGISTI_EVENT, guncelle);
    return () => window.removeEventListener(PROFIL_DEGISTI_EVENT, guncelle);
  }, [sira, tur, ilk]);

  const gorunumRef = useGorunumOlayi<HTMLElement>("tadimlik_goruntulendi", {
    kova: siraKovasi(sira),
  });

  if (!satir) return null;

  const p = satir.program;
  const risk = riskHesapla(p.efektifSira, sira) ?? dilimdenRisk(satir.dilim);
  const seri = raporSiraSerisi(p.siraGecmisi);
  const taban = p.efektifSira ?? programEtkinSira(seri);
  const devlet = p.unitur === "DEVLET";
  const girisUrl = `/giris?callback=${encodeURIComponent(sonucHref({ sira, tur }))}`;

  return (
    <section ref={gorunumRef} className="mt-16 min-w-0">
      <div className="flex flex-col items-center text-center">
        <SectionEyebrow>Yapay zekâdan örnek satır</SectionEyebrow>
        <h2 className="mt-4 font-heading text-2xl font-bold sm:text-3xl">
          Yapay zekâ listendeki her satırı böyle anlatır
        </h2>
        <p className="mx-auto mt-3 max-w-xl text-slate-600">
          Sıralamana uygun bir programın gerekçesi, yerleşme riski ve taban
          trendi — 24 tercihlik listenin her satırı bu formatta kurulur.
        </p>
      </div>

      <div className="mt-6 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:p-6">
        <div className="flex min-w-0 flex-wrap items-center gap-2.5">
          <UniLogo ad={p.universite} boy="sm" />
          <span className="min-w-0 flex-1">
            <span className="block truncate text-sm font-semibold">
              {p.isim}
            </span>
            <span className="mt-0.5 flex items-center gap-1.5 text-xs text-slate-500">
              {p.unitur ? (
                <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>
              ) : null}
              <span className="truncate">
                {p.universite}
                {p.il ? ` · ${p.il.toLocaleLowerCase("tr-TR")}` : ""}
              </span>
            </span>
          </span>
          <span className="hidden text-right text-xs md:inline-flex">
            <ProgramSiraGecmisi program={seri} />
          </span>
          <span className="inline-flex items-center gap-1 text-xs tabular-nums text-slate-500">
            <ProgramTabanTrendi program={seri} />
            {taban != null ? `~${taban.toLocaleString("tr-TR")}.` : "—"}
          </span>
        </div>

        <div className="mt-4 rounded-lg bg-slate-50/60 px-4 py-4">
          <RaporSatirDetayi
            dilim={satir.dilim}
            risk={risk}
            unitur={p.unitur}
            gerekce={satir.gerekce}
            riskNotu={satir.riskNotu}
            trendOzeti={satir.trendOzeti}
          />
        </div>

        <div className="mt-5 flex flex-col items-start gap-3 border-t border-slate-100 pt-4 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-sm text-slate-600">
            Bu, 24 satırlık Yapay Zeka listenden yalnızca bir örnek.
            <span className="block text-xs text-slate-500">
              Kredi kartı gerekmez · Google ya da e-posta ile 30 saniyede
            </span>
          </p>
          <Button
            asChild
            className="h-11 w-full shrink-0 cursor-pointer bg-orange-500 text-white transition-[background-color,transform] duration-200 active:scale-[0.97] hover:bg-orange-600 sm:w-auto"
          >
            <Link
              href={girisUrl}
              onClick={() => olay("giris_cta_tiklandi", { kaynak: "tadimlik" })}
            >
              24 satırın tamamı için giriş yap — 5 deneme kredin hazır
              <ArrowRight className="size-4" aria-hidden />
            </Link>
          </Button>
        </div>
      </div>
    </section>
  );
}
