kolaytercih/src/components/cta-sira-form.tsx

"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import {
  ArrowRight,
  ChartNoAxesCombined,
  Database,
  ListChecks,
  Trophy,
  X,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerTitle,
} from "@/components/ui/drawer";
import { SectionEyebrow } from "@/components/pixel-decor";
import {
  SihirbazAdimlarLazy,
  preloadSihirbazAdimlar,
} from "@/components/sihirbaz-adimlar-lazy";
import { authClient } from "@/lib/auth-client";
import { olay, siraKovasi } from "@/lib/analitik";
import { useTercihProfili } from "@/components/manuel-liste/profil-kapisi-store";
import type { SihirbazFacetleri } from "@/types/yokatlas";
import {
  sonucHref,
  tercihProfiliYaz,
  type SihirbazSecimleri,
} from "@/lib/sihirbaz";

// lib/db sunucu tarafı; etiketler client bundle'a sızmasın diye burada.
const PUAN_TURLERI_SECENEK = [
  { deger: "say", etiket: "Sayısal" },
  { deger: "ea", etiket: "Eşit Ağırlık" },
  { deger: "soz", etiket: "Sözel" },
  { deger: "dil", etiket: "Dil" },
  { deger: "tyt", etiket: "TYT" },
] as const;

// Kanıt üçlüsü arama funnel kartıyla aynı dili konuşur (bkz. arama-funnel-karti)
const KANITLAR = [
  { ikon: ListChecks, etiket: "24 tercihlik plan" },
  { ikon: ChartNoAxesCombined, etiket: "Risk analizi" },
  { ikon: Database, etiket: "YÖK Atlas verisi" },
] as const;

/**
 * Programatik SEO sayfalarındaki funnel girişi. Statik/SSR çıktı her zaman
 * profilsiz hâldir (sayfalar prerender edilmeye devam eder); hydration
 * sonrası kayıtlı tercih profili bulunursa "sıralamanı gir" yerine doğrudan
 * sonuç sayfasına götüren CTA gösterilir — sıralamasını girmiş adaya bir
 * daha girmesini söylemeyiz.
 *
 * Profilsiz CTA adayı ana sayfaya göndermez: buton alttan bir çekmece açar,
 * sıralama girişi ve sihirbaz adayın bulunduğu sayfanın bağlamında akar.
 * Tasarım gerekçesi için bkz. docs/tasarim/cta-cekmece-tasarimi.md.
 */
export function CtaSiraForm({ baslik }: { baslik?: string }) {
  const profil = useTercihProfili();
  const router = useRouter();

  const [acik, setAcik] = useState(false);
  const [adim, setAdim] = useState<"sira" | "sihirbaz">("sira");
  const [siralama, setSiralama] = useState("");
  const [tur, setTur] = useState<string>("say");
  const [sira, setSira] = useState<number | null>(null);
  const [facetler, setFacetler] = useState<SihirbazFacetleri | null>(null);
  const [yukleniyor, setYukleniyor] = useState(false);
  const [hata, setHata] = useState<string | null>(null);
  const [girisli, setGirisli] = useState(false);

  // Yazarken binlik ayracıyla biçimle (85000 → 85.000)
  function siralamaDegisti(ham: string) {
    setHata(null);
    const rakamlar = ham.replace(/\D/g, "").slice(0, 7);
    setSiralama(rakamlar ? Number(rakamlar).toLocaleString("tr-TR") : "");
  }

  async function siraGonder(e: React.FormEvent) {
    e.preventDefault();
    const value = Number(siralama.replace(/\./g, ""));
    if (!value || value < 1 || value > 4_000_000) {
      setHata("Geçerli bir başarı sıralaması gir (ör. 85.000).");
      return;
    }
    setYukleniyor(true);
    try {
      // Oturum bilgisi facet isteğiyle PARALEL çözülür; sayfa statik kalır
      // (hero formundaki desenle aynı — bkz. hero-form.tsx).
      const [res, oturum] = await Promise.all([
        fetch(`/api/facetler?sira=${value}&tur=${tur}`),
        authClient.getSession().catch(() => null),
      ]);
      if (!res.ok) throw new Error();
      const veri = (await res.json()) as { facetler: SihirbazFacetleri };
      setGirisli(Boolean(oturum?.data?.user));
      setSira(value);
      setFacetler(veri.facetler);
      setAdim("sihirbaz");
      olay("sira_girildi", {
        kaynak: "cta",
        tur,
        sira_kovasi: siraKovasi(value),
      });
    } catch {
      setHata("Bir şeyler ters gitti, tekrar dener misin?");
    } finally {
      setYukleniyor(false);
    }
  }

  // Seçimler tamam: sakla, çekmeceyi kapat ve /sonuc'a git. Girişli
  // kullanıcıda orada otomatik üretim başlar; girişsiz kullanıcı önce
  // ücretsiz tabloyu görür (değer önce — giriş duvarı sihirbazın hemen
  // arkasında değil).
  function secimleriTamamla(secimler: SihirbazSecimleri) {
    if (sira == null) return;
    const yeniProfil = { sira, tur, secimler };
    tercihProfiliYaz(yeniProfil);
    setAcik(false);
    router.push(
      sonucHref(yeniProfil, girisli ? { sihirbaz: "1" } : { hazir: "1" }),
    );
  }

  function acikDegisti(v: boolean) {
    setAcik(v);
    if (!v) {
      // Yeniden açılışta sıfırdan başla; yazılan sıralama kaybolmasın.
      setAdim("sira");
      setFacetler(null);
      setHata(null);
    }
  }

  if (profil) {
    return (
      <section className="rounded-2xl border border-primary/20 bg-primary/5 p-6 sm:p-8">
        <h2 className="font-heading text-xl font-bold text-slate-900">
          {baslik ?? "Sıralamanla nereye yerleşirsin? Saniyede gör."}
        </h2>
        <p className="mt-2 text-sm leading-6 text-slate-600">
          Sıralaman kayıtlı ({profil.sira.toLocaleString("tr-TR")}. sıra) —
          gerçek YÖK Atlas verisiyle hayal, dengeli ve garanti dilimlerindeki
          programların hazır.
        </p>
        <Link
          href={sonucHref(profil)}
          className="mt-4 inline-flex h-12 items-center justify-center gap-2 rounded-full bg-orange-500 px-7 text-sm font-semibold text-white transition-colors duration-200 hover:bg-orange-600"
        >
          Sıralamana uygun programları gör
          <ArrowRight className="size-4" aria-hidden />
        </Link>
      </section>
    );
  }

  return (
    <section className="rounded-2xl border border-primary/20 bg-primary/5 p-6 sm:p-8">
      <h2 className="font-heading text-xl font-bold text-slate-900">
        {baslik ?? "Sıralamanla nereye yerleşirsin? Saniyede gör."}
      </h2>
      <p className="mt-2 text-sm leading-6 text-slate-600">
        YKS başarı sıralamanı gir; gerçek YÖK Atlas verisiyle sıralamana uygun
        hayal, dengeli ve garanti dilimlerindeki programları anında listele.
        Ücretsiz, üyelik gerekmez.
      </p>
      <Button
        type="button"
        onClick={() => setAcik(true)}
        onPointerEnter={preloadSihirbazAdimlar}
        onFocus={preloadSihirbazAdimlar}
        className="mt-4 h-11 cursor-pointer bg-orange-500 px-6 text-sm font-semibold text-white transition-colors duration-200 hover:bg-orange-600"
      >
        Sıralamanı gir, programları gör
        <ArrowRight className="size-4" aria-hidden />
      </Button>

      <Drawer open={acik} onOpenChange={acikDegisti} handleOnly>
        <DrawerContent
          data-lenis-prevent
          className="max-h-[92dvh] bg-white sm:mx-auto sm:max-w-2xl sm:border-x sm:border-slate-200 sm:shadow-2xl"
        >
          {/* Görünür başlıklar adıma göre değişir; erişilebilir ad sabit kalır. */}
          <DrawerTitle className="sr-only">
            Sıralamanla nereye yerleşirsin?
          </DrawerTitle>
          <DrawerDescription className="sr-only">
            YKS başarı sıralamanı gir; sıralamana uygun programları bu sayfadan
            ayrılmadan gör.
          </DrawerDescription>
          <DrawerClose className="absolute top-3 right-3 z-10 flex size-9 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-popover text-slate-500 transition-[background-color,transform] duration-150 hover:bg-slate-100 hover:text-slate-800 active:scale-[0.96]">
            <X className="size-4" aria-hidden />
            <span className="sr-only">Kapat</span>
          </DrawerClose>

          <div
            data-lenis-prevent
            className="min-h-0 flex-1 overflow-y-auto px-4 pt-5 pb-[max(1.25rem,env(safe-area-inset-bottom))] sm:px-6"
          >
            {adim === "sira" ? (
              <div className="flex flex-col gap-5">
                <div>
                  <SectionEyebrow>Saniyede gör</SectionEyebrow>
                  <h2 className="mt-3 font-heading text-2xl font-bold text-slate-900">
                    Sıralamanla nereye yerleşirsin?
                  </h2>
                  <p className="mt-2 max-w-xl text-sm leading-6 text-slate-600">
                    Puan türünü seç, başarı sıralamanı yaz; hayal, dengeli ve
                    garanti dilimlerindeki programları bu sayfadan ayrılmadan
                    gör. Ücretsiz, üyelik gerekmez.
                  </p>
                </div>

                <form onSubmit={siraGonder} className="flex flex-col gap-3">
                  <div
                    role="radiogroup"
                    aria-label="Puan türü"
                    className="flex flex-wrap gap-1.5"
                  >
                    {PUAN_TURLERI_SECENEK.map((t) => (
                      <button
                        key={t.deger}
                        type="button"
                        role="radio"
                        aria-checked={tur === t.deger}
                        onClick={() => setTur(t.deger)}
                        className={
                          tur === t.deger
                            ? "cursor-pointer rounded-full border border-primary bg-primary px-3 py-1.5 text-xs font-medium text-white transition-colors duration-200"
                            : "cursor-pointer rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-600 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50"
                        }
                      >
                        {t.etiket}
                      </button>
                    ))}
                  </div>

                  <label htmlFor="cta-siralama" className="sr-only">
                    YKS başarı sıralaması
                  </label>
                  <div className="flex flex-col gap-3 sm:flex-row">
                    <div className="relative sm:flex-1">
                      <Trophy
                        className="pointer-events-none absolute left-4 top-1/2 size-4 -translate-y-1/2 text-slate-400"
                        aria-hidden
                      />
                      <Input
                        id="cta-siralama"
                        inputMode="numeric"
                        autoComplete="off"
                        placeholder="YKS başarı sıralaman (ör. 85.000)"
                        value={siralama}
                        onChange={(e) => siralamaDegisti(e.target.value)}
                        onFocus={preloadSihirbazAdimlar}
                        aria-invalid={hata ? true : undefined}
                        aria-describedby={
                          hata ? "cta-siralama-hata" : undefined
                        }
                        className="h-12 bg-background pl-11 text-base"
                      />
                    </div>
                    <Button
                      type="submit"
                      disabled={yukleniyor}
                      className="h-12 cursor-pointer bg-orange-500 px-6 text-white transition-colors duration-200 hover:bg-orange-600"
                    >
                      {yukleniyor ? "Hazırlanıyor…" : "Programları gör"}
                      <ArrowRight className="size-4" aria-hidden />
                    </Button>
                  </div>
                  {hata ? (
                    <p
                      id="cta-siralama-hata"
                      role="alert"
                      className="text-sm font-medium text-red-600"
                    >
                      {hata}
                    </p>
                  ) : null}
                </form>

                <ul
                  aria-label="Neler alacaksın"
                  className="flex flex-wrap gap-x-4 gap-y-2 border-t border-slate-100 pt-4"
                >
                  {KANITLAR.map(({ ikon: Ikon, etiket }) => (
                    <li
                      key={etiket}
                      className="inline-flex items-center gap-1.5 text-xs font-medium text-slate-600"
                    >
                      <Ikon className="size-3.5 text-primary" aria-hidden />
                      {etiket}
                    </li>
                  ))}
                </ul>
              </div>
            ) : facetler && sira != null ? (
              <SihirbazAdimlarLazy
                key={`${sira}-${tur}`}
                sira={sira}
                tur={tur}
                facetler={facetler}
                sonButonEtiketi={
                  girisli ? "Yapay Zeka listemi kur (3 kredi)" : "Ücretsiz tablonu gör"
                }
                onTamamla={secimleriTamamla}
              />
            ) : null}
          </div>
        </DrawerContent>
      </Drawer>
    </section>
  );
}