"use client";

import { User, X, ChevronDown } from "lucide-react";
import {
  pillBase,
  pillActive,
  pillInactive,
  type StatusFilter,
} from "./constants";

interface ScheduleFiltersProps {
  typeDots: Record<string, string>;
  types: string[];
  trainers: string[];
  hasAnySlots: boolean;
  hasAnyRecruiting: boolean;
  filterType: string | null;
  setFilterType: (type: string | null) => void;
  filterTrainer: string | null;
  setFilterTrainer: (trainer: string | null) => void;
  filterStatus: StatusFilter;
  setFilterStatus: (status: StatusFilter) => void;
  showTrainers: boolean;
  setShowTrainers: (show: boolean) => void;
  hasActiveFilter: boolean;
  clearFilters: () => void;
}

export function ScheduleFilters({
  typeDots,
  types,
  trainers,
  hasAnySlots,
  hasAnyRecruiting,
  filterType,
  setFilterType,
  filterTrainer,
  setFilterTrainer,
  filterStatus,
  setFilterStatus,
  showTrainers,
  setShowTrainers,
  hasActiveFilter,
  clearFilters,
}: ScheduleFiltersProps) {
  return (
    <>
      <div className="mt-5 hidden sm:flex items-center justify-center gap-1.5 flex-wrap">
        {/* Class types */}
        {types.map((type) => (
          <button
            key={type}
            onClick={() => setFilterType(filterType === type ? null : type)}
            className={`${pillBase} ${filterType === type ? pillActive : pillInactive}`}
          >
            <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${typeDots[type] ?? "bg-white/30"}`} />
            {type}
          </button>
        ))}

        {/* Divider */}
        <span className="mx-1 h-4 w-px shrink-0 bg-neutral-200 dark:bg-white/10" />

        {/* Status filters */}
        {hasAnySlots && (
          <button
            onClick={() => setFilterStatus(filterStatus === "hasSlots" ? "all" : "hasSlots")}
            className={`${pillBase} ${filterStatus === "hasSlots" ? "bg-emerald-500/20 text-emerald-700 border border-emerald-500/40 dark:text-emerald-400 dark:border-emerald-500/30" : pillInactive}`}
          >
            <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500" />
            Есть места
          </button>
        )}
        {hasAnyRecruiting && (
          <button
            onClick={() => setFilterStatus(filterStatus === "recruiting" ? "all" : "recruiting")}
            className={`${pillBase} ${filterStatus === "recruiting" ? "bg-sky-500/20 text-sky-700 border border-sky-500/40 dark:text-sky-400 dark:border-sky-500/30" : pillInactive}`}
          >
            <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-sky-500" />
            Набор
          </button>
        )}

        {/* Divider */}
        <span className="mx-1 h-4 w-px shrink-0 bg-neutral-200 dark:bg-white/10" />

        {/* Trainer dropdown toggle */}
        <button
          onClick={() => setShowTrainers(!showTrainers)}
          className={`${pillBase} ${filterTrainer ? pillActive : pillInactive}`}
        >
          <User size={11} />
          {filterTrainer ?? "Тренер"}
          <ChevronDown size={10} className={`transition-transform duration-200 ${showTrainers ? "rotate-180" : ""}`} />
        </button>

        {/* Clear */}
        {hasActiveFilter && (
          <button
            onClick={clearFilters}
            className="inline-flex shrink-0 items-center gap-1 rounded-full px-2.5 py-1 text-[11px] text-neutral-400 hover:text-neutral-600 dark:text-white/25 dark:hover:text-white/50 transition-colors cursor-pointer"
          >
            <X size={11} />
          </button>
        )}
      </div>

      {/* Trainer pills — expandable */}
      {showTrainers && (
        <div className="mt-2 flex flex-wrap items-center justify-center gap-1.5">
          {trainers.map((trainer) => (
            <button
              key={trainer}
              onClick={() => {
                setFilterTrainer(filterTrainer === trainer ? null : trainer);
                setShowTrainers(false);
              }}
              className={`${pillBase} ${filterTrainer === trainer ? pillActive : pillInactive}`}
            >
              {trainer}
            </button>
          ))}
        </div>
      )}
    </>
  );
}
