import React, { useState, useEffect } from 'react';
import { 
  Users, School, BookOpen, FileSpreadsheet, Settings, 
  LogOut, Home, User, Bell, ChevronDown, Edit, Trash, 
  Eye, Download, Upload, CheckCircle, XCircle, AlertCircle,
  PlusCircle, Search, Filter, BarChart, FileText, Send,
  Play
} from 'lucide-react';

// Main App Component
export default function App() {
  const [currentUser, setCurrentUser] = useState(null);
  const [activeView, setActiveView] = useState('login');
  const [isPreviewMode, setIsPreviewMode] = useState(false);
  
  // Handle login
  const handleLogin = (user, preview = false) => {
    setCurrentUser(user);
    setActiveView('dashboard');
    setIsPreviewMode(preview);
  };
  
  // Handle logout
  const handleLogout = () => {
    setCurrentUser(null);
    setActiveView('login');
    setIsPreviewMode(false);
  };
  
  return (
    <div className="min-h-screen bg-gray-50 text-gray-800 font-sans">
      {!currentUser ? (
        <LoginScreen onLogin={handleLogin} />
      ) : (
        <DashboardLayout 
          user={currentUser} 
          activeView={activeView}
          setActiveView={setActiveView}
          onLogout={handleLogout}
          isPreviewMode={isPreviewMode}
        />
      )}
    </div>
  );
}

// Login Screen Component
function LoginScreen({ onLogin }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [userType, setUserType] = useState('superadmin');
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  
  const handleSubmit = (e) => {
    e.preventDefault();
    setError('');
    setIsLoading(true);
    
    // Simple validation
    if (!username || !password) {
      setError('Please enter both username and password');
      setIsLoading(false);
      return;
    }
    
    // Check for the specific super admin account
    if (username === "kisscossk@gmail.com" && password === "@Kreegy") {
      setTimeout(() => {
        const user = { 
          id: 1, 
          name: 'Super Admin', 
          role: 'superadmin',
          email: 'kisscossk@gmail.com'
        };
        onLogin(user, false);
        setIsLoading(false);
      }, 1000);
      return;
    }
    
    // Mock login logic for other accounts
    setTimeout(() => {
      let user;
      
      if (userType === 'superadmin' && username === 'admin' && password === 'admin') {
        user = { id: 1, name: 'Super Admin', role: 'superadmin' };
      } else if (userType === 'schooladmin' && username === 'school' && password === 'admin') {
        user = { id: 2, name: 'School Admin', role: 'schooladmin', schoolId: 1, schoolName: 'Cambridge International School' };
      } else if (userType === 'teacher' && username === 'teacher' && password === 'teacher') {
        user = { id: 3, name: 'John Smith', role: 'teacher', schoolId: 1, schoolName: 'Cambridge International School', subjects: ['Mathematics', 'Physics'] };
      } else if (userType === 'student' && username === 'S1001' && password === 'student') {
        user = { id: 4, name: 'Alice Johnson', role: 'student', admissionNumber: 'S1001', class: '10A', schoolId: 1, schoolName: 'Cambridge International School' };
      } else {
        setError('Invalid credentials. Try admin/admin for Super Admin, school/admin for School Admin, teacher/teacher for Teacher, or S1001/student for Student.');
        setIsLoading(false);
        return;
      }
      
      onLogin(user, false);
      setIsLoading(false);
    }, 1000);
  };
  
  const handleLivePreview = (role) => {
    setIsLoading(true);
    
    setTimeout(() => {
      let user;
      
      switch(role) {
        case 'superadmin':
          user = { id: 1, name: 'Super Admin', role: 'superadmin' };
          break;
        case 'schooladmin':
          user = { id: 2, name: 'School Admin', role: 'schooladmin', schoolId: 1, schoolName: 'Cambridge International School' };
          break;
        case 'teacher':
          user = { id: 3, name: 'John Smith', role: 'teacher', schoolId: 1, schoolName: 'Cambridge International School', subjects: ['Mathematics', 'Physics'] };
          break;
        case 'student':
          user = { id: 4, name: 'Alice Johnson', role: 'student', admissionNumber: 'S1001', class: '10A', schoolId: 1, schoolName: 'Cambridge International School' };
          break;
        default:
          user = { id: 1, name: 'Super Admin', role: 'superadmin' };
      }
      
      onLogin(user, true);
      setIsLoading(false);
    }, 1000);
  };
  
  return (
    <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      <div className="w-full max-w-md p-8 space-y-8 bg-white rounded-xl shadow-lg">
        <div className="text-center">
          <h1 className="text-4xl font-bold text-indigo-600">KIA</h1>
          <h2 className="mt-2 text-xl font-semibold text-gray-700">Schools Portal</h2>
          <p className="mt-2 text-gray-500">Sign in to your account</p>
        </div>
        
        {error && (
          <div className="p-3 text-sm text-red-600 bg-red-50 rounded-md">
            {error}
          </div>
        )}
        
        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700">
                User Type
              </label>
              <select
                value={userType}
                onChange={(e) => setUserType(e.target.value)}
                className="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
              >
                <option value="superadmin">Super Admin</option>
                <option value="schooladmin">School Admin</option>
                <option value="teacher">Teacher</option>
                <option value="student">Student</option>
              </select>
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700">
                {userType === 'student' ? 'Admission Number' : 'Email/Username'}
              </label>
              <input
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
                placeholder={userType === 'student' ? 'Enter admission number' : 'Enter email or username'}
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700">
                Password
              </label>
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
                placeholder="Enter password"
              />
            </div>
          </div>
          
          <div>
            <button
              type="submit"
              className="w-full px-4 py-2 text-white bg-indigo-600 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 flex items-center justify-center"
              disabled={isLoading}
            >
              {isLoading ? (
                <span className="flex items-center">
                  <svg className="w-5 h-5 mr-2 animate-spin" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"></circle>
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                  Signing in...
                </span>
              ) : (
                'Sign in'
              )}
            </button>
          </div>
        </form>
        
        <div className="pt-4 border-t border-gray-200">
          <p className="text-sm text-center text-gray-600 mb-3">Or try a live preview</p>
          <div className="grid grid-cols-2 gap-2">
            <button
              onClick={() => handleLivePreview('superadmin')}
              className="px-3 py-2 text-xs text-indigo-600 bg-indigo-50 rounded-md hover:bg-indigo-100 flex items-center justify-center"
              disabled={isLoading}
            >
              <Play size={14} className="mr-1" />
              Super Admin
            </button>
            <button
              onClick={() => handleLivePreview('schooladmin')}
              className="px-3 py-2 text-xs text-green-600 bg-green-50 rounded-md hover:bg-green-100 flex items-center justify-center"
              disabled={isLoading}
            >
              <Play size={14} className="mr-1" />
              School Admin
            </button>
            <button
              onClick={() => handleLivePreview('teacher')}
              className="px-3 py-2 text-xs text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 flex items-center justify-center"
              disabled={isLoading}
            >
              <Play size={14} className="mr-1" />
              Teacher
            </button>
            <button
              onClick={() => handleLivePreview('student')}
              className="px-3 py-2 text-xs text-purple-600 bg-purple-50 rounded-md hover:bg-purple-100 flex items-center justify-center"
              disabled={isLoading}
            >
              <Play size={14} className="mr-1" />
              Student
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Dashboard Layout Component
function DashboardLayout({ user, activeView, setActiveView, onLogout, isPreviewMode }) {
  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
  
  // Define navigation items based on user role
  const getNavItems = () => {
    switch (user.role) {
      case 'superadmin':
        return [
          { id: 'dashboard', label: 'Dashboard', icon: <Home size={20} /> },
          { id: 'schools', label: 'Schools', icon: <School size={20} /> },
          { id: 'templates', label: 'Report Templates', icon: <FileSpreadsheet size={20} /> },
          { id: 'exams', label: 'Exams', icon: <BookOpen size={20} /> },
          { id: 'classes', label: 'Classes & Subjects', icon: <BookOpen size={20} /> },
          { id: 'settings', label: 'System Settings', icon: <Settings size={20} /> }
        ];
      case 'schooladmin':
        return [
          { id: 'dashboard', label: 'Dashboard', icon: <Home size={20} /> },
          { id: 'teachers', label: 'Teachers', icon: <Users size={20} /> },
          { id: 'students', label: 'Students', icon: <Users size={20} /> },
          { id: 'classes', label: 'Classes & Subjects', icon: <BookOpen size={20} /> },
          { id: 'reports', label: 'Report Cards', icon: <FileText size={20} /> },
          { id: 'settings', label: 'School Settings', icon: <Settings size={20} /> }
        ];
      case 'teacher':
        return [
          { id: 'dashboard', label: 'Dashboard', icon: <Home size={20} /> },
          { id: 'scores', label: 'Enter Scores', icon: <Edit size={20} /> },
          { id: 'marksheets', label: 'Marksheets', icon: <FileSpreadsheet size={20} /> },
          { id: 'queries', label: 'Student Queries', icon: <Bell size={20} /> }
        ];
      case 'student':
        return [
          { id: 'dashboard', label: 'Dashboard', icon: <Home size={20} /> },
          { id: 'reportcards', label: 'Report Cards', icon: <FileText size={20} /> },
          { id: 'marksheets', label: 'Marksheets', icon: <FileSpreadsheet size={20} /> },
          { id: 'queries', label: 'Queries', icon: <Send size={20} /> }
        ];
      default:
        return [];
    }
  };
  
  const navItems = getNavItems();
  
  return (
    <div className="flex h-screen overflow-hidden">
      {/* Sidebar */}
      <div className={`${isSidebarOpen ? 'w-64' : 'w-20'} bg-indigo-800 text-white transition-all duration-300 flex flex-col`}>
        <div className="p-4 flex items-center justify-between">
          <h1 className={`font-bold text-xl ${!isSidebarOpen && 'hidden'}`}>KIA Portal</h1>
          <button 
            onClick={() => setIsSidebarOpen(!isSidebarOpen)}
            className="p-1 rounded-md hover:bg-indigo-700"
          >
            <ChevronDown className={`transform ${isSidebarOpen ? 'rotate-0' : 'rotate-90'}`} />
          </button>
        </div>
        
        <div className="flex-1 overflow-y-auto">
          <nav className="mt-5 px-2">
            {navItems.map((item) => (
              <button
                key={item.id}
                onClick={() => setActiveView(item.id)}
                className={`flex items-center w-full px-4 py-3 mb-1 rounded-md transition-colors ${
                  activeView === item.id 
                    ? 'bg-indigo-700 text-white' 
                    : 'text-indigo-100 hover:bg-indigo-700'
                }`}
              >
                <span className="mr-3">{item.icon}</span>
                {isSidebarOpen && <span>{item.label}</span>}
              </button>
            ))}
          </nav>
        </div>
        
        <div className="p-4 border-t border-indigo-700">
          <button 
            onClick={onLogout}
            className="flex items-center w-full px-4 py-2 text-indigo-100 rounded-md hover:bg-indigo-700"
          >
            <LogOut size={20} className="mr-3" />
            {isSidebarOpen && <span>Logout</span>}
          </button>
        </div>
      </div>
      
      {/* Main Content */}
      <div className="flex-1 flex flex-col overflow-hidden">
        {/* Header */}
        <header className="bg-white border-b border-gray-200 shadow-sm">
          <div className="px-4 py-3 flex items-center justify-between">
            <h2 className="text-xl font-semibold text-gray-800">
              {navItems.find(item => item.id === activeView)?.label || 'Dashboard'}
            </h2>
            
            <div className="flex items-center space-x-4">
              {isPreviewMode && (
                <div className="px-3 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded-full">
                  Preview Mode
                </div>
              )}
              
              <button className="p-2 text-gray-500 rounded-full hover:bg-gray-100">
                <Bell size={20} />
              </button>
              
              <div className="flex items-center">
                <div className="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center text-white">
                  <User size={20} />
                </div>
                <div className="ml-2">
                  <p className="text-sm font-medium text-gray-700">{user.name}</p>
                  <p className="text-xs text-gray-500 capitalize">{user.role}</p>
                </div>
              </div>
            </div>
          </div>
        </header>
        
        {/* Content Area */}
        <main className="flex-1 overflow-y-auto bg-gray-50 p-6">
          {renderContent(activeView, user)}
        </main>
      </div>
    </div>
  );
}

// Function to render content based on active view and user role
function renderContent(activeView, user) {
  // Super Admin Views
  if (user.role === 'superadmin') {
    switch (activeView) {
      case 'dashboard':
        return <SuperAdminDashboard user={user} />;
      case 'schools':
        return <SchoolsManagement />;
      case 'templates':
        return <ReportTemplates />;
      case 'exams':
        return <ExamsManagement />;
      case 'classes':
        return <ClassesSubjectsManagement />;
      case 'settings':
        return <SystemSettings user={user} />;
      default:
        return <SuperAdminDashboard user={user} />;
    }
  }
  
  // School Admin Views
  if (user.role === 'schooladmin') {
    switch (activeView) {
      case 'dashboard':
        return <SchoolAdminDashboard user={user} />;
      case 'teachers':
        return <TeachersManagement />;
      case 'students':
        return <StudentsManagement />;
      case 'classes':
        return <SchoolClassesManagement />;
      case 'reports':
        return <ReportCardsManagement />;
      case 'settings':
        return <SchoolSettings user={user} />;
      default:
        return <SchoolAdminDashboard user={user} />;
    }
  }
  
  // Teacher Views
  if (user.role === 'teacher') {
    switch (activeView) {
      case 'dashboard':
        return <TeacherDashboard user={user} />;
      case 'scores':
        return <EnterScores user={user} />;
      case 'marksheets':
        return <TeacherMarksheets user={user} />;
      case 'queries':
        return <StudentQueries user={user} />;
      default:
        return <TeacherDashboard user={user} />;
    }
  }
  
  // Student Views
  if (user.role === 'student') {
    switch (activeView) {
      case 'dashboard':
        return <StudentDashboard user={user} />;
      case 'reportcards':
        return <StudentReportCards user={user} />;
      case 'marksheets':
        return <StudentMarksheets user={user} />;
      case 'queries':
        return <StudentQueryForm user={user} />;
      default:
        return <StudentDashboard user={user} />;
    }
  }
  
  return <div>Content not found</div>;
}

// Super Admin Components
function SuperAdminDashboard({ user }) {
  const stats = [
    { label: 'Total Schools', value: 24, icon: <School size={24} className="text-blue-500" /> },
    { label: 'Active Schools', value: 22, icon: <CheckCircle size={24} className="text-green-500" /> },
    { label: 'Suspended Schools', value: 2, icon: <AlertCircle size={24} className="text-yellow-500" /> },
    { label: 'Total Students', value: 12450, icon: <Users size={24} className="text-purple-500" /> },
  ];
  
  return (
    <div className="space-y-6">
      <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
        <h3 className="text-lg font-semibold text-gray-800 mb-4">
          Welcome, {user.email ? user.email : 'Super Admin'}
        </h3>
        <p className="text-gray-600">Manage all schools, templates, and system settings from your dashboard.</p>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {stats.map((stat, index) => (
          <div key={index} className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-500">{stat.label}</p>
                <p className="text-2xl font-bold text-gray-800 mt-1">{stat.value.toLocaleString()}</p>
              </div>
              <div className="p-3 rounded-full bg-gray-50">{stat.icon}</div>
            </div>
          </div>
        ))}
      </div>
      
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
          <h3 className="text-lg font-semibold text-gray-800 mb-4">Recent Schools</h3>
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">School Name</th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Students</th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200">
                {[
                  { name: 'Cambridge International School', status: 'Active', students: 850 },
                  { name: 'St. Mary\'s Academy', status: 'Active', students: 720 },
                  { name: 'Westfield High School', status: 'Active', students: 930 },
                  { name: 'Lincoln Elementary', status: 'Suspended', students: 450 },
                ].map((school, index) => (
                  <tr key={index}>
                    <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-800">{school.name}</td>
                    <td className="px-4 py-3 whitespace-nowrap text-sm">
                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${
                        school.status === 'Active' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
                      }`}>
                        {school.status}
                      </span>
                    </td>
                    <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">{school.students}</td>
                    <td className="px-4 py-3 whitespace-nowrap text-sm">
                      <button className="text-indigo-600 hover:text-indigo-900 mr-2">
                        <Eye size={16} />
                      </button>
                      <button className="text-blue-600 hover:text-blue-900 mr-2">
                        <Edit size={16} />
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
        
        <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
          <h3 className="text-lg font-semibold text-gray-800 mb-4">System Activity</h3>
          <div className="space-y-4">
            {[
              { action: 'New school registered', time: '2 hours ago', user: 'System' },
              { action: 'Report template updated', time: '5 hours ago', user: 'Admin' },
              { action: 'Exam schedule published', time: '1 day ago', user: 'Admin' },
              { action: 'System maintenance completed', time: '2 days ago', user: 'System' },
              { action: 'New grading system added', time: '3 days ago', user: 'Admin' },
            ].map((activity, index) => (
              <div key={index} className="flex items-start">
                <div className="flex-shrink-0 h-4 w-4 rounded-full bg-blue-500 mt-1"></div>
                <div className="ml-3">
                  <p className="text-sm font-medium text-gray-800">{activity.action}</p>
                  <p className="text-xs text-gray-500">{activity.time} by {activity.user}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// Placeholder components for other views
function SchoolsManagement() {
  return <div>Schools Management Content</div>;
}

function ReportTemplates() {
  return <div>Report Templates Content</div>;
}

function ExamsManagement() {
  return <div>Exams Management Content</div>;
}

function ClassesSubjectsManagement() {
  return <div>Classes & Subjects Management Content</div>;
}

function SystemSettings({ user }) {
  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold text-gray-800">System Settings</h2>
        <button className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
          Save Changes
        </button>
      </div>
      
      <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
        <h3 className="text-lg font-semibold text-gray-800 mb-4">Super Admin Account</h3>
        
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Email
            </label>
            <input
              type="email"
              value={user.email || "admin@kiaschools.com"}
              readOnly
              className="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 focus:outline-none"
            />
          </div>
          
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Change Password
            </label>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <input
                type="password"
                placeholder="Current Password"
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
              />
              <input
                type="password"
                placeholder="New Password"
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
              />
              <input
                type="password"
                placeholder="Confirm New Password"
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
              />
            </div>
          </div>
          
          <div className="flex justify-end">
            <button className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
              Update Password
            </button>
          </div>
        </div>
      </div>
      
      <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
        <h3 className="text-lg font-semibold text-gray-800 mb-4">General Settings</h3>
        
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              System Name
            </label>
            <input
              type="text"
              defaultValue="KIA Schools Portal"
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
            />
          </div>
          
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Academic Year
            </label>
            <input
              type="text"
              defaultValue="2023-2024"
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
            />
          </div>
          
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Current Term/Semester
            </label>
            <select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
              <option value="1">Term 1</option>
              <option value="2">Term 2</option>
              <option value="3">Term 3</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  );
}

// School Admin Components
function SchoolAdminDashboard({ user }) {
  return <div>School Admin Dashboard Content</div>;
}

function TeachersManagement() {
  return <div>Teachers Management Content</div>;
}

function StudentsManagement() {
  return <div>Students Management Content</div>;
}

function SchoolClassesManagement() {
  return <div>School Classes Management Content</div>;
}

function ReportCardsManagement() {
  return <div>Report Cards Management Content</div>;
}

function SchoolSettings({ user }) {
  return <div>School Settings Content</div>;
}

// Teacher Components
function TeacherDashboard({ user }) {
  return <div>Teacher Dashboard Content</div>;
}

function EnterScores({ user }) {
  return <div>Enter Scores Content</div>;
}

function TeacherMarksheets({ user }) {
  return <div>Teacher Marksheets Content</div>;
}

function StudentQueries({ user }) {
  return <div>Student Queries Content</div>;
}

// Student Components
function StudentDashboard({ user }) {
  return <div>Student Dashboard Content</div>;
}

function StudentReportCards({ user }) {
  return <div>Student Report Cards Content</div>;
}

function StudentMarksheets({ user }) {
  const marksheets = [
    { id: 1, subject: 'Mathematics', term: 'Term 1', year: '2023-2024', date: 'Jan 15, 2024' },
    { id: 2, subject: 'Physics', term: 'Term 1', year: '2023-2024', date: 'Jan 12, 2024' },
    { id: 3, subject: 'Chemistry', term: 'Term 1', year: '2023-2024', date: 'Jan 10, 2024' },
    { id: 4, subject: 'Biology', term: 'Term 1', year: '2023-2024', date: 'Jan 8, 2024' },
    { id: 5, subject: 'English Language', term: 'Term 1', year: '2023-2024', date: 'Jan 5, 2024' },
  ];
  
  const [selectedMarksheet, setSelectedMarksheet] = useState(null);
  
  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold text-gray-800">My Marksheets</h2>
      </div>
      
      <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Term</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Academic Year</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {marksheets.map((marksheet) => (
                <tr key={marksheet.id}>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800">{marksheet.subject}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{marksheet.term}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{marksheet.year}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{marksheet.date}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 space-x-2">
                    <button 
                      className="text-indigo-600 hover:text-indigo-900"
                      onClick={() => setSelectedMarksheet(marksheet)}
                    >
                      <Eye size={16} />
                    </button>
                    <button className="text-green-600 hover:text-green-900">
                      <Download size={16} />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
      
      {/* Marksheet Preview Modal */}
      {selectedMarksheet && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-lg w-full max-w-4xl p-6">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-lg font-semibold text-gray-800">
                {selectedMarksheet.subject} Marksheet: {selectedMarksheet.term} ({selectedMarksheet.year})
              </h3>
              <button
                onClick={() => setSelectedMarksheet(null)}
                className="text-gray-500 hover:text-gray-700"
              >
                <XCircle size={20} />
              </button>
            </div>
            
            <div className="border-b border-gray-200 pb-4 mb-4">
              <div className="flex justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-700">Student: {user.name}</p>
                  <p className="text-sm text-gray-600">Admission No: {user.admissionNumber}</p>
                  <p className="text-sm text-gray-600">Class: {user.class}</p>
                </div>
                <div className="text-right">
                  <p className="text-sm font-medium text-gray-700">Subject: {selectedMarksheet.subject}</p>
                  <p className="text-sm text-gray-600">Term: {selectedMarksheet.term}</p>
                  <p className="text-sm text-gray-600">Academic Year: {selectedMarksheet.year}</p>
                </div>
              </div>
            </div>
            
            <div className="overflow-x-auto mb-6">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Topic</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Exam Type</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Score</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Max Score</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Percentage</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Grade</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200">
                  {selectedMarksheet.subject === 'Mathematics' ? (
                    <>
                      <tr>
                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-800">Algebra</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Quiz</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">18</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">20</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">90%</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">A</td>
                      </tr>
                      <tr>
                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-800">Geometry</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Quiz</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">16</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">20</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">80%</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">A</td>
                      </tr>
                      <tr>
                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-800">Calculus</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Mid-Term Exam</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">42</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">50</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">84%</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">A</td>
                      </tr>
                      <tr>
                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-800">All Topics</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">End-Term Exam</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">85</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">100</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">85%</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">A</td>
                      </tr>
                    </>
                  ) : (
                    <>
                      <tr>
                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-800">Topic 1</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Quiz</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">17</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">20</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">85%</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">A</td>
                      </tr>
                      <tr>
                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-800">Topic 2</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Quiz</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">15</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">20</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">75%</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">B</td>
                      </tr>
                      <tr>
                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-800">Topic 3</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Mid-Term Exam</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">38</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">50</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">76%</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">B</td>
                      </tr>
                      <tr>
                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-800">All Topics</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">End-Term Exam</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">78</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">100</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">78%</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">B</td>
                      </tr>
                    </>
                  )}
                </tbody>
              </table>
            </div>
            
            <div className="border border-gray-200 rounded-md p-4">
              <h4 className="font-medium text-gray-800 mb-2">Summary</h4>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <span className="text-sm text-gray-600">Total Score:</span>
                    <span className="text-sm font-medium text-gray-800">161/190</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-gray-600">Average Percentage:</span>
                    <span className="text-sm font-medium text-gray-800">84.7%</span>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <span className="text-sm text-gray-600">Overall Grade:</span>
                    <span className="text-sm font-medium text-green-600">A</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-gray-600">Class Average:</span>
                    <span className="text-sm font-medium text-gray-800">76.2%</span>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <span className="text-sm text-gray-600">Position in Class:</span>
                    <span className="text-sm font-medium text-gray-800">3 out of 32</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-gray-600">Teacher:</span>
                    <span className="text-sm font-medium text-gray-800">Mr. John Smith</span>
                  </div>
                </div>
              </div>
            </div>
            
            <div className="mt-6 flex justify-end space-x-3">
              <button
                onClick={() => setSelectedMarksheet(null)}
                className="px-4 py-2 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50"
              >
                Close
              </button>
              <button
                className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 flex items-center"
              >
                <Download size={16} className="mr-2" />
                Download PDF
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}