const { useState, useEffect, useCallback, createContext, useContext, useRef } = React;

// ============================================================
// Auth Context
// ============================================================

const AuthContext = createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    API.me()
      .then((d) => setUser(d.user))
      .catch(() => setUser(null))
      .finally(() => setLoading(false));
  }, []);

  const login = async (email, password) => {
    const data = await API.login(email, password);
    setUser(data.user);
    return data;
  };

  const logout = async () => {
    await API.logout();
    setUser(null);
  };

  if (loading) {
    return (
      <div className="loading-overlay" style={{ minHeight: '100vh' }}>
        <div className="spinner spinner-lg" />
        <p>Loading EduArch...</p>
      </div>
    );
  }

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

// ============================================================
// Simple Router
// ============================================================

function useRoute() {
  const [route, setRoute] = useState(window.location.hash.slice(1) || 'dashboard');
  useEffect(() => {
    const handler = () => setRoute(window.location.hash.slice(1) || 'dashboard');
    window.addEventListener('hashchange', handler);
    return () => window.removeEventListener('hashchange', handler);
  }, []);
  return [route, (r) => { window.location.hash = r; }];
}

// ============================================================
// Login Page
// ============================================================

function LoginPage() {
  const { login } = useContext(AuthContext);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setSubmitting(true);
    try {
      await login(email, password);
    } catch (err) {
      setError(err.message);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="login-page">
      <div className="login-card">
        <div className="login-brand">
          <h1>EduArch</h1>
          <p>Institutional AI Platform for Higher Education</p>
        </div>
        <form onSubmit={handleSubmit}>
          {error && <div className="alert alert-error">{error}</div>}
          <div className="form-group">
            <label>Email Address</label>
            <input
              type="email"
              className="form-input"
              placeholder="you@institution.ac.in"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              autoFocus
            />
          </div>
          <div className="form-group">
            <label>Password</label>
            <input
              type="password"
              className="form-input"
              placeholder="Enter your password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>
          <button type="submit" className="btn btn-primary btn-full btn-lg" disabled={submitting}>
            {submitting ? <><span className="spinner" /> Signing in...</> : 'Sign In'}
          </button>
        </form>
      </div>
    </div>
  );
}

// ============================================================
// Sidebar
// ============================================================

function Sidebar({ route, navigate }) {
  const { user, logout } = useContext(AuthContext);
  const isAdmin = ['ADMIN', 'SUPER_ADMIN', 'IQAC'].includes(user?.role);

  const initials = user?.name
    ?.split(' ')
    .map((w) => w[0])
    .join('')
    .slice(0, 2)
    .toUpperCase();

  return (
    <div className="sidebar">
      <div className="sidebar-brand">
        <h2>EduArch</h2>
        <span>{user?.institution?.name || 'AI Platform'}</span>
      </div>

      <nav className="sidebar-nav">
        <div className="sidebar-section">
          <div className="sidebar-section-title">Main</div>
          <button className={`nav-item ${route === 'dashboard' ? 'active' : ''}`} onClick={() => navigate('dashboard')}>
            <span className="nav-icon">&#9633;</span> Dashboard
          </button>
          <button className={`nav-item ${route === 'history' ? 'active' : ''}`} onClick={() => navigate('history')}>
            <span className="nav-icon">&#9776;</span> History
          </button>
        </div>

        <div className="sidebar-section">
          <div className="sidebar-section-title">AI Modules</div>
          <button className={`nav-item ${route === 'teaching-aide' ? 'active' : ''}`} onClick={() => navigate('teaching-aide')}>
            <span className="nav-icon">&#9998;</span> Teaching Aide
          </button>
          <button className={`nav-item ${route === 'bloom-mapping' ? 'active' : ''}`} onClick={() => navigate('bloom-mapping')}>
            <span className="nav-icon">&#9670;</span> Bloom Mapping
          </button>
          <button className={`nav-item ${route === 'assessment' ? 'active' : ''}`} onClick={() => navigate('assessment')}>
            <span className="nav-icon">&#10003;</span> Assessment Builder
          </button>
          <button className={`nav-item ${route === 'outcome-intel' ? 'active' : ''}`} onClick={() => navigate('outcome-intel')}>
            <span className="nav-icon">&#9881;</span> Outcome Intelligence
          </button>
          <button className={`nav-item ${route === 'faculty-workflow' ? 'active' : ''}`} onClick={() => navigate('faculty-workflow')}>
            <span className="nav-icon">&#9874;</span> Faculty Workflow
          </button>
        </div>

        {isAdmin && (
          <div className="sidebar-section">
            <div className="sidebar-section-title">Admin</div>
            <button className={`nav-item ${route === 'admin-stats' ? 'active' : ''}`} onClick={() => navigate('admin-stats')}>
              <span className="nav-icon">&#9673;</span> Usage Stats
            </button>
          </div>
        )}
      </nav>

      <div className="sidebar-footer">
        <div className="user-info">
          <div className="user-avatar">{initials}</div>
          <div className="user-details">
            <div className="name">{user?.name}</div>
            <div className="role">{user?.role?.replace('_', ' ')}</div>
          </div>
          <button className="btn btn-sm btn-secondary" onClick={logout} title="Sign out">
            &#x2192;
          </button>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Dashboard Page
// ============================================================

function DashboardPage({ navigate }) {
  const { user } = useContext(AuthContext);
  const [recent, setRecent] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    API.history({ limit: 5 })
      .then((d) => setRecent(d.generations || []))
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  const modules = [
    { id: 'teaching-aide', icon: '\u270E', title: 'Teaching Aide Generator', desc: 'Generate lesson plans, lecture outlines, and teaching materials aligned to Bloom\'s Taxonomy.' },
    { id: 'bloom-mapping', icon: '\u25C6', title: 'Bloom\'s Mapping', desc: 'Analyze and map learning outcomes to Bloom\'s Taxonomy levels with quality ratings.' },
    { id: 'assessment', icon: '\u2713', title: 'Assessment Builder', desc: 'Create assessment questions with MCQ, rubrics, and Moodle GIFT export.' },
    { id: 'outcome-intel', icon: '\u2699', title: 'Outcome Intelligence', desc: 'Audit program outcomes for accreditation readiness (NAAC/NBA).' },
    { id: 'faculty-workflow', icon: '\u2692', title: 'Faculty Workflow', desc: 'Generate syllabi, rubrics, feedback templates, and curriculum maps.' },
  ];

  return (
    <>
      <div className="page-header">
        <div>
          <h1>Welcome back, {user?.name?.split(' ')[0]}</h1>
          <div className="subtitle">What would you like to create today?</div>
        </div>
      </div>
      <div className="page-body">
        <div className="modules-grid" style={{ marginBottom: '2rem' }}>
          {modules.map((m) => (
            <div key={m.id} className="module-card" onClick={() => navigate(m.id)}>
              <div className="module-icon">{m.icon}</div>
              <h3>{m.title}</h3>
              <p>{m.desc}</p>
            </div>
          ))}
        </div>

        <div className="card">
          <div className="card-header">
            <h3>Recent Generations</h3>
            <button className="btn btn-sm btn-secondary" onClick={() => navigate('history')}>View all</button>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            {loading ? (
              <div className="loading-overlay"><div className="spinner" /></div>
            ) : recent.length === 0 ? (
              <div className="empty-state" style={{ padding: '2rem' }}>
                <p>No generations yet. Pick a module above to get started!</p>
              </div>
            ) : (
              <table className="history-table">
                <thead>
                  <tr><th>Module</th><th>Input</th><th>Date</th><th>Duration</th></tr>
                </thead>
                <tbody>
                  {recent.map((g) => (
                    <tr key={g.id} style={{ cursor: 'pointer' }} onClick={() => navigate('view-generation/' + g.id)}>
                      <td><span className="badge badge-primary">{g.module.replace(/_/g, ' ')}</span></td>
                      <td style={{ maxWidth: 300, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {g.inputData?.userMessage?.substring(0, 80) || '-'}
                      </td>
                      <td>{new Date(g.createdAt).toLocaleDateString()}</td>
                      <td>{g.durationMs ? (g.durationMs / 1000).toFixed(1) + 's' : '-'}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        </div>
      </div>
    </>
  );
}

// ============================================================
// Markdown Output Component
// ============================================================

function MarkdownOutput({ text, usage }) {
  const ref = useRef(null);
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    if (ref.current && text) {
      ref.current.innerHTML = marked.parse(text);
    }
  }, [text]);

  const handleCopy = () => {
    navigator.clipboard.writeText(text).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    });
  };

  if (!text) {
    return (
      <div className="output-panel">
        <div className="output-body">
          <div className="empty-state">
            <div className="empty-icon">&#128221;</div>
            <p>Fill out the form and click Generate to see results here.</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="output-panel">
      <div className="output-header">
        <h3>Generated Output</h3>
        <button className="btn-copy" onClick={handleCopy}>
          {copied ? 'Copied!' : 'Copy to clipboard'}
        </button>
      </div>
      <div className="output-body">
        <div className="content" ref={ref} />
      </div>
      {usage && (
        <div className="usage-bar">
          <span>Tokens: {(usage.inputTokens || 0) + (usage.outputTokens || 0)}</span>
          <span>Cost: ${(usage.costUsd || 0).toFixed(4)}</span>
          <span>Time: {((usage.durationMs || 0) / 1000).toFixed(1)}s</span>
        </div>
      )}
    </div>
  );
}

// ============================================================
// Teaching Aide Generator Page
// ============================================================

function TeachingAidePage() {
  const [form, setForm] = useState({ subject: '', topic: '', level: 'undergraduate', outputType: 'lesson_plan', outcomes: '' });
  const [output, setOutput] = useState(null);
  const [usage, setUsage] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const set = (field) => (e) => setForm({ ...form, [field]: e.target.value });

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    setOutput(null);
    try {
      const data = await API.teachingAide(form);
      setOutput(data.output);
      setUsage(data.usage);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const quickTopics = [
    { subject: 'Data Structures', topic: 'Binary Search Trees' },
    { subject: 'Physics', topic: 'Electromagnetic Induction' },
    { subject: 'Mathematics', topic: 'Differential Equations' },
    { subject: 'English', topic: 'Academic Writing Skills' },
  ];

  return (
    <>
      <div className="page-header">
        <div>
          <h1>Teaching Aide Generator</h1>
          <div className="subtitle">Generate lesson plans, lecture outlines, and teaching materials</div>
        </div>
      </div>
      <div className="page-body">
        <div className="quick-actions">
          {quickTopics.map((t, i) => (
            <button key={i} className="chip" onClick={() => setForm({ ...form, subject: t.subject, topic: t.topic })}>
              {t.subject}: {t.topic}
            </button>
          ))}
        </div>

        <div className="generator-layout">
          <div className="card form-card">
            <div className="card-header"><h3>Configuration</h3></div>
            <div className="card-body">
              <form onSubmit={handleSubmit}>
                {error && <div className="alert alert-error">{error}</div>}

                <div className="form-group">
                  <label>Subject *</label>
                  <input className="form-input" placeholder="e.g. Data Structures" value={form.subject} onChange={set('subject')} required />
                </div>

                <div className="form-group">
                  <label>Topic *</label>
                  <input className="form-input" placeholder="e.g. Binary Search Trees" value={form.topic} onChange={set('topic')} required />
                </div>

                <div className="form-group">
                  <label>Level</label>
                  <select className="form-select" value={form.level} onChange={set('level')}>
                    <option value="certificate">Certificate</option>
                    <option value="diploma">Diploma</option>
                    <option value="undergraduate">Undergraduate</option>
                    <option value="postgraduate">Postgraduate</option>
                    <option value="doctoral">Doctoral</option>
                  </select>
                </div>

                <div className="form-group">
                  <label>Output Type</label>
                  <select className="form-select" value={form.outputType} onChange={set('outputType')}>
                    <option value="lesson_plan">Lesson Plan</option>
                    <option value="lecture_outline">Lecture Outline</option>
                    <option value="tutorial_worksheet">Tutorial / Worksheet</option>
                    <option value="lab_manual">Lab Manual</option>
                    <option value="study_guide">Study Guide</option>
                  </select>
                </div>

                <div className="form-group">
                  <label>Learning Outcomes (optional)</label>
                  <textarea className="form-input" rows="3" placeholder="Specific outcomes to target, or leave blank to auto-generate" value={form.outcomes} onChange={set('outcomes')} />
                </div>

                <button type="submit" className="btn btn-primary btn-full" disabled={loading}>
                  {loading ? <><span className="spinner" /> Generating...</> : 'Generate'}
                </button>
              </form>
            </div>
          </div>

          {loading ? (
            <div className="output-panel">
              <div className="loading-overlay">
                <div className="spinner spinner-lg" />
                <p>Generating your teaching aide...</p>
                <p style={{ fontSize: '0.8125rem', color: 'var(--gray-400)' }}>This usually takes 10-20 seconds</p>
              </div>
            </div>
          ) : (
            <MarkdownOutput text={output} usage={usage} />
          )}
        </div>
      </div>
    </>
  );
}

// ============================================================
// Bloom Mapping Page
// ============================================================

function BloomMappingPage() {
  const [outcomes, setOutcomes] = useState('');
  const [output, setOutput] = useState(null);
  const [usage, setUsage] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    setOutput(null);
    try {
      const data = await API.bloomMapping({ outcomes });
      setOutput(data.output);
      setUsage(data.usage);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <div className="page-header">
        <div>
          <h1>Bloom's Taxonomy Mapping</h1>
          <div className="subtitle">Analyze and classify learning outcomes by cognitive level</div>
        </div>
      </div>
      <div className="page-body">
        <div className="generator-layout">
          <div className="card form-card">
            <div className="card-header"><h3>Learning Outcomes</h3></div>
            <div className="card-body">
              <form onSubmit={handleSubmit}>
                {error && <div className="alert alert-error">{error}</div>}
                <div className="form-group">
                  <label>Paste your learning outcomes *</label>
                  <textarea className="form-input" rows="10" placeholder={"CO1: Understand the fundamentals of...\nCO2: Apply data structure concepts to...\nCO3: Analyze the efficiency of..."} value={outcomes} onChange={(e) => setOutcomes(e.target.value)} required />
                </div>
                <button type="submit" className="btn btn-primary btn-full" disabled={loading}>
                  {loading ? <><span className="spinner" /> Analyzing...</> : 'Analyze Outcomes'}
                </button>
              </form>
            </div>
          </div>
          {loading ? (
            <div className="output-panel"><div className="loading-overlay"><div className="spinner spinner-lg" /><p>Analyzing outcomes...</p></div></div>
          ) : (
            <MarkdownOutput text={output} usage={usage} />
          )}
        </div>
      </div>
    </>
  );
}

// ============================================================
// Assessment Builder Page
// ============================================================

function AssessmentPage() {
  const [form, setForm] = useState({ subject: '', topic: '', bloomLevel: 'mixed', questionType: 'mixed', count: 5 });
  const [output, setOutput] = useState(null);
  const [usage, setUsage] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const set = (field) => (e) => setForm({ ...form, [field]: e.target.value });

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    setOutput(null);
    try {
      const data = await API.assessment(form);
      setOutput(data.output);
      setUsage(data.usage);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <div className="page-header">
        <div>
          <h1>Assessment Builder</h1>
          <div className="subtitle">Create Bloom-aligned assessment questions with answer keys</div>
        </div>
      </div>
      <div className="page-body">
        <div className="generator-layout">
          <div className="card form-card">
            <div className="card-header"><h3>Assessment Configuration</h3></div>
            <div className="card-body">
              <form onSubmit={handleSubmit}>
                {error && <div className="alert alert-error">{error}</div>}
                <div className="form-group">
                  <label>Subject *</label>
                  <input className="form-input" placeholder="e.g. Operating Systems" value={form.subject} onChange={set('subject')} required />
                </div>
                <div className="form-group">
                  <label>Topic *</label>
                  <input className="form-input" placeholder="e.g. Process Scheduling" value={form.topic} onChange={set('topic')} required />
                </div>
                <div className="form-group">
                  <label>Bloom's Level</label>
                  <select className="form-select" value={form.bloomLevel} onChange={set('bloomLevel')}>
                    <option value="mixed">Mixed Levels</option>
                    <option value="Remember">Remember</option>
                    <option value="Understand">Understand</option>
                    <option value="Apply">Apply</option>
                    <option value="Analyze">Analyze</option>
                    <option value="Evaluate">Evaluate</option>
                    <option value="Create">Create</option>
                  </select>
                </div>
                <div className="form-group">
                  <label>Question Type</label>
                  <select className="form-select" value={form.questionType} onChange={set('questionType')}>
                    <option value="mixed">Mixed Types</option>
                    <option value="MCQ">Multiple Choice</option>
                    <option value="SHORT_ANSWER">Short Answer</option>
                    <option value="ESSAY">Essay</option>
                    <option value="TRUE_FALSE">True / False</option>
                    <option value="CASE_BASED">Case-Based</option>
                  </select>
                </div>
                <div className="form-group">
                  <label>Number of Questions</label>
                  <input type="number" className="form-input" min="1" max="20" value={form.count} onChange={set('count')} />
                </div>
                <button type="submit" className="btn btn-primary btn-full" disabled={loading}>
                  {loading ? <><span className="spinner" /> Generating...</> : 'Generate Questions'}
                </button>
              </form>
            </div>
          </div>
          {loading ? (
            <div className="output-panel"><div className="loading-overlay"><div className="spinner spinner-lg" /><p>Creating assessment...</p></div></div>
          ) : (
            <MarkdownOutput text={output} usage={usage} />
          )}
        </div>
      </div>
    </>
  );
}

// ============================================================
// Outcome Intelligence Page
// ============================================================

function OutcomeIntelPage() {
  const [outcomes, setOutcomes] = useState('');
  const [output, setOutput] = useState(null);
  const [usage, setUsage] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    setOutput(null);
    try {
      const data = await API.outcomeIntelligence({ outcomes });
      setOutput(data.output);
      setUsage(data.usage);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <div className="page-header">
        <div>
          <h1>Outcome Intelligence</h1>
          <div className="subtitle">Audit program outcomes for quality and accreditation readiness</div>
        </div>
      </div>
      <div className="page-body">
        <div className="generator-layout">
          <div className="card form-card">
            <div className="card-header"><h3>Program Outcomes</h3></div>
            <div className="card-body">
              <form onSubmit={handleSubmit}>
                {error && <div className="alert alert-error">{error}</div>}
                <div className="form-group">
                  <label>Paste your program learning outcomes *</label>
                  <textarea className="form-input" rows="12" placeholder={"PO1: Apply knowledge of mathematics, science, and engineering...\nPO2: Identify, formulate, and analyze complex problems...\nPO3: Design solutions for complex problems..."} value={outcomes} onChange={(e) => setOutcomes(e.target.value)} required />
                </div>
                <button type="submit" className="btn btn-primary btn-full" disabled={loading}>
                  {loading ? <><span className="spinner" /> Analyzing...</> : 'Analyze Outcomes'}
                </button>
              </form>
            </div>
          </div>
          {loading ? (
            <div className="output-panel"><div className="loading-overlay"><div className="spinner spinner-lg" /><p>Running outcome analysis...</p></div></div>
          ) : (
            <MarkdownOutput text={output} usage={usage} />
          )}
        </div>
      </div>
    </>
  );
}

// ============================================================
// Faculty Workflow Page
// ============================================================

function FacultyWorkflowPage() {
  const [form, setForm] = useState({ task: 'course_outline', details: '' });
  const [output, setOutput] = useState(null);
  const [usage, setUsage] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const tasks = [
    { value: 'course_outline', label: 'Course Outline / Syllabus' },
    { value: 'rubric', label: 'Assessment Rubric' },
    { value: 'feedback', label: 'Student Feedback Templates' },
    { value: 'moderation', label: 'Moderation Report' },
    { value: 'mapping', label: 'Curriculum Mapping Matrix' },
  ];

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    setOutput(null);
    try {
      const data = await API.facultyWorkflow(form);
      setOutput(data.output);
      setUsage(data.usage);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <div className="page-header">
        <div>
          <h1>Faculty Workflow</h1>
          <div className="subtitle">Generate accreditation-ready documents and templates</div>
        </div>
      </div>
      <div className="page-body">
        <div className="generator-layout">
          <div className="card form-card">
            <div className="card-header"><h3>Workflow Configuration</h3></div>
            <div className="card-body">
              <form onSubmit={handleSubmit}>
                {error && <div className="alert alert-error">{error}</div>}
                <div className="form-group">
                  <label>Task Type *</label>
                  <select className="form-select" value={form.task} onChange={(e) => setForm({ ...form, task: e.target.value })}>
                    {tasks.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}
                  </select>
                </div>
                <div className="form-group">
                  <label>Details & Context *</label>
                  <textarea className="form-input" rows="8" placeholder="Provide course details, department, semester, specific requirements..." value={form.details} onChange={(e) => setForm({ ...form, details: e.target.value })} required />
                </div>
                <button type="submit" className="btn btn-primary btn-full" disabled={loading}>
                  {loading ? <><span className="spinner" /> Generating...</> : 'Generate'}
                </button>
              </form>
            </div>
          </div>
          {loading ? (
            <div className="output-panel"><div className="loading-overlay"><div className="spinner spinner-lg" /><p>Generating document...</p></div></div>
          ) : (
            <MarkdownOutput text={output} usage={usage} />
          )}
        </div>
      </div>
    </>
  );
}

// ============================================================
// History Page
// ============================================================

function HistoryPage({ navigate }) {
  const [generations, setGenerations] = useState([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [moduleFilter, setModuleFilter] = useState('');
  const [loading, setLoading] = useState(true);

  const fetchHistory = useCallback(() => {
    setLoading(true);
    const params = { page, limit: 20 };
    if (moduleFilter) params.module = moduleFilter;
    API.history(params)
      .then((d) => { setGenerations(d.generations || []); setTotal(d.total || 0); })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, [page, moduleFilter]);

  useEffect(() => { fetchHistory(); }, [fetchHistory]);

  const modules = ['teaching_aide', 'bloom_mapping', 'assessment', 'outcome_intel', 'faculty_workflow'];

  return (
    <>
      <div className="page-header">
        <div>
          <h1>Generation History</h1>
          <div className="subtitle">{total} total generations</div>
        </div>
        <select className="form-select" style={{ width: 200 }} value={moduleFilter} onChange={(e) => { setModuleFilter(e.target.value); setPage(1); }}>
          <option value="">All modules</option>
          {modules.map((m) => <option key={m} value={m}>{m.replace(/_/g, ' ')}</option>)}
        </select>
      </div>
      <div className="page-body">
        <div className="card">
          <div className="card-body" style={{ padding: 0 }}>
            {loading ? (
              <div className="loading-overlay"><div className="spinner" /></div>
            ) : generations.length === 0 ? (
              <div className="empty-state" style={{ padding: '3rem' }}><p>No generations found.</p></div>
            ) : (
              <table className="history-table">
                <thead>
                  <tr><th>Module</th><th>Input Summary</th><th>Date</th><th>Duration</th><th>Cost</th></tr>
                </thead>
                <tbody>
                  {generations.map((g) => (
                    <tr key={g.id} style={{ cursor: 'pointer' }} onClick={() => navigate('view-generation/' + g.id)}>
                      <td><span className="badge badge-primary">{g.module.replace(/_/g, ' ')}</span></td>
                      <td style={{ maxWidth: 350, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {g.inputData?.userMessage?.substring(0, 100) || '-'}
                      </td>
                      <td>{new Date(g.createdAt).toLocaleDateString()}</td>
                      <td>{g.durationMs ? (g.durationMs / 1000).toFixed(1) + 's' : '-'}</td>
                      <td>{g.costUsd != null ? '$' + g.costUsd.toFixed(4) : '-'}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        </div>
        {total > 20 && (
          <div style={{ display: 'flex', justifyContent: 'center', gap: '0.5rem', marginTop: '1rem' }}>
            <button className="btn btn-sm btn-secondary" disabled={page <= 1} onClick={() => setPage(page - 1)}>Previous</button>
            <span style={{ padding: '0.375rem 0.75rem', fontSize: '0.875rem', color: 'var(--gray-500)' }}>Page {page} of {Math.ceil(total / 20)}</span>
            <button className="btn btn-sm btn-secondary" disabled={page >= Math.ceil(total / 20)} onClick={() => setPage(page + 1)}>Next</button>
          </div>
        )}
      </div>
    </>
  );
}

// ============================================================
// View Generation Page
// ============================================================

function ViewGenerationPage({ id, navigate }) {
  const [gen, setGen] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    API.generation(id)
      .then(setGen)
      .catch(() => navigate('history'))
      .finally(() => setLoading(false));
  }, [id]);

  if (loading) return <div className="loading-overlay" style={{ minHeight: 400 }}><div className="spinner spinner-lg" /></div>;
  if (!gen) return null;

  return (
    <>
      <div className="page-header">
        <div>
          <h1 style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
            <button className="btn btn-sm btn-secondary" onClick={() => navigate('history')}>&larr;</button>
            Generation Details
          </h1>
          <div className="subtitle">
            <span className="badge badge-primary">{gen.module.replace(/_/g, ' ')}</span>
            {' '}&middot; {new Date(gen.createdAt).toLocaleString()}
            {' '}&middot; {gen.model}
          </div>
        </div>
      </div>
      <div className="page-body">
        <MarkdownOutput
          text={gen.outputText}
          usage={{ inputTokens: gen.inputTokens, outputTokens: gen.outputTokens, costUsd: gen.costUsd, durationMs: gen.durationMs }}
        />
      </div>
    </>
  );
}

// ============================================================
// Admin Stats Page
// ============================================================

function AdminStatsPage() {
  const [stats, setStats] = useState(null);
  const [days, setDays] = useState(30);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    API.stats(days)
      .then(setStats)
      .catch(() => {})
      .finally(() => setLoading(false));
  }, [days]);

  if (loading) return (
    <>
      <div className="page-header"><div><h1>Usage Statistics</h1></div></div>
      <div className="page-body"><div className="loading-overlay"><div className="spinner spinner-lg" /></div></div>
    </>
  );

  const totalCount = stats?.total?.count || 0;
  const totalCost = stats?.total?.costUsd || 0;
  const activeUsers = stats?.activeUsers || 0;

  return (
    <>
      <div className="page-header">
        <div>
          <h1>Usage Statistics</h1>
          <div className="subtitle">Last {days} days</div>
        </div>
        <select className="form-select" style={{ width: 160 }} value={days} onChange={(e) => setDays(Number(e.target.value))}>
          <option value={7}>Last 7 days</option>
          <option value={30}>Last 30 days</option>
          <option value={90}>Last 90 days</option>
        </select>
      </div>
      <div className="page-body">
        <div className="stats-grid">
          <div className="stat-card accent-primary">
            <div className="stat-label">Total Generations</div>
            <div className="stat-value">{totalCount}</div>
          </div>
          <div className="stat-card accent-success">
            <div className="stat-label">Active Users</div>
            <div className="stat-value">{activeUsers}</div>
          </div>
          <div className="stat-card accent-warning">
            <div className="stat-label">Total Cost</div>
            <div className="stat-value">${totalCost.toFixed(2)}</div>
          </div>
          <div className="stat-card accent-danger">
            <div className="stat-label">Avg per User</div>
            <div className="stat-value">{activeUsers > 0 ? (totalCount / activeUsers).toFixed(1) : 0}</div>
          </div>
        </div>

        <div className="card">
          <div className="card-header"><h3>Usage by Module</h3></div>
          <div className="card-body" style={{ padding: 0 }}>
            <table className="history-table">
              <thead>
                <tr><th>Module</th><th>Generations</th><th>Input Tokens</th><th>Output Tokens</th><th>Cost</th></tr>
              </thead>
              <tbody>
                {(stats?.byModule || []).map((m) => (
                  <tr key={m.module}>
                    <td><span className="badge badge-primary">{m.module.replace(/_/g, ' ')}</span></td>
                    <td>{m._count}</td>
                    <td>{(m._sum?.inputTokens || 0).toLocaleString()}</td>
                    <td>{(m._sum?.outputTokens || 0).toLocaleString()}</td>
                    <td>${(m._sum?.costUsd || 0).toFixed(4)}</td>
                  </tr>
                ))}
                {(stats?.byModule || []).length === 0 && (
                  <tr><td colSpan="5" style={{ textAlign: 'center', padding: '2rem', color: 'var(--gray-400)' }}>No usage data for this period</td></tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </>
  );
}

// ============================================================
// App Router
// ============================================================

function AppShell() {
  const [route, navigate] = useRoute();

  const routeBase = route.split('/')[0];
  const routeParam = route.split('/').slice(1).join('/');

  const renderPage = () => {
    switch (routeBase) {
      case 'dashboard': return <DashboardPage navigate={navigate} />;
      case 'teaching-aide': return <TeachingAidePage />;
      case 'bloom-mapping': return <BloomMappingPage />;
      case 'assessment': return <AssessmentPage />;
      case 'outcome-intel': return <OutcomeIntelPage />;
      case 'faculty-workflow': return <FacultyWorkflowPage />;
      case 'history': return <HistoryPage navigate={navigate} />;
      case 'view-generation': return <ViewGenerationPage id={routeParam} navigate={navigate} />;
      case 'admin-stats': return <AdminStatsPage />;
      default: return <DashboardPage navigate={navigate} />;
    }
  };

  return (
    <div className="app-layout">
      <Sidebar route={routeBase} navigate={navigate} />
      <main className="main-content">
        {renderPage()}
      </main>
    </div>
  );
}

// ============================================================
// Root
// ============================================================

function App() {
  return (
    <AuthProvider>
      <AuthContext.Consumer>
        {({ user }) => (user ? <AppShell /> : <LoginPage />)}
      </AuthContext.Consumer>
    </AuthProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);