"use client";

// C2 yumuşak banner: girişsiz kullanıcının manuel listesi 3. programa
// ulaşınca bir kez görünen "listen yalnızca bu tarayıcıda" hatırlatması.
// /sonuc (funnel panelleriyle yarışmasın) ve giriş gibi kromsuz sayfalar
// hariç her yerde görünür; kapatma oturum boyunca kalıcıdır (sessionStorage).
// Exit-intent/agresif popup YOK (PRD kuralı).

import { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ArrowRight, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ViewportPortal } from "@/components/viewport-portal";
import { useGorunumOlayi } from "@/components/use-gorunum-olayi";
import { olay } from "@/lib/analitik";
import { kromGizliMi } from "@/components/header-gate";
import { CihazCifti, IsletimSistemiLogosu } from "./cihaz-ikonlari";
import { useManuelListe } from "../liste-store";
import { useOturumDurumu } from "../liste-oturum-sinyali";
import { useGirisUrl } from "../liste-giris-url";

const KAPATMA_KEY = "kolaytercih.kaydet-banner-kapali";
const ESIK = 3;

export function KaydetBanner() {
  const liste = useManuelListe();
  const girisli = useOturumDurumu();
  const pathname = usePathname();
  const girisUrl = useGirisUrl();

  // SSR/ilk boyada gizli başla; kapatma durumu mount'ta okunur.
  const [kapali, setKapali] = useState(true);
  useEffect(() => {
    try {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setKapali(Boolean(sessionStorage.getItem(KAPATMA_KEY)));
    } catch {
      setKapali(false);
    }
  }, []);

  const gorunumRef = useGorunumOlayi<HTMLDivElement>(
    "kaydet_banner_goruntulendi",
  );

  if (girisli !== false || liste.length < ESIK || kapali) return null;

  // /sonuc'ta gösterilmez: sayfanın kendi funnel panelleri var.
  if (pathname?.startsWith("/sonuc")) return null;

  // Giriş gibi kromsuz sayfalarda gösterilmez: kullanıcı zaten giriş
  // akışındayken "Giriş yap" CTA'sı gereksiz gürültü olur.
  if (pathname && kromGizliMi(pathname)) return null;

  return (
    <ViewportPortal>
      <div className="pointer-events-none fixed inset-x-0 bottom-4 z-40 px-4">
        <div
          ref={gorunumRef}
          className="pointer-events-auto mx-auto flex max-w-xl items-center gap-4 rounded-2xl border border-slate-200 bg-white p-4 shadow-xl"
        >
          {/* Kullanıcının o anki işletim sisteminin logosu: "bu tarayıcıda"
              mesajını somutlaştırır */}
          <div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-slate-200 bg-slate-50 text-slate-700">
            <IsletimSistemiLogosu className="size-5" />
          </div>
          <div className="flex-1">
            <p className="font-heading text-sm font-bold text-slate-900">
              Listen yalnızca bu tarayıcıda
            </p>
            <p className="text-xs text-slate-500">
              Giriş yap; {liste.length} seçimin hesabında saklansın, her
              cihazdan aç{" "}
              <CihazCifti className="ml-0.5 align-[-3px] text-slate-400" />
            </p>
          </div>
          <Button
            asChild
            size="sm"
            className="cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600"
          >
            <Link
              href={girisUrl}
              onClick={() =>
                olay("giris_cta_tiklandi", { kaynak: "liste_kaydet_banner" })
              }
            >
              Giriş yap, kaydet
              <ArrowRight className="size-4" aria-hidden />
            </Link>
          </Button>
          <button
            type="button"
            aria-label="Kapat"
            onClick={() => {
              setKapali(true);
              try {
                sessionStorage.setItem(KAPATMA_KEY, "1");
              } catch {}
            }}
            className="cursor-pointer rounded-full p-1 text-slate-400 transition-colors duration-200 hover:bg-slate-100 hover:text-slate-600"
          >
            <X className="size-4" aria-hidden />
          </button>
        </div>
      </div>
    </ViewportPortal>
  );
}
