"use client";

// Manuel 24'lük listenin alt çekmecesi (bottom drawer). Layout'ta bir kez
// monte edilir; navbar'daki Seçtiklerim butonu açar/kapatır.
//
// Vaul drawer: tutamaktan aşağı swipe ile kapanır (handleOnly — satır
// sürükleme/silme jestleriyle çakışmasın diye). Escape ve overlay tıklaması
// da kapatır.
//
// Satır sıralama yalnız grip tutamağından başlar (dragControls); gövdeyi
// sağa kaydırmak silme jesti. prefers-reduced-motion: satır animasyonları
// sadeleşir; X butonu her durumda kalır.

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { PixelField } from "@/components/pixel-decor";
import { UniLogo } from "@/components/uni-logo";
import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
} from "@/components/ui/drawer";
import {
  ArrowRight,
  GripVertical,
  ListChecks,
  Plus,
  Trash2,
  X,
} from "lucide-react";
import {
  AnimatePresence,
  motion,
  Reorder,
  useDragControls,
  useMotionValue,
  useTransform,
  type PanInfo,
} from "motion/react";
import { RISK_ETIKET, type RiskSeviyesi } from "@/lib/risk";
import { bolumBazAdi, turkishSlugify } from "@/lib/slug";
import { olay } from "@/lib/analitik";
import { CihazCifti, IsletimSistemiLogosu } from "./cihaz-ikonlari";
import { sonucaGitIste } from "../hooks/use-tercih-profili";
import { useOturumDurumu } from "../liste-oturum-sinyali";
import { useGirisUrl } from "../liste-giris-url";
import {
  MANUEL_LISTE_MAX,
  cekmeceAc,
  cekmeceKapat,
  cikar,
  temizle,
  useCekmeceAcik,
  useManuelListe,
  yenidenSirala,
  type ManuelTercih,
} from "../liste-store";

// Slug kuralları katalog.ts'tekiyle aynı (bolumBazAdi/uniAdiNormalize +
// turkishSlugify); katalog haritaları DB'deki tüm isim/universite
// değerlerinden kurulduğu için bu linkler var olan sayfalara çıkar. Harita
// verisini client bundle'a çekmemek için burada tekrarlanır (bkz.
// program-tablosu'ndaki uniSayfaSlug).
function bolumHref(isim: string): string {
  return `/bolum/${turkishSlugify(bolumBazAdi(isim))}`;
}
function uniHref(ad: string): string {
  return `/universite/${turkishSlugify(ad.replace(/\s*\([^)]*\)\s*$/, "").trim())}`;
}

// Risk renk dili ürünün geri kalanıyla birebir aynı (bkz. rapor-listesi)
const RISK_NOKTA: Record<RiskSeviyesi, string> = {
  guvenli: "bg-emerald-500",
  "az-riskli": "bg-amber-500",
  riskli: "bg-red-500",
};

export function ListeCekmecesi() {
  const router = useRouter();
  const acik = useCekmeceAcik();
  const liste = useManuelListe();
  const girisli = useOturumDurumu();
  const girisUrl = useGirisUrl();
  // Giriş animasyonu bitmeden satır layout projeksiyonu kapalı — transform'lu
  // drawer içinde erken ölçüm satırları kaydırıyordu
  const [oturdu, setOturdu] = useState(false);

  const doluluk = Math.round((liste.length / MANUEL_LISTE_MAX) * 100);

  function programaEkleGit() {
    cekmeceKapat();
    const { href } = sonucaGitIste();
    if (href) router.push(href);
  }

  return (
    <Drawer
      open={acik}
      onOpenChange={(v) => {
        if (v) cekmeceAc();
        else {
          setOturdu(false);
          cekmeceKapat();
        }
      }}
      handleOnly
      onAnimationEnd={(open) => setOturdu(open)}
    >
      <DrawerContent
        data-lenis-prevent
        className="min-h-0 max-h-[92dvh] bg-white sm:mx-auto sm:max-w-2xl sm:border-x sm:border-slate-200 sm:shadow-2xl"
      >
        <DrawerHeader className="border-b border-slate-100 text-left md:text-left">
          <div className="flex items-center justify-between gap-3">
            <DrawerTitle className="flex items-center gap-2 font-heading text-lg font-bold">
              <ListChecks className="size-5 text-primary" aria-hidden />
              Kendi Listem
              <span className="font-heading text-sm font-bold tabular-nums text-slate-400">
                {liste.length}/{MANUEL_LISTE_MAX}
              </span>
            </DrawerTitle>
            <div className="flex items-center gap-1">
              {liste.length > 0 ? (
                <button
                  type="button"
                  onClick={temizle}
                  title="Listeyi temizle"
                  className="cursor-pointer rounded-full p-2 text-slate-400 transition-colors duration-200 hover:bg-slate-100 hover:text-red-500"
                >
                  <Trash2 className="size-4" aria-hidden />
                  <span className="sr-only">Listeyi temizle</span>
                </button>
              ) : null}
              <DrawerClose className="cursor-pointer rounded-full p-2 text-slate-400 transition-colors duration-200 hover:bg-slate-100 hover:text-slate-600">
                <X className="size-4" aria-hidden />
                <span className="sr-only">Kapat</span>
              </DrawerClose>
            </div>
          </div>
          <div
            className="mt-3 h-1.5 overflow-hidden rounded-full bg-slate-100"
            role="progressbar"
            aria-valuenow={liste.length}
            aria-valuemin={0}
            aria-valuemax={MANUEL_LISTE_MAX}
            aria-label="Liste doluluğu"
          >
            <motion.div
              className="h-full rounded-full bg-primary"
              animate={{ width: `${doluluk}%` }}
              transition={{ type: "spring", duration: 0.5, bounce: 0 }}
            />
          </div>
          <ul
            className="mt-2.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-slate-500"
            aria-label="Yerleşme riski renkleri"
          >
            {(
              [
                ["guvenli", "yeşil güvenli"],
                ["az-riskli", "turuncu az riskli"],
                ["riskli", "kırmızı riskli"],
              ] as const
            ).map(([seviye, aciklama]) => (
              <li key={seviye} className="inline-flex items-center gap-1.5">
                <span
                  className={`size-2 shrink-0 rounded-full ${RISK_NOKTA[seviye]}`}
                  aria-hidden
                />
                <span>{aciklama}</span>
              </li>
            ))}
          </ul>
        </DrawerHeader>

        <div
          data-lenis-prevent
          className="min-h-0 flex-1 overflow-x-hidden overflow-y-auto px-4 py-4"
        >
          {liste.length === 0 ? (
            <div className="relative flex flex-col items-center justify-center gap-2 overflow-hidden px-4 py-16 text-center">
              <ListChecks
                className="pointer-events-none absolute top-1/2 left-1/2 size-40 -translate-x-1/2 -translate-y-[55%] text-slate-300/70 select-none [mask-image:linear-gradient(to_bottom,black_20%,transparent_85%)] [-webkit-mask-image:linear-gradient(to_bottom,black_20%,transparent_85%)]"
                strokeWidth={1.25}
                aria-hidden
              />
              <p className="relative font-heading text-sm font-bold text-slate-700">
                Henüz program seçmedin
              </p>
              <p className="relative text-xs leading-relaxed text-slate-500">
                Sonuç sayfasından program ekleyerek listeni doldurmaya başla.
              </p>
            </div>
          ) : (
            <Reorder.Group
              axis="y"
              values={liste}
              onReorder={yenidenSirala}
              layoutScroll
              as="ol"
            >
              <AnimatePresence initial={false}>
                {liste.map((t, i) => (
                  <CekmeceSatiri
                    key={t.id}
                    tercih={t}
                    sira={i + 1}
                    projeksiyonAcik={oturdu}
                  />
                ))}
              </AnimatePresence>
            </Reorder.Group>
          )}

          {liste.length < MANUEL_LISTE_MAX ? (
            <button
              type="button"
              onClick={programaEkleGit}
              className={`flex h-12 w-full cursor-pointer items-center justify-center rounded-full border border-dashed border-slate-300 text-slate-400 transition-colors duration-200 hover:border-primary/50 hover:bg-primary/5 hover:text-primary active:scale-[0.98] ${
                liste.length > 0 ? "mt-2" : "mt-1"
              }`}
            >
              <Plus className="size-5" aria-hidden />
              <span className="sr-only">Sonuç sayfasından program ekle</span>
            </button>
          ) : null}
        </div>

        <DrawerFooter className="border-t border-slate-100 pt-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
          {/* C2 kalıcı satır: girişsiz kullanıcıya listenin uçucu olduğu
              hatırlatılır; giriş doğal "kaydet" gerekçesi olarak sunulur. */}
          {girisli === false ? (
            <div className="mb-3 flex items-center justify-between gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-left">
              <p className="min-w-0 text-xs leading-relaxed text-slate-600">
                {/* O anki işletim sisteminin logosu — "bu tarayıcıda"yı somutlaştırır */}
                <IsletimSistemiLogosu className="mr-1.5 inline size-3.5 align-[-3px] text-slate-700" />
                <span className="font-semibold text-slate-800">
                  Listen yalnızca bu tarayıcıda.
                </span>{" "}
                Giriş yap; her cihazdan eriş{" "}
                <CihazCifti className="align-[-3px] text-slate-400" />
              </p>
              <Link
                href={girisUrl}
                onClick={() => {
                  cekmeceKapat();
                  olay("giris_cta_tiklandi", { kaynak: "liste_cekmecesi" });
                }}
                className="inline-flex shrink-0 items-center gap-1 text-xs font-semibold text-primary transition-colors duration-200 hover:text-primary/80"
              >
                Giriş yap, kaydet
                <ArrowRight className="size-3.5" aria-hidden />
              </Link>
            </div>
          ) : null}
          {/* Ana sayfadaki final CTA panelinin kompakt hâli: koyu primary
              zemin + kenarlara doğru yoğunlaşan piksel dokusu (PixelField) */}
          <div className="relative isolate flex items-center justify-between gap-4 overflow-hidden rounded-2xl bg-primary px-5 py-5 text-left text-white">
            <div
              aria-hidden
              className="pointer-events-none absolute inset-x-0 -inset-y-6 -z-10 text-white"
            >
              <PixelField seed={8} />
            </div>
            <div className="min-w-0">
              <p className="font-heading text-2xl font-bold">
                Risk analizini biz yaptık
              </p>
              <p className="mt-1 truncate text-sm leading-relaxed text-white">
                Her seçimin yerleşme riski hazır — son kararı sen ver.
              </p>
            </div>
            <Button
              asChild
              size="lg"
              className="shrink-0 cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600"
            >
              <Link href="/listem" onClick={cekmeceKapat}>
                Listemde aç
                <ArrowRight data-icon="inline-end" />
              </Link>
            </Button>
          </div>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}

/** Sağa kaydırıp silme eşiği (px) — bunu aşınca satır listeden çıkar */
const SIL_ESIK = 90;

function CekmeceSatiri({
  tercih,
  sira,
  projeksiyonAcik,
}: {
  tercih: ManuelTercih;
  sira: number;
  projeksiyonAcik: boolean;
}) {
  const siraKontrol = useDragControls();

  // Kartın yatay konumu: sil bandının görünürlüğü buna bağlı
  const x = useMotionValue(0);
  const silGorunur = useTransform(x, [0, SIL_ESIK / 2], [0, 1]);

  const kaydirinca = (_: unknown, info: PanInfo) => {
    if (
      info.offset.x > SIL_ESIK ||
      (info.offset.x > 32 && info.velocity.x > 500)
    ) {
      cikar(tercih.id);
    }
  };

  return (
    <Reorder.Item
      value={tercih}
      as="li"
      layout={projeksiyonAcik ? "position" : undefined}
      layoutId={projeksiyonAcik ? `manuel-tercih-${tercih.id}` : undefined}
      dragListener={false}
      dragControls={siraKontrol}
      initial={{ opacity: 0, y: 8, scale: 0.97 }}
      animate={{ opacity: 1, y: 0, scale: 1 }}
      exit={{ opacity: 0, x: 96, transition: { duration: 0.18 } }}
      transition={{ type: "spring", duration: 0.4, bounce: 0 }}
      whileDrag={{ scale: 1.03, zIndex: 10 }}
      className="relative mb-2 select-none last:mb-0"
    >
      {/* Sil bandı: kart sağa kaydıkça altından görünür */}
      <motion.div
        style={{ opacity: silGorunur }}
        className="absolute inset-0 flex items-center rounded-xl bg-red-500 pl-4"
        aria-hidden
      >
        <Trash2 className="size-4 text-white" />
      </motion.div>

      {/* Kart gövdesi: sağa kaydırılabilir (sola kilitli) */}
      <motion.div
        drag="x"
        style={{ x }}
        dragConstraints={{ left: 0, right: 0 }}
        dragElastic={{ left: 0, right: 0.7 }}
        dragSnapToOrigin
        onDragEnd={kaydirinca}
        className="relative flex items-center gap-2.5 rounded-xl border border-slate-200 bg-white px-3 py-2.5"
      >
        <button
          type="button"
          onPointerDown={(e) => {
            e.stopPropagation(); // yatay kaydırmayı tetiklemesin
            siraKontrol.start(e);
          }}
          className="-m-1 shrink-0 cursor-grab touch-none rounded p-1 text-slate-300 active:cursor-grabbing"
        >
          <GripVertical className="size-4" aria-hidden />
          <span className="sr-only">{tercih.isim} sırasını değiştir</span>
        </button>
        <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-slate-100 font-heading text-[11px] font-bold tabular-nums">
          {sira}
        </span>
        <UniLogo ad={tercih.universite} boy="xs" />
        <span className="min-w-0 flex-1">
          <Link
            href={bolumHref(tercih.isim)}
            onClick={cekmeceKapat}
            onPointerDown={(e) => e.stopPropagation()} // kaydırmayı tetiklemesin
            className="block truncate text-sm font-semibold hover:text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          >
            {tercih.isim}
          </Link>
          <span className="block truncate text-xs text-slate-500">
            <Link
              href={uniHref(tercih.universite)}
              onClick={cekmeceKapat}
              onPointerDown={(e) => e.stopPropagation()} // kaydırmayı tetiklemesin
              title={`${tercih.universite} taban puanları sayfası`}
              className="hover:text-primary hover:underline"
            >
              {tercih.universite}
            </Link>
            {tercih.il ? ` · ${tercih.il.toLocaleLowerCase("tr-TR")}` : ""}
          </span>
        </span>
        {tercih.efektifSira != null ? (
          <span className="shrink-0 text-xs tabular-nums text-slate-500">
            ~{tercih.efektifSira.toLocaleString("tr-TR")}.
          </span>
        ) : null}
        {tercih.risk ? (
          <span
            className={`size-2.5 shrink-0 rounded-full ${RISK_NOKTA[tercih.risk]}`}
            aria-label={RISK_ETIKET[tercih.risk]}
          />
        ) : null}
        <button
          type="button"
          onClick={() => cikar(tercih.id)}
          onPointerDown={(e) => e.stopPropagation()} // kaydırmayı tetiklemesin
          className="shrink-0 cursor-pointer rounded-full p-1.5 text-slate-300 transition-colors duration-200 hover:bg-slate-100 hover:text-red-500"
        >
          <X className="size-3.5" aria-hidden />
          <span className="sr-only">{tercih.isim} listeden çıkar</span>
        </button>
      </motion.div>
    </Reorder.Item>
  );
}
