import { useRef, useEffect } from 'react';
import type { ReplayShip, CollisionEvent } from '@common/types/backtrack';

interface BacktrackReplayBarProps {
  isPlaying: boolean;
  replayFrame: number;
  totalFrames: number;
  replaySpeed: number;
  onTogglePlay: () => void;
  onSeek: (frame: number) => void;
  onSpeedChange: (speed: number) => void;
  onClose: () => void;
  replayShips: ReplayShip[];
  collisionEvent: CollisionEvent | null;
  replayTimeRange?: { start: string; end: string };
  hasBackwardParticles?: boolean;
}

export function BacktrackReplayBar({
  isPlaying,
  replayFrame,
  totalFrames,
  replaySpeed,
  onTogglePlay,
  onSeek,
  onSpeedChange,
  onClose,
  replayShips,
  collisionEvent,
  replayTimeRange,
  hasBackwardParticles,
}: BacktrackReplayBarProps) {
  const progress = (replayFrame / totalFrames) * 100;
  const isFinished = replayFrame >= totalFrames;

  // 드래그 시크
  const barRef = useRef<HTMLDivElement>(null);
  const isDraggingRef = useRef(false);
  const onSeekRef = useRef(onSeek);
  const totalFramesRef = useRef(totalFrames);

  useEffect(() => {
    onSeekRef.current = onSeek;
  }, [onSeek]);
  useEffect(() => {
    totalFramesRef.current = totalFrames;
  }, [totalFrames]);

  useEffect(() => {
    const onMouseMove = (e: MouseEvent) => {
      if (!isDraggingRef.current || !barRef.current) return;
      const rect = barRef.current.getBoundingClientRect();
      const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
      onSeekRef.current(Math.round(pct * totalFramesRef.current));
    };
    const onMouseUp = () => {
      isDraggingRef.current = false;
    };
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
    return () => {
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    };
  }, []);

  const handleBarMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
    isDraggingRef.current = true;
    if (!barRef.current) return;
    const rect = barRef.current.getBoundingClientRect();
    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
    onSeek(Math.round(pct * totalFrames));
  };

  // 재생 완료 후 재생 버튼 클릭 → 처음부터 재시작
  const handlePlayClick = () => {
    if (!isPlaying && isFinished) {
      onSeek(0);
    }
    onTogglePlay();
  };

  // 타임 계산
  let startLabel: string;
  let endLabel: string;
  let currentTimeLabel: string;

  if (replayTimeRange) {
    const startMs = new Date(replayTimeRange.start).getTime();
    const endMs = new Date(replayTimeRange.end).getTime();
    const currentMs = startMs + (replayFrame / totalFrames) * (endMs - startMs);
    const fmt = (ms: number) => {
      const d = new Date(ms + 9 * 3600000); // KST
      const mo = String(d.getUTCMonth() + 1).padStart(2, '0');
      const day = String(d.getUTCDate()).padStart(2, '0');
      const hh = String(d.getUTCHours()).padStart(2, '0');
      const mm = String(d.getUTCMinutes()).padStart(2, '0');
      return { date: `${mo}-${day}`, time: `${hh}:${mm}` };
    };
    const startFmt = fmt(startMs);
    const endFmt = fmt(endMs);
    const curFmt = fmt(currentMs);
    startLabel = `${startFmt.date} ${startFmt.time}`;
    endLabel = `${endFmt.date} ${endFmt.time}`;
    currentTimeLabel = `${curFmt.date} ${curFmt.time} KST`;
  } else {
    // 기존 하드코딩 폴백
    const hours = 18.5 + (replayFrame / totalFrames) * 12;
    const displayHours = hours >= 24 ? hours - 24 : hours;
    const h = Math.floor(displayHours);
    const m = Math.round((displayHours - h) * 60);
    const dayLabel = hours >= 24 ? '02-10' : '02-09';
    startLabel = '18:30';
    endLabel = '06:30';
    currentTimeLabel = `${dayLabel} ${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')} KST`;
  }

  return (
    <div
      className="absolute flex flex-col"
      style={{
        bottom: '80px',
        left: '50%',
        transform: 'translateX(-50%)',
        minWidth: '480px',
        maxWidth: '680px',
        width: '60%',
        background: 'rgba(10,15,25,0.92)',
        backdropFilter: 'blur(12px)',
        border: '1px solid rgba(168,85,247,0.3)',
        borderRadius: '12px',
        padding: '12px 18px',
        zIndex: 1200,
        gap: '10px',
      }}
    >
      {/* Header row */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <div
            className="w-2 h-2 rounded-full bg-color-tertiary"
            style={{ boxShadow: '0 0 8px rgba(168,85,247,0.5)' }}
          />
          <span className="text-caption font-bold">역추적 리플레이</span>
        </div>

        <div className="flex items-center gap-1.5">
          {/* Speed buttons */}
          {[1, 2, 4].map((spd) => (
            <button
              key={spd}
              onClick={() => onSpeedChange(spd)}
              className={`bt-spd-btn ${replaySpeed === spd ? 'active' : ''}`}
            >
              {spd}×
            </button>
          ))}

          <div className="w-2" />

          {/* Close button */}
          <button
            onClick={onClose}
            className="text-color-danger cursor-pointer font-bold"
            style={{
              padding: '4px 10px',
              borderRadius: '6px',
              fontSize: '10px',
              background: 'rgba(239,68,68,0.1)',
              border: '1px solid rgba(239,68,68,0.3)',
            }}
          >
            ✕ 닫기
          </button>
        </div>
      </div>

      {/* Controls row */}
      <div className="flex items-center gap-3">
        {/* Play/Pause */}
        <button
          onClick={handlePlayClick}
          className="shrink-0 w-9 h-9 rounded-full flex items-center justify-center text-body-2 cursor-pointer"
          style={{
            background: isPlaying ? 'var(--color-tertiary)' : 'rgba(168,85,247,0.15)',
            border: `2px solid ${isPlaying ? 'var(--color-tertiary)' : 'rgba(168,85,247,0.4)'}`,
            color: isPlaying ? '#fff' : 'var(--color-tertiary)',
          }}
        >
          {isPlaying ? '⏸' : isFinished ? '↺' : '▶'}
        </button>

        {/* Timeline */}
        <div className="flex-1 flex flex-col gap-1">
          {/* Progress bar */}
          <div
            ref={barRef}
            className="relative h-5 flex items-center cursor-pointer"
            onMouseDown={handleBarMouseDown}
          >
            <div
              className="w-full h-1 bg-border relative overflow-visible"
              style={{ borderRadius: '2px' }}
            >
              {/* Fill */}
              <div
                className="absolute top-0 left-0 h-full"
                style={{
                  width: `${progress}%`,
                  background: 'linear-gradient(90deg, var(--color-tertiary), var(--color-accent))',
                  borderRadius: '2px',
                  transition: 'width 0.05s',
                }}
              />

              {/* Collision marker */}
              {collisionEvent && (
                <div
                  className="absolute text-caption cursor-pointer"
                  style={{
                    top: '-14px',
                    left: `${collisionEvent.progressPercent}%`,
                    transform: 'translateX(-50%)',
                  }}
                  title={collisionEvent.timeLabel}
                >
                  💥
                </div>
              )}
            </div>

            {/* Thumb */}
            <div
              className="absolute top-1/2 w-3.5 h-3.5 bg-white rounded-full"
              style={{
                left: `${progress}%`,
                transform: 'translate(-50%, -50%)',
                border: '3px solid var(--color-tertiary)',
                boxShadow: '0 0 8px rgba(168,85,247,0.4)',
                zIndex: 2,
                transition: 'left 0.05s',
              }}
            />
          </div>

          {/* Time labels */}
          <div className="flex justify-between text-caption font-mono">
            <span className="text-fg-disabled">{startLabel}</span>
            <span className="font-semibold text-color-tertiary">{currentTimeLabel}</span>
            <span className="text-fg-disabled">{endLabel}</span>
          </div>
        </div>
      </div>

      {/* Legend row */}
      <div className="flex items-center gap-[14px] pt-1 border-t border-stroke flex-wrap">
        {replayShips.map((ship) => (
          <div key={ship.vesselName} className="flex items-center gap-1.5">
            <div className="w-4 h-[3px]" style={{ background: ship.color, borderRadius: '1px' }} />
            <span className="text-caption text-fg-sub font-mono">{ship.vesselName}</span>
          </div>
        ))}
        {hasBackwardParticles && (
          <div className="flex items-center gap-1.5">
            <div className="w-3 h-3 rounded-full" style={{ background: '#a855f7', opacity: 0.8 }} />
            <span className="text-caption text-fg-sub font-mono">역방향 예측</span>
          </div>
        )}
      </div>
    </div>
  );
}
