import { useState, useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { ArrowLeft, Download, Settings, RefreshCw, CheckCircle, XCircle, AlertCircle, Users, Film, Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { importFromXBVR, XBVRConfig, ImportProgress } from '@/lib/xbvrImporter';
import { importFromStashAPP, StashAPPConfig, updateActorsFromStashAPP } from '@/lib/stashappImporter';
import { importFromPlaynite, PlayniteConfig } from '@/lib/playniteImporter';
import { importFromJellyfin, cleanupJellyfinMedia, JellyfinConfig, JellyfinImportOptions, LibraryMapping, fetchJellyfinLibraries } from '@/lib/jellyfinImporter';
import { fetchSettings, updateSettings } from '@/api';

const BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:3000';

export default function ImporterView() {
  const navigate = useNavigate();
  const [xbvrConfig, setXbvrConfig] = useState<XBVRConfig>({ url: import.meta.env.VITE_XBVR_URL || BASE_URL, updateExisting: true });
  const [stashappConfig, setStashappConfig] = useState<StashAPPConfig>({ 
    url: import.meta.env.VITE_STASHAPP_URL || '', 
    apiKey: import.meta.env.VITE_STASHAPP_API_KEY || '',
    updateExisting: true
  });
  const [playniteConfig, setPlayniteConfig] = useState<PlayniteConfig>({ 
    ip: import.meta.env.VITE_PLAYNITE_IP || '', 
    apiToken: import.meta.env.VITE_PLAYNITE_API_TOKEN || '',
    port: import.meta.env.VITE_PLAYNITE_PORT ? parseInt(import.meta.env.VITE_PLAYNITE_PORT) : undefined,
    updateExisting: true
  });
  const [jellyfinConfig, setJellyfinConfig] = useState<JellyfinConfig>({ 
    url: import.meta.env.VITE_JELLYFIN_URL || '', 
    apiKey: import.meta.env.VITE_JELLYFIN_API_KEY || '' 
  });
  const [jellyfinOptions, setJellyfinOptions] = useState<JellyfinImportOptions>({
    importMovies: true,
    importSeries: true,
    importMusic: true,
    importCast: true,
    limit: undefined,
    libraryMappings: [],
    updateExisting: true
  });
  const [jellyfinLibraries, setJellyfinLibraries] = useState<Array<{ Id: string; Name: string; CollectionType: string }>>([]);
  const [libraryMappings, setLibraryMappings] = useState<LibraryMapping[]>([]);
  const [showLibraryMapping, setShowLibraryMapping] = useState(false);
  const [isInitialLoad, setIsInitialLoad] = useState(true);

  // Load library mappings from API on mount
  useEffect(() => {
    const loadMappings = async () => {
      try {
        const settings = await fetchSettings();
        if (settings?.jellyfinLibraryMappings) {
          const mappings = JSON.parse(settings.jellyfinLibraryMappings);
          setLibraryMappings(mappings);
          setShowLibraryMapping(true);
        }
      } catch (error) {
        console.error('Failed to load library mappings from API:', error);
        // Fallback to localStorage
        const savedMappings = localStorage.getItem('jellyfinLibraryMappings');
        if (savedMappings) {
          try {
            setLibraryMappings(JSON.parse(savedMappings));
            setShowLibraryMapping(true);
          } catch (error) {
            console.error('Failed to parse saved library mappings:', error);
          }
        }
      }
      setIsInitialLoad(false);
    };
    loadMappings();
  }, []);

  // Save library mappings to API and localStorage when they change
  useEffect(() => {
    if (libraryMappings.length > 0 && !isInitialLoad) {
      // Save to localStorage as fallback
      localStorage.setItem('jellyfinLibraryMappings', JSON.stringify(libraryMappings));
      
      // Save to API
      const saveMappings = async () => {
        try {
          const settings = await fetchSettings();
          if (settings) {
            settings.jellyfinLibraryMappings = JSON.stringify(libraryMappings);
            await updateSettings(settings);
          }
        } catch (error) {
          console.error('Failed to save library mappings to API:', error);
        }
      };
      saveMappings();
    }
  }, [libraryMappings, isInitialLoad]);
  const [progress, setProgress] = useState<ImportProgress>({
    current: 0,
    total: 0,
    stage: 'idle',
    message: '',
    videosImported: 0,
    actorsImported: 0,
    errors: []
  });
  const [importLog, setImportLog] = useState<string[]>([]);
  const logContainerRef = useRef<HTMLDivElement>(null);

  // Auto-scroll to bottom when log updates
  useEffect(() => {
    if (logContainerRef.current) {
      logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
    }
  }, [importLog]);

  const addLog = (message: string) => {
    const timestamp = new Date().toLocaleTimeString();
    setImportLog(prev => [...prev, `[${timestamp}] ${message}`]);
  };

  const handleXBVRImport = async () => {
    setProgress({
      current: 0,
      total: 0,
      stage: 'fetching',
      message: 'Connecting to DeoVR API...',
      videosImported: 0,
      actorsImported: 0,
      errors: []
    });
    setImportLog([]);

    const result = await importFromXBVR(
      xbvrConfig,
      addLog,
      (progressUpdate) => {
        setProgress(prev => ({ ...prev, ...progressUpdate }));
      }
    );

    setProgress(result);
  };

  const handleStashAPPImport = async () => {
    setProgress({
      current: 0,
      total: 0,
      stage: 'fetching',
      message: 'Connecting to StashAPP...',
      videosImported: 0,
      actorsImported: 0,
      errors: []
    });
    setImportLog([]);

    const result = await importFromStashAPP(
      stashappConfig,
      addLog,
      (progressUpdate) => {
        setProgress(prev => ({ ...prev, ...progressUpdate }));
      }
    );

    setProgress(result);
  };

  const handleStashAPPActorUpdate = async () => {
    setProgress({
      current: 0,
      total: 0,
      stage: 'fetching',
      message: 'Connecting to StashAPP...',
      videosImported: 0,
      actorsImported: 0,
      errors: []
    });
    setImportLog([]);

    const result = await updateActorsFromStashAPP(
      stashappConfig,
      addLog,
      (progressUpdate) => {
        setProgress(prev => ({ ...prev, ...progressUpdate }));
      }
    );

    setProgress(result);
  };

  const handlePlayniteImport = async () => {
    setProgress({
      current: 0,
      total: 0,
      stage: 'fetching',
      message: 'Connecting to Playnite API...',
      videosImported: 0,
      actorsImported: 0,
      errors: []
    });
    setImportLog([]);

    const result = await importFromPlaynite(
      playniteConfig,
      addLog,
      (progressUpdate) => {
        setProgress(prev => ({ ...prev, ...progressUpdate }));
      }
    );

    setProgress(result);
  };

  const handleJellyfinImport = async () => {
    setProgress({
      current: 0,
      total: 0,
      stage: 'fetching',
      message: 'Connecting to Jellyfin API...',
      videosImported: 0,
      actorsImported: 0,
      errors: []
    });
    setImportLog([]);

    // Update options with current library mappings
    const optionsWithMappings = {
      ...jellyfinOptions,
      libraryMappings: libraryMappings
    };

    const result = await importFromJellyfin(
      jellyfinConfig,
      optionsWithMappings,
      addLog,
      (progressUpdate) => {
        setProgress(prev => ({ ...prev, ...progressUpdate }));
      }
    );

    setProgress(result);
  };

  const handleJellyfinCleanup = async () => {
    setProgress({
      current: 0,
      total: 0,
      stage: 'fetching',
      message: 'Connecting to Jellyfin API for cleanup...',
      videosImported: 0,
      actorsImported: 0,
      errors: []
    });
    setImportLog([]);

    const result = await cleanupJellyfinMedia(
      jellyfinConfig,
      jellyfinOptions,
      addLog,
      (progressUpdate) => {
        setProgress(prev => ({ ...prev, ...progressUpdate }));
      }
    );

    setProgress(result);
  };

  const handleFetchJellyfinLibraries = async () => {
    try {
      const libraries = await fetchJellyfinLibraries(jellyfinConfig);
      setJellyfinLibraries(libraries);
      
      // Merge existing mappings with new libraries
      const newMappings: LibraryMapping[] = libraries.map(lib => {
        // Check if mapping already exists
        const existing = libraryMappings.find(m => m.libraryName === lib.Name);
        if (existing) {
          return existing;
        }
        
        // Create new mapping with default category
        let defaultCategory: 'TV Series' | 'Anime' | 'Movies' | 'Music' = 'TV Series';
        if (lib.CollectionType === 'movies') {
          defaultCategory = 'Movies';
        } else if (lib.CollectionType === 'music') {
          defaultCategory = 'Music';
        } else if (lib.CollectionType === 'tvshows') {
          defaultCategory = 'TV Series';
        }
        
        return {
          libraryName: lib.Name,
          category: defaultCategory
        };
      });
      
      setLibraryMappings(newMappings);
      setShowLibraryMapping(true);
      addLog(`Fetched ${libraries.length} libraries from Jellyfin`);
    } catch (error) {
      addLog(`Failed to fetch libraries: ${error}`);
    }
  };

  const handleLibraryMappingChange = (libraryName: string, category: 'TV Series' | 'Anime' | 'Movies' | 'Music' | 'skip') => {
    setLibraryMappings(prev => {
      const existing = prev.find(m => m.libraryName === libraryName);
      if (existing) {
        return prev.map(m => m.libraryName === libraryName ? { ...m, category } : m);
      } else {
        return [...prev, { libraryName, category }];
      }
    });
  };

  const handleLibraryPathSegmentsChange = (libraryName: string, value: string) => {
    const segments = value.split(',').map(s => s.trim()).filter(s => s.length > 0);
    setLibraryMappings(prev => {
      const existing = prev.find(m => m.libraryName === libraryName);
      if (existing) {
        return prev.map(m => m.libraryName === libraryName ? { ...m, pathSegments: segments } : m);
      } else {
        return [...prev, { libraryName, category: 'TV Series', pathSegments: segments }];
      }
    });
  };

  const resetImport = () => {
    setProgress({
      current: 0,
      total: 0,
      stage: 'idle',
      message: '',
      videosImported: 0,
      actorsImported: 0,
      errors: []
    });
    setImportLog([]);
  };

  const getProgressPercentage = () => {
    if (progress.total === 0) return 0;
    return Math.round((progress.current / progress.total) * 100);
  };

  return (
    <div className="pt-24 pb-12 px-6 max-w-[1920px] mx-auto">
      {/* Header */}
      <div className="flex items-center justify-between mb-8">
        <div className="flex items-center gap-4">
          <Button
            variant="ghost"
            size="icon"
            onClick={() => navigate('/')}
            className="text-muted-foreground hover:text-[#6d28d9] hover:bg-muted/50 rounded-xl transition-all duration-300"
          >
            <ArrowLeft size={20} />
          </Button>
          <div>
            <h1 className="text-4xl font-black text-foreground mb-1">Media Importers</h1>
            <p className="text-sm text-muted-foreground font-medium">Import media from external platforms</p>
          </div>
        </div>
      </div>

      {/* Importer Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        {/* XBVR Importer Card */}
        {xbvrConfig.url && (
          <div className="bg-card/50 backdrop-blur-sm border border-border/50 rounded-xl p-6 hover:border-[#6d28d9]/50 hover:shadow-lg hover:shadow-[#6d28d9]/10 transition-all duration-300">
          <div className="flex items-start justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                <Film className="text-purple-600" size={24} />
              </div>
              <div>
                <h3 className="font-bold text-foreground">XBVR</h3>
                <p className="text-xs text-muted-foreground font-medium">Adult Video Manager</p>
              </div>
            </div>
            <Button
              variant="outline"
              size="icon"
              className="h-8 w-8 border-border"
              onClick={() => {}}
            >
              <Settings size={16} />
            </Button>
          </div>
          <p className="text-sm text-muted-foreground mb-4">
            Import adult videos and actors from your XBVR database.
          </p>
          <div className="space-y-3">
            <div>
              <label className="text-xs font-bold text-muted-foreground mb-1 block">XBVR URL</label>
              <input
                type="text"
                value={xbvrConfig.url}
                onChange={(e) => setXbvrConfig({ ...xbvrConfig, url: e.target.value })}
                disabled={progress.stage !== 'idle'}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                placeholder="http://192.168.1.102:10001"
              />
            </div>
            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                id="xbvr-update-existing"
                checked={xbvrConfig.updateExisting}
                onChange={(e) => setXbvrConfig({ ...xbvrConfig, updateExisting: e.target.checked })}
                disabled={progress.stage !== 'idle'}
                className="rounded border-border"
              />
              <label htmlFor="xbvr-update-existing" className="text-xs text-muted-foreground cursor-pointer">Bestehende aktualisieren</label>
            </div>
            <Button
              onClick={handleXBVRImport}
              disabled={progress.stage !== 'idle' || !xbvrConfig.url}
              className="w-full bg-[#6d28d9] hover:bg-[#5b21b6] text-white font-bold"
            >
              {progress.stage === 'fetching' || progress.stage === 'importing' ? (
                <>
                  <Loader2 size={16} className="mr-2 animate-spin" />
                  Importing...
                </>
              ) : (
                <>
                  <Download size={16} className="mr-2" />
                  Import from XBVR
                </>
              )}
            </Button>
          </div>
        </div>
        )}

        {/* StashAPP Importer Card */}
        {stashappConfig.url && (
          <div className="bg-card/50 backdrop-blur-sm border border-border/50 rounded-xl p-6 hover:border-[#6d28d9]/50 hover:shadow-lg hover:shadow-[#6d28d9]/10 transition-all duration-300">
          <div className="flex items-start justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                <Film className="text-blue-600" size={24} />
              </div>
              <div>
                <h3 className="font-bold text-foreground">StashAPP</h3>
                <p className="text-xs text-muted-foreground font-medium">Adult Content Manager</p>
              </div>
            </div>
            <Button
              variant="outline"
              size="icon"
              className="h-8 w-8 border-border"
              onClick={() => {}}
            >
              <Settings size={16} />
            </Button>
          </div>
          <p className="text-sm text-muted-foreground mb-4">
            Import adult videos and performers from your StashAPP database.
          </p>
          <div className="space-y-3">
            <div>
              <label className="text-xs font-bold text-muted-foreground mb-1 block">StashAPP URL</label>
              <input
                type="text"
                value={stashappConfig.url}
                onChange={(e) => setStashappConfig({ ...stashappConfig, url: e.target.value })}
                disabled={progress.stage !== 'idle'}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                placeholder="http://192.168.1.102:10001"
              />
            </div>
            <div>
              <label className="text-xs font-bold text-muted-foreground mb-1 block">API Key (optional)</label>
              <input
                type="password"
                value={stashappConfig.apiKey || ''}
                onChange={(e) => setStashappConfig({ ...stashappConfig, apiKey: e.target.value })}
                disabled={progress.stage !== 'idle'}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                placeholder="Enter API key if required"
              />
            </div>
            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                id="stashapp-update-existing"
                checked={stashappConfig.updateExisting}
                onChange={(e) => setStashappConfig({ ...stashappConfig, updateExisting: e.target.checked })}
                disabled={progress.stage !== 'idle'}
                className="rounded border-border"
              />
              <label htmlFor="stashapp-update-existing" className="text-xs text-muted-foreground cursor-pointer">Bestehende aktualisieren</label>
            </div>
            <Button
              onClick={handleStashAPPImport}
              disabled={progress.stage !== 'idle' || !stashappConfig.url}
              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold"
            >
              {progress.stage === 'fetching' || progress.stage === 'importing' ? (
                <>
                  <Loader2 size={16} className="mr-2 animate-spin" />
                  Importing...
                </>
              ) : (
                <>
                  <Download size={16} className="mr-2" />
                  Import from StashAPP
                </>
              )}
            </Button>
          </div>
        </div>
        )}

        {/* StashAPP Actor Updater Card */}
        {stashappConfig.url && (
          <div className="bg-card/50 backdrop-blur-sm border border-border/50 rounded-xl p-6 hover:border-[#6d28d9]/50 hover:shadow-lg hover:shadow-[#6d28d9]/10 transition-all duration-300">
          <div className="flex items-start justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                <Users className="text-green-600" size={24} />
              </div>
              <div>
                <h3 className="font-bold text-foreground">StashAPP Actor Updater</h3>
                <p className="text-xs text-muted-foreground font-medium">Update existing actors</p>
              </div>
            </div>
            <Button
              variant="outline"
              size="icon"
              className="h-8 w-8 border-border"
              onClick={() => {}}
            >
              <Settings size={16} />
            </Button>
          </div>
          <p className="text-sm text-muted-foreground mb-4">
            Update existing actors with fresh data from StashAPP and create missing ones.
          </p>
          <div className="space-y-3">
            <div>
              <label className="text-xs font-bold text-muted-foreground mb-1 block">API Key (optional)</label>
              <input
                type="password"
                value={stashappConfig.apiKey || ''}
                onChange={(e) => setStashappConfig({ ...stashappConfig, apiKey: e.target.value })}
                disabled={progress.stage !== 'idle'}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                placeholder="Enter API key if required"
              />
            </div>
            <Button
              onClick={handleStashAPPActorUpdate}
              disabled={progress.stage !== 'idle' || !stashappConfig.url}
              className="w-full bg-green-600 hover:bg-green-700 text-white font-bold"
            >
              {progress.stage === 'fetching' || progress.stage === 'importing' ? (
                <>
                  <Loader2 size={16} className="mr-2 animate-spin" />
                  Updating...
                </>
              ) : (
                <>
                  <RefreshCw size={16} className="mr-2" />
                  Update Actors
                </>
              )}
            </Button>
          </div>
        </div>
        )}

        {/* Playnite Importer Card */}
        {playniteConfig.ip && playniteConfig.apiToken && (
          <div className="bg-card/50 backdrop-blur-sm border border-border/50 rounded-xl p-6 hover:border-[#6d28d9]/50 hover:shadow-lg hover:shadow-[#6d28d9]/10 transition-all duration-300">
          <div className="flex items-start justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                <Film className="text-orange-600" size={24} />
              </div>
              <div>
                <h3 className="font-bold text-foreground">Playnite</h3>
                <p className="text-xs text-muted-foreground font-medium">Game Library Manager</p>
              </div>
            </div>
            <Button
              variant="outline"
              size="icon"
              className="h-8 w-8 border-border"
              onClick={() => {}}
            >
              <Settings size={16} />
            </Button>
          </div>
          <p className="text-sm text-muted-foreground mb-4">
            Import games from your Playnite library via Bridge API.
          </p>
          <div className="space-y-3">
            <div>
              <label className="text-xs font-bold text-muted-foreground mb-1 block">IP Address</label>
              <input
                type="text"
                value={playniteConfig.ip}
                onChange={(e) => setPlayniteConfig({ ...playniteConfig, ip: e.target.value })}
                disabled={progress.stage !== 'idle'}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                placeholder="localhost"
              />
            </div>
            <div>
              <label className="text-xs font-bold text-muted-foreground mb-1 block">Port</label>
              <input
                type="number"
                value={playniteConfig.port || 19821}
                onChange={(e) => setPlayniteConfig({ ...playniteConfig, port: parseInt(e.target.value) || 19821 })}
                disabled={progress.stage !== 'idle'}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                placeholder="19821"
              />
            </div>
            <div>
              <label className="text-xs font-bold text-muted-foreground mb-1 block">API Token</label>
              <input
                type="password"
                value={playniteConfig.apiToken}
                onChange={(e) => setPlayniteConfig({ ...playniteConfig, apiToken: e.target.value })}
                disabled={progress.stage !== 'idle'}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                placeholder="pb_your_token_here"
              />
            </div>
            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                id="playnite-update-existing"
                checked={playniteConfig.updateExisting}
                onChange={(e) => setPlayniteConfig({ ...playniteConfig, updateExisting: e.target.checked })}
                disabled={progress.stage !== 'idle'}
                className="rounded border-border"
              />
              <label htmlFor="playnite-update-existing" className="text-xs text-muted-foreground cursor-pointer">Bestehende aktualisieren</label>
            </div>
            <Button
              onClick={handlePlayniteImport}
              disabled={progress.stage !== 'idle' || !playniteConfig.ip || !playniteConfig.apiToken}
              className="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold"
            >
              {progress.stage === 'fetching' || progress.stage === 'importing' ? (
                <>
                  <Loader2 size={16} className="mr-2 animate-spin" />
                  Importing...
                </>
              ) : (
                <>
                  <Download size={16} className="mr-2" />
                  Import from Playnite
                </>
              )}
            </Button>
          </div>
        </div>
        )}

        {/* Jellyfin Importer Card */}
        {jellyfinConfig.url && (
          <div className="bg-card/50 backdrop-blur-sm border border-border/50 rounded-xl p-6 hover:border-[#6d28d9]/50 hover:shadow-lg hover:shadow-[#6d28d9]/10 transition-all duration-300">
          <div className="flex items-start justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
                <Film className="text-indigo-600" size={24} />
              </div>
              <div>
                <h3 className="font-bold text-foreground">Jellyfin</h3>
                <p className="text-xs text-muted-foreground font-medium">Media Server</p>
              </div>
            </div>
            <Button
              variant="outline"
              size="icon"
              className="h-8 w-8 border-border"
              onClick={() => {}}
            >
              <Settings size={16} />
            </Button>
          </div>
          <p className="text-sm text-muted-foreground mb-4">
            Import movies, series, music and cast from your Jellyfin server.
          </p>
          <div className="space-y-3">
            <div>
              <label className="text-xs font-bold text-muted-foreground mb-1 block">Jellyfin URL</label>
              <input
                type="text"
                value={jellyfinConfig.url}
                onChange={(e) => setJellyfinConfig({ ...jellyfinConfig, url: e.target.value })}
                disabled={progress.stage !== 'idle'}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                placeholder="http://192.168.1.102:8096"
              />
            </div>
            <div>
              <label className="text-xs font-bold text-muted-foreground mb-1 block">API Key</label>
              <input
                type="password"
                value={jellyfinConfig.apiKey || ''}
                onChange={(e) => setJellyfinConfig({ ...jellyfinConfig, apiKey: e.target.value })}
                disabled={progress.stage !== 'idle'}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                placeholder="Enter API key"
              />
            </div>
            <div>
              <label className="text-xs font-bold text-muted-foreground mb-2 block">Import Options</label>
              <div className="space-y-2">
                <label className="flex items-center gap-2 text-sm">
                  <input
                    type="checkbox"
                    checked={jellyfinOptions.importMovies}
                    onChange={(e) => setJellyfinOptions({ ...jellyfinOptions, importMovies: e.target.checked })}
                    disabled={progress.stage !== 'idle'}
                    className="rounded border-border"
                  />
                  <span className="text-muted-foreground">Movies</span>
                </label>
                <label className="flex items-center gap-2 text-sm">
                  <input
                    type="checkbox"
                    checked={jellyfinOptions.importSeries}
                    onChange={(e) => setJellyfinOptions({ ...jellyfinOptions, importSeries: e.target.checked })}
                    disabled={progress.stage !== 'idle'}
                    className="rounded border-border"
                  />
                  <span className="text-muted-foreground">Series</span>
                </label>
                <label className="flex items-center gap-2 text-sm">
                  <input
                    type="checkbox"
                    checked={jellyfinOptions.importMusic}
                    onChange={(e) => setJellyfinOptions({ ...jellyfinOptions, importMusic: e.target.checked })}
                    disabled={progress.stage !== 'idle'}
                    className="rounded border-border"
                  />
                  <span className="text-muted-foreground">Music</span>
                </label>
                <label className="flex items-center gap-2 text-sm">
                  <input
                    type="checkbox"
                    checked={jellyfinOptions.importCast}
                    onChange={(e) => setJellyfinOptions({ ...jellyfinOptions, importCast: e.target.checked })}
                    disabled={progress.stage !== 'idle'}
                    className="rounded border-border"
                  />
                  <span className="text-muted-foreground">Cast</span>
                </label>
              </div>
            </div>
            <div>
              <label className="text-xs font-bold text-muted-foreground mb-1 block">Limit (optional, for testing)</label>
              <input
                type="number"
                value={jellyfinOptions.limit || ''}
                onChange={(e) => setJellyfinOptions({ ...jellyfinOptions, limit: e.target.value ? parseInt(e.target.value) : undefined })}
                disabled={progress.stage !== 'idle'}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                placeholder="e.g. 10"
              />
            </div>
            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                id="jellyfin-update-existing"
                checked={jellyfinOptions.updateExisting}
                onChange={(e) => setJellyfinOptions({ ...jellyfinOptions, updateExisting: e.target.checked })}
                disabled={progress.stage !== 'idle'}
                className="rounded border-border"
              />
              <label htmlFor="jellyfin-update-existing" className="text-xs text-muted-foreground cursor-pointer">Bestehende aktualisieren</label>
            </div>
            <div>
              <label className="text-xs font-bold text-muted-foreground mb-2 block">Library Category Mapping</label>
              <Button
                onClick={handleFetchJellyfinLibraries}
                disabled={progress.stage !== 'idle' || !jellyfinConfig.url || !jellyfinConfig.apiKey}
                variant="outline"
                className="w-full mb-3 font-bold border-border"
              >
                <RefreshCw size={16} className="mr-2" />
                Fetch Libraries
              </Button>
              {showLibraryMapping && libraryMappings.length > 0 && (
                <div className="space-y-2 max-h-48 overflow-y-auto">
                  {libraryMappings.map(mapping => (
                    <div key={mapping.libraryName} className="space-y-1 p-2 border border-border rounded-lg">
                      <div className="flex items-center gap-2">
                        <span className="text-xs font-bold text-muted-foreground flex-1 truncate">{mapping.libraryName}</span>
                        <select
                          value={mapping.category}
                          onChange={(e) => handleLibraryMappingChange(mapping.libraryName, e.target.value as any)}
                          disabled={progress.stage !== 'idle'}
                          className="text-xs px-2 py-1 border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                        >
                          <option value="TV Series">TV Series</option>
                          <option value="Anime">Anime</option>
                          <option value="Movies">Movies</option>
                          <option value="Music">Music</option>
                          <option value="skip">Nicht importieren</option>
                        </select>
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="text-xs text-muted-foreground">Pfad-Segmente (kommagetrennt):</span>
                        <input
                          type="text"
                          value={mapping.pathSegments?.join(', ') || ''}
                          onChange={(e) => handleLibraryPathSegmentsChange(mapping.libraryName, e.target.value)}
                          disabled={progress.stage !== 'idle'}
                          placeholder="z.B. Serien, Animes"
                          className="text-xs px-2 py-1 border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed flex-1"
                        />
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
            <Button
              onClick={handleJellyfinImport}
              disabled={progress.stage !== 'idle' || !jellyfinConfig.url || !jellyfinConfig.apiKey}
              className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold"
            >
              {progress.stage === 'fetching' || progress.stage === 'importing' ? (
                <>
                  <Loader2 size={16} className="mr-2 animate-spin" />
                  Importing...
                </>
              ) : (
                <>
                  <Download size={16} className="mr-2" />
                  Import from Jellyfin
                </>
              )}
            </Button>
          </div>
        </div>
        )}

        {/* Jellyfin Cleanup Card */}
        {jellyfinConfig.url && (
          <div className="bg-card/50 backdrop-blur-sm border border-border/50 rounded-xl p-6 hover:border-[#6d28d9]/50 hover:shadow-lg hover:shadow-[#6d28d9]/10 transition-all duration-300">
          <div className="flex items-start justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                <RefreshCw className="text-red-600" size={24} />
              </div>
              <div>
                <h3 className="font-bold text-foreground">Jellyfin Cleanup</h3>
                <p className="text-xs text-muted-foreground font-medium">Remove deleted media</p>
              </div>
            </div>
            <Button
              variant="outline"
              size="icon"
              className="h-8 w-8 border-border"
              onClick={() => {}}
            >
              <Settings size={16} />
            </Button>
          </div>
          <p className="text-sm text-muted-foreground mb-4">
            Remove Jellyfin media and cast that no longer exist in your Jellyfin server.
          </p>
          <div className="space-y-3">
            <div>
              <label className="text-xs font-bold text-muted-foreground mb-2 block">Cleanup Options</label>
              <div className="space-y-2">
                <label className="flex items-center gap-2 text-sm">
                  <input
                    type="checkbox"
                    checked={jellyfinOptions.importMovies}
                    onChange={(e) => setJellyfinOptions({ ...jellyfinOptions, importMovies: e.target.checked })}
                    disabled={progress.stage !== 'idle'}
                    className="rounded border-border"
                  />
                  <span className="text-muted-foreground">Movies</span>
                </label>
                <label className="flex items-center gap-2 text-sm">
                  <input
                    type="checkbox"
                    checked={jellyfinOptions.importSeries}
                    onChange={(e) => setJellyfinOptions({ ...jellyfinOptions, importSeries: e.target.checked })}
                    disabled={progress.stage !== 'idle'}
                    className="rounded border-border"
                  />
                  <span className="text-muted-foreground">Series</span>
                </label>
                <label className="flex items-center gap-2 text-sm">
                  <input
                    type="checkbox"
                    checked={jellyfinOptions.importMusic}
                    onChange={(e) => setJellyfinOptions({ ...jellyfinOptions, importMusic: e.target.checked })}
                    disabled={progress.stage !== 'idle'}
                    className="rounded border-border"
                  />
                  <span className="text-muted-foreground">Music</span>
                </label>
                <label className="flex items-center gap-2 text-sm">
                  <input
                    type="checkbox"
                    checked={jellyfinOptions.importCast}
                    onChange={(e) => setJellyfinOptions({ ...jellyfinOptions, importCast: e.target.checked })}
                    disabled={progress.stage !== 'idle'}
                    className="rounded border-border"
                  />
                  <span className="text-muted-foreground">Cast</span>
                </label>
              </div>
            </div>
            <Button
              onClick={handleJellyfinCleanup}
              disabled={progress.stage !== 'idle' || !jellyfinConfig.url || !jellyfinConfig.apiKey}
              className="w-full bg-red-600 hover:bg-red-700 text-white font-bold"
            >
              {progress.stage === 'fetching' || progress.stage === 'importing' ? (
                <>
                  <Loader2 size={16} className="mr-2 animate-spin" />
                  Cleaning up...
                </>
              ) : (
                <>
                  <RefreshCw size={16} className="mr-2" />
                  Cleanup Jellyfin Media
                </>
              )}
            </Button>
          </div>
        </div>
        )}
      </div>

      {/* Progress Section */}
      {progress.stage !== 'idle' && (
        <div className="bg-card/50 backdrop-blur-sm border border-border/50 rounded-xl p-6">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-3">
              {progress.stage === 'complete' ? (
                <div className="w-10 h-10 bg-green-500/10 rounded-full flex items-center justify-center border border-green-500/30">
                  <CheckCircle className="text-green-500" size={20} />
                </div>
              ) : progress.stage === 'error' ? (
                <div className="w-10 h-10 bg-red-500/10 rounded-full flex items-center justify-center border border-red-500/30">
                  <XCircle className="text-red-500" size={20} />
                </div>
              ) : (
                <div className="w-10 h-10 bg-purple-500/10 rounded-full flex items-center justify-center border border-purple-500/30">
                  <Loader2 className="text-purple-500 animate-spin" size={20} />
                </div>
              )}
              <div>
                <h3 className="font-bold text-foreground">{progress.message}</h3>
                <p className="text-xs text-muted-foreground font-medium">
                  {progress.stage === 'fetching' && 'Connecting to external service...'}
                  {progress.stage === 'importing' && `Processing items... ${getProgressPercentage()}%`}
                  {progress.stage === 'complete' && 'Import finished'}
                  {progress.stage === 'error' && 'An error occurred'}
                </p>
              </div>
            </div>
            {progress.stage === 'complete' || progress.stage === 'error' ? (
              <Button
                variant="outline"
                size="sm"
                onClick={resetImport}
                className="gap-2 font-bold border-border/50 hover:border-[#6d28d9]/50 transition-all duration-300"
              >
                <RefreshCw size={16} />
                Reset
              </Button>
            ) : null}
          </div>

          {/* Progress Bar */}
          {progress.stage === 'fetching' || progress.stage === 'importing' ? (
            <div className="mb-6">
              <div className="h-2 bg-muted rounded-full overflow-hidden">
                <div
                  className={cn(
                    "h-full transition-all duration-300 ease-out",
                    progress.stage === 'error' ? "bg-gradient-to-r from-red-500 to-red-600" : "bg-gradient-to-r from-[#6d28d9] to-[#8b5cf6]"
                  )}
                  style={{ width: `${getProgressPercentage()}%` }}
                />
              </div>
              <div className="flex justify-between mt-2 text-xs text-muted-foreground font-medium">
                <span>{progress.current} / {progress.total} items</span>
                <span>{getProgressPercentage()}%</span>
              </div>
            </div>
          ) : null}

          {/* Stats */}
          <div className="grid grid-cols-3 gap-4 mb-6">
            <div className="bg-muted/50 backdrop-blur-sm rounded-xl p-4 border border-border/50">
              <div className="flex items-center gap-2 mb-2">
                <Film size={16} className="text-[#6d28d9]" />
                <span className="text-xs font-bold text-muted-foreground">
                  {(progress as any).gamesImported !== undefined ? 'Games' : 
                   (progress as any).moviesImported !== undefined ? 'Movies' : 
                   (progress as any).seriesImported !== undefined ? 'Series' : 
                   (progress as any).musicImported !== undefined ? 'Music' : 'Videos'}
                </span>
              </div>
              <p className="text-2xl font-black text-foreground">
                {(progress as any).gamesImported !== undefined ? (progress as any).gamesImported : 
                 (progress as any).moviesImported !== undefined ? (progress as any).moviesImported :
                 (progress as any).seriesImported !== undefined ? (progress as any).seriesImported :
                 (progress as any).musicImported !== undefined ? (progress as any).musicImported : progress.videosImported}
              </p>
            </div>
            <div className="bg-muted/50 backdrop-blur-sm rounded-xl p-4 border border-border/50">
              <div className="flex items-center gap-2 mb-2">
                <Users size={16} className="text-[#6d28d9]" />
                <span className="text-xs font-bold text-muted-foreground">{(progress as any).castImported !== undefined ? 'Cast' : 'Actors'}</span>
              </div>
              <p className="text-2xl font-black text-foreground">{(progress as any).castImported !== undefined ? (progress as any).castImported : progress.actorsImported}</p>
            </div>
            <div className="bg-muted/50 backdrop-blur-sm rounded-xl p-4 border border-border/50">
              <div className="flex items-center gap-2 mb-2">
                <AlertCircle size={16} className="text-red-500" />
                <span className="text-xs font-bold text-muted-foreground">Errors</span>
              </div>
              <p className="text-2xl font-black text-foreground">{progress.errors.length}</p>
            </div>
          </div>

          {/* Log */}
          {importLog.length > 0 && (
            <div
              ref={logContainerRef}
              className="bg-zinc-900/90 backdrop-blur-sm rounded-xl p-4 max-h-64 overflow-y-auto border border-border/50"
            >
              <pre className="text-xs text-green-400 font-mono whitespace-pre-wrap">
                {importLog.join('\n')}
              </pre>
            </div>
          )}

          {/* Errors */}
          {progress.errors.length > 0 && (
            <div className="mt-4">
              <h4 className="text-sm font-bold text-red-500 mb-2">Errors</h4>
              <div className="bg-red-500/10 border border-red-500/30 rounded-xl p-3 max-h-32 overflow-y-auto backdrop-blur-sm">
                {progress.errors.map((error, index) => (
                  <p key={index} className="text-xs text-red-500 font-medium mb-1">
                    • {error}
                  </p>
                ))}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}