import type { RouteLeg } from '../types/timeline';

export const STAGE_WIDTH = 1920;
export const STAGE_HEIGHT = 1080;

/** Horizontal bounds of the seekable track on the design stage. */
export const TRACK_START_PX = 297;
export const TRACK_END_PX = 1806.5;
export const TRACK_WIDTH_PX = TRACK_END_PX - TRACK_START_PX;

/**
 * 타임라인 시작/끝 화면 좌표 — 좌표계의 단일 소스(single source of truth).
 * 여백을 조정하려면 이 두 값만 바꾸면 된다. 압축 변환(scaleX/translateX),
 * 커서 renderX(), 시킹 역변환, 트랙 래퍼 CSS transform 이 모두 여기서 파생된다.
 *
 * 트랙 좌표(297~1806.5)를 화면상 TRACK_RENDER_START~END 로 매핑.
 * 두 역의 점 중앙 기준으로 좌우 대칭이라 양쪽 공백이 동일하게 유지된다.
 */
// 좌우 여백 기준 시작/끝점: 왼쪽 여백(컨트롤러→신탄진) 10px, 오른쪽 여백
// (대전→화면끝) 16px. 양쪽을 안쪽으로 당긴 만큼 트랙 가로폭이 늘어난다.
export const TRACK_RENDER_START_PX = 342;
export const TRACK_RENDER_END_PX = 1836;

/** 압축 비율·오프셋은 위 시작/끝에서 자동 계산 (수동 동기화 불필요). */
export const RENDER_SCALE_X =
  (TRACK_RENDER_END_PX - TRACK_RENDER_START_PX) / TRACK_WIDTH_PX;
export const RENDER_TRANSLATE_X =
  TRACK_RENDER_START_PX - RENDER_SCALE_X * TRACK_START_PX;

/** 트랙 좌표 → 화면(스테이지) x좌표 변환. */
export function renderX(px: number): number {
  return RENDER_TRANSLATE_X + RENDER_SCALE_X * px;
}

/** 화면(스테이지) x좌표 → 트랙 좌표 역변환 (시킹용). */
export function trackXFromRender(stageX: number): number {
  return (stageX - RENDER_TRANSLATE_X) / RENDER_SCALE_X;
}

/** 트랙 래퍼(.trackWrapper)에 인라인으로 적용할 transform 문자열. */
export const TRACK_WRAPPER_TRANSFORM = `translateX(${RENDER_TRANSLATE_X}px) scaleX(${RENDER_SCALE_X})`;

/** video_player 3840→1920 (×0.5) track chrome */
export const TRACK_FRAME_TOP_PX = 17.5;
export const TRACK_FRAME_HEIGHT_PX = 40.5;
export const TRACK_BAR_TOP_PX = 24.5;
export const TRACK_BAR_HEIGHT_PX = 12;
export const TRACK_BAR_RADIUS_PX = 6;

/** Matches the "진행 초기" mockup: cursor at 158k200 (on leg-02). */
export const INITIAL_POS_PX = 381.25;

/** Cursor speed while playing, in design px per second. */
export const PLAY_SPEED_PX_PER_SEC = 17;

/**
 * Ten driving legs measured from the 4K mockup. Direction alternates at each
 * turn; mileage anchors are interpolated linearly between calibration points.
 */
export const ROUTE_LEGS: RouteLeg[] = [
  {
    id: 'leg-01',
    direction: 'down',
    startPx: 297,
    endPx: 349.5,
    anchors: [
      { px: 297, mileage: 158700 },
      { px: 349.5, mileage: 158400 },
    ],
  },
  {
    id: 'leg-02',
    direction: 'up',
    startPx: 349.5,
    endPx: 413,
    anchors: [
      { px: 349.5, mileage: 158400 },
      { px: 413, mileage: 158000 },
    ],
  },
  {
    id: 'leg-03',
    direction: 'down',
    startPx: 413,
    endPx: 996,
    anchors: [
      { px: 413, mileage: 158000 },
      { px: 622, mileage: 160100 },
      { px: 913.5, mileage: 162100 },
      { px: 996, mileage: 162700 },
    ],
  },
  {
    id: 'leg-04',
    direction: 'up',
    startPx: 996,
    endPx: 1189,
    anchors: [
      { px: 996, mileage: 163500 },
      { px: 1189, mileage: 161800 },
    ],
  },
  {
    id: 'leg-05',
    direction: 'down',
    startPx: 1189,
    endPx: 1333,
    anchors: [
      { px: 1189, mileage: 161800 },
      { px: 1333, mileage: 163100 },
    ],
  },
  {
    id: 'leg-06',
    direction: 'up',
    startPx: 1333,
    endPx: 1423,
    anchors: [
      { px: 1333, mileage: 163100 },
      { px: 1423, mileage: 162300 },
    ],
  },
  {
    id: 'leg-07',
    direction: 'down',
    startPx: 1423,
    endPx: 1545,
    anchors: [
      { px: 1423, mileage: 162300 },
      { px: 1545, mileage: 163400 },
    ],
  },
  {
    id: 'leg-08',
    direction: 'up',
    startPx: 1545,
    endPx: 1691,
    anchors: [
      { px: 1545, mileage: 163400 },
      { px: 1691, mileage: 162100 },
    ],
  },
  {
    id: 'leg-09',
    direction: 'down',
    startPx: 1691,
    endPx: 1746,
    anchors: [
      { px: 1691, mileage: 162100 },
      { px: 1746, mileage: 162600 },
    ],
  },
  {
    id: 'leg-10',
    direction: 'up',
    startPx: 1746,
    endPx: 1806.5,
    anchors: [
      { px: 1746, mileage: 162600 },
      { px: 1806.5, mileage: 162100 },
    ],
  },
];

