"use client";

import { useEffect, useState } from "react";

type Slot = {
  id: string;
  slug: string;
  label: string;
  sport: string;
  time: string;
  capacity: number;
  booked: number;
  isFull: boolean;
};

export default function Availability({
  sport,
}: {
  sport: "muay-thai" | "yoga";
}) {
  const [slots, setSlots] = useState<Slot[]>([]);

  useEffect(() => {
    fetch("/api/classes")
      .then((r) => r.json())
      .then((d) =>
        setSlots(
          (Array.isArray(d) ? d : []).filter((s: Slot) => s.sport === sport)
        )
      )
      .catch(() => {});
  }, [sport]);

  if (slots.length === 0) return null;

  return (
    <div className="space-y-2">
      {slots.map((slot) => {
        const remaining = Math.max(0, slot.capacity - slot.booked);
        const isFull = slot.isFull || remaining === 0;
        return (
          <div
            key={slot.id}
            className="flex items-center justify-between rounded-xl border border-white/10 bg-white/5 px-4 py-3"
          >
            <div>
              <p className="font-semibold">{slot.label}</p>
              <p className="text-xs text-white/50">{slot.time}</p>
            </div>
            {isFull ? (
              <span className="rounded-full bg-red-500/20 px-3 py-1 text-xs font-bold text-red-300">
                ❌ COMPLET
              </span>
            ) : remaining <= 3 ? (
              <span className="rounded-full bg-amber-500/20 px-3 py-1 text-xs font-bold text-amber-300">
                ⚡ Plus que {remaining}{" "}
                place{remaining > 1 ? "s" : ""} !
              </span>
            ) : (
              <span className="rounded-full bg-emerald-500/20 px-3 py-1 text-xs font-bold text-emerald-300">
                {remaining} places libres
              </span>
            )}
          </div>
        );
      })}
    </div>
  );
}