"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { ArrowRight, Trophy } from "lucide-react";
import { useReducedMotion } from "motion/react";
import useMeasure from "react-use-measure";
import { toast } from "sonner";
import { TransitionPanel } from "@/components/core/transition-panel";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  SihirbazAdimlarLazy,
  preloadSihirbazAdimlar,
} from "@/features/sihirbaz/components/sihirbaz-adimlar-lazy";
import type { SihirbazFacetleri } from "@/types/yokatlas";
import { olay, siraKovasi } from "@/lib/analitik";
import { type SihirbazSecimleri, type TercihProfili } from "@/features/sihirbaz/sihirbaz-sabitler";
import { tercihProfiliYaz } from "@/features/sihirbaz/sihirbaz-profil";
import { authClient } from "@/lib/auth-client";
import {
  profilKapisiniKapat,
  profilTamamlandi,
  useProfilKapisi,
  type BekleyenHedef,
  type BekleyenProgram,
} from "../hooks/use-tercih-profili";

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 Adim = "giris" | "sira" | "sihirbaz";

const ADIM_SIRASI: Record<Adim, number> = { giris: 0, sira: 1, sihirbaz: 2 };

export function TercihProfiliKapisi() {
  const { acik, duzenle, dogrudanSira, bekleyen, bekleyenHedef, profil } =
    useProfilKapisi();
  const oturumAnahtari = acik
    ? `${duzenle ? "d" : "n"}-${bekleyen?.program.id ?? "yok"}-${profil?.sira ?? 0}-${profil?.tur ?? ""}`
    : "kapali";

  return (
    <Dialog
      open={acik}
      onOpenChange={(v) => {
        if (!v) profilKapisiniKapat();
      }}
    >
      <DialogContent
        data-tercih-profili-kapisi
        className="max-h-[92dvh] gap-0 overflow-y-auto p-6 sm:max-w-3xl"
      >
        <DialogTitle className="sr-only">
          {duzenle ? "Tercihlerini düzenle" : "Tercih profili sihirbazı"}
        </DialogTitle>
        <DialogDescription className="sr-only">
          Sıralamanı ve tercihlerini belirle; eklediğin programları buna göre
          değerlendirelim.
        </DialogDescription>
        {acik ? (
          <KapıIcerik
            key={oturumAnahtari}
            duzenle={duzenle}
            dogrudanSira={dogrudanSira}
            bekleyen={bekleyen}
            hedef={bekleyenHedef}
            profil={profil}
          />
        ) : null}
      </DialogContent>
    </Dialog>
  );
}

function KapıIcerik({
  duzenle,
  dogrudanSira,
  bekleyen,
  hedef,
  profil,
}: {
  duzenle: boolean;
  dogrudanSira: boolean;
  bekleyen: BekleyenProgram | null;
  hedef: BekleyenHedef | null;
  profil: TercihProfili | null;
}) {
  const router = useRouter();
  const bilinenSira = bekleyen?.adaySira ?? profil?.sira ?? null;
  const bilinenTur = bekleyen?.adayTur ?? profil?.tur ?? "say";

  // Düzenlemede ve navbar "Sıralamanı gir" girişinde doğrudan sıralama adımı
  const [adim, setAdim] = useState<Adim>(
    duzenle || dogrudanSira ? "sira" : "giris",
  );
  // Adım geçişleri sihirbazın kendi içindeki TransitionPanel kaymasıyla oynar
  const [yon, setYon] = useState(1);
  const [gecisBasladi, setGecisBasladi] = useState(false);
  const [panelRef, panelOlculeri] = useMeasure();
  const hareketiAzalt = useReducedMotion();
  const [siralama, setSiralama] = useState(
    bilinenSira != null ? bilinenSira.toLocaleString("tr-TR") : "",
  );
  const [tur, setTur] = useState(bilinenTur);
  const [sira, setSira] = useState<number | null>(bilinenSira);
  const [facetler, setFacetler] = useState<SihirbazFacetleri | null>(null);
  const [yukleniyor, setYukleniyor] = useState(false);
  const [hata, setHata] = useState<string | null>(null);
  // "sihirbaz" hedefinde yönlendirme ve son buton etiketi oturuma göre
  // değişir; oturum facet isteğiyle paralel çözülür (hero-form deseni).
  const [girisli, setGirisli] = useState(false);

  function siralamaDegisti(ham: string) {
    setHata(null);
    const rakamlar = ham.replace(/\D/g, "").slice(0, 7);
    setSiralama(rakamlar ? Number(rakamlar).toLocaleString("tr-TR") : "");
  }

  function adimaGec(yeniAdim: Adim) {
    setYon(ADIM_SIRASI[yeniAdim] > ADIM_SIRASI[adim] ? 1 : -1);
    setGecisBasladi(true);
    setAdim(yeniAdim);
  }

  async function facetYukle(siraDeger: number, turDeger: string) {
    setYukleniyor(true);
    setHata(null);
    try {
      const [res, oturum] = await Promise.all([
        fetch(`/api/facetler?sira=${siraDeger}&tur=${turDeger}`),
        authClient.getSession().catch(() => null),
      ]);
      if (!res.ok) throw new Error();
      const veri = (await res.json()) as { facetler: SihirbazFacetleri };
      setGirisli(Boolean(oturum?.data?.user));
      setSira(siraDeger);
      setTur(turDeger);
      setFacetler(veri.facetler);
      adimaGec("sihirbaz");
      olay("sira_girildi", {
        kaynak: duzenle ? "duzenle" : "kapi",
        tur: turDeger,
        sira_kovasi: siraKovasi(siraDeger),
      });
    } catch {
      setHata("Bir şeyler ters gitti, tekrar dener misin?");
    } finally {
      setYukleniyor(false);
    }
  }

  async function giristenIlerle() {
    if (sira != null) {
      await facetYukle(sira, tur);
      return;
    }
    adimaGec("sira");
    preloadSihirbazAdimlar();
  }

  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;
    }
    await facetYukle(value, tur);
  }

  function secimleriTamamla(secimler: SihirbazSecimleri) {
    if (sira == null) return;
    const yeniProfil: TercihProfili = { sira, tur, secimler };
    tercihProfiliYaz(yeniProfil);
    const bekleyenVar = Boolean(bekleyen);
    const yonlendir = profilTamamlandi(yeniProfil, girisli);
    // "sihirbaz" hedefinde akış /sonuc'ta devam eder (üretim ya da giriş
    // paneli); "kaydedildi" toast'ı akış bitti izlenimi verirdi.
    if (!duzenle && !bekleyenVar && hedef !== "sihirbaz") {
      toast.success("Tercihlerin kaydedildi.");
    }
    // Düzenlemede replace: aynı /sonuc sayfasında sira/tur değişince geçmiş
    // şişmesin; ilk kurulumda push ile hedefe gitsin.
    if (yonlendir) {
      if (duzenle) router.replace(yonlendir);
      else router.push(yonlendir);
    }
  }

  const panelYuksekligi =
    gecisBasladi && panelOlculeri.height > 0 ? panelOlculeri.height : "auto";

  return (
    <TransitionPanel
      activeIndex={ADIM_SIRASI[adim]}
      custom={yon}
      variants={{
        enter: (gecisYonu: number) => ({
          x: hareketiAzalt ? 0 : gecisYonu > 0 ? "100%" : "-100%",
          opacity: 0,
          height: panelYuksekligi,
          position: "relative",
        }),
        center: {
          zIndex: 1,
          x: 0,
          opacity: 1,
          height: panelYuksekligi,
        },
        exit: (gecisYonu: number) => ({
          zIndex: 0,
          x: hareketiAzalt ? 0 : gecisYonu < 0 ? "100%" : "-100%",
          opacity: 0,
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
        }),
      }}
      transition={
        hareketiAzalt
          ? {
              opacity: { duration: 0.12 },
              x: { duration: 0 },
              height: { duration: 0 },
            }
          : {
              x: { type: "spring", stiffness: 300, damping: 30 },
              height: { type: "spring", stiffness: 300, damping: 30 },
              opacity: { duration: 0.2 },
            }
      }
    >
      <div ref={panelRef} className="flex flex-col gap-5 px-px">
        <div>
          {duzenle ? (
            <p className="text-xs font-semibold uppercase tracking-wide text-primary">
              Tercihlerini güncelle
            </p>
          ) : null}
          <h2 className="mt-2 font-heading text-2xl font-bold text-slate-900 first:mt-0">
            {duzenle
              ? "Seçimlerini değiştir"
              : "Tercihine ışık tutabilmemiz için önce ne istediğini öğrenelim"}
          </h2>
          <p className="mt-3 max-w-xl text-sm leading-6 text-slate-600">
            {duzenle
              ? "İlgi alanların, şehirlerin veya önceliklerin değiştiyse güncelle. Mevcut programların listede kalır; yalnızca değerlendirmeler yenilenir."
              : "Sadece sıralamana uyan bir liste değil, ne istediğine de uyan bir tercih listesi kurmak istiyoruz. Birkaç kısa seçim yap; eklediğin programların sana ne kadar uyduğunu birlikte değerlendirelim."}
          </p>
          {bekleyen ? (
            <p className="mt-3 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700">
              Bekleyen program:{" "}
              <span className="font-semibold">{bekleyen.program.isim}</span>
              <span className="text-slate-500">
                {" "}
                · {bekleyen.program.universite}
              </span>
            </p>
          ) : null}
        </div>
        <div className="flex flex-wrap items-center justify-end gap-2 border-t border-slate-100 pt-4">
          <Button
            type="button"
            variant="ghost"
            onClick={profilKapisiniKapat}
            className="cursor-pointer"
          >
            Vazgeç
          </Button>
          <Button
            type="button"
            disabled={yukleniyor}
            onClick={() => void giristenIlerle()}
            className="cursor-pointer bg-orange-500 text-white hover:bg-orange-600"
          >
            {yukleniyor ? "Hazırlanıyor…" : "Tercihlerimi belirle"}
            <ArrowRight className="size-4" aria-hidden />
          </Button>
        </div>
      </div>

      <form
        ref={panelRef}
        onSubmit={siraGonder}
        className="flex flex-col gap-5 px-px"
      >
        <div>
          {duzenle ? (
            <p className="text-xs font-semibold uppercase tracking-wide text-primary">
              Sıralama ve tercihler
            </p>
          ) : null}
          <h2 className="mt-2 font-heading text-xl font-bold text-slate-900 first:mt-0">
            {duzenle
              ? "Yeni sıralaman nedir?"
              : "Başarı sıralaman nedir?"}
          </h2>
          <p className="mt-1 text-sm text-slate-500">
            {duzenle
              ? "Sıralamanı veya puan türünü güncelle; sonraki adımda tercihlerini de değiştirebilirsin. Listedeki programlar silinmez."
              : "Risk ve erişilebilir programlar sıralamana göre hesaplanır."}
          </p>
        </div>
        <div className="flex flex-col gap-2">
          <label
            htmlFor="kapisi-siralama"
            className="text-xs font-semibold uppercase tracking-wide text-slate-400"
          >
            Başarı sıralaması ve puan türü
          </label>
          <div className="flex flex-col gap-2 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="kapisi-siralama"
                inputMode="numeric"
                autoComplete="off"
                placeholder="ör. 85.000"
                value={siralama}
                onChange={(e) => siralamaDegisti(e.target.value)}
                onFocus={preloadSihirbazAdimlar}
                aria-invalid={hata ? true : undefined}
                aria-describedby={hata ? "kapisi-siralama-hata" : undefined}
                className="h-12 bg-background pl-11 text-base"
              />
            </div>
            <Select value={tur} onValueChange={setTur}>
              <SelectTrigger
                aria-label="Puan türü"
                className="w-full bg-background data-[size=default]:h-12 sm:w-44"
              >
                <SelectValue placeholder="Puan türü" />
              </SelectTrigger>
              <SelectContent>
                {PUAN_TURLERI_SECENEK.map((t) => (
                  <SelectItem key={t.deger} value={t.deger}>
                    {t.etiket}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          {hata ? (
            <p
              id="kapisi-siralama-hata"
              role="alert"
              className="text-sm font-medium text-red-600"
            >
              {hata}
            </p>
          ) : null}
        </div>
        <div className="flex flex-wrap items-center justify-between gap-2 border-t border-slate-100 pt-4">
          <Button
            type="button"
            variant="ghost"
            onClick={() =>
              // Doğrudan sıralama adımıyla açıldıysa tanıtım adımı hiç
              // görülmedi; "Geri" yerine kapıyı kapatmak beklenen davranış.
              duzenle || dogrudanSira ? profilKapisiniKapat() : adimaGec("giris")
            }
            className="cursor-pointer"
          >
            {duzenle || dogrudanSira ? "Vazgeç" : "Geri"}
          </Button>
          <Button
            type="submit"
            disabled={yukleniyor}
            className="cursor-pointer bg-orange-500 text-white hover:bg-orange-600"
          >
            {yukleniyor ? "Hazırlanıyor…" : "Tercihlere geç"}
            <ArrowRight className="size-4" aria-hidden />
          </Button>
        </div>
      </form>

      <div ref={panelRef} className="px-px">
        {facetler && sira != null ? (
          <div className="flex flex-col gap-4">
            {hata ? (
              <p role="alert" className="text-sm font-medium text-red-600">
                {hata}
              </p>
            ) : null}
            <SihirbazAdimlarLazy
              key={`${sira}-${tur}-${duzenle ? "duzenle" : "yeni"}`}
              sira={sira}
              tur={tur}
              facetler={facetler}
              baslangicSecimler={duzenle ? profil?.secimler : null}
              sonButonEtiketi={
                duzenle
                  ? "Tercihlerimi güncelle"
                  : bekleyen
                    ? "Kaydet ve programı ekle"
                    : hedef === "sihirbaz"
                      ? girisli
                        ? "Yapay Zeka listemi kur (3 kredi)"
                        : "Ücretsiz tablonu gör"
                      : "Tercihlerimi kaydet"
              }
              onTamamla={secimleriTamamla}
            />
          </div>
        ) : null}
      </div>
    </TransitionPanel>
  );
}
