"use client";

// /listem gövdesi: Türkiye haritası + 24'lük liste + danışman sohbeti tek
// ekranda. Harita ⇄ liste köprüsü (pinden satıra, satırdan haritaya) ve
// paketsiz paywall kartları burada; veri çekimi sunucuda (page.tsx) kalır.

import { useMemo, useRef, useState } from "react";
import Link from "next/link";
import {
  ArrowRight,
  Bot,
  Check,
  FileText,
  Lock,
  PencilLine,
  RefreshCcw,
  ShieldCheck,
  SlidersHorizontal,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { RaporListesi } from "./rapor-listesi";
import { useGorunumOlayi } from "@/components/use-gorunum-olayi";
import { tercihFarki } from "@/features/rapor/tercih-farki";
import { TercihDegistiModali } from "./tercih-degisti-modali";
import { TercihHaritasiLazy } from "@/features/liste/components/tercih-haritasi-lazy";
import { YurtdisiHaritalarLazy } from "@/features/liste/components/yurtdisi-haritalar-lazy";
import { pinleriTuret } from "@/lib/harita-pinler";
import type { RaporParams, RaporSonuc } from "@/features/rapor/types/rapor";
import { SohbetClient, type DanismanOzeti, type Mesaj } from "./sohbet-client";
import { RevizyonKutusu } from "./revizyon-kutusu";
import {
  profilDuzenlemeyiAc,
  useTercihProfili,
} from "@/features/liste/hooks/use-tercih-profili";
import { UNIVERSITE_TIPI_ETIKET } from "@/features/sihirbaz/sihirbaz-sabitler";
import { PUAN_TURLERI } from "@/types/yokatlas";

export function ListemGovde({
  rapor,
  params,
  adaySira,
  hasPaket,
  kilitAcilisi,
  kilitliBaslangic,
  kredi,
  raporKredi,
  sohbetGecmisi,
  ozet,
  kalanHak,
  paketFiyati,
  paketKredi,
}: {
  rapor: RaporSonuc;
  /** Kayıtlı listenin üretildiği tercihler — başlıktaki butonun "düzenle" mi
   *  "güncelle" mi olacağı bunun güncel profille farkından çıkar. */
  params: RaporParams;
  adaySira: number;
  hasPaket: boolean;
  /** Ödeme dönüşü: blur çözülme animasyonuyla aç */
  kilitAcilisi: boolean;
  /** Paketsizde ACIK_SATIR; paketlide undefined (tamamı açık) */
  kilitliBaslangic?: number;
  kredi: number;
  /** Bir liste üretiminin kredi bedeli — fark modalındaki güncelleme aynı
   *  kapıdan geçtiği için aynı bedeli gösterir. */
  raporKredi: number;
  sohbetGecmisi: Mesaj[];
  ozet?: DanismanOzeti;
  kalanHak: number;
  paketFiyati: string;
  paketKredi: number;
}) {
  // 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<HTMLElement>(null);

  const pinVerisi = useMemo(
    () =>
      pinleriTuret(
        rapor,
        adaySira,
        kilitliBaslangic ?? rapor.tercihler.length,
      ),
    [rapor, adaySira, kilitliBaslangic],
  );

  const acikSatir = kilitliBaslangic ?? rapor.tercihler.length;

  // Profil client'ta (localStorage) çözülür: ilk render'da null döner, yani
  // SSR ile aynı "Tercihlerimi düzenle" hâli basılır — hidrasyon uyuşmazlığı
  // olmaz, fark varsa buton sonraki render'da "güncelle"ye döner.
  const profil = useTercihProfili();
  const farkVar = useMemo(
    () => (profil ? tercihFarki(params, profil).length > 0 : false),
    [params, profil],
  );
  const [farkModali, setFarkModali] = useState(false);

  // Danışmanın sistem prompt'una gerçekten giren bağlam (bkz. app/api/soru).
  // Sohbet başlığındaki "Danışmanın bildikleri" ipucunda gösterilir; prompt
  // değişirse bu liste de güncellenmeli.
  const danismaninBildikleri = useMemo(() => {
    const satirlar = [
      `Başarı sıralaman ${adaySira.toLocaleString("tr-TR")} ve puan türün ${PUAN_TURLERI[params.tur]}`,
      hasPaket
        ? "24'lük listenin tamamı: program, üniversite, şehir, taban sıralaması ve risk etiketi"
        : `Listenin açık ilk ${acikSatir} satırı — kilitli tercihleri danışman da görmüyor`,
    ];
    if (params.kategoriler?.length) {
      satirlar.push(`İlgi alanların: ${params.kategoriler.join(", ")}`);
    }
    if (params.iller?.length) {
      satirlar.push(`Seçtiğin iller: ${params.iller.join(", ")}`);
    }
    if (params.universiteTipi && params.universiteTipi !== "farketmez") {
      satirlar.push(
        `Üniversite tipi tercihin: ${UNIVERSITE_TIPI_ETIKET[params.universiteTipi]}`,
      );
    }
    if (params.oncelikler?.length) {
      satirlar.push(`Önceliklerin: ${params.oncelikler.join(", ")}`);
    }
    satirlar.push("Bu sohbetteki son mesajların");
    return satirlar;
  }, [adaySira, params, hasPaket, acikSatir]);

  // Kapı ölçümü: paywall yüzeyleri viewport'a girince (oturumda 1'er kez).
  // Ref'ler yalnızca paketsiz dallarda bağlanır; paketlide DOM'da olmadıkları
  // için observer hiç kurulmaz.
  const kilitSatirRef = useGorunumOlayi<HTMLDivElement>(
    "kilit_goruntulendi",
    { yer: "satir" },
    "satir",
  );
  const kilitKartRef = useGorunumOlayi<HTMLElement>(
    "kilit_goruntulendi",
    { yer: "kart" },
    "kart",
  );

  return (
    <div className="mt-8 grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_360px] xl:grid-cols-[minmax(0,1fr)_400px]">
      <div className="flex min-w-0 flex-col gap-6">
        {/* Harita: listenin coğrafyası — ile dokun, üniversiteleri gör */}
        <section
          ref={haritaRef}
          aria-label="Tercih listesinin Türkiye haritası"
          className="scroll-mt-24"
        >
          <div className="mx-auto w-full max-w-xl">
            <TercihHaritasiLazy
              pinler={pinVerisi.pinler}
              seciliIl={seciliIl}
              onSeciliIlDegisti={setSeciliIl}
              onTercihSec={setAcikSira}
            />
            {pinVerisi.yurtdisiPinler.length > 0 ? (
              <YurtdisiHaritalarLazy
                pinler={pinVerisi.yurtdisiPinler}
                onTercihSec={setAcikSira}
              />
            ) : null}
          </div>
          {pinVerisi.haritaDisi > 0 ? (
            <p className="mt-1 text-center text-xs text-slate-500">
              {pinVerisi.haritaDisi} tercih haritada gösterilemiyor
            </p>
          ) : null}
        </section>

        {/* Liste: 24 tercih ve taban verileri. Sayfa başlığı ve revizyon/PDF
            aksiyonları bu kutunun kendi başlık satırında yaşar. */}
        <section className={`min-w-0${kilitAcilisi ? " kt-unblur" : ""}`}>
          <div className="flex flex-wrap items-center justify-between gap-3 pb-1">
            <h1 className="min-w-0 font-heading text-xl font-bold tracking-tight sm:text-2xl">
              {hasPaket
                ? "Yapay Zeka tercih listen"
                : "Veriyi ücretsiz incele. Kararı Yapay Zeka ile netleştir."}
            </h1>
            <div className="flex shrink-0 flex-wrap gap-2">
              {/* Tercih düzenleme her kullanıcıya açık: kapı (layout'ta monte
                  TercihProfiliKapisi) profili günceller, /listem'e döner.
                  Profil kayıtlı listeden ayrıldığı anda bu buton "Tercihlerin
                  değişmiş"e döner ve TercihDegistiModali'nı açar — fark
                  dökümü ve kredi kapısı orada tek yerde yaşar.

                  Renk: varsayılan (primary) buton. Kardeşleri outline olduğu
                  için tek dolu buton olması dikkati zaten çekiyor; turuncu
                  bu sayfada paywall CTA'sının rengi, amber ise risk dilinin
                  "az riskli" tonu — ikisi de burada yanlış sinyal olurdu. */}
              {farkVar ? (
                <Button
                  type="button"
                  size="sm"
                  onClick={() => setFarkModali(true)}
                  className="cursor-pointer transition-[background-color,transform] duration-200 active:scale-[0.97]"
                >
                  <RefreshCcw className="size-4" aria-hidden />
                  Tercihlerin değişmiş
                </Button>
              ) : (
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={profilDuzenlemeyiAc}
                  className="cursor-pointer"
                >
                  <SlidersHorizontal className="size-4" aria-hidden />
                  Tercihlerimi düzenle
                </Button>
              )}
              {hasPaket ? (
                <>
                  <Button
                    asChild
                    variant="outline"
                    size="sm"
                    className="cursor-pointer"
                  >
                    <Link href="#revizyon">
                      <PencilLine className="size-4" aria-hidden />
                      Revize et
                    </Link>
                  </Button>
                  <Button
                    asChild
                    variant="outline"
                    size="sm"
                    className="cursor-pointer"
                  >
                    <Link href="/rapor/yazdir" target="_blank">
                      <FileText className="size-4" aria-hidden />
                      PDF
                    </Link>
                  </Button>
                </>
              ) : null}
            </div>
          </div>
          <RaporListesi
            rapor={rapor}
            adaySira={adaySira}
            acikSira={acikSira}
            onHaritadaGor={(il) => {
              if (!il) return;
              setSeciliIl(il);
              haritaRef.current?.scrollIntoView({
                behavior: "smooth",
                block: "start",
              });
            }}
            kilitliBaslangic={kilitliBaslangic}
            kilitOverlay={
              <div
                ref={kilitSatirRef}
                className="flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between"
              >
                <div className="flex gap-3">
                  <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-orange-100 text-orange-700">
                    <Lock className="size-4" aria-hidden />
                  </span>
                  <div>
                    <p className="font-heading font-bold text-slate-900">
                      İlk {acikSatir} tercihte Yapay Zeka analizini gördün
                    </p>
                    <p className="mt-1 max-w-xl text-sm text-slate-600">
                      Kalan {rapor.tercihler.length - acikSatir} satırda senin
                      sıralamana özel gerekçe ve risk notu hazır — paketle
                      açılır. Program adları ve taban verileri her zaman
                      ücretsiz.
                    </p>
                  </div>
                </div>
                <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="/paket">
                    Analizleri aç — {paketFiyati} TL
                    <ArrowRight data-icon="inline-end" aria-hidden />
                  </Link>
                </Button>
              </div>
            }
          />
        </section>

        {hasPaket ? <RevizyonKutusu kalanHak={kalanHak} /> : null}
      </div>

      <div id="sohbet" className="scroll-mt-24 lg:sticky lg:top-28">
        {hasPaket ? (
          <SohbetClient
            baslangicKredi={kredi}
            initialMesajlar={sohbetGecmisi}
            ozet={ozet}
            bildikleri={danismaninBildikleri}
          />
        ) : (
          <div className="flex flex-col gap-6">
            {/* Sohbet paket kartının üstünde: #sohbet çapası (ve mobildeki
                "Danışmana sor" butonu) doğrudan danışmana düşsün. */}
            <SohbetClient
              baslangicKredi={kredi}
              initialMesajlar={sohbetGecmisi}
              ozet={ozet}
              bildikleri={danismaninBildikleri}
              className="h-[360px]"
            />

            <section
              ref={kilitKartRef}
              className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm"
            >
              <div className="border-b border-slate-100 p-6">
                <h3 className="font-heading text-xl font-bold tracking-tight">
                  Tablo ücretsiz.
                  <br />
                  Karar desteği pakette.
                </h3>
                <p className="mt-2 text-sm leading-6 text-slate-600">
                  Sadece veriyi göstermez; hangi tercihin neden mantıklı
                  olduğunu sıralamana göre açıklar.
                </p>
              </div>

              <div className="p-6">
                <ul className="flex flex-col gap-3 text-sm">
                  {[
                    "24 tercihin tamamında kişisel risk analizi",
                    "Her program için kısa, gerekçeli Yapay Zeka yorumu",
                    "2 liste revizyonu ve paylaşılabilir PDF",
                    `${paketKredi} Yapay Zeka danışman sorusu`,
                  ].map((ozellik) => (
                    <li key={ozellik} className="flex items-start gap-2.5">
                      <Check
                        className="mt-0.5 size-4 shrink-0 text-emerald-600"
                        aria-hidden
                      />
                      <span>{ozellik}</span>
                    </li>
                  ))}
                </ul>

                <div className="mt-6">
                  <p className="text-xs text-slate-500">Tek seferlik</p>
                  <p className="font-heading text-3xl font-bold">
                    {paketFiyati} TL
                  </p>
                </div>

                <Button
                  asChild
                  size="lg"
                  className="mt-5 w-full cursor-pointer bg-orange-500 text-white transition-[background-color,transform] duration-200 active:scale-[0.97] hover:bg-orange-600"
                >
                  <Link href="/paket">
                    Kişisel analizi aç
                    <ArrowRight data-icon="inline-end" aria-hidden />
                  </Link>
                </Button>

                <div className="mt-4 flex items-center justify-center gap-4 text-[11px] text-slate-500">
                  <span className="inline-flex items-center gap-1">
                    <ShieldCheck className="size-3.5" aria-hidden />
                    iyzico güvenli ödeme
                  </span>
                  <span className="inline-flex items-center gap-1">
                    <Bot className="size-3.5" aria-hidden />
                    Gerçek YÖK verisi
                  </span>
                </div>
              </div>
            </section>
          </div>
        )}
      </div>

      {/* farkVar dallanmasının dışında: güncelleme başarılı olunca fark
          kapanıyor, modal "listen güncellendi" ekranını gösterirken
          unmount olmasın. */}
      <TercihDegistiModali
        open={farkModali}
        onOpenChange={setFarkModali}
        params={params}
        kredi={kredi}
        raporKredi={raporKredi}
        hasPaket={hasPaket}
      />
    </div>
  );
}
