kolaytercih/src/features/sihirbaz/components/hero-form.tsx

"use client";

import { logoTepkisi } from "@/lib/logo-tepkisi";
import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { ArrowRight, Trophy } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { SayiRulo } from "@/components/ui/sayi-rulo";
import { SecimHaplari } from "@/components/ui/secim-haplari";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  SihirbazAdimlarLazy,
  preloadSihirbazAdimlar,
} from "./sihirbaz-adimlar-lazy";
import { authClient } from "@/lib/auth-client";
import { olay, siraKovasi } from "@/lib/analitik";
import { onbellekliJsonGetir } from "@/lib/istek-cache";
import { useTercihProfili } from "@/features/liste/hooks/use-tercih-profili";
import type { SihirbazFacetleri } from "@/types/yokatlas";
import { PUAN_TURU_ETIKET, sonucHref, type SihirbazSecimleri } from "@/features/sihirbaz/sihirbaz-sabitler";
import { ListeDurumuSatiri } from "@/features/liste/components/liste-durumu-satiri";
import { tercihProfiliYaz } from "@/features/sihirbaz/sihirbaz-profil";

// 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;
type PuanTuru = (typeof PUAN_TURLERI_SECENEK)[number]["deger"];

export function HeroForm() {
  const [siralama, setSiralama] = useState("");
  const [tur, setTur] = useState<PuanTuru>("say");
  const [sira, setSira] = useState<number | null>(null);
  const [facetler, setFacetler] = useState<SihirbazFacetleri | null>(null);
  const [yukleniyor, setYukleniyor] = useState(false);
  const [modalAcik, setModalAcik] = useState(false);
  const [hata, setHata] = useState<string | null>(null);
  const [girisli, setGirisli] = useState(false);
  // Daha önce sıralama girmiş ziyaretçi formu yeniden doldurmasın:
  // kayıtlı profil varsa doğrudan /sonuc CTA'sı gösterilir.
  const kayitliProfil = useTercihProfili();
  const router = useRouter();

  // 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 handleSubmit(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 mount'ta değil burada, facet isteğiyle PARALEL çözülür:
      // landing ziyareti başına gereksiz auth turu atılmaz (sayfa statik kalır).
      // Facetler dedup+TTL cache'li: aynı sıra/tür tekrar girilirse ağa çıkmaz.
      const [veri, oturum] = await Promise.all([
        onbellekliJsonGetir<{ facetler: SihirbazFacetleri }>(
          `/api/facetler?sira=${value}&tur=${tur}`,
        ),
        authClient.getSession().catch(() => null),
      ]);
      setGirisli(Boolean(oturum?.data?.user));
      setSira(value);
      setFacetler(veri.facetler);
      setModalAcik(true);
      olay("sira_girildi", {
        kaynak: "hero",
        tur,
        sira_kovasi: siraKovasi(value),
      });
    } catch {
      olay("sira_form_hata", { kaynak: "hero" });
      setHata("Bir şeyler ters gitti, tekrar dener misin?");
    } finally {
      setYukleniyor(false);
    }
  }

  // Seçimler tamam: sakla ve herkes doğrudan /sonuc'a gitsin. Girişli
  // kullanıcıda orada otomatik üretim başlar; girişsiz kullanıcı önce
  // ücretsiz tabloyu görür, giriş CTA'sı ödülün kaydedilmesi olarak
  // oradan gelir (değer önce — giriş duvarı sihirbazın hemen arkasında değil).
  function secimleriTamamla(secimler: SihirbazSecimleri) {
    if (!sira) return;
    const profil = { sira, tur, secimler };
    tercihProfiliYaz(profil);
    // Üst çubuktaki logo kürsüye döner (DESIGN.md §4.34).
    logoTepkisi("sira");
    setModalAcik(false);
    router.push(sonucHref(girisli ? { sihirbaz: "1", kaynak: "hero" } : { hazir: "1" }));
  }

  // Kayıtlı profil varsa sihirbazı atla, doğrudan sonuç sayfasına götür.
  // Sıralamayı değiştirmek navbar'daki sıralama hapından yapılır.
  if (kayitliProfil) {
    return (
      <div className="flex w-full max-w-md flex-col items-center">
        {/* Üst çubuktaki sıralama hapının iri hâli (DESIGN.md §1.1 "sayı
            kahramandır", §11.2 "durumu yansıt"): site seni tanıyor. */}
        <p className="mb-5 flex items-center gap-2.5 font-heading text-3xl leading-none font-bold tracking-tight text-slate-900 sm:text-4xl">
          <Trophy className="size-6 shrink-0 text-orange-500 sm:size-7" aria-hidden />
          <SayiRulo deger={kayitliProfil.sira} />
          <span className="font-sans text-base font-semibold tracking-normal text-slate-500">
            · {PUAN_TURU_ETIKET[kayitliProfil.tur] ?? kayitliProfil.tur}
          </span>
        </p>
        <Button
          asChild
          size="lg"
          variant="cta"
          className="w-full sm:w-auto"
        >
          <Link href={sonucHref()}>
            Üniversitelere göz at
            <ArrowRight className="size-4" aria-hidden />
          </Link>
        </Button>
        <ListeDurumuSatiri varyant="hero" />
      </div>
    );
  }

  return (
    // max-w-xl: yatay dizilimde placeholder'ın tamamı inputa sığsın diye
    // (md'de buton geniş olduğundan inputa ~200px kalıyor, metin kesiliyordu).
    <div className="flex w-full max-w-xl flex-col items-center gap-3">
      {/* Seçili vurgu çipten çipe kayar (Arc kayan vurgu, secim-haplari.tsx). */}
      <SecimHaplari
        ariaLabel="Puan türü"
        secenekler={PUAN_TURLERI_SECENEK}
        deger={tur}
        onChange={setTur}
        className="justify-center"
      />

      <form
        onSubmit={handleSubmit}
        className="flex w-full flex-col gap-3 sm:flex-row"
      >
        <label htmlFor="siralama" className="sr-only">
          YKS başarı sıralaması
        </label>
        <Input
          id="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 ? "siralama-hata" : undefined}
          // flex-1 yalnızca yatay dizilimde (sm+): mobilde form flex-col olduğu
          // için flex-1 inputun yüksekliğini eziyordu. Telefonda hero alanı
          // bir kademe iri (DESIGN.md §4.6); sm ve üzeri temel Input.
          className="h-14 text-lg sm:h-12 sm:flex-1 sm:text-base"
        />
        <Button
          type="submit"
          size="lg"
          disabled={yukleniyor}
          variant="cta"
        >
          {yukleniyor ? "Hazırlanıyor…" : "Yapay Zeka listemi kur"}
          <ArrowRight className="size-4" aria-hidden />
        </Button>
      </form>

      {hata ? (
        <p
          id="siralama-hata"
          role="alert"
          className="self-start text-sm font-medium text-red-600"
        >
          {hata}
        </p>
      ) : null}

      <Dialog open={modalAcik} onOpenChange={setModalAcik}>
        <DialogContent className="max-h-[92dvh] gap-0 overflow-y-auto p-6 text-left sm:max-w-3xl">
          <DialogTitle className="sr-only">Tercih listesi sihirbazı</DialogTitle>
          <DialogDescription className="sr-only">
            Sıralamana uygun seçimlerini yap, tercih planına geç.
          </DialogDescription>
          {facetler && sira ? (
            <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}
        </DialogContent>
      </Dialog>
    </div>
  );
}