"use client";

import { Check, Plus } from "lucide-react";
import { toast } from "sonner";
import type { Program } from "@/types/yokatlas";
import { olay } from "@/lib/analitik";
import {
  listedeMi,
  MANUEL_LISTE_MAX,
  useManuelListe,
  type ManuelKaynak,
} from "../liste-store";
import { programEkleIste } from "../hooks/use-tercih-profili";

type ProgramOzet = Pick<
  Program,
  | "id"
  | "isim"
  | "universite"
  | "il"
  | "unitur"
  | "tur"
  | "sira2025"
  | "sira2024"
>;

export function ProgramEkleButonu({
  program,
  kaynak = "sonuc",
  adaySira,
  adayTur,
  className = "",
}: {
  program: ProgramOzet;
  kaynak?: ManuelKaynak;
  adaySira?: number;
  adayTur?: string;
  className?: string;
}) {
  const liste = useManuelListe();
  const listede = liste.some((t) => t.id === program.id) || listedeMi(program.id);
  const doldu = liste.length >= MANUEL_LISTE_MAX;

  function handleClick(e: React.MouseEvent) {
    e.preventDefault();
    e.stopPropagation();
    const sonuc = programEkleIste({ program, kaynak, adaySira, adayTur });
    if (sonuc.doldu) {
      toast.info(`Listen ${MANUEL_LISTE_MAX} tercihe ulaştı.`);
    } else if (sonuc.zatenVar) {
      toast.info("Bu program zaten seçtiklerinde.");
    } else {
      olay("program_eklendi", { kaynak });
    }
  }

  return (
    <button
      type="button"
      disabled={listede || doldu}
      onClick={handleClick}
      title={
        listede
          ? "Zaten seçtiklerinde"
          : doldu
            ? `Seçtiklerin dolu (${MANUEL_LISTE_MAX}/${MANUEL_LISTE_MAX})`
            : "Seçtiklerime ekle"
      }
      className={`inline-flex size-11 min-h-11 min-w-11 cursor-pointer items-center justify-center rounded-full border transition-[background-color,border-color,color,transform] duration-150 active:scale-[0.92] disabled:cursor-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
        listede
          ? "border-emerald-200 bg-emerald-50 text-emerald-600"
          : "border-slate-200 bg-white text-slate-500 hover:border-primary hover:bg-primary/5 hover:text-primary disabled:opacity-40"
      } ${className}`}
    >
      {listede ? (
        <Check className="size-4" aria-hidden />
      ) : (
        <Plus className="size-4" aria-hidden />
      )}
      <span className="sr-only">
        {listede
          ? `${program.isim} listende`
          : doldu
            ? `Listen ${MANUEL_LISTE_MAX} tercihe ulaştı`
            : `${program.isim} seçtiklerine ekle`}
      </span>
    </button>
  );
}
