import { TguLegend } from "./TguLegend";
import type { TguActiveTab } from "../../model/timelineTypes";

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;
  onRefresh: () => void;
};

export function TguToolbar({
  fromValue,
  toValue,
  loading,
  activeTab,
  error,
  onTabChange,
  onFromChange,
  onToChange,
  onApply,
  onQuickRange,
  onRefresh
}: TguToolbarProps) {
  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")}
          >
            Карта 2D
          </button>
          <button
            className={activeTab === "editor" ? "is-active" : ""}
            type="button"
            role="tab"
            aria-selected={activeTab === "editor"}
            onClick={() => onTabChange("editor")}
          >
            Редактор
          </button>
        </div>

        <label className="tgu-field">
          <span>С</span>
          <input type="datetime-local" value={fromValue} onChange={(event) => onFromChange(event.target.value)} />
        </label>
        <label className="tgu-field">
          <span>По</span>
          <input type="datetime-local" value={toValue} onChange={(event) => onToChange(event.target.value)} />
        </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>
        <button className="tgu-button" type="button" onClick={onRefresh} disabled={loading}>
          {loading ? "Обновление..." : "Обновить"}
        </button>
      </div>
      <TguLegend />
      {error && <div className="tgu-alert tgu-alert--danger">{error}</div>}
    </header>
  );
}