import type { TguPlanUi, TguPlatformUi } from "../../model/timelineTypes";
import { formatDuration } from "./editorPresentation";

type EditorToolbarProps = {
  selectedSpacecraftId?: string;
  selectedPlan?: TguPlanUi;
  platforms: TguPlatformUi[];
  checking: boolean;
  /** Идёт расчёт/очистка всего плана — блокирует кнопки операций над планом. */
  planCalcRunning: boolean;
  /** Почему нельзя рассчитывать/чистить план (заложен/стартовал) — гасит кнопки. */
  calcBlockedReason?: string;
  conflictCount: number;
  windowLabel: string;
  rightMode: "none" | "inspect" | "shoot" | "downlink" | "mapInfo" | "mapPick";
  onSetRightMode: (mode: "shoot" | "downlink") => void;
  onCheck: () => void;
  /** Рассчитать план съёмки и сброса одной операцией. */
  onCalculatePlan: () => void;
  /** Полностью очистить план (с подтверждением внутри обработчика). */
  onClearPlan: () => void;
  onZoom: (factor: number) => void;
};

export function EditorToolbar({
  selectedSpacecraftId,
  selectedPlan,
  platforms,
  checking,
  planCalcRunning,
  calcBlockedReason,
  conflictCount,
  windowLabel,
  rightMode,
  onSetRightMode,
  onCheck,
  onCalculatePlan,
  onClearPlan,
  onZoom
}: EditorToolbarProps) {
  const platformLabel = selectedSpacecraftId
    ? platforms.find((platform) => platform.spacecraftId === selectedSpacecraftId)?.name ?? selectedSpacecraftId
    : "КА не выбран";

  return (
    <div className="tgu-editor-toolbar">
      <div className="tgu-editor-toolbar__identity">
        <span className="tgu-editor-type-dot" aria-hidden="true" />
        <div>
          <div className="tgu-editor-toolbar__title">{platformLabel}</div>
          <div className="tgu-editor-toolbar__meta">
            {selectedPlan ? `${selectedPlan.planId} · ${selectedPlan.status}` : "Выберите план на timeline"}
          </div>
        </div>
      </div>

      <div className="tgu-editor-toolbar__group">
        <button
          className={`tgu-button ${rightMode === "shoot" ? "tgu-button--primary" : ""}`}
          type="button"
          onClick={() => onSetRightMode("shoot")}
          disabled={!selectedSpacecraftId}
        >
          + Съёмка
        </button>
        <button
          className={`tgu-button ${rightMode === "downlink" ? "tgu-button--primary" : ""}`}
          type="button"
          onClick={() => onSetRightMode("downlink")}
          disabled={!selectedSpacecraftId}
        >
          + Сброс
        </button>
      </div>

      <div className="tgu-editor-toolbar__group">
        <button
          className="tgu-button tgu-button--primary"
          type="button"
          onClick={onCalculatePlan}
          disabled={!selectedPlan || planCalcRunning || Boolean(calcBlockedReason)}
          title={calcBlockedReason ?? "Рассчитать план съёмки и сброса по комплексному плану (ручные маршруты сохраняются)"}
        >
          {planCalcRunning ? "Расчёт..." : "Рассчитать план"}
        </button>
        <button
          className="tgu-button tgu-button--reject"
          type="button"
          onClick={onClearPlan}
          disabled={!selectedPlan || planCalcRunning || Boolean(calcBlockedReason)}
          title={calcBlockedReason ?? "Удалить все включения плана, включая построенные вручную"}
        >
          Очистить план
        </button>
      </div>

      <div className="tgu-editor-toolbar__spacer" />

      <div className="tgu-editor-window-control" aria-label="Масштаб окна" title="Колесо мыши над таймлайном — тоже масштаб">
        <button type="button" onClick={() => onZoom(1.4)} title="Отдалить">−</button>
        <span>{windowLabel || formatDuration(0)}</span>
        <button type="button" onClick={() => onZoom(0.7)} title="Приблизить">+</button>
      </div>

      <button
        className={`tgu-button ${conflictCount > 0 ? "tgu-editor-button--warning" : ""}`}
        type="button"
        onClick={onCheck}
        disabled={checking || !selectedSpacecraftId}
      >
        {checking ? "Проверка..." : conflictCount > 0 ? `Конфликты · ${conflictCount}` : "Проверить"}
      </button>
    </div>
  );
}
