import type { TguActiveTab } from "../../model/timelineTypes";
import { DateTime24Field } from "../../components/timeFields";

type TguToolbarProps = {
  fromValue: string;
  toValue: string;
  loading: boolean;
  activeTab: TguActiveTab;
  error?: string;
  onTabChange: (tab: TguActiveTab) => void;
  onFromChange: (value: string) => void;
  onToChange: (value: string) => void;
  onApply: () => void;
  onQuickRange: (hours: number) => void;
};

export function TguToolbar({
  fromValue,
  toValue,
  loading,
  activeTab,
  error,
  onTabChange,
  onFromChange,
  onToChange,
  onApply,
  onQuickRange
}: TguToolbarProps) {
  // Глобальный диапазон «С … По» относится только к вкладке «Планы». Остальные вкладки имеют свой
  // источник интервала: «Карта» и «Заявки» — фильтр дат в левой панели, «Комплексный план» — свой
  // диапазон внутри вкладки, «Редактор» отражает выбранный на «Планах» план (его окно задаётся
  // планом), «Группировка» диапазоном не пользуется. Поэтому панель показываем только на «Планах».
  const showRange = activeTab === "timeline";
  return (
    <header className="tgu-toolbar">
      <div className="tgu-toolbar__row">
        <div className="tgu-toolbar__brand">
          <span className="tgu-toolbar__mark" aria-hidden="true" />
          <div>
            <div className="tgu-toolbar__title">Планирование ТГУ</div>
            <div className="tgu-toolbar__subtitle">Mission Ops</div>
          </div>
        </div>

        <div className="tgu-tabs" role="tablist" aria-label="Разделы планирования ТГУ">
          <button
            className={activeTab === "timeline" ? "is-active" : ""}
            type="button"
            role="tab"
            aria-selected={activeTab === "timeline"}
            onClick={() => onTabChange("timeline")}
          >
            Планы
          </button>
          <button
            className={activeTab === "map" ? "is-active" : ""}
            type="button"
            role="tab"
            aria-selected={activeTab === "map"}
            onClick={() => onTabChange("map")}
          >
            Карта
          </button>
          <button
            className={activeTab === "complex" ? "is-active" : ""}
            type="button"
            role="tab"
            aria-selected={activeTab === "complex"}
            onClick={() => onTabChange("complex")}
          >
            Комплексный план
          </button>
          <button
            className={activeTab === "editor" ? "is-active" : ""}
            type="button"
            role="tab"
            aria-selected={activeTab === "editor"}
            onClick={() => onTabChange("editor")}
          >
            Редактор
          </button>
          <button
            className={activeTab === "requests" ? "is-active" : ""}
            type="button"
            role="tab"
            aria-selected={activeTab === "requests"}
            onClick={() => onTabChange("requests")}
          >
            Заявки
          </button>
          <button
            className={activeTab === "slots" ? "is-active" : ""}
            type="button"
            role="tab"
            aria-selected={activeTab === "slots"}
            onClick={() => onTabChange("slots")}
          >
            Слоты
          </button>
          <button
            className={activeTab === "constellation" ? "is-active" : ""}
            type="button"
            role="tab"
            aria-selected={activeTab === "constellation"}
            onClick={() => onTabChange("constellation")}
          >
            Группировка
          </button>
        </div>
      </div>

      {showRange && (
        <div className="tgu-toolbar__row tgu-toolbar__row--range">
          <label className="tgu-field">
            <span>С</span>
            <DateTime24Field value={fromValue} onChange={onFromChange} />
          </label>
          <label className="tgu-field">
            <span>По</span>
            <DateTime24Field value={toValue} onChange={onToChange} />
          </label>

          <button className="tgu-button tgu-button--primary" type="button" onClick={onApply} disabled={loading}>
            Показать
          </button>
          <button className="tgu-button" type="button" onClick={() => onQuickRange(24)} disabled={loading}>
            24ч
          </button>
          <button className="tgu-button" type="button" onClick={() => onQuickRange(72)} disabled={loading}>
            3 суток
          </button>
          <button className="tgu-button" type="button" onClick={() => onQuickRange(168)} disabled={loading}>
            7 суток
          </button>
        </div>
      )}
      {error && <div className="tgu-alert tgu-alert--danger">{error}</div>}
    </header>
  );
}
