import type { StructureSegment, TerminalMarker } from '../types/timeline';
import { mileageAtPx } from '../utils/mileage';

const BRIDGE_LEFT_PX = 339;
const BRIDGE_WIDTH_PX = 22;
const TUNNEL_LEFT_PX = 610;
const TUNNEL_WIDTH_PX = 24;

/**
 * 메인 교량은 시작점(좌측)을 지나면 색이 바뀌고(passed), 우측 끝을 벗어나면
 * 뒤의 반복 교량과 모양을 교환한다(메인 → revisit, 반복 → passed).
 */
export const BRIDGE_PASSED_AT_PX = BRIDGE_LEFT_PX; // 339 — 시작점 통과 시 색 변경
/**
 * 아이콘을 완전히 지난 뒤(우측 끝 361), 다음 방향 전환 지점에서 반전한다.
 * 메인 교량은 leg-02(상행)에 걸쳐 있고, 그 다음 상행→하행 전환점은 leg-03 시작(413).
 */
export const BRIDGE_SWAP_AT_PX = 413;
// 커서가 터널 아이콘 좌측 끝과 교차하는 순간부터 색이 바뀐다.
export const TUNNEL_PASSED_AT_PX = TUNNEL_LEFT_PX; // 610

/** video_player INACTIVE_BOW ×0.5 — 항상 테두리만 있는 회색 교량. */
const INACTIVE_BOW_LEFT_PX = 446.5;
const INACTIVE_BOW_WIDTH_PX = 22;

/** 라벨·점선 정렬 기준이 되는 교량 아이콘 가로 중앙 좌표. */
export const SINDAE_BRIDGE_CENTER_PX = BRIDGE_LEFT_PX + BRIDGE_WIDTH_PX / 2;
export const INACTIVE_BOW_CENTER_PX =
  INACTIVE_BOW_LEFT_PX + INACTIVE_BOW_WIDTH_PX / 2;

/** Three-slice bridge/tunnel markers drawn on top of the track. */
export const STRUCTURE_SEGMENTS: StructureSegment[] = [
  {
    id: 'bridge-sindaecheon',
    type: 'bridge',
    label: '신대천과선교',
    startMileage: mileageAtPx(BRIDGE_LEFT_PX),
    endMileage: mileageAtPx(BRIDGE_LEFT_PX + BRIDGE_WIDTH_PX),
    left: BRIDGE_LEFT_PX,
    top: 32.5, // 높이 16 짝수화 후 중앙(40.5) 유지
    width: BRIDGE_WIDTH_PX,
    height: 16,
    capWidth: 6,
    centerHeight: 16, // 센터 높이를 양옆 캡(= height 16)과 동일하게
    passedAtPx: BRIDGE_PASSED_AT_PX,
    swapAtPx: BRIDGE_SWAP_AT_PX,
  },
  {
    id: 'bridge-inactive',
    type: 'bridge',
    label: '미통과 교량',
    startMileage: mileageAtPx(INACTIVE_BOW_LEFT_PX),
    endMileage: mileageAtPx(INACTIVE_BOW_LEFT_PX + INACTIVE_BOW_WIDTH_PX),
    left: INACTIVE_BOW_LEFT_PX,
    top: 32.5, // 높이 16 짝수화 후 중앙(40.5) 유지
    width: INACTIVE_BOW_WIDTH_PX,
    height: 16,
    capWidth: 6,
    centerHeight: 16, // 센터 높이를 양옆 캡(= height 16)과 동일하게
    // 같은 구간을 두 번째로 지나는 교량:
    //  ① 처음엔 반전 아이콘(revisit)
    //  ② 방향 전환점(413)을 지나면 일반 회색(upcoming)
    //  ③ 커서가 좌측 끝(446.5)과 교차하면 주황(passed)
    appearance: 'revisit',
    flipAtPx: BRIDGE_SWAP_AT_PX,
    passedAtPx: INACTIVE_BOW_LEFT_PX,
  },
  {
    id: 'tunnel-hoedeok',
    type: 'tunnel',
    label: '회덕터널(하)',
    startMileage: mileageAtPx(TUNNEL_LEFT_PX),
    endMileage: mileageAtPx(TUNNEL_LEFT_PX + TUNNEL_WIDTH_PX),
    left: TUNNEL_LEFT_PX,
    top: 33.75, // 높이 14 짝수화 후 중앙(40.75) 유지
    width: TUNNEL_WIDTH_PX,
    height: 14,
    capWidth: 10,
    centerHeight: 14, // 센터 높이를 양옆 캡(= height 14)과 동일하게
    passedAtPx: TUNNEL_PASSED_AT_PX,
  },
];

/** Terminal circles. Passed markers keep their orange state permanently. */
export const TERMINAL_MARKERS: TerminalMarker[] = [
  // 시작/종료 원형은 트랙 라인(297 / 1806.5)에 원 중앙이 오도록 배치
  // 사이즈 짝수화(13×13.5→14×14, 11×11.5→12×12), 원 중앙은 유지(left/top 보정)
  { id: 'terminal-01', left: 290, top: 33.75, width: 14, height: 14, state: 'passed' },
  // 커서가 원 좌측 끝(906.5)과 교차하는 순간부터 passed(주황)로 바뀐다.
  { id: 'terminal-02', left: 906.5, top: 33.75, width: 14, height: 14, state: 'passed', passedAtPx: 906.5 },
  { id: 'terminal-03', left: 1148, top: 34.25, width: 12, height: 12, state: 'revisit' },
  { id: 'terminal-04', left: 1216.5, top: 34.25, width: 12, height: 12, state: 'revisit' },
  { id: 'terminal-05', left: 1685, top: 34.25, width: 12, height: 12, state: 'revisit' },
  { id: 'terminal-06', left: 1799.5, top: 33.75, width: 14, height: 14, state: 'passed' },
];
