"use client";

// Navbar'daki "Seçtiklerim" butonu: elle kurulan aday listesinin sayacını
// taşır, tıklanınca çekmeceyi açar/kapatır. ("Listem" adı Yapay Zeka raporunun
// yaşadığı /listem sayfasına aittir — isim çakışmasın.)

import { ListChecks } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import {
  MANUEL_LISTE_MAX,
  cekmeceDegistir,
  useCekmeceAcik,
  useManuelListe,
} from "../liste-store";

export function ListemButonu() {
  const liste = useManuelListe();
  const acik = useCekmeceAcik();
  const azMotion = useReducedMotion();

  // Liste boşken buton gürültü: tabloya (＋) ulaşmamış ziyaretçiye "0/24"
  // bir şey ifade etmez. İlk program eklenince belirir, liste boşalınca gider.
  if (liste.length === 0) return null;

  return (
    <button
      type="button"
      onClick={cekmeceDegistir}
      aria-expanded={acik}
      aria-label={`Kendi listem — ${liste.length}/${MANUEL_LISTE_MAX} program`}
      title="Tablodan seçtiğin programlar"
      className="relative inline-flex h-9 cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-full border border-slate-200 bg-white px-3 text-xs font-semibold text-slate-700 transition-[color,background-color,border-color,transform] duration-200 hover:border-slate-300 hover:bg-slate-50 active:scale-[0.97] sm:h-12 sm:gap-2 sm:px-5 sm:text-sm"
    >
      <ListChecks className="size-3.5 text-primary sm:size-4" aria-hidden />
      {/* lg–xl: ortadaki nav ile yer dar — metin gizli, ikon+rozet kalır */}
      <span className="hidden sm:inline lg:hidden xl:inline">Kendi Listem</span>
      {liste.length > 0 ? (
        // key=length: her eklemede rozet yeniden doğar ve spring ile oturur
        <motion.span
          key={liste.length}
          initial={azMotion ? false : { scale: 0.6 }}
          animate={{ scale: 1 }}
          transition={{ type: "spring", duration: 0.4, bounce: 0.45 }}
          className="flex size-5 items-center justify-center rounded-full bg-orange-500 font-heading text-[11px] font-bold tabular-nums text-white"
        >
          {liste.length}
        </motion.span>
      ) : null}
    </button>
  );
}
