"use client";

import { useRef, useState, type ReactNode } from "react";
import { cn } from "@/lib/utils";
import { PikselZemin } from "@/components/piksel-zemin";
import { PikselListe, PikselListeAciklama } from "@/components/piksel-liste";

/**
 * Kapanış yüzeyi (DESIGN.md §10.8) — arama penceresindeki kartın dili:
 * koyu slate-950 zemin, ince mavi kenar, turuncu CTA. Arka planda büyüklü
 * küçüklü, masonry gibi kaymış piksel dokusu (PixelMasonry); yüzeyin
 * kreatifi 24'lük listenin kendisidir (PikselListe). Kartın içindeki bir
 * düğmeye ya da linke imleç/odak gelince 24 kare birden dolar — "listen
 * böyle hazır olur". Yazılıp silinen satır yok (Bilal, 24 Eyl 2026).
 */
export function PikselCtaYuzeyi({
  children,
  className,
  seed = 7,
}: {
  children: ReactNode;
  className?: string;
  /** Piksel dokusunun deseni; aynı sayfadaki iki yüzey farklı olsun */
  seed?: number;
}) {
  const [tamamla, setTamamla] = useState(false);
  // Piksel tablosunun çevresi dokuda boş kalır (Bilal, 24 Eyl 2026:
  // "tablonun arkasına çok piksel yığılmış"); ölçü gerçek yerleşimden.
  const listeRef = useRef<HTMLDivElement>(null);

  const hedefMi = (t: EventTarget | null) =>
    t instanceof Element && t.closest("a, button") != null;

  return (
    <section
      onPointerOver={(e) => setTamamla(hedefMi(e.target))}
      onPointerLeave={() => setTamamla(false)}
      onFocusCapture={(e) => setTamamla(hedefMi(e.target))}
      onBlurCapture={() => setTamamla(false)}
      className={cn(
        "relative isolate overflow-hidden rounded-3xl border border-blue-400/20 bg-slate-950 text-white shadow-xl shadow-slate-900/10",
        className,
      )}
    >
      <PikselZemin seed={seed} haric={listeRef} className="-inset-y-10" />
      <div className="grid items-center gap-8 px-5 py-10 sm:px-10 sm:py-12 lg:grid-cols-[minmax(0,1fr)_16rem] lg:gap-12">
        <div className="flex min-w-0 flex-col items-center text-center lg:items-start lg:text-left">
          {children}
        </div>
        <div
          ref={listeRef}
          className="order-first flex flex-col items-center lg:order-none"
        >
          <PikselListe
            tamamla={tamamla}
            className="w-full max-w-[9rem] sm:max-w-[11rem] lg:max-w-[14rem]"
          />
          <PikselListeAciklama className="mt-4 justify-center" />
        </div>
      </div>
    </section>
  );
}