import { useEffect, useCallback } from 'react';
import { useUIStore } from '@/stores/uiStore';
import { useConfigStore } from '@/stores/configStore';
import { CameraPlayer } from './CameraPlayer';

export function FullscreenView() {
  const { fullscreenCamera, setFullscreenCamera } = useUIStore();
  const cameras = useConfigStore((s) => s.cameras);

  const currentIdx = cameras.findIndex((c) => c.name === fullscreenCamera);
  const camera = currentIdx >= 0 ? cameras[currentIdx] : null;

  const navigate = useCallback((dir: 1 | -1) => {
    if (cameras.length === 0) return;
    const next = (currentIdx + dir + cameras.length) % cameras.length;
    setFullscreenCamera(cameras[next].name);
  }, [cameras, currentIdx, setFullscreenCamera]);

  const close = useCallback(() => setFullscreenCamera(null), [setFullscreenCamera]);

  useEffect(() => {
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') close();
      else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') navigate(1);
      else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') navigate(-1);
    };
    window.addEventListener('keydown', handleKey);
    return () => window.removeEventListener('keydown', handleKey);
  }, [close, navigate]);

  if (!camera) return null;

  return (
    <div className="fixed inset-0 z-50 bg-dark-primary flex flex-col">
      {/* Header */}
      <div className="h-12 bg-dark-secondary border-b border-dark-border flex items-center justify-between px-4 shrink-0">
        <div className="flex items-center gap-3">
          <button
            onClick={() => navigate(-1)}
            className="p-1.5 text-gray-400 hover:text-white hover:bg-dark-hover rounded-lg transition-colors"
          >
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
            </svg>
          </button>
          <h2 className="text-base font-semibold text-white">{camera.display_name}</h2>
          <button
            onClick={() => navigate(1)}
            className="p-1.5 text-gray-400 hover:text-white hover:bg-dark-hover rounded-lg transition-colors"
          >
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
            </svg>
          </button>
          <span className="text-xs text-gray-500 ml-2">{currentIdx + 1} / {cameras.length}</span>
        </div>

        <button
          onClick={close}
          className="p-2 text-gray-400 hover:text-white hover:bg-dark-hover rounded-lg transition-colors"
        >
          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      {/* Video */}
      <div className="flex-1 flex items-center justify-center p-4">
        <CameraPlayer
          key={camera.name}
          camera={camera}
          className="w-full h-full rounded-lg"
          showLabel={false}
        />
      </div>
    </div>
  );
}