const { useState, useEffect } = React;

function App() {
  const [activeView, setActiveView] = useState(() => {
    try { return localStorage.getItem('ciaan_activeView') || 'dashboard'; } catch(e) { return 'dashboard'; }
  });
  const [currentUser, setCurrentUser] = useState(() => {
    try { const u = sessionStorage.getItem('ciaan_user'); return u ? JSON.parse(u) : null; } catch(e) { return null; }
  });
  const [instituteCodeInput, setInstituteCodeInput] = useState('');
  const [usernameInput, setUsernameInput] = useState('');
  const [passwordInput, setPasswordInput] = useState('');
  const [authError, setAuthError] = useState('');
  const [authLoading, setAuthLoading] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  useEffect(() => {
    try { localStorage.setItem('ciaan_activeView', activeView); } catch(e) {}
  }, [activeView]);

  const handleLogin = async (e) => {
    e.preventDefault();
    setAuthLoading(true);
    setAuthError('');
    try {
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username: usernameInput, password: passwordInput, institute_code: instituteCodeInput })
      });
      const data = await res.json();
      if (res.ok) {
        setCurrentUser(data.user);
        try { sessionStorage.setItem('ciaan_user', JSON.stringify(data.user)); } catch(e) {}
      } else {
        setAuthError(data.error || 'Login failed');
      }
    } catch(err) {
      setAuthError('Cannot connect to server. Please ensure the backend is running.');
    } finally {
      setAuthLoading(false);
    }
  };

  const handleLogout = () => {
    setCurrentUser(null);
    try { sessionStorage.removeItem('ciaan_user'); } catch(e) {}
    setActiveView('dashboard');
  };

  // Role helpers
  const hasRole = (role) => {
    if (!currentUser || !currentUser.role) return false;
    return currentUser.role.split(',').includes(role);
  };

  const isAdmin = () => hasRole('Administrator') || hasRole('Principal');
  const isHOD = () => hasRole('Administrator') || hasRole('Principal') || hasRole('HOD') || hasRole('Assistant');
  const isFaculty = () => hasRole('Faculty');

  if (!currentUser) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50 font-sans p-4">
        <div className="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
          <div className="text-center mb-8">
            <div className="w-20 h-20 bg-gradient-to-tr from-blue-600 to-indigo-700 rounded-2xl flex items-center justify-center font-bold text-5xl shadow-lg mx-auto mb-5 text-white">
              M
            </div>
            <h2 className="text-3xl font-extrabold text-gray-900 tracking-tight">Rujula Enterprises</h2>
            <p className="text-sm text-blue-600 font-bold tracking-widest mt-2 uppercase">MSBTE CIAAN-2023</p>
          </div>
          <form onSubmit={handleLogin} className="space-y-4">
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">Institute Code</label>
              <input
                type="text"
                value={instituteCodeInput}
                onChange={(e) => setInstituteCodeInput(e.target.value.toUpperCase())}
                className="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 focus:outline-none transition-all uppercase"
                placeholder="e.g. GPV"
                required
                autoFocus
              />
            </div>
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">Username</label>
              <input
                type="text"
                value={usernameInput}
                onChange={(e) => setUsernameInput(e.target.value)}
                className="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 focus:outline-none transition-all"
                placeholder="Enter your username..."
                required
              />
            </div>
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">Password</label>
              <input
                type="password"
                value={passwordInput}
                onChange={(e) => setPasswordInput(e.target.value)}
                className={`w-full px-4 py-3 rounded-xl border-2 focus:outline-none transition-all duration-200 ${authError ? 'border-red-400 focus:border-red-500 focus:ring-4 focus:ring-red-100' : 'border-gray-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-100'}`}
                placeholder="Enter password..."
                required
              />
              {authError && <p className="text-red-500 text-xs mt-2 font-semibold">{authError}</p>}
            </div>
            <button
              type="submit"
              disabled={authLoading}
              className="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-3 px-4 rounded-xl flex items-center justify-center gap-2 transition-all shadow-md hover:shadow-lg transform hover:-translate-y-0.5 disabled:opacity-60"
            >
              {authLoading ? 'Signing in...' : 'Sign In'}
              {!authLoading && <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>}
            </button>
          </form>
          <div className="mt-8 text-center text-xs font-semibold text-gray-400 uppercase tracking-wider">
            Secure Portal Module • Authorized Personnel Only
          </div>
        </div>
      </div>
    );
  }

  const renderView = () => {
    switch (activeView) {
      case 'dashboard': return <window.Dashboard onNavigate={setActiveView} />;
      case 'students': return <window.StudentMaster />;
      case 'courses': return <window.CourseMaster />;
      case 'lab-plans': return <window.LabPlanMaster />;
      case 'tutorial-plans': return <window.TutorialPlanMaster />;
      case 'exams': return <window.ExamMaster />;
      case 'reports': return <window.ReportMaster />;
      case 'k3': return <window.FormatK3 />;
      case 'k3-direct': return <window.FormatK3Direct />;
      case 'k4': return <window.FormatK4 />;
      case 'k4-upload': return <window.FormatK4Upload />;
      case 'k5': return <window.FormatK5 />;
      case 'k6': return <window.FormatK6 />;
      case 'k6-direct': return <window.FormatK6Direct />;
      case 'k6-upload': return <window.FormatK6Upload />;
      case 'detained-students': return <window.DetentionMaster />;
      case 'faculty': return <window.FacultyMaster currentUser={currentUser} />;
      case 'course-allocations': return <window.CourseAllocationMaster currentUser={currentUser} />;
      case 'attendance': return <window.AttendanceApp currentUser={currentUser} />;
      case 'student-qr': return <window.StudentQRCode />;
      case 'student-advancement': return <window.StudentAdvancementMaster />;
      default: return <window.Dashboard onNavigate={setActiveView} />;
    }
  };

  const NavButton = ({ id, icon, label }) => {
    const isActive = activeView === id;
    return (
      <button
        onClick={() => { setActiveView(id); setIsMobileMenuOpen(false); }}
        className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg mb-1 transition-all duration-200 ${isActive ? 'bg-blue-600 text-white shadow-md font-semibold' : 'text-gray-300 hover:bg-gray-800 hover:text-white font-medium'}`}
      >
        <span className="text-xl">{icon}</span>
        <span className="text-sm whitespace-nowrap">{label}</span>
      </button>
    );
  };

  const roleBadgeColor = {
    'Administrator': 'bg-red-500',
    'Principal': 'bg-purple-500',
    'HOD': 'bg-blue-500',
    'Assistant': 'bg-cyan-500',
    'Faculty': 'bg-green-500',
  };

  return (
    <div className="flex bg-gray-50 font-sans overflow-hidden min-h-screen">
      {/* Mobile Menu Overlay */}
      {isMobileMenuOpen && (
        <div 
          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
          onClick={() => setIsMobileMenuOpen(false)}
        />
      )}

      {/* Sidebar Layout */}
      <aside className={`fixed lg:static inset-y-0 left-0 w-72 bg-gray-900 text-white flex flex-col shrink-0 shadow-2xl transition-transform duration-300 z-50 ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}`}>
        <div className="p-6 flex items-center gap-4 border-b border-gray-800 bg-gray-900 shadow">
          <div className="w-12 h-12 bg-gradient-to-tr from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center font-bold text-2xl shadow-inner">
            M
          </div>
          <div>
            <h1 className="text-xl font-bold tracking-tight text-white leading-tight">Rujula Enterprises</h1>
            <h2 className="text-sm text-blue-400 font-semibold tracking-widest">MSBTE CIAAN-2023</h2>
          </div>
        </div>

        <nav className="flex-1 px-4 py-8 overflow-y-auto style-scrollbar">
          <NavButton id="dashboard" icon="📊" label="Overview Dashboard" />

          {/* Administrative — Admin & HOD only */}
          {isHOD() && (
            <>
              <div className="mt-8 mb-3 px-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest">Administrative</div>
              {isAdmin() && <NavButton id="faculty" icon="👨‍🏫" label="Faculty Master" />}
              {isAdmin() && <NavButton id="students" icon="👨‍🎓" label="Student Master" />}
              {isAdmin() && <NavButton id="student-advancement" icon="🚀" label="Semester Advancement" />}
              {isAdmin() && <NavButton id="courses" icon="📚" label="Course Master" />}
              <NavButton id="course-allocations" icon="📋" label="Subject Allocation" />
              {isAdmin() && <NavButton id="exams" icon="🏛️" label="Exam Master" />}
              {isAdmin() && <NavButton id="detained-students" icon="🚫" label="Detention Master" />}
              {isAdmin() && <NavButton id="reports" icon="🗂️" label="Reports Hub" />}
            </>
          )}

          {/* Planning */}
          <div className="mt-8 mb-3 px-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest">Planning</div>
          <NavButton id="attendance" icon="📱" label="Mobile Attendance" />
          <NavButton id="student-qr" icon="🧑‍🎓" label="Student QR Portal" />
          {isHOD() && <NavButton id="lab-plans" icon="📅" label="K2-A Lab Plan" />}
          {isHOD() && <NavButton id="tutorial-plans" icon="📝" label="K2-B Tutorial Plan" />}

          {/* Assessment Cluster */}
          <div className="mt-8 mb-3 px-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest">Assessment Cluster</div>
          <NavButton id="k3" icon="📝" label="Format K3 (Lab)" />
          <NavButton id="k3-direct" icon="⚡" label="Format K3 (Direct)" />
          <NavButton id="k4" icon="💯" label="Format K4 (SA-PR)" />
          <NavButton id="k4-upload" icon="📥" label="Format K4 (Upload)" />
          <NavButton id="k5" icon="📑" label="Format K5 (Theory)" />
          <NavButton id="k6" icon="🚀" label="Format K6 (SLA)" />
          <NavButton id="k6-direct" icon="💡" label="Format K6 (Direct)" />
          <NavButton id="k6-upload" icon="📤" label="Format K6 (Upload)" />
        </nav>

        <div className="p-4 border-t border-gray-800 bg-gray-950">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full overflow-hidden bg-blue-100 flex items-center justify-center text-blue-800 font-bold shadow shrink-0">
              {currentUser.photograph 
                ? <img src={currentUser.photograph} alt={currentUser.name} className="w-full h-full object-cover" />
                : (currentUser.name?.charAt(0) || 'U')
              }
            </div>
            <div className="flex flex-col flex-1 min-w-0">
              <span className="text-sm font-bold truncate">{currentUser.name}</span>
              <div className="flex flex-wrap gap-1 mt-0.5">
                {currentUser.role.split(',').map(r => (
                  <span key={r} className={`text-[9px] font-bold px-1.5 py-0.5 rounded-full text-white ${roleBadgeColor[r] || 'bg-gray-500'}`}>{r}</span>
                ))}
              </div>
            </div>
            <button onClick={handleLogout} title="Logout" className="p-2 text-gray-500 hover:text-red-400 transition shrink-0">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
            </button>
          </div>
        </div>
      </aside>

      {/* Main Content Area */}
      <main className="flex-1 flex flex-col min-h-screen overflow-hidden bg-gray-50 transition-all w-full">
        {/* Dynamic Inner Top Bar */}
        <header className="bg-white/80 backdrop-blur-md shadow-sm border-b border-gray-200 px-4 sm:px-8 py-4 sm:py-5 flex justify-between items-center shrink-0 z-20">
          <div className="flex items-center gap-3">
            <button 
              className="p-2 lg:hidden text-gray-600 hover:bg-gray-100 rounded-lg shrink-0"
              onClick={() => setIsMobileMenuOpen(true)}
            >
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
            </button>
            <div className="min-w-0">
              <h2 className="text-lg sm:text-2xl font-bold text-gray-800 capitalize tracking-tight truncate">
                {activeView === 'reports' ? 'Centralized Reports Hub' : activeView === 'k3' ? 'Format-K3 Assessments' : activeView === 'k3-direct' ? 'K3 Auto-Distribute' : activeView === 'k4-upload' ? 'K4 Bulk SA-PR Upload' : activeView === 'k5' ? 'Format-K5 (TH-FA)' : activeView === 'k6' ? 'Format-K6 (SLA Tracker)' : activeView === 'k6-direct' ? 'K6 Auto-Distribute' : activeView === 'k6-upload' ? 'K6 Bulk SLA Upload' : activeView === 'detained-students' ? 'Detention Management Console' : activeView === 'course-allocations' ? 'Subject Allocation' : activeView.replace(/-/g, ' ')}
              </h2>
              <p className="text-xs sm:text-sm text-gray-500 font-medium mt-0.5 truncate border-0 border-transparent">CIAAN Master Operations Module (Developed by S. S. Gawade)</p>
            </div>
          </div>
          <div className="flex items-center gap-4 hidden sm:flex">
            <div className="text-right">
              <div className="text-sm font-semibold text-gray-700">{currentUser.name}</div>
              <div className="flex gap-1 justify-end mt-0.5">
                {currentUser.role.split(',').map(r => (
                  <span key={r} className={`text-[9px] font-bold px-1.5 py-0.5 rounded-full text-white ${roleBadgeColor[r] || 'bg-gray-500'}`}>{r}</span>
                ))}
              </div>
            </div>
          </div>
        </header>

        {/* Scrollable Router View */}
        <div className="flex-1 overflow-y-auto p-4 md:p-8 relative">
          {renderView()}
        </div>
      </main>
    </div>
  );
}
const rootElement = document.getElementById('root');
if (rootElement && !window.__reactRootMounted) {
  window.__reactRootMounted = true;
  const root = ReactDOM.createRoot(rootElement);
  root.render(<App />);
}