import React, { useState, useEffect, useRef } from 'react';
import { BookOpen, CheckSquare, MessageSquare, Clock, Settings, Zap, Trash2, Plus, Play, Pause, RotateCcw, Save, X, Brain, ChevronRight, GraduationCap, Download, Upload, AlertCircle, Edit3 } from 'lucide-react';

/**
 * STUDY NEXUS v2.1 - Production Ready Student OS
 * Fixes: Updated Model ID for compatibility, Added Custom Model setting.
 */

// --- UTILS & API ---

// Default to the preview model which is currently supported in this environment
const DEFAULT_MODEL = "gemini-2.5-flash-preview-09-2025";

const callGemini = async (apiKey, modelId, prompt, systemInstruction = "") => {
  if (!apiKey) throw new Error("API Key is missing. Go to Settings to add it.");
  
  // Use the user's custom model or fallback to default
  const model = modelId || DEFAULT_MODEL;
  const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;
  
  const payload = {
    contents: [{ role: "user", parts: [{ text: prompt }] }],
    systemInstruction: { parts: [{ text: systemInstruction }] },
    generationConfig: {
      temperature: 0.7,
      maxOutputTokens: 1000,
    }
  };

  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    
    const data = await response.json();
    
    if (!response.ok) {
      const errorMsg = data.error?.message || "Unknown API Error";
      if (errorMsg.includes("not found")) throw new Error(`Model '${model}' not found. Try 'gemini-2.5-flash-preview-09-2025' in Settings.`);
      if (errorMsg.includes("API key")) throw new Error("Invalid API Key. Please check settings.");
      throw new Error(errorMsg);
    }

    if (!data.candidates || !data.candidates[0]?.content?.parts?.[0]?.text) {
      throw new Error("AI returned an empty response. Try rephrasing.");
    }

    return data.candidates[0].content.parts[0].text;
  } catch (error) {
    console.error("Gemini API Error:", error);
    throw error;
  }
};

// --- HOOKS ---

const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Storage Error:", error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error("Storage Save Error:", error);
    }
  };

  return [storedValue, setValue];
};

// --- COMPONENTS ---

const Navigation = ({ activeTab, setActiveTab }) => {
  const tabs = [
    { id: 'dashboard', icon: <Zap size={20} />, label: 'Nexus' },
    { id: 'chat', icon: <MessageSquare size={20} />, label: 'AI Guru' },
    { id: 'tasks', icon: <CheckSquare size={20} />, label: 'Tasks' },
    { id: 'flashcards', icon: <Brain size={20} />, label: 'Cards' },
    { id: 'focus', icon: <Clock size={20} />, label: 'Focus' },
    { id: 'settings', icon: <Settings size={20} />, label: 'Settings' },
  ];

  return (
    <nav className="fixed bottom-0 left-0 right-0 md:static md:w-20 md:h-screen bg-slate-900/95 backdrop-blur-md border-t md:border-t-0 md:border-r border-slate-700 flex md:flex-col justify-around md:justify-start items-center p-2 md:py-6 z-50">
      <div className="hidden md:flex mb-8 text-cyan-400">
        <GraduationCap size={32} />
      </div>
      {tabs.map((tab) => (
        <button
          key={tab.id}
          onClick={() => setActiveTab(tab.id)}
          className={`p-3 rounded-xl transition-all duration-300 flex flex-col md:items-center gap-1 group relative ${
            activeTab === tab.id 
              ? 'bg-cyan-500/20 text-cyan-400 shadow-[0_0_15px_rgba(34,211,238,0.3)]' 
              : 'text-slate-400 hover:text-white hover:bg-slate-800'
          }`}
        >
          {tab.icon}
          <span className="text-[10px] md:hidden">{tab.label}</span>
          <span className="hidden md:group-hover:block absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-50 border border-slate-700 shadow-xl">
            {tab.label}
          </span>
        </button>
      ))}
    </nav>
  );
};

// 1. DASHBOARD
const Dashboard = ({ userName, stats, setActiveTab }) => (
  <div className="p-6 md:p-10 animate-fade-in space-y-6 overflow-y-auto h-full pb-24 md:pb-10">
    <header className="mb-8">
      <h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">
        Hello, {userName || 'Student'}
      </h1>
      <p className="text-slate-400 mt-2">Your academic dashboard is ready. Kya padhna hai aaj?</p>
    </header>

    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <div onClick={() => setActiveTab('tasks')} className="bg-slate-800/50 p-6 rounded-2xl border border-slate-700 hover:border-cyan-500/50 transition-all cursor-pointer group hover:bg-slate-800">
        <div className="flex justify-between items-start mb-4">
          <div className="p-3 bg-blue-500/20 rounded-lg text-blue-400 group-hover:scale-110 transition-transform"><CheckSquare /></div>
          <span className="text-2xl font-bold text-white">{stats.pendingTasks}</span>
        </div>
        <h3 className="text-slate-300 font-medium">Pending Tasks</h3>
      </div>

      <div onClick={() => setActiveTab('flashcards')} className="bg-slate-800/50 p-6 rounded-2xl border border-slate-700 hover:border-purple-500/50 transition-all cursor-pointer group hover:bg-slate-800">
        <div className="flex justify-between items-start mb-4">
          <div className="p-3 bg-purple-500/20 rounded-lg text-purple-400 group-hover:scale-110 transition-transform"><Brain /></div>
          <span className="text-2xl font-bold text-white">{stats.decks}</span>
        </div>
        <h3 className="text-slate-300 font-medium">Study Decks</h3>
      </div>

      <div onClick={() => setActiveTab('focus')} className="bg-slate-800/50 p-6 rounded-2xl border border-slate-700 hover:border-emerald-500/50 transition-all cursor-pointer group hover:bg-slate-800">
        <div className="flex justify-between items-start mb-4">
          <div className="p-3 bg-emerald-500/20 rounded-lg text-emerald-400 group-hover:scale-110 transition-transform"><Clock /></div>
          <span className="text-2xl font-bold text-white">{stats.minutesFocused}</span>
        </div>
        <h3 className="text-slate-300 font-medium">Mins Focused</h3>
      </div>
      
      <div onClick={() => setActiveTab('chat')} className="bg-gradient-to-br from-cyan-600/20 to-purple-600/20 p-6 rounded-2xl border border-slate-700 hover:border-cyan-400/50 transition-all cursor-pointer group relative overflow-hidden">
        <div className="absolute top-0 right-0 p-4 opacity-10"><Zap size={100} /></div>
        <div className="flex justify-between items-start mb-4 relative z-10">
          <div className="p-3 bg-cyan-500/20 rounded-lg text-cyan-400 group-hover:scale-110 transition-transform"><MessageSquare /></div>
        </div>
        <h3 className="text-white font-medium relative z-10">Ask AI Guru</h3>
        <p className="text-sm text-slate-400 mt-1 relative z-10">Hinglish Tutor.</p>
      </div>
    </div>
  </div>
);

// 2. CHAT COMPONENT (GURU)
const AIChat = ({ apiKey, modelId, userName }) => {
  const [messages, setMessages] = useState([
    { role: 'ai', text: `Namaste ${userName || 'Student'}! I am Guru. Study mein kya help chahiye aaj? I can explain any topic in Hinglish or English.` }
  ]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  useEffect(scrollToBottom, [messages]);

  const handleSend = async () => {
    if (!input.trim()) return;
    if (!apiKey) {
      setMessages(prev => [...prev, { role: 'user', text: input }, { role: 'system', text: "⚠️ Error: No API Key found. Please go to Settings to add it." }]);
      setInput('');
      return;
    }
    
    const userMsg = input;
    setMessages(prev => [...prev, { role: 'user', text: userMsg }]);
    setInput('');
    setLoading(true);

    const systemPrompt = `You are "Guru", a smart and friendly student mentor for Indian students.
    User Name: ${userName || 'Student'}
    Language Preference: Mix of English and Hindi (Hinglish) unless requested otherwise.
    
    Instructions:
    1. Explain concepts simply and clearly.
    2. Use Hinglish naturally (e.g., "Concept bohot simple hai," "Basically...").
    3. If the user asks for a "Practice Sheet" or "Questions", generate 3-5 practice questions relevant to the topic.
    4. If the user previously made a mistake (in conversation context), gently correct them.
    5. Be encouraging.
    
    Example: "Electron nucleus ke around ghumta hai, jaise planets sun ke around."`;

    try {
      const history = messages.slice(-10).map(m => `${m.role === 'user' ? 'Student' : 'Guru'}: ${m.text}`).join('\n');
      const fullPrompt = `${history}\nStudent: ${userMsg}\nGuru:`;
      
      const response = await callGemini(apiKey, modelId, fullPrompt, systemPrompt);
      setMessages(prev => [...prev, { role: 'ai', text: response }]);
    } catch (error) {
      setMessages(prev => [...prev, { role: 'system', text: `❌ Error: ${error.message}` }]);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="flex flex-col h-full bg-slate-900/50 pb-20 md:pb-0">
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.map((msg, idx) => (
          <div key={idx} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
            <div className={`max-w-[85%] md:max-w-[70%] p-4 rounded-2xl shadow-sm ${
              msg.role === 'user' 
                ? 'bg-cyan-600 text-white rounded-br-none' 
                : msg.role === 'system' ? 'bg-red-500/10 text-red-400 border border-red-500/20' : 'bg-slate-800 text-slate-200 rounded-bl-none border border-slate-700'
            }`}>
              {msg.role === 'ai' && <div className="text-xs text-cyan-400 mb-1 font-bold tracking-wider">GURU</div>}
              <div className="whitespace-pre-wrap leading-relaxed">{msg.text}</div>
            </div>
          </div>
        ))}
        {loading && (
          <div className="flex items-center space-x-2 text-slate-500 text-sm ml-4">
            <span className="text-xs animate-pulse">Guru is thinking...</span>
          </div>
        )}
        <div ref={messagesEndRef} />
      </div>
      <div className="p-4 bg-slate-800 border-t border-slate-700">
        <div className="flex gap-2">
          <input 
            type="text" 
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={(e) => e.key === 'Enter' && handleSend()}
            placeholder="Ask a doubt..."
            className="flex-1 bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-cyan-500 transition-colors"
          />
          <button 
            onClick={handleSend}
            disabled={loading}
            className="bg-cyan-600 hover:bg-cyan-500 text-white p-3 rounded-xl transition-colors disabled:opacity-50"
          >
            <Zap size={20} />
          </button>
        </div>
      </div>
    </div>
  );
};

// 3. TASK BOARD
const TaskBoard = ({ tasks, setTasks }) => {
  const [newTask, setNewTask] = useState('');
  const [filter, setFilter] = useState('all');

  const addTask = () => {
    if (!newTask.trim()) return;
    const task = {
      id: Date.now(),
      text: newTask,
      status: 'todo',
      createdAt: new Date().toISOString()
    };
    setTasks(prev => [task, ...prev]);
    setNewTask('');
  };

  const toggleTask = (id) => {
    setTasks(prev => prev.map(t => t.id === id ? { ...t, status: t.status === 'todo' ? 'done' : 'todo' } : t));
  };

  const deleteTask = (id) => {
    setTasks(prev => prev.filter(t => t.id !== id));
  };

  const filteredTasks = tasks.filter(t => filter === 'all' ? true : t.status === filter);

  return (
    <div className="p-6 h-full flex flex-col pb-24 md:pb-6">
      <div className="flex flex-col md:flex-row md:justify-between md:items-center mb-6 gap-4">
        <h2 className="text-2xl font-bold text-white">Assignments</h2>
        <div className="flex bg-slate-800 rounded-lg p-1 self-start md:self-auto">
          {['all', 'todo', 'done'].map(f => (
            <button
              key={f}
              onClick={() => setFilter(f)}
              className={`px-4 py-1 rounded-md text-sm capitalize transition-all ${filter === f ? 'bg-slate-600 text-white shadow' : 'text-slate-400 hover:text-slate-200'}`}
            >
              {f}
            </button>
          ))}
        </div>
      </div>

      <div className="flex gap-2 mb-6">
        <input 
          type="text" 
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && addTask()}
          placeholder="New task..."
          className="flex-1 bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-cyan-500 transition-colors"
        />
        <button onClick={addTask} className="bg-cyan-600 hover:bg-cyan-500 text-white px-6 rounded-xl font-medium flex items-center gap-2 transition-colors">
          <Plus size={18} />
        </button>
      </div>

      <div className="flex-1 overflow-y-auto space-y-3 pr-2">
        {filteredTasks.length === 0 ? (
          <div className="text-center text-slate-500 mt-20 flex flex-col items-center">
            <CheckSquare size={48} className="mb-4 opacity-20" />
            <p>No tasks. Time to relax!</p>
          </div>
        ) : (
          filteredTasks.map(task => (
            <div key={task.id} className="bg-slate-800/50 border border-slate-700 p-4 rounded-xl flex items-center justify-between group hover:border-slate-500 transition-all">
              <div className="flex items-center gap-4">
                <button 
                  onClick={() => toggleTask(task.id)}
                  className={`w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all ${
                    task.status === 'done' ? 'bg-emerald-500 border-emerald-500 scale-110' : 'border-slate-500 hover:border-cyan-400'
                  }`}
                >
                  {task.status === 'done' && <div className="w-2.5 h-1.5 border-l-2 border-b-2 border-white rotate-[-45deg] mb-0.5"></div>}
                </button>
                <span className={`transition-all ${task.status === 'done' ? 'text-slate-500 line-through' : 'text-slate-200'}`}>
                  {task.text}
                </span>
              </div>
              <button onClick={() => deleteTask(task.id)} className="text-slate-600 hover:text-red-400 md:opacity-0 group-hover:opacity-100 transition-all p-2">
                <Trash2 size={18} />
              </button>
            </div>
          ))
        )}
      </div>
    </div>
  );
};

// 4. FLASHCARDS
const Flashcards = ({ apiKey, modelId, decks, setDecks }) => {
  const [mode, setMode] = useState('list');
  const [inputText, setInputText] = useState('');
  const [generating, setGenerating] = useState(false);
  const [activeDeck, setActiveDeck] = useState(null);
  const [cardIndex, setCardIndex] = useState(0);
  const [flipped, setFlipped] = useState(false);
  const [error, setError] = useState(null);

  const generateCards = async () => {
    if (!inputText.trim()) return;
    if (!apiKey) {
      setError("Please add an API key in Settings first.");
      return;
    }

    setGenerating(true);
    setError(null);
    
    try {
      const prompt = `Create a list of 5 to 10 flashcards from this text. 
      OUTPUT JSON ONLY. Format: [{"front": "Question", "back": "Answer"}].
      Text: "${inputText.substring(0, 4000)}"`;
      
      let response = await callGemini(apiKey, modelId, prompt, "You are a JSON generator.");
      const cleanJson = response.replace(/```json/g, '').replace(/```/g, '').trim();
      const cards = JSON.parse(cleanJson);
      
      if (!Array.isArray(cards)) throw new Error("AI format error.");

      const newDeck = {
        id: Date.now(),
        title: `Study Set ${new Date().toLocaleDateString()}`,
        cards: cards,
        createdAt: new Date().toISOString()
      };
      
      setDecks(prev => [newDeck, ...prev]);
      setMode('list');
      setInputText('');
    } catch (err) {
      setError(err.message);
    } finally {
      setGenerating(false);
    }
  };

  const deleteDeck = (id, e) => {
    e.stopPropagation();
    if(confirm("Delete this deck?")) setDecks(prev => prev.filter(d => d.id !== id));
  };

  if (mode === 'create') {
    return (
      <div className="p-6 h-full flex flex-col pb-24 md:pb-6">
        <div className="flex items-center gap-4 mb-6">
          <button onClick={() => setMode('list')} className="p-2 hover:bg-slate-800 rounded-lg text-slate-400"><RotateCcw size={20} /></button>
          <h2 className="text-2xl font-bold text-white">New Deck</h2>
        </div>
        
        <div className="bg-blue-900/20 border border-blue-500/30 p-4 rounded-xl mb-4 text-sm text-blue-200 flex gap-2">
           <AlertCircle size={16} className="mt-0.5 shrink-0" />
           <p>Paste your notes below. The AI will extract key points into flashcards.</p>
        </div>

        <textarea
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
          placeholder="Paste content here..."
          className="flex-1 bg-slate-800/50 border border-slate-700 rounded-xl p-4 text-white resize-none focus:outline-none focus:border-purple-500 mb-4 font-mono text-sm"
        />
        
        {error && <div className="text-red-400 mb-4 text-sm bg-red-900/20 p-3 rounded-lg border border-red-500/30">{error}</div>}

        <button 
          onClick={generateCards}
          disabled={generating}
          className="bg-gradient-to-r from-purple-600 to-blue-600 hover:opacity-90 disabled:opacity-50 text-white py-4 rounded-xl font-bold shadow-lg flex justify-center items-center gap-2"
        >
          {generating ? <span className="animate-spin">⏳</span> : <Brain />} 
          {generating ? 'Processing...' : 'Generate with AI'}
        </button>
      </div>
    );
  }

  if (mode === 'study' && activeDeck) {
    const card = activeDeck.cards[cardIndex];
    return (
      <div className="p-6 h-full flex flex-col items-center justify-center relative pb-24 md:pb-6">
        <button onClick={() => { setMode('list'); setCardIndex(0); setFlipped(false); }} className="absolute top-6 left-6 p-2 hover:bg-slate-800 rounded-lg text-slate-400">
          <X size={24} />
        </button>
        
        <div className="text-center mb-8">
          <h2 className="text-xl text-purple-400 font-bold mb-2">{activeDeck.title}</h2>
          <div className="flex items-center justify-center gap-2">
            <span className="text-xs text-slate-500">{cardIndex + 1}/{activeDeck.cards.length}</span>
          </div>
        </div>

        <div 
          onClick={() => setFlipped(!flipped)}
          className="w-full max-w-xl aspect-[3/2] perspective-1000 cursor-pointer group"
        >
          <div className={`relative w-full h-full duration-500 transform-style-3d transition-transform ${flipped ? 'rotate-y-180' : ''}`}>
            <div className="absolute w-full h-full backface-hidden bg-slate-800 border border-slate-600 rounded-3xl p-8 flex items-center justify-center text-center shadow-2xl group-hover:border-purple-500/50 transition-colors">
              <div>
                <span className="text-xs font-bold text-slate-500 uppercase tracking-widest mb-4 block">Question</span>
                <p className="text-xl md:text-2xl font-medium text-white select-none">{card.front}</p>
                <p className="text-xs text-slate-600 mt-8 absolute bottom-6 w-full left-0">Tap to flip</p>
              </div>
            </div>
            <div className="absolute w-full h-full backface-hidden rotate-y-180 bg-gradient-to-br from-purple-900 to-slate-900 border border-purple-500/50 rounded-3xl p-8 flex items-center justify-center text-center shadow-2xl">
              <div>
                <span className="text-xs font-bold text-purple-400 uppercase tracking-widest mb-4 block">Answer</span>
                <p className="text-xl md:text-2xl font-medium text-white select-none">{card.back}</p>
              </div>
            </div>
          </div>
        </div>

        <div className="flex gap-8 mt-10">
          <button 
            disabled={cardIndex === 0}
            onClick={() => { setCardIndex(p => p - 1); setFlipped(false); }}
            className="p-4 rounded-full bg-slate-800 text-white disabled:opacity-30 hover:bg-slate-700 transition-all border border-slate-700"
          >
            ←
          </button>
          <button 
            disabled={cardIndex === activeDeck.cards.length - 1}
            onClick={() => { setCardIndex(p => p + 1); setFlipped(false); }}
            className="p-4 rounded-full bg-slate-800 text-white disabled:opacity-30 hover:bg-slate-700 transition-all border border-slate-700"
          >
            →
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="p-6 h-full pb-24 md:pb-6">
      <div className="flex justify-between items-center mb-8">
        <h2 className="text-2xl font-bold text-white">Your Decks</h2>
        <button onClick={() => setMode('create')} className="bg-purple-600 hover:bg-purple-500 text-white px-4 py-2 rounded-lg flex items-center gap-2 shadow-lg">
          <Plus size={18} /> New Deck
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {decks.length === 0 ? (
          <div className="col-span-full text-center text-slate-500 mt-20 flex flex-col items-center">
            <BookOpen size={48} className="mb-4 opacity-20" />
            <p>No flashcards yet.</p>
          </div>
        ) : (
          decks.map(deck => (
            <div 
              key={deck.id} 
              onClick={() => { setActiveDeck(deck); setMode('study'); }}
              className="bg-slate-800/50 border border-slate-700 hover:border-purple-500 p-6 rounded-2xl cursor-pointer group transition-all relative hover:bg-slate-800"
            >
              <div className="flex justify-between items-start">
                <div className="p-3 bg-purple-500/20 rounded-lg text-purple-400 mb-4">
                  <BookOpen size={24} />
                </div>
                <button onClick={(e) => deleteDeck(deck.id, e)} className="text-slate-600 hover:text-red-400 p-2 rounded-lg hover:bg-slate-700 transition-colors">
                  <Trash2 size={16} />
                </button>
              </div>
              <h3 className="text-lg font-bold text-white mb-1 truncate">{deck.title}</h3>
              <p className="text-sm text-slate-400">{deck.cards.length} cards</p>
            </div>
          ))
        )}
      </div>
    </div>
  );
};

// 5. SETTINGS
const SettingsComp = ({ apiKey, setApiKey, userName, setUserName, modelId, setModelId, deleteData, exportData, importData }) => {
  const fileInputRef = useRef(null);
  const [showAdvanced, setShowAdvanced] = useState(false);

  return (
    <div className="p-6 max-w-2xl mx-auto h-full overflow-y-auto pb-24 md:pb-6">
      <h2 className="text-3xl font-bold text-white mb-8">Settings</h2>
      
      <div className="space-y-6">
        {/* Profile */}
        <section className="bg-slate-800/50 p-6 rounded-2xl border border-slate-700">
           <h3 className="text-lg font-bold text-white mb-4">Profile</h3>
           <label className="block text-slate-400 mb-2 text-sm uppercase tracking-wider font-bold">Your Name</label>
           <input 
            type="text" 
            value={userName}
            onChange={(e) => setUserName(e.target.value)}
            className="w-full bg-slate-900 border border-slate-700 rounded-xl p-3 text-white focus:border-cyan-500 focus:outline-none transition-colors"
          />
        </section>

        {/* API Section */}
        <section className="bg-slate-800/50 p-6 rounded-2xl border border-slate-700">
          <h3 className="text-lg font-bold text-white mb-4">AI Setup</h3>
          <label className="block text-slate-400 mb-2 text-sm uppercase tracking-wider font-bold">Gemini API Key</label>
          <div className="flex gap-2">
            <input 
              type="password" 
              value={apiKey}
              onChange={(e) => setApiKey(e.target.value)}
              placeholder="AIzaSy..."
              className="flex-1 bg-slate-900 border border-slate-700 rounded-xl p-3 text-white focus:border-cyan-500 focus:outline-none transition-colors"
            />
          </div>
          
          <div className="mt-4">
            <button 
              onClick={() => setShowAdvanced(!showAdvanced)} 
              className="text-xs text-slate-500 flex items-center gap-1 hover:text-slate-300"
            >
              <Settings size={12} /> Advanced: Change Model ID
            </button>
            
            {showAdvanced && (
              <div className="mt-3 p-3 bg-slate-900 rounded-xl border border-slate-700/50">
                <label className="block text-slate-400 mb-1 text-xs">Model ID</label>
                <input 
                  type="text" 
                  value={modelId}
                  onChange={(e) => setModelId(e.target.value)}
                  placeholder={DEFAULT_MODEL}
                  className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-xs text-slate-300 focus:border-purple-500 focus:outline-none"
                />
                <p className="text-[10px] text-slate-500 mt-1">
                  Default: {DEFAULT_MODEL}<br/>
                  Try 'gemini-1.5-flash' or 'gemini-pro' if using outside preview.
                </p>
              </div>
            )}
          </div>
        </section>

        {/* Data */}
        <section className="bg-slate-800/50 p-6 rounded-2xl border border-slate-700">
           <h3 className="text-lg font-bold text-white mb-4">Data & Backup</h3>
           <div className="flex flex-col sm:flex-row gap-4">
              <button onClick={exportData} className="flex-1 bg-slate-700 hover:bg-slate-600 text-white px-4 py-3 rounded-xl font-medium flex items-center justify-center gap-2 transition-all">
                <Download size={18} /> Backup
              </button>
              
              <button onClick={() => fileInputRef.current.click()} className="flex-1 bg-slate-700 hover:bg-slate-600 text-white px-4 py-3 rounded-xl font-medium flex items-center justify-center gap-2 transition-all">
                <Upload size={18} /> Restore
              </button>
              <input type="file" ref={fileInputRef} onChange={(e) => e.target.files[0] && importData(e.target.files[0])} accept=".json" className="hidden" />
           </div>
        </section>

        {/* Danger */}
        <section className="bg-red-900/10 p-6 rounded-2xl border border-red-500/20 mt-8">
          <h3 className="text-red-400 font-bold mb-2">Danger Zone</h3>
          <button 
            onClick={() => { if(confirm("Reset all data? Cannot be undone.")) deleteData(); }}
            className="bg-red-500/10 hover:bg-red-500/20 text-red-500 px-4 py-2 rounded-lg text-sm border border-red-500/30 transition-colors"
          >
            Reset All Data
          </button>
        </section>
      </div>
    </div>
  );
};

// --- MAIN APP ---

const App = () => {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [apiKey, setApiKey] = useLocalStorage('sn_apiKey', '');
  const [modelId, setModelId] = useLocalStorage('sn_modelId', DEFAULT_MODEL); // New setting
  const [userName, setUserName] = useLocalStorage('sn_username', '');
  const [tasks, setTasks] = useLocalStorage('sn_tasks', []);
  const [decks, setDecks] = useLocalStorage('sn_decks', []);
  const [stats, setStats] = useLocalStorage('sn_stats', { minutesFocused: 0 });
  
  const dashboardStats = {
    pendingTasks: tasks.filter(t => t.status === 'todo').length,
    decks: decks.length,
    minutesFocused: stats.minutesFocused
  };

  const clearData = () => {
    setTasks([]);
    setDecks([]);
    setStats({ minutesFocused: 0 });
    alert("Data reset.");
  };

  const exportData = () => {
    const data = { version: 1, date: new Date().toISOString(), userName, tasks, decks, stats };
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `studynexus_backup.json`;
    a.click();
    URL.revokeObjectURL(url);
  };

  const importData = (file) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const data = JSON.parse(e.target.result);
        if (data.tasks) setTasks(data.tasks);
        if (data.decks) setDecks(data.decks);
        if (data.stats) setStats(data.stats);
        if (data.userName) setUserName(data.userName);
        alert("Backup restored!");
      } catch (err) {
        alert("Invalid file.");
      }
    };
    reader.readAsText(file);
  };

  const FocusTimer = ({ stats, setStats }) => {
    const [timeLeft, setTimeLeft] = useState(25 * 60);
    const [isActive, setIsActive] = useState(false);
    const [mode, setMode] = useState('focus'); // focus, break
  
    useEffect(() => {
      let interval = null;
      if (isActive && timeLeft > 0) {
        interval = setInterval(() => {
          setTimeLeft(prev => prev - 1);
          if (mode === 'focus' && timeLeft % 60 === 0 && timeLeft !== 25*60) {
             setStats(prev => ({ ...prev, minutesFocused: (prev.minutesFocused || 0) + 1 }));
          }
        }, 1000);
      } else if (timeLeft === 0) {
        setIsActive(false);
        if (mode === 'focus') { setMode('break'); setTimeLeft(5 * 60); } 
        else { setMode('focus'); setTimeLeft(25 * 60); }
      }
      return () => clearInterval(interval);
    }, [isActive, timeLeft, mode, setStats]);
  
    const formatTime = (seconds) => {
      const mins = Math.floor(seconds / 60);
      const secs = seconds % 60;
      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    };
  
    const totalTime = mode === 'focus' ? 25 * 60 : 5 * 60;
    const progress = ((totalTime - timeLeft) / totalTime) * 100;
  
    return (
      <div className="h-full flex flex-col items-center justify-center p-6 bg-slate-900 relative overflow-hidden pb-24 md:pb-6">
        <div className={`absolute w-[500px] h-[500px] rounded-full blur-[100px] opacity-20 transition-colors duration-1000 ${isActive ? (mode === 'focus' ? 'bg-emerald-600' : 'bg-blue-600') : 'bg-slate-800'}`}></div>
        <div className="relative z-10 text-center">
          <h2 className="text-2xl font-bold text-slate-300 mb-8 uppercase tracking-widest">{mode === 'focus' ? 'Deep Work' : 'Chill Break'}</h2>
          <div className="relative w-64 h-64 md:w-80 md:h-80 flex items-center justify-center mb-8">
            <svg className="w-full h-full transform -rotate-90">
              <circle cx="50%" cy="50%" r="45%" stroke="currentColor" strokeWidth="10" fill="transparent" className="text-slate-800" />
              <circle 
                cx="50%" cy="50%" r="45%" 
                stroke="currentColor" strokeWidth="10" fill="transparent" 
                style={{ strokeDasharray: '283%', strokeDashoffset: `${283 * (1 - progress/100)}%`, transition: 'stroke-dashoffset 1s linear' }}
                className={`${mode === 'focus' ? 'text-emerald-500' : 'text-blue-500'}`}
                strokeLinecap="round"
              />
            </svg>
            <div className="absolute text-6xl md:text-7xl font-mono font-bold text-white tracking-tighter">
              {formatTime(timeLeft)}
            </div>
          </div>
          <div className="flex gap-4 justify-center">
            <button onClick={() => setIsActive(!isActive)} className={`w-16 h-16 rounded-full flex items-center justify-center text-white text-xl shadow-lg hover:scale-105 transition-transform ${isActive ? 'bg-amber-500' : 'bg-emerald-600'}`}>
              {isActive ? <Pause fill="currentColor" /> : <Play fill="currentColor" className="ml-1" />}
            </button>
            <button onClick={() => { setIsActive(false); setTimeLeft(mode === 'focus' ? 25 * 60 : 5 * 60); }} className="w-16 h-16 rounded-full flex items-center justify-center bg-slate-700 text-slate-300 hover:bg-slate-600 hover:text-white transition-colors">
              <RotateCcw size={24} />
            </button>
          </div>
        </div>
      </div>
    );
  };

  const renderContent = () => {
    switch(activeTab) {
      case 'dashboard': return <Dashboard userName={userName} stats={dashboardStats} setActiveTab={setActiveTab} />;
      case 'chat': return <AIChat apiKey={apiKey} modelId={modelId} userName={userName} />;
      case 'tasks': return <TaskBoard tasks={tasks} setTasks={setTasks} />;
      case 'flashcards': return <Flashcards apiKey={apiKey} modelId={modelId} decks={decks} setDecks={setDecks} />;
      case 'focus': return <FocusTimer stats={stats} setStats={setStats} />;
      case 'settings': return <SettingsComp apiKey={apiKey} setApiKey={setApiKey} userName={userName} setUserName={setUserName} modelId={modelId} setModelId={setModelId} deleteData={clearData} exportData={exportData} importData={importData} />;
      default: return <Dashboard />;
    }
  };

  return (
    <div className="flex flex-col md:flex-row h-screen bg-slate-950 text-slate-200 font-sans overflow-hidden">
      <Navigation activeTab={activeTab} setActiveTab={setActiveTab} />
      <main className="flex-1 h-full relative overflow-hidden bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-slate-900 via-slate-950 to-black">
        {/* Abstract Background Shapes */}
        <div className="absolute top-[-10%] right-[-5%] w-96 h-96 bg-purple-600/10 rounded-full blur-3xl pointer-events-none"></div>
        <div className="absolute bottom-[-10%] left-[-5%] w-96 h-96 bg-cyan-600/10 rounded-full blur-3xl pointer-events-none"></div>
        {renderContent()}
      </main>
      
      {!apiKey && activeTab !== 'settings' && (
        <div className="absolute bottom-20 md:bottom-6 right-6 z-50 animate-bounce">
          <div onClick={() => setActiveTab('settings')} className="bg-cyan-500 text-black px-4 py-3 rounded-xl font-bold shadow-lg shadow-cyan-500/20 cursor-pointer flex items-center gap-2 hover:bg-cyan-400">
            <Settings size={20} /> Setup API Key
          </div>
        </div>
      )}
    </div>
  );
};

export default App;