import type { RevolutionSign } from "../../model/slotTypes";
import type { SlotStatusKey } from "./slotFilters";

/** Сортировка таблицы слотов: время (порядок расчёта) · вклад (ранжирование по покрытию) · крен. */
export type SlotSortMode = "time" | "gain" | "roll";

type SlotFilterBarProps = {
  /** Счётчики статусов по окну суток (до статус-фильтра) — стабильны при переключении чипов. */
  statusCounts: Record<SlotStatusKey, number>;
  statusFilter: ReadonlySet<SlotStatusKey>;
  onToggleStatus: (key: SlotStatusKey) => void;
  /** Список КА в наборе (отсортирован). Чип КА не показываем, если спутник один. */
  satellites: number[];
  satFilter: ReadonlySet<number>;
  onToggleSat: (id: number) => void;
  branchFilter: ReadonlySet<RevolutionSign>;
  onToggleBranch: (branch: RevolutionSign) => void;
  /** Текущая сортировка таблицы (одиночный выбор). */
  sortMode: SlotSortMode;
  onSortMode: (mode: SlotSortMode) => void;
  /** Доступна ли сортировка «по вкладу» (есть геометрия заявки) — иначе чип заблокирован. */
  gainAvailable: boolean;
  /** Фильтры в дефолте (всё видно) — тогда «Сбросить» не показываем. */
  isDefault: boolean;
  onReset: () => void;
};

const STATUS_META: { key: SlotStatusKey; label: string; variant: string }[] = [
  { key: "free", label: "свободен", variant: "" },
  { key: "booked", label: "бронь", variant: " is-booked" },
  { key: "occupied", label: "недоступен", variant: " is-occupied" },
];

const SORT_META: { key: SlotSortMode; label: string }[] = [
  { key: "time", label: "время" },
  { key: "gain", label: "вклад" },
  { key: "roll", label: "крен" },
];

/**
 * Панель фильтров отображения слотов (видимость). Сужает И таблицу, И карту через единый
 * filteredSlots. Стоит над строкой выбора: сначала сужаешь, потом отбираешь. Чипы —
 * настоящие кнопки aria-pressed; цвет статус-чипа совпадает с бейджем статуса в таблице,
 * на каждом текст-метка (не только цвет — дальтоники).
 */
export function SlotFilterBar({
  statusCounts,
  statusFilter,
  onToggleStatus,
  satellites,
  satFilter,
  onToggleSat,
  branchFilter,
  onToggleBranch,
  sortMode,
  onSortMode,
  gainAvailable,
  isDefault,
  onReset,
}: SlotFilterBarProps) {
  return (
    <div className="tgu-slots-filterbar">
      <div className="tgu-slots-filterbar__group">
        <span className="tgu-slots-filterbar__label">Статус</span>
        {STATUS_META.map(({ key, label, variant }) => {
          const active = statusFilter.has(key);
          return (
            <button
              key={key}
              type="button"
              aria-pressed={active}
              className={`tgu-slots-chip${variant}${active ? " is-active" : ""}`}
              onClick={() => onToggleStatus(key)}
            >
              {label} {statusCounts[key]}
            </button>
          );
        })}
      </div>

      {satellites.length > 1 && (
        <div className="tgu-slots-filterbar__group">
          <span className="tgu-slots-filterbar__label">КА</span>
          {satellites.map((id) => {
            const active = satFilter.has(id);
            return (
              <button
                key={id}
                type="button"
                aria-pressed={active}
                className={`tgu-slots-chip${active ? " is-active" : ""}`}
                onClick={() => onToggleSat(id)}
              >
                {id}
              </button>
            );
          })}
        </div>
      )}

      <div className="tgu-slots-filterbar__group">
        <span className="tgu-slots-filterbar__label">Ветвь</span>
        {(["ASC", "DESC"] as RevolutionSign[]).map((branch) => {
          const active = branchFilter.has(branch);
          return (
            <button
              key={branch}
              type="button"
              aria-pressed={active}
              className={`tgu-slots-chip${active ? " is-active" : ""}`}
              onClick={() => onToggleBranch(branch)}
            >
              {branch === "ASC" ? "восх" : "нисх"}
            </button>
          );
        })}
      </div>

      <div className="tgu-slots-filterbar__group">
        <span className="tgu-slots-filterbar__label">Сортировка</span>
        {SORT_META.map(({ key, label }) => {
          const active = sortMode === key;
          const disabled = key === "gain" && !gainAvailable;
          return (
            <button
              key={key}
              type="button"
              aria-pressed={active}
              className={`tgu-slots-chip${active ? " is-active" : ""}`}
              disabled={disabled}
              title={disabled ? "Сортировка по вкладу недоступна — у заявки нет геометрии" : undefined}
              onClick={() => onSortMode(key)}
            >
              {label}
            </button>
          );
        })}
      </div>

      {!isDefault && (
        <button type="button" className="tgu-button tgu-button--sm tgu-slots-filterbar__reset" onClick={onReset}>
          Сбросить фильтры
        </button>
      )}
    </div>
  );
}
