import React, { useRef, useImperativeHandle, forwardRef, useState, useEffect } from 'react';
import StationOverlay from '../overlay/StationOverlay';
import RoutePanel from '../overlay/RoutePanel';
import RouteInfoOverlay from '../overlay/RouteInfoOverlay';
import 'video.js/dist/video-js.css';
import { useVideoPlayer } from '../../hooks/useVideoPlayer';
import { useFrameStep } from '../../hooks/useFrameStep';
import { useKeyboard } from '../../hooks/useKeyboard';
import { usePlayerStore } from '../../store/playerStore';
import { useGeoStore } from '../../store/geoStore';
import { useSettingsStore, KNOWN_GRADES } from '../../store/settingsStore';
import { captureFrame, downloadDataUrl } from '../../utils/frameCapture';
import { secondsToTimecode, secondsToFrame } from '../../utils/timecode';
import { useCaptureStore } from '../../store/captureStore';
import HlsConversionStatus from './HlsConversionStatus';
import { StationBar } from '../../stationbar/StationBar';

export interface VideoPlayerHandle {
  loadLocalFile: (file: File) => void;
  loadServerStream: (videoId: string, filename: string) => void | Promise<void>;
  seekTo: (time: number) => void;
  getVideoElement: () => HTMLVideoElement | null;
}

interface VideoPlayerProps {
  onAddMemo: (time: number) => void;
  onToggleHelp?: () => void;
}

const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
  function VideoPlayer({ onAddMemo, onToggleHelp }, ref) {
    const containerRef = useRef<HTMLDivElement>(null);
    const wrapperRef = useRef<HTMLDivElement>(null);

    const { playerRef, loadLocalFile, loadServerStream, switchToHls, getVideoElement } =
      useVideoPlayer(containerRef);

    const { stepForward, stepBackward, fps } = useFrameStep(playerRef);
    const { currentTime, duration, playing, source, playbackRate, videoReady, videoWidth, videoHeight } = usePlayerStore();

    // 커서 매끄러운 이동:
    //  - 라이브 시간(smoothTimeRef): 매 프레임 '단조' 벽시계 보간. StationBar가 ref로 읽어
    //    커서/진행바를 직접(transform) 갱신 → React 60fps 리렌더 없이 매끄럽게.
    //  - state(smoothTime): 배지 숫자·색 변경용으로만 throttle(≈10fps) 갱신.
    const [smoothTime, setSmoothTime] = useState(0);
    const smoothTimeRef = useRef(0);
    const anchorRef = useRef({ media: 0, wall: 0 });
    const lastSetRef = useRef(0);
    useEffect(() => {
      let raf = 0;
      // 시크(클릭/드래그 이동) 시 커서를 즉시 그 위치로 재동기화.
      // (단조 보간은 앵커보다 앞쪽으로의 뒤로가기 시크를 무시하므로 별도 처리 필요)
      const onSeeked = (): void => {
        const p = playerRef.current;
        if (!p || p.isDisposed()) return;
        const t = p.currentTime() ?? 0;
        anchorRef.current = { media: t, wall: performance.now() };
        smoothTimeRef.current = t;
        lastSetRef.current = t;
        setSmoothTime(t);
      };
      playerRef.current?.on('seeked', onSeeked);
      const tick = (): void => {
        const p = playerRef.current;
        if (p && !p.isDisposed()) {
          const dur = p.duration() ?? 0;
          let t: number;
          if (p.paused()) {
            t = p.currentTime() ?? 0;
            anchorRef.current = { media: t, wall: performance.now() };
          } else {
            const a = anchorRef.current;
            const rate = p.playbackRate() ?? 1;
            let est = a.media + ((performance.now() - a.wall) / 1000) * rate;
            const real = p.currentTime() ?? 0;
            // 단조: 작은 역행은 무시(흔들림 방지). 뒤처짐(real이 앞섬) 또는 시크(뒤로)만 재동기화.
            if (real - est > 0.3 || real < a.media - 0.3) {
              est = real;
              anchorRef.current = { media: real, wall: performance.now() };
            }
            t = dur > 0 ? Math.min(est, dur) : est;
          }
          smoothTimeRef.current = t;
          if (Math.abs(t - lastSetRef.current) >= 0.1) {
            lastSetRef.current = t;
            setSmoothTime(t);
          }
        }
        raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
      return () => {
        cancelAnimationFrame(raf);
        playerRef.current?.off('seeked', onSeeked);
      };
    }, [playerRef, source]);
    const loadFromFolder = useGeoStore((s) => s.loadFromFolder);
    const geoLoaded = useGeoStore((s) => s.loaded);
    // 시설등급(시설종별) 표시 필터 — 재생바/패널이 구독하는 설정 스토어.
    const gradeFilter = useSettingsStore((s) => s.gradeFilter);
    const setGradeFilter = useSettingsStore((s) => s.setGradeFilter);
    const poiOverlapExclude = useSettingsStore((s) => s.poiOverlapExclude);
    const setPoiOverlapExclude = useSettingsStore((s) => s.setPoiOverlapExclude);
    // 하단 도구 패널: UI에서 숨김(코드는 보존). 다시 표시하려면 true 로.
    const SHOW_TOOLBAR = false;

    // 폴더 선택: 지리정보 파싱 + 영상 재생
    const handleSelectFolder = async (files: File[]) => {
      if (!files.length) return;
      try {
        const videoFile = await loadFromFolder(files);
        if (videoFile) loadLocalFile(videoFile);
        else console.warn('[geo] 폴더에 영상 파일(mp4/webm)이 없습니다 — 지리정보만 로드');
      } catch (err) {
        console.error('[geo] 폴더 로드 실패', err);
      }
    };

    // Expose methods to parent via ref
    useImperativeHandle(ref, () => ({
      loadLocalFile,
      loadServerStream,
      seekTo: (time: number) => {
        playerRef.current?.currentTime(time);
      },
      getVideoElement,
    }));

    const addCapture = useCaptureStore((s) => s.addCapture);

    const handleCaptureFrame = () => {
      const video = getVideoElement();
      if (!video) return;
      const dataUrl = captureFrame(video);
      if (!dataUrl) return;
      const filename = `frame_${secondsToTimecode(currentTime).replace(/[:.]/g, '-')}.jpg`;
      downloadDataUrl(dataUrl, filename);
      addCapture({
        id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
        dataUrl,
        time: currentTime,
        filename,
        createdAt: Date.now(),
      });
    };

    const handleAddMemo = () => onAddMemo(currentTime);
    const [showStations, setShowStations] = useState(true);
    // 영상제어 토글: 카메라 파라미터·프레임상태·배속 표시 on/off
    const [showVideoControls, setShowVideoControls] = useState(true);
    // 좌하단 그룹을 재생바 위에 두기 위해 StationBar 높이를 동적 측정.
    const barWrapRef = useRef<HTMLDivElement>(null);
    const [barHeight, setBarHeight] = useState(0);
    useEffect(() => {
      const el = barWrapRef.current;
      if (!el) return;
      const update = (): void => setBarHeight(el.offsetHeight);
      update();
      const ro = new ResizeObserver(update);
      ro.observe(el);
      return () => ro.disconnect();
    }, [geoLoaded]);
    // 노선 배너(429.5×65 @1920 비율) 높이만큼 카메라 파라미터를 아래로.
    const [stageWidth, setStageWidth] = useState(0);
    useEffect(() => {
      const el = wrapperRef.current;
      if (!el) return;
      const update = (): void => setStageWidth(el.clientWidth);
      update();
      const ro = new ResizeObserver(update);
      ro.observe(el);
      return () => ro.disconnect();
    }, []);
    const paramTop = Math.round((stageWidth / 1920) * 65) + 10;
    const [showUtilBar, setShowUtilBar] = useState(false);

    const handleTogglePlay = (): void => {
      const p = playerRef.current;
      if (!p) return;
      if (playing) p.pause();
      else void p.play();
    };
    const handleStop = (): void => {
      const p = playerRef.current;
      if (!p) return;
      p.pause();
      p.currentTime(0);
    };
    const handleSeek = (t: number): void => {
      playerRef.current?.currentTime(t);
    };

    useKeyboard({
      playerRef,
      onStepForward: stepForward,
      onStepBackward: stepBackward,
      onCaptureFrame: handleCaptureFrame,
      onAddMemo: handleAddMemo,
      onToggleHelp,
      containerRef: wrapperRef,
    });

    // Drag and drop local video file
    const handleDrop = (e: React.DragEvent) => {
      e.preventDefault();
      const file = e.dataTransfer.files[0];
      if (file?.type.startsWith('video/')) loadLocalFile(file);
    };

    // VIDEO_FPS: 영상 실제 fps (29.97 = 30000/1001). Python SRT FrameCnt 기준과 일치.
    // stableFps(VFC 감지)는 31fps 오감지가 있어 프레임 번호 표시에는 사용하지 않음.
    const VIDEO_FPS = 30000 / 1001;
    const frame = secondsToFrame(currentTime, VIDEO_FPS);
    const videoId = source?.kind === 'server' ? source.videoId : null;

    return (
      <div
        ref={wrapperRef}
        className="relative bg-black w-full h-full"
        onDrop={handleDrop}
        onDragOver={(e) => e.preventDefault()}
      >
        {/* 영상 영역 — 컨테이너 전체를 채우는 relative 래퍼 (사이니지: 화면 가득) */}
        <div className="relative w-full h-full">
          {/* Video.js container — 영상이 영역을 꽉 채우는 베이스 레이어 (object-fit:cover) */}
          {/* 영상 클릭 = 재생/일시정지 토글 (컨트롤바 숨김 상태) */}
          <div
            data-vjs-player
            ref={containerRef}
            className="absolute inset-0 w-full h-full"
            style={{ cursor: source ? 'pointer' : 'default' }}
            onClick={() => {
              if (source) handleTogglePlay();
            }}
          />
          {/* 노선 정보 배너 — 영상 좌상단 (route.json routeInfo) */}
          <RouteInfoOverlay />
          {/* 좌하단 그룹(재생바 위): 위→아래 = 배속 → 토글(측점선/영상제어) + 프레임정보 */}
          {source && (
            <div
              className="absolute left-2 z-30 flex flex-col items-start gap-2"
              style={{ bottom: (barHeight || 130) + 8 }}
            >
              {/* 재생 배속 (영상제어 ON) */}
              {showVideoControls && (
                <div className="flex items-center gap-1 bg-black/70 px-2 py-1 rounded pointer-events-auto">
                  <span className="text-gray-400 text-xs">배속</span>
                  {[0.5, 1, 1.5, 2, 3, 4].map((r) => (
                    <button
                      key={r}
                      type="button"
                      onClick={() => playerRef.current?.playbackRate(r)}
                      className={`text-xs px-1.5 py-0.5 rounded font-semibold ${
                        Math.abs(playbackRate - r) < 0.01
                          ? 'bg-blue-600 text-white'
                          : 'bg-gray-700 text-gray-200 hover:bg-gray-600'
                      }`}
                    >
                      {r}x
                    </button>
                  ))}
                </div>
              )}
              {/* 한 줄(좌→우): 영상제어 토글 → 프레임표시 패널 → POI옵션 패널 → 시설등급 패널 */}
              <div className="flex items-center gap-2 pointer-events-auto flex-wrap">
                <button
                  type="button"
                  onClick={() => setShowVideoControls((v) => !v)}
                  className={`text-xs px-2 py-1 rounded border font-semibold ${showVideoControls ? 'bg-blue-600/80 border-blue-400 text-white' : 'bg-black/70 border-gray-600 text-gray-300'}`}
                >영상제어 {showVideoControls ? 'ON' : 'OFF'}</button>
                {showVideoControls && (
                  <>
                    {/* 영상 프레임 표시 패널 */}
                    <span className="bg-black/70 text-white text-xs px-2 py-1 rounded font-mono">
                      {secondsToTimecode(currentTime)} | F{frame} | {fps}fps
                    </span>
                    {geoLoaded && (
                      <>
                        {/* POI 옵션 패널 (시설등급 왼쪽) — 겹침제외 토글 */}
                        <div className="flex items-center gap-2 bg-black/70 px-2 py-1 rounded">
                          <span className="text-gray-400 text-xs">POI 옵션</span>
                          <button
                            type="button"
                            onClick={() => setPoiOverlapExclude(!poiOverlapExclude)}
                            title="ON=겹친 POI 숨김 / OFF=모든 POI 표시"
                            className={`text-xs px-2 py-0.5 rounded border font-semibold ${poiOverlapExclude ? 'bg-blue-600/80 border-blue-400 text-white' : 'bg-black/70 border-gray-600 text-gray-300'}`}
                          >겹침제외 {poiOverlapExclude ? 'ON' : 'OFF'}</button>
                        </div>
                        {/* 시설등급 패널 (프레임표시 우측) */}
                        <div className="flex items-center gap-2 bg-black/70 px-2 py-1 rounded">
                          <span className="text-gray-400 text-xs">시설등급</span>
                          {KNOWN_GRADES.map((g) => (
                            <label
                              key={g}
                              className="flex items-center gap-1 text-xs text-gray-200 cursor-pointer select-none"
                            >
                              <input
                                type="checkbox"
                                className="accent-blue-500"
                                checked={gradeFilter[g] ?? false}
                                onChange={(e) => setGradeFilter(g, e.target.checked)}
                              />
                              {g}
                            </label>
                          ))}
                        </div>
                      </>
                    )}
                  </>
                )}
              </div>
            </div>
          )}
          {/* 루트 패널 미니맵 — 위(배너+카메라파라미터)·아래(배속/토글/재생바) 침범 방지 */}
          <RoutePanel
            currentTime={currentTime}
            visible={showStations}
            onSeek={(time) => playerRef.current?.currentTime(time)}
            topPx={paramTop + 40}
            bottomPx={(barHeight || 130) + 90}
          />
        </div>

        {/* Empty state placeholder — 가운데 반투명 폴더 선택 */}
        {!source && (
          <div className="absolute inset-0 flex flex-col items-center justify-center text-gray-400 pointer-events-none select-none" style={{ minHeight: '240px' }}>
            <div className="text-5xl mb-3 opacity-60">&#9654;</div>
            <p className="text-lg">동영상 폴더를 드래그하거나 선택하세요</p>
            <p className="text-sm mt-1 mb-6">영상 + 측점/POI 데이터가 함께 로드됩니다</p>
            <label className="pointer-events-auto cursor-pointer bg-emerald-500/20 hover:bg-emerald-500/40 backdrop-blur-sm border border-emerald-300/40 text-white text-base font-medium px-7 py-3 rounded-xl shadow-lg transition-colors">
              폴더 선택
              <input
                type="file"
                className="hidden"
                webkitdirectory=""
                directory=""
                multiple
                onChange={(e) => {
                  const files = e.target.files;
                  if (files?.length) void handleSelectFolder(Array.from(files));
                }}
              />
            </label>
          </div>
        )}

        {/* 측점 오버레이 */}
        <StationOverlay
          currentFrame={frame}
          currentTime={currentTime}
          timeRef={smoothTimeRef}
          fps={fps}
          visible={showStations}
          videoReady={videoReady}
          videoWidth={videoWidth}
          videoHeight={videoHeight}
          onTogglePlay={handleTogglePlay}
          showPanel={showVideoControls && !!source}
          topPx={paramTop}
        />

        {/* 측점 기반 재생 바 — 영상 하단에 오버레이로 앵커 (폴더 로드 후) */}
        {geoLoaded && (
        <div ref={barWrapRef} className="absolute bottom-0 left-0 right-0 z-20">
        <StationBar
          currentTime={smoothTime}
          timeRef={smoothTimeRef}
          duration={duration}
          playing={playing}
          onTogglePlay={handleTogglePlay}
          onStop={handleStop}
          onCapture={handleCaptureFrame}
          onSeek={handleSeek}
          showStations={showStations}
          onToggleStations={() => setShowStations((v) => !v)}
        />
        </div>
        )}

        {/* abcVideo 전용 유틸 행 (파일/프레임이동/HLS) — UI 숨김(코드 보존, SHOW_TOOLBAR 로 제어) */}
        {SHOW_TOOLBAR && (
        <div className="bg-gray-900 border-t border-gray-800">
          <button
            type="button"
            onClick={() => setShowUtilBar((v) => !v)}
            className="w-full flex items-center gap-1.5 px-2 py-1 text-xs text-gray-400 hover:text-white"
          >
            <span className={`inline-block transition-transform ${showUtilBar ? 'rotate-90' : ''}`}>&#9656;</span>
            도구 {showUtilBar ? '접기' : '펼치기'}
          </button>
          {showUtilBar && (
          <div className="flex items-center gap-2 px-2 pb-2 flex-wrap">
          <label className="cursor-pointer bg-emerald-600 hover:bg-emerald-700 text-white text-sm px-3 py-1.5 rounded">
            폴더 선택
            <input
              type="file"
              className="hidden"
              webkitdirectory=""
              directory=""
              multiple
              onChange={(e) => {
                const files = e.target.files;
                if (files?.length) void handleSelectFolder(Array.from(files));
              }}
            />
          </label>

          {/* 프레임 직접 이동 */}
          <form
            onSubmit={e => {
              e.preventDefault();
              const input = (e.currentTarget.elements.namedItem('frameInput') as HTMLInputElement);
              const frameNum = parseInt(input.value, 10);
              if (!isNaN(frameNum)) {
                playerRef.current?.currentTime(frameNum / VIDEO_FPS);
              }
              input.blur();
            }}
            className="flex items-center gap-1"
          >
            <span className="text-gray-500 text-xs">F</span>
            <input
              name="frameInput"
              type="number"
              min={0}
              step={1}
              placeholder="프레임"
              className="w-20 bg-black/60 border border-gray-600 rounded px-1.5 py-1 text-xs text-yellow-300 font-mono
                         [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
            />
            <button
              type="submit"
              className="text-xs px-2 py-1 rounded border border-gray-600 bg-gray-800 text-gray-300 hover:text-white"
            >
              이동
            </button>
          </form>

          {videoId && (
            <HlsConversionStatus
              videoId={videoId}
              onConversionDone={() => switchToHls(videoId)}
            />
          )}

          <span className="text-gray-500 text-xs ml-auto hidden sm:inline">
            Space 재생 | ←/→ 5초 | J/L 10초 | ,/. 프레임 | Shift+S 캡처
          </span>
          </div>
          )}
        </div>
        )}
      </div>
    );
  }
);

export default VideoPlayer;
