"use client";

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

interface ScheduleFiltersProps {
  typeDots: Record<string, string>;
  types: string[];
  hasAnySlots: boolean;
  hasAnyRecruiting: boolean;
  filterType: string | null;
  setFilterType: (type: string | null) => void;
  filterTrainer: string | null;
  filterStatus: StatusFilter;
  setFilterStatus: (status: StatusFilter) => void;
  filterTime: TimeFilter;
  setFilterTime: (time: TimeFilter) => void;
  availableDays: { day: string; dayShort: string }[];
  filterDaySet: Set<string>;
  toggleDay: (day: string) => void;
  hasActiveFilter: boolean;
  clearFilters: () => void;
}

export function ScheduleFilters({
  typeDots,
  types,
  hasAnySlots,
  hasAnyRecruiting,
  filterType,
  setFilterType,
  filterTrainer,
  filterStatus,
  setFilterStatus,
  filterTime,
  setFilterTime,
  availableDays,
  filterDaySet,
  toggleDay,
  hasActiveFilter,
  clearFilters,
}: ScheduleFiltersProps) {
  const [showWhen, setShowWhen] = useState(false);
  const hasTimeFilter = filterDaySet.size > 0 || filterTime !== "all";

  return (
    <>
      {/* Single row: type + status + when + active trainer indicator + clear */}
      <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" />

        {/* When dropdown toggle */}
        <button
          onClick={() => setShowWhen(!showWhen)}
          className={`${pillBase} ${hasTimeFilter ? pillActive : pillInactive}`}
        >
          <Clock size={11} />
          Когда
          <ChevronDown size={10} className={`transition-transform duration-200 ${showWhen ? "rotate-180" : ""}`} />
        </button>

        {/* Active trainer indicator (set by clicking trainer in cards) */}
        {filterTrainer && (
          <span className={`${pillBase} ${pillActive}`}>
            <User size={11} />
            {filterTrainer}
          </span>
        )}

        {/* 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>

      {/* When panel — expandable: days + time presets */}
      {showWhen && (
        <div className="mt-2 hidden sm:flex items-center justify-center gap-1.5 flex-wrap">
          <Calendar size={11} className="text-neutral-400 dark:text-white/25" />
          {availableDays.map(({ day, dayShort }) => (
            <button
              key={day}
              onClick={() => toggleDay(day)}
              className={`${pillBase} ${filterDaySet.has(day) ? pillActive : pillInactive}`}
            >
              {dayShort}
            </button>
          ))}

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

          {TIME_PRESETS.map((preset) => (
            <button
              key={preset.value}
              onClick={() => setFilterTime(filterTime === preset.value ? "all" : preset.value)}
              className={`${pillBase} ${filterTime === preset.value ? pillActive : pillInactive}`}
            >
              {preset.label}
            </button>
          ))}
        </div>
      )}
    </>
  );
}
