"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,
  ShieldCheck,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { RaporListesi } from "./rapor-listesi";
import { useGorunumOlayi } from "@/components/use-gorunum-olayi";
import { TercihHaritasi } from "@/features/liste/components/tercih-haritasi";
import { pinleriTuret } from "@/lib/harita-pinler";
import type { RaporSonuc } from "@/features/rapor/types/rapor";
import { SohbetClient, type DanismanOzeti, type Mesaj } from "./sohbet-client";
import { RevizyonKutusu } from "./revizyon-kutusu";

export function ListemGovde({
  rapor,
  adaySira,
  hasPaket,
  kilitAcilisi,
  kilitliBaslangic,
  kredi,
  sohbetGecmisi,
  ozet,
  kalanHak,
  paketFiyati,
  paketKredi,
}: {
  rapor: RaporSonuc;
  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;
  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;

  // 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">
            <TercihHaritasi
              pinler={pinVerisi.pinler}
              seciliIl={seciliIl}
              onSeciliIlDegisti={setSeciliIl}
              onTercihSec={setAcikSira}
            />
          </div>
          {pinVerisi.haritaDisi > 0 ? (
            <p className="mt-1 text-center text-xs text-slate-500">
              {pinVerisi.haritaDisi} tercih harita dışında (KKTC vb.)
            </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>
            {hasPaket ? (
              <div className="flex shrink-0 gap-2">
                <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>
              </div>
            ) : null}
          </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}
          />
        ) : (
          <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}
              className="h-[420px]"
            />

            <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>
    </div>
  );
}
