import type { SlotDTO } from "../../model/slotTypes";
import { formatLocalDateTime, parseLocal } from "../../utils/localTime";

/** Один слот в меню выбора: id полигона на карте, сам слот и признак брони. */
export type SlotPick = { id: string; slot: SlotDTO; booked: boolean };

type SlotPickMenuProps = {
  picks: SlotPick[];
  activeId?: string;
  onPick: (id: string) => void;
  onClose: () => void;
};

/**
 * Меню выбора слота при плотном наложении: клик по карте, под которым лежит несколько слотов,
 * раскрывает список (КА · слот · виток/ветвь · время), выбор подсвечивает строку в таблице.
 */
export function SlotPickMenu({ picks, activeId, onPick, onClose }: SlotPickMenuProps) {
  return (
    <aside className="tgu-slots-pick">
      <div className="tgu-slots-pick__head">
        <span>Слоты под курсором · {picks.length}</span>
        <button type="button" className="tgu-icon-button" onClick={onClose} title="Закрыть">
          ×
        </button>
      </div>
      <div className="tgu-slots-pick__list">
        {picks.map(({ id, slot, booked }) => (
          <button
            key={id}
            type="button"
            className={`tgu-slots-pick__item${id === activeId ? " is-active" : ""}`}
            onClick={() => onPick(id)}
          >
            <span className="tgu-slots-pick__title">
              КА {slot.satelliteId} · слот {slot.slotNumber}
              {booked && <span className="tgu-slots-badge tgu-slots-badge--booked">бронь</span>}
            </span>
            <span className="tgu-slots-pick__meta">
              виток {slot.revolution} / {slot.revolutionSign === "DESC" ? "нисх" : "восх"} ·{" "}
              {formatLocalDateTime(parseLocal(slot.tn))}
            </span>
          </button>
        ))}
      </div>
    </aside>
  );
}
