import type { MouseEvent } from 'react';
import {
  TRACK_RENDER_END_PX,
  TRACK_RENDER_START_PX,
  TRACK_START_PX,
  TRACK_WIDTH_PX,
  TRACK_WRAPPER_TRANSFORM,
} from '../../mocks/route';
import type { KmLabel, StructMark } from '../../StationBar';
import { cssVars, px } from '../../utils/cssVars';
import { MileageMarker } from '../MileageMarker/MileageMarker';
import styles from './Timeline.module.scss';

interface TimelineProps {
  posPx: number;
  onSeekDown: (e: MouseEvent<HTMLDivElement>) => void;
  /** 방향 색 트랙 CSS gradient (전진=주황/후진=하늘색, 회전구간 부드러운 전환). */
  trackGradient: string;
  /** 데이터 기반 측점값 라벨 (방향 전환점·시종점). */
  kmLabels: KmLabel[];
  /** 데이터 기반 구조물 (교량/터널/역사). */
  structures: StructMark[];
}

export function Timeline({ posPx, onSeekDown, trackGradient, kmLabels, structures }: TimelineProps) {
  // 라벨 겹침 방지: x px 순으로 gap px 이내는 1개만 표시.
  const dedup = <T extends { px: number }>(items: T[], gap: number): T[] => {
    const sorted = [...items].sort((a, b) => a.px - b.px);
    const out: T[] = [];
    for (const it of sorted) {
      if (!out.length || it.px - out[out.length - 1].px >= gap) out.push(it);
    }
    return out;
  };
  const labels = dedup(kmLabels, 28);
  // 구조물명은 텍스트가 길어 더 넓은 간격으로 (겹침 방지).
  const structs = dedup(structures, 90);

  return (
    <>
      {/* 압축 밖 레이어: 상단 그라데이션과 역명 리더선 */}
      <div className={styles.trackFade} />

      {/* 역명 레이어: 트랙 시작/끝(단일 소스) 기준 신탄진·대전 배치 */}
      <div
        className={styles.stationLayer}
        style={cssVars({
          '--track-start': px(TRACK_RENDER_START_PX),
          '--track-end': px(TRACK_RENDER_END_PX),
        })}
      >
        <div className={styles.stationStart}>신탄진</div>
        <div className={styles.dotStart} />
        <div className={styles.leaderStart} />
        <div className={styles.leaderEnd} />
        <div className={styles.dotEnd} />
        <div className={styles.stationEnd}>대전</div>
      </div>

      {/* 트랙 본체 (가로 압축 래퍼) */}
      <div
        className={styles.trackWrapper}
        style={{
          ...cssVars({
            '--track-x': px(TRACK_START_PX),
            '--track-w': px(TRACK_WIDTH_PX),
          }),
          transform: TRACK_WRAPPER_TRANSFORM,
        }}
      >
        <div className={styles.trackFrame} />
        <div className={styles.trackFrameStripesH} />
        <div className={styles.trackFrameStripesV} />
        <div className={styles.trackBase} />

        {/* 데이터 기반 색 트랙(그라데이션): 전진=주황 / 후진=하늘색.
            전체는 저톤(드론 순/역방향 미리보기), 재생되어 커서가 지나간 구간은 원래 색으로 복원. */}
        <div className={styles.track}>
          {/* 미재생: 방향색 저톤 (전체 폭) */}
          <div
            style={{
              position: 'absolute',
              left: 0,
              top: 0,
              height: '100%',
              width: px(TRACK_WIDTH_PX),
              background: trackGradient,
              opacity: 0.18,
              borderRadius: 'inherit',
            }}
          />
          {/* 재생된 구간: 원래 색 복원 (커서까지 clip) */}
          <div
            style={{
              position: 'absolute',
              left: 0,
              top: 0,
              height: '100%',
              width: px(
                Math.max(0, Math.min(TRACK_WIDTH_PX, posPx - TRACK_START_PX)),
              ),
              overflow: 'hidden',
            }}
          >
            <div
              style={{
                position: 'absolute',
                left: 0,
                top: 0,
                height: '100%',
                width: px(TRACK_WIDTH_PX),
                background: trackGradient,
                borderRadius: 'inherit',
              }}
            />
          </div>
        </div>

        {/* 측점값 라벨 (데이터) */}
        <div className={styles.mileageRow}>
          {labels.map((l, i) => (
            <MileageMarker
              key={i}
              marker={{ id: `km-${i}`, value: l.text, left: l.px, mileage: 0 }}
            />
          ))}
        </div>

        {/* 구조물 라벨 (데이터: 교량/터널/역사) */}
        <div className={styles.labelRow}>
          {structs.map((s, i) => (
            <div
              key={i}
              className={`${styles.segmentLabel} ${styles.neutral}`}
              style={cssVars({ '--x': px(s.px) })}
              title={`${s.category} · ${s.title}`}
            >
              {s.title}
            </div>
          ))}
        </div>

        <div className={styles.seekArea} onMouseDown={onSeekDown} />
      </div>
    </>
  );
}
