import React, { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { BrainCircuit, Loader2, Play, PenTool, BookOpen, Upload, X, FileText, Image, ScanText, Sparkles, Settings, Palette, Lock } from 'lucide-react';
import { useAuth } from 'react-oidc-context';
import { AuthButton } from './AuthButton';
import { QuizLibrary } from './QuizLibrary';
import { ImportQuizzesModal } from './ImportQuizzesModal';
import { DefaultConfigModal } from './DefaultConfigModal';
import { PreferencesModal } from './PreferencesModal';
import { ApiKeyModal } from './ApiKeyModal';
import { useQuizLibrary } from '../hooks/useQuizLibrary';
import { useUserConfig } from '../hooks/useUserConfig';
import { useUserPreferences } from '../hooks/useUserPreferences';
import type { Quiz, GameConfig } from '../types';

type GenerateMode = 'topic' | 'document';

import type { AIProvider } from '../types';

interface LandingProps {
  onGenerate: (options: { 
    topic?: string; 
    questionCount?: number; 
    files?: File[]; 
    useOcr?: boolean;
    aiProvider?: AIProvider;
    apiKey?: string;
    geminiModel?: string;
    openRouterModel?: string;
    openAIModel?: string;
  }) => void;
  onCreateManual: () => void;
  onLoadQuiz: (quiz: Quiz, quizId?: string) => void;
  onJoin: (pin: string, name: string) => void;
  isLoading: boolean;
  error: string | null;
  initialPin?: string | null;
}

export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, onLoadQuiz, onJoin, isLoading, error, initialPin }) => {
  const auth = useAuth();
  const [searchParams, setSearchParams] = useSearchParams();
  
  const getModeFromUrl = (): 'HOST' | 'JOIN' => {
    if (initialPin) return 'JOIN';
    const modeParam = searchParams.get('mode');
    return modeParam === 'host' ? 'HOST' : 'JOIN';
  };
  
  const [mode, setModeState] = useState<'HOST' | 'JOIN'>(getModeFromUrl);
  
  const setMode = (newMode: 'HOST' | 'JOIN') => {
    setModeState(newMode);
    const newParams = new URLSearchParams();
    const modalParam = searchParams.get('modal');
    if (modalParam) {
      newParams.set('modal', modalParam);
    }
    if (newMode === 'HOST') {
      newParams.set('mode', 'host');
    }
    setSearchParams(newParams, { replace: true });
  };
  const [generateMode, setGenerateMode] = useState<GenerateMode>('topic');
  const [topic, setTopic] = useState('');
  const [pin, setPin] = useState(initialPin || '');
  const [name, setName] = useState('');
  
  const modalParam = searchParams.get('modal');
  const libraryOpen = modalParam === 'library';
  const importOpen = modalParam === 'import';
  const preferencesOpen = modalParam === 'preferences';
  const defaultConfigOpen = modalParam === 'settings';
  const accountSettingsOpen = modalParam === 'account';
  
  const buildCleanParams = (updates: Record<string, string | null>) => {
    const newParams = new URLSearchParams();
    const modeParam = searchParams.get('mode');
    if (modeParam) newParams.set('mode', modeParam);
    
    for (const [key, value] of Object.entries(updates)) {
      if (value !== null) {
        newParams.set(key, value);
      }
    }
    return newParams;
  };

  const setLibraryOpen = (open: boolean) => {
    setSearchParams(buildCleanParams({ modal: open ? 'library' : null }));
  };
  
  const setImportOpen = (open: boolean) => {
    setSearchParams(buildCleanParams({ modal: open ? 'import' : null }));
  };
  
  const setPreferencesOpen = (open: boolean) => {
    setSearchParams(buildCleanParams({ modal: open ? 'preferences' : null }));
  };
  
  const setDefaultConfigOpen = (open: boolean) => {
    setSearchParams(buildCleanParams({ modal: open ? 'settings' : null }));
  };
  
  const setAccountSettingsOpen = (open: boolean) => {
    setSearchParams(buildCleanParams({ modal: open ? 'account' : null }));
  };
  
  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
  const [questionCount, setQuestionCount] = useState(10);
  const [isDragging, setIsDragging] = useState(false);
  const [useOcr, setUseOcr] = useState(false);
  const [editingDefaultConfig, setEditingDefaultConfig] = useState<GameConfig | null>(null);
  const [gameInfo, setGameInfo] = useState<{ randomNamesEnabled: boolean; quizTitle: string } | null>(null);
  const [checkingPin, setCheckingPin] = useState(false);
  
  const hasImageFile = selectedFiles.some(f => f.type.startsWith('image/'));
  const hasDocumentFile = selectedFiles.some(f => !f.type.startsWith('image/') && !['application/pdf', 'text/plain', 'text/markdown', 'text/csv', 'text/html'].includes(f.type));
  const showOcrOption = hasImageFile || hasDocumentFile;

  const { defaultConfig, saving: savingConfig, saveDefaultConfig } = useUserConfig();
  const { preferences, hasAIAccess, saving: savingPrefs, savePreferences, applyColorScheme } = useUserPreferences();
  const hasValidApiKey = (() => {
    if (preferences.aiProvider === 'openrouter') return !!preferences.openRouterApiKey;
    if (preferences.aiProvider === 'openai') return !!preferences.openAIApiKey;
    return hasAIAccess || !!preferences.geminiApiKey;
  })();
  const canUseAI = auth.isAuthenticated && hasValidApiKey;
  
  const { 
    quizzes, 
    loading: libraryLoading, 
    loadingQuizId,
    deletingQuizId,
    sharingQuizId,
    exporting,
    importing,
    error: libraryError, 
    fetchQuizzes, 
    loadQuiz, 
    deleteQuiz,
    shareQuiz,
    unshareQuiz,
    exportQuizzes,
    importQuizzes,
    parseImportFile,
    retry: retryLibrary 
  } = useQuizLibrary();

  useEffect(() => {
    if (libraryOpen && auth.isAuthenticated) {
      fetchQuizzes();
    }
  }, [libraryOpen, auth.isAuthenticated, fetchQuizzes]);

  useEffect(() => {
    if (defaultConfigOpen) {
      setEditingDefaultConfig(defaultConfig);
    } else {
      setEditingDefaultConfig(null);
    }
  }, [defaultConfigOpen, defaultConfig]);

  useEffect(() => {
    const checkGamePin = async () => {
      if (pin.trim().length === 6) {
        setCheckingPin(true);
        try {
          const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3001';
          const response = await fetch(`${backendUrl}/api/games/${pin.trim()}`);
          if (response.ok) {
            const data = await response.json();
            setGameInfo({ randomNamesEnabled: data.randomNamesEnabled, quizTitle: data.quizTitle });
          } else {
            setGameInfo(null);
          }
        } catch {
          setGameInfo(null);
        }
        setCheckingPin(false);
      } else {
        setGameInfo(null);
      }
    };
    checkGamePin();
  }, [pin]);

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      const newFiles = Array.from(e.target.files);
      setSelectedFiles(prev => [...prev, ...newFiles]);
    }
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      const acceptedTypes = ['.pdf', '.txt', '.md', '.docx', '.pptx', '.xlsx', '.odt', '.odp', '.ods', '.rtf', '.jpg', '.jpeg', '.png', '.gif', '.webp'];
      const newFiles = Array.from(e.dataTransfer.files).filter((file: File) => {
        const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
        return acceptedTypes.includes(fileExtension) || file.type.startsWith('image/');
      });
      if (newFiles.length > 0) {
        setSelectedFiles(prev => [...prev, ...newFiles]);
      }
    }
  };

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(true);
  };

  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
  };

  const removeFile = (index: number) => {
    setSelectedFiles(prev => prev.filter((_, i) => i !== index));
    if (selectedFiles.length <= 1) {
      setUseOcr(false);
    }
  };
  
  const clearAllFiles = () => {
    setSelectedFiles([]);
    setUseOcr(false);
  };

  const canGenerateInput = generateMode === 'topic' ? topic.trim() : selectedFiles.length > 0;
  const canGenerate = canUseAI && canGenerateInput;

  const handleHostSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (canGenerate && !isLoading) {
      const aiProvider = preferences.aiProvider || 'gemini';
      let apiKey: string | undefined;
      if (aiProvider === 'openrouter') {
        apiKey = preferences.openRouterApiKey;
      } else if (aiProvider === 'openai') {
        apiKey = preferences.openAIApiKey;
      } else {
        apiKey = preferences.geminiApiKey;
      }
      
      onGenerate({ 
        topic: generateMode === 'topic' ? topic.trim() : undefined, 
        questionCount, 
        files: generateMode === 'document' ? selectedFiles : undefined,
        useOcr: generateMode === 'document' && showOcrOption ? useOcr : undefined,
        aiProvider,
        apiKey,
        geminiModel: aiProvider === 'gemini' ? preferences.geminiModel : undefined,
        openRouterModel: aiProvider === 'openrouter' ? preferences.openRouterModel : undefined,
        openAIModel: aiProvider === 'openai' ? preferences.openAIModel : undefined,
      });
    }
  };

  const handleJoinSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (pin.trim() && (gameInfo?.randomNamesEnabled || name.trim())) {
      onJoin(pin, name.trim() || 'Player');
    }
  };

  const handleLoadQuiz = async (id: string) => {
    try {
      const quiz = await loadQuiz(id);
      setLibraryOpen(false);
      onLoadQuiz(quiz, id);
    } catch (err) {
      if (err instanceof Error && err.message.includes('redirecting')) {
        return;
      }
      console.error('Failed to load quiz:', err);
    }
  };

  return (
    <div className="flex flex-col items-center justify-center h-screen p-4 text-center relative overflow-hidden">
      <div className="absolute top-4 right-4 flex items-center gap-2">
        {auth.isAuthenticated && (
          <>
            <button
              onClick={() => setPreferencesOpen(true)}
              className="p-2.5 bg-white/90 hover:bg-white rounded-xl shadow-md hover:shadow-lg transition-all text-gray-600 hover:text-theme-primary"
              title="Preferences"
            >
              <Palette size={20} />
            </button>
            <button
              onClick={() => {
                setEditingDefaultConfig(defaultConfig);
                setDefaultConfigOpen(true);
              }}
              className="p-2.5 bg-white/90 hover:bg-white rounded-xl shadow-md hover:shadow-lg transition-all text-gray-600 hover:text-theme-primary"
              title="Default Game Settings"
            >
              <Settings size={20} />
            </button>
          </>
        )}
        <AuthButton onAccountSettingsClick={() => setAccountSettingsOpen(true)} />
      </div>
      <motion.div 
        initial={{ scale: 0.8, opacity: 0, rotate: -2 }}
        animate={{ scale: 1, opacity: 1, rotate: 0 }}
        transition={{ type: "spring", bounce: 0.5 }}
        className="bg-white text-gray-900 p-6 md:p-8 rounded-[2rem] shadow-[0_10px_0_rgba(0,0,0,0.1)] max-w-md w-full border-4 border-white/50 max-h-[calc(100vh-2rem)] overflow-y-auto"
      >
        <div className="flex justify-center mb-4 md:mb-6">
          <div className="bg-theme-primary p-3 md:p-4 rounded-2xl md:rounded-3xl rotate-3 shadow-lg">
            <BrainCircuit size={36} className="text-white md:w-12 md:h-12" />
          </div>
        </div>
        <h1 className="text-4xl md:text-5xl font-black mb-1 md:mb-2 text-theme-primary tracking-tight">Kaboot</h1>
        <p className="text-gray-500 font-bold mb-4 md:mb-6">The AI Quiz Party</p>
        
        <div className="flex bg-gray-100 p-2 rounded-2xl mb-6 md:mb-8">
            <button 
                onClick={() => setMode('HOST')}
                className={`flex-1 py-3 rounded-xl font-black text-lg transition-all duration-200 ${mode === 'HOST' ? 'bg-white shadow-md text-theme-primary scale-105' : 'text-gray-400 hover:text-gray-600'}`}
            >
                Host
            </button>
            <button 
                onClick={() => setMode('JOIN')}
                className={`flex-1 py-3 rounded-xl font-black text-lg transition-all duration-200 ${mode === 'JOIN' ? 'bg-white shadow-md text-theme-primary scale-105' : 'text-gray-400 hover:text-gray-600'}`}
            >
                Join
            </button>
        </div>

        {mode === 'HOST' ? (
          <div className="space-y-4">
            {!auth.isAuthenticated ? (
              <div className="text-center py-6">
                <Lock size={32} className="mx-auto mb-3 text-gray-400" />
                <p className="text-gray-500 font-bold mb-4">Sign in to host quizzes</p>
                <button
                  onClick={() => auth.signinRedirect()}
                  className="bg-theme-primary text-white py-3 px-6 rounded-2xl font-black hover:opacity-90 transition-all"
                >
                  Sign In
                </button>
              </div>
            ) : (
              <>
                {canUseAI && (
                  <>
                    <form onSubmit={handleHostSubmit} className="space-y-4">
                      <div className="flex bg-gray-100 p-1.5 rounded-xl mb-2">
                        <button 
                          type="button"
                          onClick={() => setGenerateMode('topic')}
                          className={`flex-1 py-2 px-3 rounded-lg font-bold text-sm transition-all duration-200 flex items-center justify-center gap-1.5 ${
                            generateMode === 'topic' 
                              ? 'bg-white shadow-sm text-theme-primary' 
                              : 'text-gray-400 hover:text-gray-600'
                          }`}
                        >
                          <Sparkles size={16} /> Topic
                        </button>
                        <button 
                          type="button"
                          onClick={() => setGenerateMode('document')}
                          className={`flex-1 py-2 px-3 rounded-lg font-bold text-sm transition-all duration-200 flex items-center justify-center gap-1.5 ${
                            generateMode === 'document' 
                              ? 'bg-white shadow-sm text-theme-primary' 
                              : 'text-gray-400 hover:text-gray-600'
                          }`}
                        >
                          <FileText size={16} /> Document
                        </button>
                      </div>

                      <AnimatePresence mode="wait">
                        {generateMode === 'topic' ? (
                          <motion.div
                            key="topic"
                            initial={{ opacity: 0, y: 10 }}
                            animate={{ opacity: 1, y: 0 }}
                            exit={{ opacity: 0, y: -10 }}
                            transition={{ duration: 0.15 }}
                          >
                            <input
                              type="text"
                              placeholder="Enter a topic (e.g. 'Space')"
                              value={topic}
                              onChange={(e) => setTopic(e.target.value)}
                              className="w-full p-4 text-xl font-bold border-2 border-gray-200 rounded-2xl focus:border-theme-primary focus:ring-4 focus:ring-theme-primary/20 outline-none transition-all placeholder:font-medium text-center"
                              disabled={isLoading}
                            />
                          </motion.div>
                        ) : (
                          <motion.div
                            key="document"
                            initial={{ opacity: 0, y: 10 }}
                            animate={{ opacity: 1, y: 0 }}
                            exit={{ opacity: 0, y: -10 }}
                            transition={{ duration: 0.15 }}
                            className="space-y-3"
                          >
                            <div
                              onDrop={handleDrop}
                              onDragOver={handleDragOver}
                              onDragLeave={handleDragLeave}
                              onClick={() => document.getElementById('file-upload')?.click()}
                              className={`border-2 border-dashed rounded-2xl p-4 text-center cursor-pointer transition-all ${
                                isDragging 
                                  ? 'border-theme-primary bg-theme-primary/5 scale-[1.02]' 
                                  : selectedFiles.length > 0
                                    ? 'border-theme-primary/50 bg-theme-primary/5'
                                    : 'border-gray-300 hover:border-gray-400 hover:bg-gray-50'
                              }`}
                            >
                              <input
                                id="file-upload"
                                type="file"
                                multiple
                                className="hidden"
                                onChange={handleFileSelect}
                                accept=".pdf,.txt,.md,.docx,.pptx,.xlsx,.odt,.odp,.ods,.rtf,.jpg,.jpeg,.png,.gif,.webp"
                              />
                              
                              <div className="space-y-2">
                                <Upload className={`mx-auto ${isDragging ? 'text-theme-primary' : 'text-gray-400'}`} size={28} />
                                <p className="text-sm font-bold text-gray-600">
                                  {isDragging ? 'Drop files here' : 'Drop files or click to browse'}
                                </p>
                                <p className="text-xs text-gray-400">PDF, DOCX, PPTX, XLSX, TXT, Images</p>
                              </div>
                            </div>
                            
                            {selectedFiles.length > 0 && (
                              <div className="space-y-2">
                                <div className="flex justify-between items-center">
                                  <span className="text-sm font-bold text-gray-600">{selectedFiles.length} file{selectedFiles.length > 1 ? 's' : ''} selected</span>
                                  <button
                                    type="button"
                                    onClick={(e) => {
                                      e.stopPropagation();
                                      clearAllFiles();
                                    }}
                                    className="text-xs font-bold text-gray-400 hover:text-red-500 transition-colors"
                                  >
                                    Clear all
                                  </button>
                                </div>
                                <div className="max-h-32 overflow-y-auto space-y-1.5">
                                  {selectedFiles.map((file, index) => (
                                    <div key={index} className="flex items-center justify-between bg-white p-2 rounded-lg shadow-sm">
                                      <div className="flex items-center gap-2 overflow-hidden text-left">
                                        <div className="p-1.5 bg-theme-primary/10 rounded">
                                          {file.type.startsWith('image/') ? (
                                            <Image size={14} className="text-theme-primary" />
                                          ) : (
                                            <FileText size={14} className="text-theme-primary" />
                                          )}
                                        </div>
                                        <span className="text-xs font-medium text-gray-700 truncate max-w-[180px]">{file.name}</span>
                                      </div>
                                      <button
                                        type="button"
                                        onClick={(e) => {
                                          e.stopPropagation();
                                          removeFile(index);
                                        }}
                                        className="p-1 hover:bg-gray-100 rounded text-gray-400 hover:text-red-500 transition-colors"
                                      >
                                        <X size={14} />
                                      </button>
                                    </div>
                                  ))}
                                </div>
                              </div>
                            )}
                            
                            {showOcrOption && (
                              <label className="flex items-center gap-3 p-3 bg-gray-50 rounded-xl cursor-pointer hover:bg-gray-100 transition-colors">
                                <div className="relative">
                                  <input
                                    type="checkbox"
                                    checked={useOcr}
                                    onChange={(e) => setUseOcr(e.target.checked)}
                                    className="sr-only peer"
                                  />
                                  <div className="w-10 h-6 bg-gray-300 rounded-full peer-checked:bg-theme-primary transition-colors"></div>
                                  <div className="absolute left-1 top-1 w-4 h-4 bg-white rounded-full peer-checked:translate-x-4 transition-transform"></div>
                                </div>
                                <div className="flex items-center gap-2">
                                  <ScanText size={18} className="text-gray-500" />
                                  <span className="text-sm font-bold text-gray-600">
                                    {hasImageFile && !hasDocumentFile ? 'Extract text with OCR' : 'OCR embedded images'}
                                  </span>
                                </div>
                              </label>
                            )}
                          </motion.div>
                        )}
                      </AnimatePresence>

                      <div className="space-y-2 pt-2">
                        <div className="flex justify-between items-center text-sm font-bold text-gray-500">
                          <span>Questions</span>
                          <span className="bg-gray-100 text-gray-600 px-2 py-0.5 rounded-lg text-xs">{questionCount}</span>
                        </div>
                        <input
                          type="range"
                          min="5"
                          max="50"
                          value={questionCount}
                          onChange={(e) => setQuestionCount(Number(e.target.value))}
                          className="w-full accent-theme-primary h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
                        />
                      </div>

                      <button
                        type="submit"
                        disabled={isLoading || !canGenerate}
                        className="w-full bg-[#333] text-white py-4 rounded-2xl text-xl font-black shadow-[0_6px_0_#000] active:shadow-none active:translate-y-[6px] transition-all hover:bg-black flex items-center justify-center gap-3 disabled:opacity-50 disabled:cursor-not-allowed"
                      >
                        {isLoading ? (
                          <Loader2 className="animate-spin" />
                        ) : (
                          <>
                            <BrainCircuit size={24} /> 
                            {generateMode === 'document' ? 'Generate from Document' : 'Generate Quiz'}
                          </>
                        )}
                      </button>
                    </form>
                    
                    <div className="relative flex py-2 items-center opacity-50">
                        <div className="flex-grow border-t-2 border-gray-300"></div>
                        <span className="flex-shrink mx-4 text-gray-400 font-bold">OR</span>
                        <div className="flex-grow border-t-2 border-gray-300"></div>
                    </div>
                  </>
                )}

                {!canUseAI && (
                  <button
                    onClick={() => setSearchParams(buildCleanParams({ modal: 'account' }))}
                    className="w-full p-4 bg-theme-primary/5 border-2 border-theme-primary/20 rounded-2xl text-left hover:border-theme-primary hover:bg-theme-primary/10 hover:shadow-lg hover:scale-[1.02] transition-all group"
                  >
                    <div className="flex items-center gap-3">
                      <div className="p-2 bg-theme-primary/15 rounded-xl group-hover:bg-theme-primary/25 transition-colors">
                        <Sparkles size={20} className="text-theme-primary" />
                      </div>
                      <div>
                        <p className="font-bold text-gray-800">AI Quiz Generation Available</p>
                        <p className="text-sm text-gray-500">Configure your API key in settings to get started</p>
                      </div>
                    </div>
                  </button>
                )}

                <button 
                  onClick={onCreateManual}
                  className="w-full bg-white border-2 border-theme-primary text-theme-primary py-3 rounded-2xl text-lg font-black hover:bg-theme-hover shadow-[0_4px_0_var(--theme-primary)] active:shadow-none active:translate-y-[4px] transition-all flex items-center justify-center gap-2"
                >
                   <PenTool size={20} /> Create Manually
                </button>

                <button 
                  onClick={() => setLibraryOpen(true)}
                  className="w-full bg-gray-100 text-gray-600 py-3 rounded-2xl text-lg font-black hover:bg-gray-200 shadow-[0_4px_0_#d1d5db] active:shadow-none active:translate-y-[4px] transition-all flex items-center justify-center gap-2"
                >
                  <BookOpen size={20} /> My Quizzes
                </button>
              </>
            )}
          </div>
        ) : (
            <form onSubmit={handleJoinSubmit} className="space-y-4">
              <input
                type="text"
                placeholder="Game PIN"
                value={pin}
                onChange={(e) => setPin(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 6))}
                className="w-full p-4 text-xl font-bold border-2 border-gray-200 rounded-2xl focus:border-theme-primary focus:ring-4 focus:ring-theme-primary/20 outline-none text-center uppercase tracking-widest"
              />
              {gameInfo?.randomNamesEnabled ? (
                <div className="p-4 bg-theme-primary/10 rounded-2xl border-2 border-theme-primary/20">
                  <p className="text-theme-primary font-bold text-center">
                    You'll get a random name!
                  </p>
                </div>
              ) : (
                <input
                  type="text"
                  placeholder="Nickname"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  className="w-full p-4 text-xl font-bold border-2 border-gray-200 rounded-2xl focus:border-theme-primary focus:ring-4 focus:ring-theme-primary/20 outline-none text-center"
                />
              )}
              <button
                type="submit"
                disabled={!pin.trim() || (!gameInfo?.randomNamesEnabled && !name.trim()) || checkingPin}
                className="w-full bg-[#333] text-white py-4 rounded-2xl text-xl font-black shadow-[0_6px_0_#000] active:shadow-none active:translate-y-[6px] transition-all hover:bg-black flex items-center justify-center gap-3 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {checkingPin ? <Loader2 className="animate-spin" /> : <Play fill="currentColor" />} Join Game
              </button>
            </form>
        )}
        
        {error && (
          <motion.div initial={{ height: 0 }} animate={{ height: 'auto' }} className="overflow-hidden mt-4">
            <p className="text-red-500 font-bold bg-red-50 p-3 rounded-xl border-2 border-red-100">{error}</p>
          </motion.div>
        )}
      </motion.div>

      <QuizLibrary
        isOpen={libraryOpen}
        onClose={() => setLibraryOpen(false)}
        quizzes={quizzes}
        loading={libraryLoading}
        loadingQuizId={loadingQuizId}
        deletingQuizId={deletingQuizId}
        sharingQuizId={sharingQuizId}
        exporting={exporting}
        error={libraryError}
        onLoadQuiz={handleLoadQuiz}
        onDeleteQuiz={deleteQuiz}
        onShareQuiz={shareQuiz}
        onUnshareQuiz={unshareQuiz}
        onExportQuizzes={exportQuizzes}
        onImportClick={() => setImportOpen(true)}
        onRetry={retryLibrary}
      />

      <ImportQuizzesModal
        isOpen={importOpen}
        onClose={() => setImportOpen(false)}
        onImport={importQuizzes}
        parseFile={parseImportFile}
        importing={importing}
      />

      <DefaultConfigModal
        isOpen={defaultConfigOpen}
        onClose={() => {
          setDefaultConfigOpen(false);
          setEditingDefaultConfig(null);
        }}
        config={editingDefaultConfig || defaultConfig}
        onChange={setEditingDefaultConfig}
        onSave={async () => {
          if (editingDefaultConfig) {
            await saveDefaultConfig(editingDefaultConfig);
            setDefaultConfigOpen(false);
            setEditingDefaultConfig(null);
          }
        }}
        saving={savingConfig}
      />

      <PreferencesModal
        isOpen={preferencesOpen}
        onClose={() => setPreferencesOpen(false)}
        preferences={preferences}
        onSave={savePreferences}
        onPreview={applyColorScheme}
        saving={savingPrefs}
      />

      <ApiKeyModal
        isOpen={accountSettingsOpen}
        onClose={() => setAccountSettingsOpen(false)}
        preferences={preferences}
        onSave={async (prefs) => {
          await savePreferences({ ...preferences, ...prefs });
        }}
        saving={savingPrefs}
        hasAIAccess={hasAIAccess}
      />
    </div>
  );
};