import type { ZrvWindow } from "./TguTimeline";
import { formatLocalDateTime } from "../../utils/localTime";

type Props = {
  windows: ZrvWindow[];
  selectedIndex: number;
  onSelect: (index: number) => void;
  onClose: () => void;
};

/**
 * Панель по выбранной ЗРВ в окне «Планы». Если в точке пересекается несколько зон
 * (разные КПП), показываем список — по примеру панели заявок на вкладке «Карта».
 */
export function TguZrvPanel({ windows, selectedIndex, onSelect, onClose }: Props) {
  const selected = windows[selectedIndex];

  return (
    <aside className="tgu-map-requests-panel">
      <div className="tgu-panel-heading">
        <span>Зоны радиовидимости ({windows.length})</span>
        <button className="tgu-link-button" type="button" onClick={onClose}>
          Закрыть
        </button>
      </div>

      <div className="tgu-map-requests-list">
        {windows.map((zrv, index) => (
          <button
            key={`${zrv.kppId}|${zrv.startMs}`}
            className={`tgu-map-request-row ${index === selectedIndex ? "is-selected" : ""}`}
            type="button"
            onClick={() => onSelect(index)}
          >
            <span className="tgu-map-request-row__body">
              <span className="tgu-map-request-row__name">КПП {zrv.kppId}</span>
              <span className="tgu-map-request-row__meta">
                {formatLocalDateTime(zrv.startMs)} – {formatLocalDateTime(zrv.endMs)}
                {" · "}
                {formatDuration(zrv.endMs - zrv.startMs)}
              </span>
            </span>
          </button>
        ))}
      </div>

      {selected && (
        <div className="tgu-map-request-details">
          <div className="tgu-map-panel__label">Детали ЗРВ</div>
          <dl className="tgu-map-request-details__grid">
            <dt>КПП</dt>
            <dd className="mono">{selected.kppId}</dd>

            <dt>Начало</dt>
            <dd className="mono">{formatLocalDateTime(selected.startMs)}</dd>

            <dt>Конец</dt>
            <dd className="mono">{formatLocalDateTime(selected.endMs)}</dd>

            <dt>Длительность</dt>
            <dd className="mono">{formatDuration(selected.endMs - selected.startMs)}</dd>
          </dl>
        </div>
      )}
    </aside>
  );
}

function formatDuration(ms: number): string {
  const totalSeconds = Math.max(0, Math.round(ms / 1000));
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  return minutes > 0 ? `${minutes} мин ${seconds} с` : `${seconds} с`;
}
