App.tsx

import React, { useState, useCallback } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { VideoFile, ViewMode, VideoSyncContextType, ThemeKey, THEME_CONFIGS } from './types';
import { useMultiVideoSync } from './hooks/useMultiVideoSync';
import { ControlBar } from './components/ControlBar';
import { GridView } from './components/GridView';
import { ComparisonView } from './components/ComparisonView';
import { LayoutGrid, SplitSquareHorizontal, Upload, Trash2, Film, Palette } from 'lucide-react';

const App: React.FC = () => {
  const [videos, setVideos] = useState<VideoFile[]>([]);
  const [viewMode, setViewMode] = useState<ViewMode>(ViewMode.COMPARE);
  const [currentThemeKey, setCurrentThemeKey] = useState<ThemeKey>('SLATE');
  const syncLogic = useMultiVideoSync();

  const theme = THEME_CONFIGS[currentThemeKey];
  const t = theme.classes;

  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (files) {
      const newVideos: VideoFile[] = Array.from(files).map((file: File) => ({
        id: uuidv4(),
        file,
        url: URL.createObjectURL(file),
        name: file.name,
      }));
      setVideos((prev) => [...prev, ...newVideos]);
    }
  };

  const removeVideo = useCallback((id: string) => {
    setVideos((prev) => {
      const videoToRemove = prev.find(v => v.id === id);
      if (videoToRemove) {
        URL.revokeObjectURL(videoToRemove.url);
      }
      return prev.filter(v => v.id !== id);
    });
  }, []);

  const toggleTheme = () => {
    setCurrentThemeKey(prev => prev === 'SLATE' ? 'ELEGANT' : 'SLATE');
  };

  const syncContext: VideoSyncContextType = {
    isPlaying: syncLogic.isPlaying,
    currentTime: syncLogic.currentTime,
    duration: syncLogic.duration,
    togglePlay: syncLogic.togglePlay,
    seek: syncLogic.seek,
    registerVideo: syncLogic.registerVideo,
    onDurationChange: syncLogic.onDurationChange,
    onTimeUpdate: syncLogic.onTimeUpdate,
    playbackRate: syncLogic.playbackRate,
    setPlaybackRate: syncLogic.setPlaybackRate
  };

  return (
    <div className={`h-screen w-screen flex flex-col ${t.bg} ${t.text} overflow-hidden font-sans transition-colors duration-300`}>
      
      {/* Header / Top Bar */}
      <header className={`h-16 border-b ${t.header} ${t.border} flex items-center justify-between px-6 shrink-0 z-50 transition-colors`}>
        <div className="flex items-center gap-3">
          <div className={`w-8 h-8 ${t.iconBg} rounded-lg flex items-center justify-center`}>
            <Film className="text-white" size={18} />
          </div>
          <h1 className="font-bold text-lg tracking-tight">SyncView <span className={`font-light ${t.accentColor}`}>Pro</span></h1>
        </div>

        <div className={`flex p-1 rounded-lg border ${t.border} ${currentThemeKey === 'ELEGANT' ? 'bg-neutral-100' : 'bg-slate-800'}`}>
          <button
            onClick={() => setViewMode(ViewMode.COMPARE)}
            className={`flex items-center gap-2 px-4 py-1.5 rounded-md text-sm font-medium transition-all ${
              viewMode === ViewMode.COMPARE 
                ? t.activeTab
                : t.inactiveTab
            }`}
          >
            <SplitSquareHorizontal size={16} />
            Comparison
          </button>
          <button
            onClick={() => setViewMode(ViewMode.GRID)}
            className={`flex items-center gap-2 px-4 py-1.5 rounded-md text-sm font-medium transition-all ${
              viewMode === ViewMode.GRID 
                ? t.activeTab
                : t.inactiveTab
            }`}
          >
            <LayoutGrid size={16} />
            Monitor Grid
          </button>
        </div>

        <div className="flex items-center gap-4">
          <button 
            onClick={toggleTheme}
            className={`p-2 rounded-full transition-colors ${t.buttonSecondary}`}
            title={`Switch to ${currentThemeKey === 'SLATE' ? 'Elegant Gray' : 'Dark Slate'}`}
          >
            <Palette size={18} />
          </button>

          <label className={`cursor-pointer group flex items-center gap-2 px-4 py-2 ${t.buttonPrimary} text-sm font-medium rounded-lg transition-colors shadow-lg`}>
            <Upload size={16} className="group-hover:translate-y-[-2px] transition-transform" />
            <span>Add Footage</span>
            <input 
              type="file" 
              multiple 
              accept="video/*" 
              className="hidden" 
              onChange={handleFileUpload} 
            />
          </label>
        </div>
      </header>

      {/* Main Content Area */}
      <div className="flex-1 flex overflow-hidden">
        
        {/* Sidebar (File List) */}
        <aside className={`w-64 border-r flex flex-col shrink-0 transition-colors ${t.sidebar} ${t.border}`}>
          <div className={`p-4 border-b ${t.border}`}>
            <h2 className={`text-xs font-bold uppercase tracking-wider ${t.textMuted}`}>Source Files ({videos.length})</h2>
          </div>
          <div className="flex-1 overflow-y-auto p-2 space-y-2">
            {videos.length === 0 ? (
               <div className={`text-center py-10 px-4 text-sm ${t.textMuted}`}>
                 <div className={`mb-3 mx-auto w-10 h-10 border-2 border-dashed ${t.border} rounded-full flex items-center justify-center`}>
                    <Upload size={16} />
                 </div>
                 No videos loaded.<br/>Upload videos to begin.
               </div>
            ) : (
              videos.map((video) => (
                <div key={video.id} className={`group flex items-center gap-3 p-3 rounded-lg border border-transparent transition-all ${t.card} ${t.cardHover}`}>
                  <div className="w-10 h-10 bg-black rounded flex items-center justify-center shrink-0 overflow-hidden">
                    <video src={video.url} className="w-full h-full object-cover opacity-50" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className={`text-sm font-medium truncate ${t.text}`} title={video.name}>{video.name}</p>
                    <p className={`text-xs truncate ${t.textMuted}`}>{(video.file.size / (1024*1024)).toFixed(1)} MB</p>
                  </div>
                  <button 
                    onClick={() => removeVideo(video.id)}
                    className={`p-1.5 hover:bg-red-500 hover:text-white rounded transition-colors opacity-0 group-hover:opacity-100 ${t.textMuted}`}
                  >
                    <Trash2 size={14} />
                  </button>
                </div>
              ))
            )}
          </div>
        </aside>

        {/* View Area */}
        <main className="flex-1 bg-black relative flex flex-col min-w-0">
          <div className="flex-1 relative overflow-hidden">
            {viewMode === ViewMode.GRID ? (
              <GridView 
                videos={videos} 
                syncContext={syncContext} 
                onRemove={removeVideo}
                themeClasses={t}
              />
            ) : (
              <ComparisonView 
                videos={videos} 
                syncContext={syncContext}
                themeClasses={t}
              />
            )}
          </div>
        </main>
      </div>

      {/* Global Controls */}
      <ControlBar 
        isPlaying={syncLogic.isPlaying}
        onTogglePlay={syncLogic.togglePlay}
        currentTime={syncLogic.currentTime}
        duration={syncLogic.duration}
        onSeek={syncLogic.seek}
        playbackRate={syncLogic.playbackRate}
        onRateChange={syncLogic.setPlaybackRate}
        themeClasses={t}
      />
    </div>
  );
};

export default App;