import { useEffect, useMemo, useState } from "react";
import {
  createChainPlan,
  fetchZrvWindows,
  type CreateChainPlanResponse
} from "../../api/tguPlanApi";
import type { TguPlanUi } from "../../model/timelineTypes";
import { TguApiError } from "../../model/tguTypes";
import { formatLocalDateTime } from "../../utils/localTime";
import { buildChainPlanRequest, futureZrvOptions, type ZrvOption } from "./createChainWindows";

type CreateChainPlanDialogProps = {
  spacecraftId: string;
  /** Планы для выбора базы-предыстории (берём persisted этого КА, кроме черновиков/проекции). */
  plans: TguPlanUi[];
  /** Выбранный (в фокусе) план — предзаполняет базу-предысторию, если он годится в базу. */
  initialBasePlanId?: string;
  onClose: () => void;
  /** Вызвать после создания черновика — чтобы он сразу появился на таймлайне (режим «Черновики»). */
  onCreated?: () => void;
  /** Открыть созданный черновик в редакторе (переход на страницу редактирования). */
  onEdit: (draftPlanId: string) => void;
};

/**
 * Диалог «Создать план» (вкладка «Планы»): оператор берёт за основу прошлый план (или начинает
 * цепочку без истории), набирает окно из двух реальных ЗРВ и создаёт черновик плана. После
 * создания сразу предлагается перейти к его редактированию.
 */
export function CreateChainPlanDialog({
  spacecraftId,
  plans,
  initialBasePlanId,
  onClose,
  onCreated,
  onEdit
}: CreateChainPlanDialogProps) {
  const [zrvOptions, setZrvOptions] = useState<ZrvOption[]>([]);
  const [zrvLoading, setZrvLoading] = useState(true);
  const [zrvError, setZrvError] = useState<string>();

  // "" — без истории; при открытии берём план в фокусе, если он годится в базу (этот КА, не
  // проекция/черновик), иначе остаёмся без истории.
  const [basePlanId, setBasePlanId] = useState<string>(() =>
    initialBasePlanId &&
    plans.some(
      (plan) =>
        plan.planId === initialBasePlanId &&
        plan.spacecraftId === spacecraftId &&
        plan.status !== "PLANNED" &&
        plan.status !== "DRAFT"
    )
      ? initialBasePlanId
      : ""
  );
  const [startId, setStartId] = useState<string>("");
  const [endId, setEndId] = useState<string>("");

  const [creating, setCreating] = useState(false);
  const [error, setError] = useState<string>();
  const [result, setResult] = useState<CreateChainPlanResponse>();

  // Базы-предыстории: persisted планы этого КА (без проекции PLANNED и без черновиков).
  const baseOptions = useMemo(
    () =>
      plans
        .filter((plan) => plan.spacecraftId === spacecraftId && plan.status !== "PLANNED" && plan.status !== "DRAFT")
        .sort((a, b) => b.startMs - a.startMs),
    [plans, spacecraftId]
  );

  useEffect(() => {
    let cancelled = false;
    setZrvLoading(true);
    setZrvError(undefined);
    void fetchZrvWindows(spacecraftId)
      .then((windows) => {
        if (!cancelled) setZrvOptions(futureZrvOptions(windows, Date.now()));
      })
      .catch((err) => {
        if (!cancelled) setZrvError(err instanceof TguApiError ? err.message : "Не удалось получить ЗРВ КА.");
      })
      .finally(() => {
        if (!cancelled) setZrvLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, [spacecraftId]);

  const start = zrvOptions.find((option) => option.id === startId);
  const end = zrvOptions.find((option) => option.id === endId);
  const canCreate = Boolean(start && end) && !creating;

  const create = async () => {
    if (!start || !end) return;
    setCreating(true);
    setError(undefined);
    try {
      const request = buildChainPlanRequest(spacecraftId, basePlanId || null, start, end);
      setResult(await createChainPlan(request));
      onCreated?.();
    } catch (err) {
      setError(
        err instanceof TguApiError ? err.message : err instanceof Error ? err.message : "Не удалось создать план."
      );
    } finally {
      setCreating(false);
    }
  };

  return (
    <div className="tgu-chain-dialog__backdrop" role="dialog" aria-modal="true" aria-label="Создать план">
      <div className="tgu-chain-dialog">
        <div className="tgu-chain-dialog__header">
          <h2>Создать план</h2>
          <button className="tgu-icon-button" type="button" onClick={onClose} aria-label="Закрыть">
            x
          </button>
        </div>

        {!result ? (
          <>
            <label className="tgu-chain-dialog__field">
              <span>Базовое состояние (предыстория)</span>
              <select className="tgu-select" value={basePlanId} onChange={(e) => setBasePlanId(e.target.value)}>
                <option value="">Без истории (новая цепочка с нуля)</option>
                {baseOptions.map((plan) => (
                  <option key={plan.planId} value={plan.planId}>
                    {formatLocalDateTime(plan.startMs)} · {plan.kppId} · {plan.status}
                  </option>
                ))}
              </select>
            </label>

            {zrvError && <div className="tgu-alert tgu-alert--error">{zrvError}</div>}
            {zrvLoading ? (
              <div className="tgu-chain-dialog__hint">Загрузка ЗРВ…</div>
            ) : zrvOptions.length === 0 ? (
              <div className="tgu-chain-dialog__hint">Нет будущих ЗРВ для этого КА.</div>
            ) : (
              <>
                <label className="tgu-chain-dialog__field">
                  <span>Стартовая ЗРВ (начало окна)</span>
                  <select className="tgu-select" value={startId} onChange={(e) => setStartId(e.target.value)}>
                    <option value="">— выберите —</option>
                    {zrvOptions.map((option) => (
                      <option key={option.id} value={option.id}>
                        {formatLocalDateTime(option.startMs)} · {option.kppId}
                      </option>
                    ))}
                  </select>
                </label>

                <label className="tgu-chain-dialog__field">
                  <span>Конечная ЗРВ (конец окна)</span>
                  <select className="tgu-select" value={endId} onChange={(e) => setEndId(e.target.value)}>
                    <option value="">— выберите —</option>
                    {zrvOptions
                      .filter((option) => !start || option.endMs > start.startMs)
                      .map((option) => (
                        <option key={option.id} value={option.id}>
                          {formatLocalDateTime(option.endMs)} · {option.kppId}
                        </option>
                      ))}
                  </select>
                </label>
              </>
            )}

            {error && <div className="tgu-alert tgu-alert--error">{error}</div>}

            <div className="tgu-chain-dialog__actions">
              <button className="tgu-button" type="button" onClick={onClose}>
                Отмена
              </button>
              <button className="tgu-button tgu-button--primary" type="button" onClick={create} disabled={!canCreate}>
                {creating ? "Создание…" : "Создать"}
              </button>
            </div>
          </>
        ) : (
          <>
            <div className="tgu-alert tgu-alert--success">
              Черновик плана создан ({result.draftPlanId}).
            </div>

            <div className="tgu-chain-dialog__actions">
              <button className="tgu-button" type="button" onClick={onClose}>
                Закрыть
              </button>
              <button
                className="tgu-button tgu-button--primary"
                type="button"
                onClick={() => onEdit(result.draftPlanId)}
              >
                Редактировать
              </button>
            </div>
            <div className="tgu-chain-dialog__hint">
              Откроется страница редактирования черновика.
            </div>
          </>
        )}
      </div>
    </div>
  );
}
