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

type EditorRailProps = {
  selectedSpacecraftId?: string;
  selectedPlan?: TguPlanUi;
  platforms: TguPlatformUi[];
  surveyCount: number;
  downlinkCount: number;
  conflictCount: number;
  contextSpacecraftIds: Set<string>;
  onToggleContext: (spacecraftId: string) => void;
};

export function EditorRail({
  selectedSpacecraftId,
  selectedPlan,
  platforms,
  surveyCount,
  downlinkCount,
  conflictCount,
  contextSpacecraftIds,
  onToggleContext
}: EditorRailProps) {
  const currentPlatform = platforms.find((platform) => platform.spacecraftId === selectedSpacecraftId);
  const contextPlatforms = platforms.filter((platform) => platform.spacecraftId !== selectedSpacecraftId).slice(0, 40);

  return (
    <aside className="tgu-editor-rail">
      <section className="tgu-editor-rail__section">
        <div className="tgu-editor-eyebrow">Редактируется</div>
        <div className="tgu-editor-rail__title">{currentPlatform?.name ?? selectedSpacecraftId ?? "КА не выбран"}</div>
        <div className="tgu-editor-rail__meta">
          {selectedPlan ? `${selectedPlan.planId} · КПП ${selectedPlan.kppId}` : "План не выбран"}
        </div>

        {selectedPlan && (
          <dl className="tgu-editor-rail__plan-dates">
            <dt>Начало</dt>
            <dd className="mono">{formatDateTime(selectedPlan.startMs)}</dd>
            <dt>Окончание</dt>
            <dd className="mono">{formatDateTime(selectedPlan.endMs)}</dd>
          </dl>
        )}

        <div className="tgu-editor-stats">
          <RailStat label="Включений" value={surveyCount + downlinkCount} />
          <RailStat label="Съёмка" value={surveyCount} color="var(--t-optical)" />
          <RailStat label="Сброс" value={downlinkCount} color="var(--accent)" />
          <RailStat label="Конфл." value={conflictCount} color={conflictCount > 0 ? "var(--now)" : undefined} />
        </div>
      </section>

      <section className="tgu-editor-rail__section">
        <div className="tgu-editor-eyebrow">Контекст других КА</div>
        <div className="tgu-editor-context-list">
          {contextPlatforms.length === 0 ? (
            <div className="tgu-empty tgu-empty--compact">Нет других КА в выбранном интервале.</div>
          ) : (
            contextPlatforms.map((platform) => {
              const enabled = contextSpacecraftIds.has(platform.spacecraftId);
              return (
                <button
                  className={`tgu-editor-context-item ${enabled ? "is-enabled" : ""}`}
                  key={platform.spacecraftId}
                  type="button"
                  onClick={() => onToggleContext(platform.spacecraftId)}
                >
                  <span className="tgu-editor-context-item__check">{enabled ? "✓" : ""}</span>
                  <span>{platform.name ?? platform.noradId ?? platform.spacecraftId}</span>
                  <small>{platform.planCount}</small>
                </button>
              );
            })
          )}
        </div>
      </section>
    </aside>
  );
}

function RailStat({ label, value, color }: { label: string; value: number; color?: string }) {
  return (
    <div className="tgu-editor-stat">
      <span style={{ color }}>{value}</span>
      <small>{label}</small>
    </div>
  );
}