"use client";

import { useMemo, useEffect, useRef, useState } from "react";
import Link from "next/link";
import { FileText, Lock, RefreshCcw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { SohbetPopup } from "./sohbet-popup";
import { RaporListesi } from "@/components/rapor-listesi";
import { TercihHaritasi, type HaritaPin } from "@/components/tercih-haritasi";
import type { RaporSonuc } from "@/lib/ai/rapor";
import type { RaporParams } from "@/lib/rapor-havuzu";
import { ACIK_SATIR } from "@/lib/rapor-maske";
import { ilKonum, uniAdiNormalize, uniKonum } from "@/lib/harita";
import { dilimdenRisk, riskHesapla, type RiskSeviyesi } from "@/lib/risk";

const MAX_REVIZYON = 2;

export type MevcutRapor = {
  rapor: RaporSonuc;
  params: RaporParams;
  revisionCount: number;
};

/** Panelin liste dışındaki geçici durumları (liste, rapor varlığından türer). */
export type PanelDurum = "bos" | "uretiliyor" | "kredi-yetersiz";

const RISK_AGIRLIK: Record<RiskSeviyesi, number> = {
  guvenli: 0,
  "az-riskli": 1,
  riskli: 2,
};

/**
 * Rapordan harita pinleri türetir. Açık satırlar üniversite bazında gruplanır
 * (kampüs konumunda, adıyla); kilitli satırlar il başına tek adsız "?" pinine
 * toplanır — maskeli veride üniversite adı zaten client'a inmediği için
 * harita paywall'ı delemez. Haritada karşılığı olmayan tercihler sayılır.
 */
function pinleriTuret(
  rapor: RaporSonuc,
  adaySira: number,
  kilitliBaslangic: number,
): { pinler: HaritaPin[]; haritaDisi: number } {
  const gruplar = new Map<string, HaritaPin>();
  let haritaDisi = 0;

  rapor.tercihler.forEach((t, i) => {
    const p = rapor.programlar[t.programId];
    if (!p) return;
    const risk = riskHesapla(p.efektifSira, adaySira) ?? dilimdenRisk(t.dilim);
    const kilitli = i >= kilitliBaslangic;

    if (kilitli) {
      const konum = ilKonum(p.il);
      if (!konum) {
        haritaDisi += 1;
        return;
      }
      const key = `kilit|${p.il}`;
      const mevcut = gruplar.get(key);
      if (mevcut) {
        mevcut.tercihSiralari.push(t.sira);
        if (RISK_AGIRLIK[risk] > RISK_AGIRLIK[mevcut.risk]) mevcut.risk = risk;
      } else {
        // Açık pinlerle üst üste binmesin diye il merkezinin hafif altına
        gruplar.set(key, {
          id: key,
          universite: "",
          il: p.il,
          x: konum.x,
          y: konum.y + 9,
          tercihSiralari: [t.sira],
          risk,
          kilitli: true,
        });
      }
      return;
    }

    const konum = uniKonum(p.universite, p.il);
    if (!konum) {
      haritaDisi += 1;
      return;
    }
    const key = `${uniAdiNormalize(p.universite)}|${p.il ?? ""}`;
    const mevcut = gruplar.get(key);
    if (mevcut) {
      mevcut.tercihSiralari.push(t.sira);
      if (RISK_AGIRLIK[risk] > RISK_AGIRLIK[mevcut.risk]) mevcut.risk = risk;
    } else {
      gruplar.set(key, {
        id: key,
        universite: p.universite,
        il: p.il,
        x: konum.x,
        y: konum.y,
        tercihSiralari: [t.sira],
        risk,
      });
    }
  });

  return { pinler: [...gruplar.values()], haritaDisi };
}

const URETIM_MESAJLARI = [
  "Sıralamana uygun programlar taranıyor…",
  "Gerçek YÖK Atlas verisiyle dengeli liste kuruluyor…",
  "Her tercih için risk ve trend analizi yazılıyor…",
  "Son rötuşlar yapılıyor, neredeyse hazır…",
];

/**
 * Sonuç sayfası gövdesindeki liste paneli: üretim animasyonu, paketli tam
 * liste veya paketsiz progressive-blur önizleme burada render edilir.
 * (Sihirbaz modalı yalnızca adımları toplar; sonuç artık sayfanın kendisinde.)
 */
export function ListePaneli({
  durum,
  rapor,
  hasPaket,
  kredi,
  sira,
  acilis,
  onRevize,
}: {
  durum: PanelDurum;
  rapor: MevcutRapor | null;
  hasPaket: boolean;
  kredi: number;
  sira: number;
  /** Ödeme dönüşü: blur çözülme animasyonuyla aç */
  acilis?: boolean;
  onRevize: (feedback: string) => Promise<boolean>;
}) {
  const kilitli = !hasPaket;

  // Harita ⇄ liste köprüsü: pinden satıra, satırdan haritaya
  const [seciliIl, setSeciliIl] = useState<string | null>(null);
  const [acikSira, setAcikSira] = useState<number | null>(null);
  const haritaRef = useRef<HTMLDivElement>(null);

  const pinVerisi = useMemo(
    () =>
      rapor
        ? pinleriTuret(
            rapor.rapor,
            rapor.params.sira,
            kilitli ? ACIK_SATIR : rapor.rapor.tercihler.length,
          )
        : null,
    [rapor, kilitli],
  );

  if (durum === "uretiliyor") return <UretimGovdesi />;

  if (durum === "kredi-yetersiz") {
    return (
      <section className="mt-16 rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
        <Lock className="mx-auto size-8 text-slate-400" aria-hidden />
        <h2 className="mt-4 font-heading text-xl font-bold">
          Kredin bu liste için yetmiyor
        </h2>
        <p className="mx-auto mt-2 max-w-md text-sm text-slate-600">
          Liste üretimi 3 kredi. Tercih Dönemi Paketi&apos;yle 60 kredi, tam
          liste, PDF ve revizyon hakları birlikte gelir.
        </p>
        <Button
          asChild
          size="lg"
          className="mt-6 h-12 cursor-pointer bg-orange-500 px-8 text-white transition-colors duration-200 hover:bg-orange-600"
        >
          <Link href="/paket">299 TL — Paketi aktive et</Link>
        </Button>
      </section>
    );
  }

  if (!rapor) return null;

  return (
    <section
      className={`mt-16 ${acilis && !kilitli ? "kt-unblur" : ""}`}
      aria-label="Tercih listen"
    >
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <h2 className="font-heading text-2xl font-bold">
            24 Tercihlik Listen
          </h2>
          <p className="mt-1 text-sm text-slate-500">
            {sira.toLocaleString("tr-TR")}. sıra ·{" "}
            {kilitli
              ? `tüm taban verileri açık · ${ACIK_SATIR} AI analiz örneği`
              : `${kredi} kredin kaldı`}
          </p>
        </div>
        {!kilitli ? (
          <Button asChild variant="outline" className="cursor-pointer">
            <Link href="/rapor/yazdir" target="_blank">
              <FileText className="size-4" aria-hidden />
              PDF indir
            </Link>
          </Button>
        ) : null}
      </div>

      {/* Harita: 24 tercihin coğrafyası — ile dokun, üniversiteleri gör */}
      <div ref={haritaRef} className="mt-5 scroll-mt-24">
        <TercihHaritasi
          pinler={pinVerisi?.pinler ?? []}
          seciliIl={seciliIl}
          onSeciliIlDegisti={setSeciliIl}
          onTercihSec={setAcikSira}
        />
        {pinVerisi && pinVerisi.haritaDisi > 0 ? (
          <p className="mt-1 px-1 text-xs text-slate-500">
            {pinVerisi.haritaDisi} tercih harita dışında (KKTC vb.)
          </p>
        ) : null}
      </div>

      <div className="mt-5">
        <RaporListesi
          rapor={rapor.rapor}
          adaySira={rapor.params.sira}
          acikSira={acikSira}
          onHaritadaGor={(il) => {
            if (!il) return;
            setSeciliIl(il);
            haritaRef.current?.scrollIntoView({
              behavior: "smooth",
              block: "start",
            });
          }}
          kilitliBaslangic={kilitli ? ACIK_SATIR : undefined}
          kilitOverlay={
            <div className="flex flex-col items-start gap-4 sm:flex-row sm:items-center sm:justify-between">
              <div className="flex gap-3">
                <Lock
                  className="mt-1 size-5 shrink-0 text-orange-700"
                  aria-hidden
                />
                <div>
                  <p className="font-heading font-bold text-slate-900">
                    Tüm program ve taban verileri ücretsiz
                  </p>
                  <p className="mt-1 max-w-xl text-sm text-slate-600">
                    Paket; kalan {24 - ACIK_SATIR} tercih için kişisel risk,
                    gerekçe, PDF, 2 revizyon ve 60 AI danışman sorusunu açar.
                  </p>
                  {kredi > 0 ? (
                    <p className="mt-1 text-xs text-slate-500">
                      Kalan {kredi} deneme kredin hesabında duruyor.
                    </p>
                  ) : null}
                </div>
              </div>
              <Button
                asChild
                size="lg"
                className="h-12 w-full shrink-0 cursor-pointer bg-orange-500 px-8 text-white transition-colors duration-200 hover:bg-orange-600 sm:w-auto"
              >
                <Link href="/paket">299 TL — Analizleri aç</Link>
              </Button>
            </div>
          }
        />
      </div>

      {!kilitli ? (
        <div className="mt-6">
          <RevizyonKutusu
            kalanHak={MAX_REVIZYON - rapor.revisionCount}
            onRevize={onRevize}
          />
        </div>
      ) : null}

      {/* AI danışman: sağ altta yüzen buton, alttan popup olarak açılır */}
      <SohbetPopup kredi={kredi} />
    </section>
  );
}

function UretimGovdesi() {
  const [mesajIdx, setMesajIdx] = useState(0);
  const govdeRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const interval = setInterval(() => {
      setMesajIdx((i) => Math.min(i + 1, URETIM_MESAJLARI.length - 1));
    }, 7000);
    return () => clearInterval(interval);
  }, []);

  // Modal geçiş anında unmount edildiğinden Radix odağı tetikleyiciye geri
  // veremiyor; odağı panele alıp klavye ve ekran okuyucu akışını sürdürüyoruz.
  useEffect(() => {
    govdeRef.current?.focus({ preventScroll: true });
  }, []);

  return (
    <section
      ref={govdeRef}
      tabIndex={-1}
      aria-live="polite"
      className="mt-16 rounded-2xl border border-slate-200 bg-white p-6 outline-none sm:p-8"
    >
      <div className="flex flex-col items-center gap-1.5 text-center">
        <p className="font-heading text-lg font-bold">Listen hazırlanıyor</p>
        <p className="max-w-sm text-sm text-slate-500">
          {URETIM_MESAJLARI[mesajIdx]}
        </p>
        <p className="text-xs text-slate-400">
          Bu işlem yarım dakika kadar sürebilir, sayfayı kapatma.
        </p>
      </div>

      {/* Gelmekte olan tercih listesinin iskeleti */}
      <div className="mt-8 flex flex-col gap-2">
        <div className="flex items-center justify-between">
          <Skeleton className="h-6 w-44" />
          <Skeleton className="h-6 w-24 rounded-full" />
        </div>
        {Array.from({ length: 6 }).map((_, i) => (
          <Skeleton key={i} className="h-14 w-full rounded-xl" />
        ))}
      </div>
    </section>
  );
}

function RevizyonKutusu({
  kalanHak,
  onRevize,
}: {
  kalanHak: number;
  onRevize: (feedback: string) => Promise<boolean>;
}) {
  const [feedback, setFeedback] = useState("");
  const [pending, setPending] = useState(false);

  if (kalanHak <= 0) {
    return (
      <div className="rounded-2xl border border-slate-200 bg-white p-5">
        <p className="text-sm text-slate-500">
          Revizyon hakların doldu. Aşağıdan listen hakkında soru sorabilirsin.
        </p>
      </div>
    );
  }

  return (
    <div className="rounded-2xl border border-slate-200 bg-white p-5">
      <h3 className="font-heading text-base font-bold">
        Listede değişiklik mi istiyorsun?
      </h3>
      <p className="mb-3 mt-1 text-sm text-slate-600">
        Ne değişsin istediğini yaz; liste aynı gerçek veriyle yeniden kurulsun
        (3 kredi).
      </p>
      <textarea
        value={feedback}
        onChange={(e) => setFeedback(e.target.value)}
        rows={2}
        maxLength={1000}
        placeholder="ör. İlk 5 tercihte daha fazla İstanbul olsun, garanti dilimini genişlet…"
        disabled={pending}
        className="w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
      />
      <div className="mt-3 flex items-center gap-3">
        <Button
          type="button"
          variant="outline"
          disabled={pending || feedback.trim().length < 5}
          onClick={async () => {
            setPending(true);
            const ok = await onRevize(feedback.trim());
            setPending(false);
            if (ok) setFeedback("");
          }}
          className="cursor-pointer"
        >
          <RefreshCcw className="size-4" aria-hidden />
          {pending ? "Yeniden kuruluyor…" : "Revize et (3 kredi)"}
        </Button>
        <span className="text-xs text-slate-500">
          Kalan hak: <span className="font-semibold">{kalanHak}</span>
        </span>
      </div>
    </div>
  );
}
