import React, { useState, useEffect } from 'react';
import { 
  User, 
  Shield, 
  Activity, 
  BookOpen, 
  Pill, 
  Stethoscope, 
  Brain, 
  Baby, 
  Users, 
  Briefcase, 
  ChevronRight, 
  ArrowLeft,
  CheckCircle,
  XCircle,
  Database,
  Upload,
  RefreshCw,
  LogOut,
  Clock,
  Award,
  AlertTriangle,
  Trash2,
  X
} from 'lucide-react';

// --- Error Boundary Component ---
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="min-h-screen flex items-center justify-center bg-red-50 p-6">
          <div className="bg-white p-8 rounded-2xl shadow-xl max-w-lg w-full border border-red-100">
            <div className="flex items-center gap-3 text-red-600 mb-4">
              <AlertTriangle size={32} />
              <h1 className="text-xl font-bold">Something went wrong</h1>
            </div>
            <p className="text-gray-600 mb-4">The application encountered an error. Try clearing your browser cache/data.</p>
            <div className="bg-gray-100 p-4 rounded-lg overflow-auto text-xs font-mono text-red-800 mb-6 border border-gray-200">
              {this.state.error?.toString()}
            </div>
            <button 
              onClick={() => {
                localStorage.removeItem('goodlife_db');
                window.location.reload();
              }}
              className="w-full py-3 bg-red-600 text-white font-bold rounded-xl hover:bg-red-700 transition-colors"
            >
              Reset Data & Reload
            </button>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

// --- Initial Mock Data ---

const INITIAL_DATA = {
  nclex: [], 
  pharm: [
    {
      id: 1,
      question: "A client is prescribed lisinopril. Which finding requires immediate nursing action?",
      options: [
        "Dry cough",
        "Dizziness upon standing",
        "Swelling of the lips and tongue",
        "Serum potassium 4.2 mEq/L"
      ],
      correct: 2,
      explanation: "Swelling of the lips and tongue indicates angioedema, a potentially life-threatening adverse reaction to ACE inhibitors like lisinopril that can compromise the airway. Dry cough and orthostatic hypotension are common side effects but not emergencies."
    }
  ],
  medsurg: [
    {
      id: 201,
      question: "A client with COPD is admitted with an exacerbation. The pulse oximeter reads 86% on room air. Which action should the nurse take first?",
      options: [
        "Administer oxygen at 4 L/min via nasal cannula",
        "Place the client in a high-Fowler's position",
        "Prepare for endotracheal intubation",
        "Assess the client's arterial blood gases (ABGs)"
      ],
      correct: 1,
      explanation: "Placing the client in a high-Fowler's position promotes chest expansion and improves oxygenation immediately with the least invasiveness. Oxygen should be administered cautiously in COPD (usually starting at 1-2 L/min) to avoid suppressing the hypoxic drive, making 4 L/min too high as a starting action."
    },
    {
      id: 202,
      question: "A nurse is caring for a client 4 hours post-thyroidectomy. Which finding requires immediate intervention?",
      options: [
        "Sore throat and hoarseness",
        "Calcium level of 9.0 mg/dL",
        "Noisy breathing (stridor)",
        "Pain at the incision site rating 4/10"
      ],
      correct: 2,
      explanation: "Stridor indicates airway obstruction due to edema or laryngeal nerve damage and is a medical emergency requiring immediate action (often intubation or tracheostomy). Sore throat, mild hypocalcemia (normal is ~8.5-10.5), and pain are expected or less urgent findings."
    },
    {
      id: 203,
      question: "The nurse is caring for a client with a chest tube. The nurse notes continuous bubbling in the water seal chamber. What is the priority action?",
      options: [
        "Clamp the chest tube immediately",
        "Increase the suction pressure",
        "Check the drainage system for leaks",
        "Document the finding as normal"
      ],
      correct: 2,
      explanation: "Continuous bubbling in the water seal chamber indicates an air leak in the system. The priority is to locate the leak (checking connections from the patient to the unit). Clamping is only done for specific checks and can cause tension pneumothorax if done inappropriately."
    },
    {
      id: 204,
      question: "A client with diabetes mellitus type 1 is found unresponsive. The blood glucose is 42 mg/dL. Which medication should the nurse anticipate administering?",
      options: [
        "Regular insulin SQ",
        "Glucagon IM",
        "Metformin PO",
        "Dextrose 5% in Water IV"
      ],
      correct: 1,
      explanation: "For an unresponsive client with severe hypoglycemia who cannot swallow, Glucagon IM or Dextrose 50% IV (not D5W, which is too dilute) is the standard treatment. Insulin would worsen the condition."
    }
  ],
  default: [
    {
      id: 99,
      question: "Which action is the priority when caring for a client with a potential cervical spine injury?",
      options: [
        "Assess pupil reaction",
        "Immobilize the head and neck",
        "Check for sensation in extremities",
        "Administer pain medication"
      ],
      correct: 1,
      explanation: "The priority is to prevent further injury. Immobilizing the head and neck stabilizes the cervical spine. Assessment comes after ensuring safety/stabilization in this specific trauma context."
    }
  ]
};

const CATEGORIES = [
  { id: 'nclex', title: 'NCLEX RN Mixed', sub: 'All Topics', icon: Activity, color: 'bg-blue-100 text-blue-600' },
  { id: 'pharm', title: 'Pharmacology', sub: 'Meds & Doses', icon: Pill, color: 'bg-purple-100 text-purple-600' },
  { id: 'medsurg', title: 'Med-Surg', sub: 'Clinical Care', icon: Stethoscope, color: 'bg-emerald-100 text-emerald-600' },
  { id: 'fund', title: 'Fundamentals', sub: 'Basics', icon: BookOpen, color: 'bg-amber-100 text-amber-600' },
  { id: 'psych', title: 'Psychiatry', sub: 'Mental Health', icon: Brain, color: 'bg-pink-100 text-pink-600' },
  { id: 'mat', title: 'Maternity', sub: 'OB & Newborn', icon: Baby, color: 'bg-rose-100 text-rose-600' },
  { id: 'peds', title: 'Pediatrics', sub: 'Child Health', icon: Users, color: 'bg-orange-100 text-orange-600' },
  { id: 'lead', title: 'Leadership', sub: 'Ethics & Mgmt', icon: Briefcase, color: 'bg-slate-100 text-slate-600' },
];

const Logo = () => (
  <div className="flex flex-col items-center justify-center mb-6">
    <div className="w-24 h-24 bg-white rounded-full shadow-lg flex items-center justify-center mb-3 overflow-hidden border-4 border-pink-50">
      <img 
        src="https://i.postimg.cc/kXTvS36k/Flux-Schnell-Create-a-professional-logo-icon-for-the-brand-nam-0-1-removebg-preview.png" 
        alt="GoodLife Nursing Logo"
        className="w-full h-full object-contain"
        onError={(e) => {
          e.target.onerror = null; 
          e.target.style.display = 'none';
          e.target.parentNode.innerHTML = '<svg class="w-12 h-12 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>';
        }}
      />
    </div>
    <h1 className="text-3xl font-bold text-gray-900 tracking-tight">GoodLife Nursing</h1>
    <span className="text-pink-600 font-medium text-sm tracking-widest uppercase mt-1">AI-Powered Exam Prep</span>
  </div>
);

const formatTime = (seconds) => {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins}:${secs.toString().padStart(2, '0')}`;
};

function AppContent() {
  const [view, setView] = useState('login'); 
  const [userRole, setUserRole] = useState(null);
  const [userName, setUserName] = useState('');
  const [activeTab, setActiveTab] = useState('student');
  const [loginError, setLoginError] = useState('');
  
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [showExplanation, setShowExplanation] = useState(false);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [score, setScore] = useState(0);
  const [quizHistory, setQuizHistory] = useState([]); 
  const [timeLeft, setTimeLeft] = useState(0);

  // Safe Database Initialization
  const [questionBank, setQuestionBank] = useState(() => {
    // Safety check for SSR/Build time
    if (typeof window === 'undefined') return INITIAL_DATA;
    try {
      const savedData = localStorage.getItem('goodlife_db');
      return savedData ? JSON.parse(savedData) : INITIAL_DATA;
    } catch (e) {
      console.error("Failed to load save", e);
      return INITIAL_DATA;
    }
  });

  const [totalCount, setTotalCount] = useState(2042);
  const [uploadStatus, setUploadStatus] = useState(null);
  const [isSyncing, setIsSyncing] = useState(false); 
  
  const [resetConfirm, setResetConfirm] = useState(false);
  const [showUploadInput, setShowUploadInput] = useState(false);
  const [jsonInput, setJsonInput] = useState('');

  useEffect(() => {
    if (typeof window !== 'undefined') {
      try {
        localStorage.setItem('goodlife_db', JSON.stringify(questionBank));
      } catch (e) {
        console.error("Failed to save data", e);
      }
    }
  }, [questionBank]);

  useEffect(() => {
    let timer;
    if (view === 'quiz' && timeLeft > 0) {
      timer = setInterval(() => {
        setTimeLeft((prev) => {
          if (prev <= 1) {
            clearInterval(timer);
            setView('results');
            return 0;
          }
          return prev - 1;
        });
      }, 1000);
    }
    return () => clearInterval(timer);
  }, [view, timeLeft]);

  useEffect(() => {
    let count = 0;
    Object.values(questionBank).forEach(arr => count += arr.length);
    setTotalCount(2042 + count); 
  }, [questionBank]);

  const handleLogin = (e) => {
    e.preventDefault();
    setLoginError('');
    
    if (activeTab === 'student') {
      if (!userName.trim()) return;
      setUserRole('student');
      setView('dashboard');
    } else {
      const pw = e.target.password.value;
      if (pw === 'admin123') {
        setUserRole('admin');
        setView('admin');
      } else {
        setLoginError('Incorrect password. Try "admin123"');
      }
    }
  };

  const startQuiz = (category) => {
    let quizQuestions = [];
    if (category.id === 'nclex') {
      Object.values(questionBank).forEach(arr => {
        quizQuestions = [...quizQuestions, ...arr];
      });
      if (quizQuestions.length === 0) quizQuestions = questionBank.default;
    } else {
      quizQuestions = questionBank[category.id] || questionBank.default;
    }

    setSelectedCategory({ ...category, questions: quizQuestions });
    setCurrentQuestionIndex(0);
    setScore(0);
    setQuizHistory([]);
    setShowExplanation(false);
    setSelectedAnswer(null);
    setTimeLeft(quizQuestions.length * 60);
    setView('quiz');
  };

  const handleAnswer = (index) => {
    if (selectedAnswer !== null) return;
    setSelectedAnswer(index);
    setShowExplanation(true);
    
    const questions = selectedCategory.questions;
    const currentQ = questions[currentQuestionIndex];
    const isCorrect = index === currentQ.correct;

    if (isCorrect) {
      setScore(s => s + 1);
    }

    setQuizHistory(prev => [...prev, {
      question: currentQ,
      userAnswer: index,
      isCorrect: isCorrect
    }]);
  };

  const nextQuestion = () => {
    const questions = selectedCategory.questions;
    if (currentQuestionIndex + 1 < questions.length) {
      setCurrentQuestionIndex(p => p + 1);
      setSelectedAnswer(null);
      setShowExplanation(false);
    } else {
      setView('results');
    }
  };

  const processJsonUpload = () => {
    if (!jsonInput.trim()) return;

    try {
      const parsed = JSON.parse(jsonInput);
      if (!Array.isArray(parsed)) throw new Error("Input is not an array. Must start with '['");
      const valid = parsed.every(q => q.question && Array.isArray(q.options) && typeof q.correct === 'number');
      if (!valid) throw new Error("Invalid format. Questions need 'question', 'options', 'correct' (number), 'explanation'.");

      setQuestionBank(prev => ({
        ...prev,
        nclex: [...prev.nclex, ...parsed],
        medsurg: [...prev.medsurg, ...parsed]
      }));

      setUploadStatus(`Success! Saved ${parsed.length} questions.`);
      setJsonInput('');
      setShowUploadInput(false);
      setTimeout(() => setUploadStatus(null), 3000);
    } catch (e) {
      // Safe alert fallback or UI error
      setUploadStatus(`Error: ${e.message}`);
      setTimeout(() => setUploadStatus(null), 4000);
    }
  };

  const handleResetDatabase = () => {
    if (!resetConfirm) {
      setResetConfirm(true);
      setTimeout(() => setResetConfirm(false), 3000); 
      return;
    }

    if (typeof window !== 'undefined') {
      localStorage.removeItem('goodlife_db');
    }
    setQuestionBank(INITIAL_DATA);
    setUploadStatus("Database reset to defaults.");
    setResetConfirm(false);
    setTimeout(() => setUploadStatus(null), 3000);
  }
  
  const handleSync = () => {
    if (isSyncing) return;
    setIsSyncing(true);
    setTimeout(() => {
      setIsSyncing(false);
    }, 2000);
  };

  if (view === 'login') {
    return (
      <div className="min-h-screen bg-gradient-to-br from-pink-50 to-white flex items-center justify-center p-4">
        <div className="bg-white max-w-md w-full rounded-2xl shadow-xl overflow-hidden">
          <div className="p-8 pb-6">
            <Logo />
            <div className="flex p-1 bg-gray-100 rounded-xl mb-8">
              <button 
                onClick={() => { setActiveTab('student'); setLoginError(''); }}
                className={`flex-1 py-2.5 text-sm font-semibold rounded-lg transition-all flex items-center justify-center gap-2 ${
                  activeTab === 'student' ? 'bg-white text-pink-700 shadow-sm' : 'text-gray-500 hover:text-gray-700'
                }`}
              >
                <User size={18} /> Student
              </button>
              <button 
                onClick={() => { setActiveTab('admin'); setLoginError(''); }}
                className={`flex-1 py-2.5 text-sm font-semibold rounded-lg transition-all flex items-center justify-center gap-2 ${
                  activeTab === 'admin' ? 'bg-white text-pink-700 shadow-sm' : 'text-gray-500 hover:text-gray-700'
                }`}
              >
                <Shield size={18} /> Admin
              </button>
            </div>
            <form onSubmit={handleLogin} className="space-y-4">
              {activeTab === 'student' ? (
                <>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-gray-700 ml-1">Your Name</label>
                    <input 
                      key="student-name"
                      type="text" 
                      required
                      placeholder="Enter your name"
                      className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-pink-500 focus:ring-2 focus:ring-pink-200 outline-none transition-all"
                      value={userName}
                      onChange={(e) => setUserName(e.target.value)}
                    />
                  </div>
                  <button type="submit" className="w-full py-3.5 bg-gradient-to-r from-pink-600 to-pink-500 text-white font-bold rounded-xl shadow-lg hover:shadow-pink-200/50 hover:scale-[1.02] active:scale-[0.98] transition-all flex items-center justify-center gap-2">
                    Start Practicing <ChevronRight size={20} />
                  </button>
                </>
              ) : (
                <>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-gray-700 ml-1">Admin Password</label>
                    <input 
                      key="admin-password"
                      type="password" 
                      name="password"
                      required
                      placeholder="••••••••"
                      className={`w-full px-4 py-3 rounded-xl border focus:ring-2 outline-none transition-all ${loginError ? 'border-red-300 focus:border-red-500 focus:ring-red-200' : 'border-gray-200 focus:border-pink-500 focus:ring-pink-200'}`}
                    />
                    {loginError && <p className="text-xs text-red-500 ml-1 flex items-center gap-1"><AlertTriangle size={12}/> {loginError}</p>}
                  </div>
                  <button type="submit" className="w-full py-3.5 bg-gray-800 text-white font-bold rounded-xl shadow-lg hover:bg-gray-700 active:scale-[0.98] transition-all flex items-center justify-center gap-2">
                    Enter Dashboard <Shield size={18} />
                  </button>
                  <p className="text-center text-xs text-gray-400 mt-2">Hint: use "admin123"</p>
                </>
              )}
            </form>
          </div>
          <div className="bg-gray-50 py-3 text-center text-xs text-gray-400 border-t border-gray-100">
            © 2024 GoodLife Nursing AI • Secure Access
          </div>
        </div>
      </div>
    );
  }

  if (view === 'dashboard') {
    return (
      <div className="min-h-screen bg-gray-50 pb-20">
        <header className="bg-white shadow-sm sticky top-0 z-10">
          <div className="max-w-md mx-auto px-4 py-4 flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-pink-100 rounded-full flex items-center justify-center text-pink-700 font-bold border-2 border-pink-200">
                {userName.charAt(0).toUpperCase()}
              </div>
              <div>
                <h2 className="font-bold text-gray-800 leading-tight">Hello, {userName}</h2>
                <div className="flex items-center gap-1 text-xs text-green-600 font-medium">
                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                  Ready to learn
                </div>
              </div>
            </div>
            <button onClick={() => setView('login')} className="p-2 text-gray-400 hover:text-gray-600">
              <LogOut size={20} />
            </button>
          </div>
        </header>

        <main className="max-w-md mx-auto px-4 py-6 space-y-8">
          <section className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 flex items-center justify-between">
            <div>
              <h3 className="text-gray-500 text-sm font-medium mb-1">Readiness Score</h3>
              <p className="text-3xl font-bold text-gray-800">0%</p>
              <p className="text-xs text-gray-400 mt-1">Based on recent performance</p>
            </div>
            <div className="w-16 h-16 rounded-full border-4 border-gray-100 border-t-pink-500 flex items-center justify-center">
              <Activity className="text-pink-500" size={24} />
            </div>
          </section>

          <section>
            <h3 className="font-bold text-gray-800 text-lg mb-4 flex items-center gap-2">
              <BookOpen size={20} className="text-pink-600" /> Study Categories
            </h3>
            <div className="grid grid-cols-2 gap-3">
              {CATEGORIES.map((cat) => (
                <button
                  key={cat.id}
                  onClick={() => startQuiz(cat)}
                  className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 hover:border-pink-200 hover:shadow-md transition-all text-left group"
                >
                  <div className={`w-10 h-10 rounded-lg ${cat.color} flex items-center justify-center mb-3 group-hover:scale-110 transition-transform`}>
                    <cat.icon size={20} />
                  </div>
                  <div className="font-bold text-gray-800 text-sm">{cat.title}</div>
                  <div className="text-xs text-gray-400 mt-0.5">{cat.sub}</div>
                </button>
              ))}
            </div>
          </section>
        </main>
      </div>
    );
  }

  if (view === 'quiz') {
    const questions = selectedCategory?.questions || [];
    const currentQ = questions[currentQuestionIndex];
    const isLast = currentQuestionIndex + 1 >= questions.length;

    if (!currentQ) return <div>Error loading question</div>;

    return (
      <div className="min-h-screen bg-gray-50 pb-20 flex flex-col">
        <header className="bg-white px-4 py-3 shadow-sm flex items-center justify-between sticky top-0 z-10">
           <div className="flex items-center gap-2">
             <button onClick={() => setView('dashboard')} className="p-1 -ml-1 text-gray-400 hover:text-gray-700">
               <ArrowLeft size={20} />
             </button>
             <div className="flex flex-col">
               <span className="text-xs font-bold text-gray-400 uppercase tracking-wider">{selectedCategory?.title}</span>
               <span className="text-sm font-bold text-gray-800">Q {currentQuestionIndex + 1} of {questions.length}</span>
             </div>
           </div>
           
           <div className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full font-mono text-sm font-bold ${timeLeft < 60 ? 'bg-red-100 text-red-600 animate-pulse' : 'bg-gray-100 text-gray-600'}`}>
             <Clock size={14} />
             {formatTime(timeLeft)}
           </div>
        </header>

        <div className="w-full bg-gray-200 h-1">
          <div className="bg-pink-500 h-full transition-all duration-300" style={{ width: `${((currentQuestionIndex + 1) / questions.length) * 100}%` }} />
        </div>

        <main className="flex-1 max-w-md w-full mx-auto px-4 py-6">
          <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div className="p-6 border-b border-gray-50">
              <h2 className="text-lg font-bold text-gray-800 leading-relaxed">
                {currentQ.question}
              </h2>
            </div>
            <div className="p-4 space-y-3">
              {currentQ.options.map((option, idx) => {
                let btnClass = "w-full text-left p-4 rounded-xl border-2 transition-all font-medium text-sm relative ";
                
                if (selectedAnswer === null) {
                  btnClass += "border-gray-100 hover:border-pink-200 hover:bg-pink-50 text-gray-700";
                } else {
                  if (idx === currentQ.correct) {
                    btnClass += "border-green-500 bg-green-50 text-green-800";
                  } else if (idx === selectedAnswer) {
                    btnClass += "border-red-500 bg-red-50 text-red-800";
                  } else {
                    btnClass += "border-gray-100 text-gray-400 opacity-60";
                  }
                }

                return (
                  <button 
                    key={idx}
                    disabled={selectedAnswer !== null}
                    onClick={() => handleAnswer(idx)}
                    className={btnClass}
                  >
                    <span className="mr-2 opacity-50">{String.fromCharCode(65 + idx)}.</span>
                    {option}
                    {selectedAnswer !== null && idx === currentQ.correct && (
                      <CheckCircle className="absolute right-4 top-1/2 -translate-y-1/2 text-green-600" size={18} />
                    )}
                    {selectedAnswer === idx && idx !== currentQ.correct && (
                      <XCircle className="absolute right-4 top-1/2 -translate-y-1/2 text-red-500" size={18} />
                    )}
                  </button>
                );
              })}
            </div>
          </div>

          {showExplanation && (
            <div className="mt-6 animate-in slide-in-from-bottom-4 fade-in duration-300">
              <div className="bg-gradient-to-br from-indigo-900 to-slate-900 rounded-2xl p-6 text-white shadow-xl relative overflow-hidden">
                <div className="absolute top-0 right-0 p-4 opacity-10">
                  <Brain size={100} />
                </div>
                <h4 className="flex items-center gap-2 font-bold text-indigo-200 mb-3 text-sm uppercase tracking-wider">
                  <Brain size={16} /> AI Tutor Explanation
                </h4>
                <p className="text-indigo-50 leading-relaxed text-sm">
                  {currentQ.explanation}
                </p>
                
                <button 
                  onClick={nextQuestion}
                  className="mt-6 w-full py-3 bg-white text-indigo-900 font-bold rounded-xl hover:bg-indigo-50 transition-colors flex items-center justify-center gap-2"
                >
                  {isLast ? 'Finish Quiz' : 'Next Question'} <ChevronRight size={18} />
                </button>
              </div>
            </div>
          )}
        </main>
      </div>
    );
  }

  if (view === 'results') {
    const totalQ = selectedCategory?.questions.length || 0;
    const percent = Math.round((score / totalQ) * 100);
    const passed = percent >= 75;

    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
        <div className="max-w-md w-full bg-white rounded-3xl shadow-xl overflow-hidden">
          <div className={`p-8 text-center text-white ${passed ? 'bg-gradient-to-b from-green-400 to-green-600' : 'bg-gradient-to-b from-orange-400 to-red-500'}`}>
            <div className="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4 backdrop-blur-sm">
              {passed ? <Award size={40} className="text-white" /> : <AlertTriangle size={40} className="text-white" />}
            </div>
            <h2 className="text-3xl font-bold mb-1">{percent}%</h2>
            <p className="font-medium opacity-90">{passed ? 'Great Job! You Passed.' : 'Keep Practicing. You can do it.'}</p>
            <div className="mt-6 flex justify-center gap-8 text-sm font-bold opacity-80">
               <div>
                 <div className="text-2xl">{score}</div>
                 <div>Correct</div>
               </div>
               <div>
                 <div className="text-2xl">{totalQ - score}</div>
                 <div>Incorrect</div>
               </div>
            </div>
          </div>

          <div className="p-6 bg-gray-50 max-h-[50vh] overflow-y-auto">
            <h3 className="font-bold text-gray-800 mb-4 text-sm uppercase tracking-wider">Review Incorrect Answers</h3>
            <div className="space-y-4">
              {quizHistory.filter(h => !h.isCorrect).length === 0 ? (
                <div className="text-center py-8 text-gray-400">
                  <CheckCircle size={48} className="mx-auto mb-2 text-green-200" />
                  <p>No incorrect answers to review!</p>
                </div>
              ) : (
                quizHistory.filter(h => !h.isCorrect).map((item, i) => (
                  <div key={i} className="bg-white p-4 rounded-xl border border-gray-200 shadow-sm">
                    <p className="font-bold text-gray-800 text-sm mb-3">{item.question.question}</p>
                    <div className="space-y-2 text-sm">
                      <div className="p-2 bg-red-50 text-red-700 rounded-lg flex items-start gap-2 border border-red-100">
                        <XCircle size={16} className="mt-0.5 shrink-0" />
                        <div><span className="font-bold text-xs uppercase block text-red-400">You Answered</span>{item.question.options[item.userAnswer]}</div>
                      </div>
                      <div className="p-2 bg-green-50 text-green-700 rounded-lg flex items-start gap-2 border border-green-100">
                        <CheckCircle size={16} className="mt-0.5 shrink-0" />
                        <div><span className="font-bold text-xs uppercase block text-green-400">Correct Answer</span>{item.question.options[item.question.correct]}</div>
                      </div>
                    </div>
                    <div className="mt-3 text-xs text-gray-500 leading-relaxed bg-gray-50 p-3 rounded-lg">
                      <span className="font-bold text-gray-400 uppercase block mb-1">Rationale</span>
                      {item.question.explanation}
                    </div>
                  </div>
                ))
              )}
            </div>
          </div>

          <div className="p-4 border-t border-gray-100 bg-white">
            <button 
              onClick={() => setView('dashboard')}
              className="w-full py-3 bg-gray-800 text-white font-bold rounded-xl shadow-lg hover:bg-gray-700 transition-all"
            >
              Return to Dashboard
            </button>
          </div>
        </div>
      </div>
    );
  }

  if (view === 'admin') {
    return (
      <div className="min-h-screen bg-gray-900 text-white pb-20">
        <header className="px-6 py-6 flex items-center justify-between border-b border-gray-800">
          <div>
            <h1 className="text-2xl font-bold flex items-center gap-2">
              <Shield className="text-pink-400" /> Boss Menu
            </h1>
            <p className="text-gray-400 text-sm mt-1">Content Management System</p>
          </div>
          <button 
            onClick={() => { setView('login'); setUserRole(null); }}
            className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors"
          >
            <LogOut size={20} />
          </button>
        </header>

        <main className="max-w-2xl mx-auto p-6 space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-gray-800 rounded-xl p-6 border border-gray-700">
              <h3 className="text-gray-400 font-medium text-sm mb-4 flex items-center gap-2">
                <Database size={16} /> Database Status
              </h3>
              <div className="flex items-baseline gap-2">
                <span className="text-4xl font-bold text-pink-400">{totalCount.toLocaleString()}</span>
                <span className="text-gray-500">questions</span>
              </div>
              <div className="mt-4 pt-4 border-t border-gray-700">
                <button 
                  onClick={handleSync}
                  className="text-sm text-pink-400 hover:text-pink-300 flex items-center gap-1 transition-colors"
                  disabled={isSyncing}
                >
                  <RefreshCw size={14} className={isSyncing ? "animate-spin" : ""} />
                  {isSyncing ? "Syncing..." : "Sync now"}
                </button>
              </div>
            </div>

            <div className="bg-gray-800 rounded-xl p-6 border border-gray-700 flex flex-col justify-center">
              <button 
                className="w-full py-3 bg-pink-600 hover:bg-pink-500 text-white rounded-lg font-bold transition-colors mb-3"
                onClick={() => {
                   setTotalCount(prev => prev + 10);
                   setUploadStatus("Added 10 sample questions.");
                   setTimeout(() => setUploadStatus(null), 2000);
                }}
              >
                Load 10 Sample Questions
              </button>
              <p className="text-center text-xs text-gray-500">
                Simulate database population
              </p>
            </div>
          </div>

          <div className="bg-gray-800 rounded-xl p-6 border border-gray-700">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-white font-bold flex items-center gap-2">
                <Upload size={18} className="text-green-400" /> Manual JSON Upload
              </h3>
              {showUploadInput && (
                <button 
                  onClick={() => setShowUploadInput(false)}
                  className="text-gray-400 hover:text-white"
                >
                  <X size={20} />
                </button>
              )}
            </div>
            
            {uploadStatus && (
              <div className={`mb-4 p-3 border rounded-lg text-sm flex items-center gap-2 ${uploadStatus.startsWith('Error') ? 'bg-red-500/20 text-red-300 border-red-500/50' : 'bg-green-500/20 text-green-300 border-green-500/50'}`}>
                {uploadStatus.startsWith('Error') ? <AlertTriangle size={16} /> : <CheckCircle size={16} />} 
                {uploadStatus}
              </div>
            )}

            {!showUploadInput ? (
              <div 
                onClick={() => setShowUploadInput(true)}
                className="border-2 border-dashed border-gray-600 rounded-xl p-8 text-center hover:border-gray-500 transition-colors cursor-pointer bg-gray-800/50"
              >
                <div className="w-12 h-12 bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4 text-gray-400">
                  <Upload size={24} />
                </div>
                <p className="text-gray-300 font-medium">Click to paste JSON batch</p>
                <p className="text-gray-500 text-sm mt-2">Supports full NCLEX arrays</p>
              </div>
            ) : (
              <div className="bg-gray-800/50 rounded-xl">
                 <textarea 
                   value={jsonInput}
                   onChange={(e) => setJsonInput(e.target.value)}
                   placeholder="Paste your JSON array here..."
                   className="w-full h-48 bg-gray-900 border border-gray-700 rounded-lg p-4 text-sm font-mono text-gray-300 focus:ring-2 focus:ring-green-500 outline-none resize-none"
                 />
                 <button 
                    onClick={processJsonUpload}
                    className="w-full mt-3 py-3 bg-green-600 hover:bg-green-500 text-white font-bold rounded-lg transition-colors flex items-center justify-center gap-2"
                 >
                    Upload JSON <Upload size={18} />
                 </button>
              </div>
            )}
          </div>
          
          <div className="bg-red-900/20 rounded-xl p-6 border border-red-900/50">
             <h3 className="text-red-400 font-bold mb-4 flex items-center gap-2">
                <AlertTriangle size={18} /> Danger Zone
             </h3>
             <button 
               onClick={handleResetDatabase}
               className={`w-full py-3 border-2 rounded-lg font-bold transition-all flex items-center justify-center gap-2 ${
                  resetConfirm 
                    ? "bg-red-600 border-red-600 text-white animate-pulse" 
                    : "bg-transparent border-red-800 text-red-400 hover:bg-red-900/50"
               }`}
             >
               {resetConfirm ? (
                 <>Click Again to CONFIRM DELETE <Trash2 size={18} /></>
               ) : (
                 <>Reset Database to Default <Trash2 size={18} /></>
               )}
             </button>
             <p className="text-center text-xs text-red-500/60 mt-2">
                Irreversible. Clears all custom questions.
             </p>
          </div>

          <div className="bg-gray-800 rounded-xl p-6 border border-gray-700">
            <h3 className="text-white font-bold mb-4">Recent Activity</h3>
            <div className="space-y-3">
              <div className="flex items-center gap-3 p-3 bg-gray-700/30 rounded-lg">
                <div className="w-2 h-2 rounded-full bg-green-500"></div>
                <div className="flex-1">
                  <div className="text-sm font-medium text-gray-200">System Deploy</div>
                  <div className="text-xs text-gray-500">Just now • Version 2.2 (Persistent)</div>
                </div>
              </div>
              <div className="flex items-center gap-3 p-3 bg-gray-700/30 rounded-lg">
                 <div className="w-2 h-2 rounded-full bg-blue-500"></div>
                 <div className="flex-1">
                   <div className="text-sm font-medium text-gray-200">Med-Surg Batch Added</div>
                   <div className="text-xs text-gray-500">1 hour ago • 2,000+ questions</div>
                 </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    );
  }

  return null;
}

export default function App() {
  return (
    <ErrorBoundary>
      <AppContent />
    </ErrorBoundary>
  );
}