// CIPLearn AI Tutor — Quiz Client
// State machine: start → quiz → result
const { useState, useEffect } = React;

const API = '/api';
const LETTERS = ['A', 'B', 'C', 'D'];
const DIFFICULTIES = ['easy', 'medium', 'hard'];
const CIP_DOMAINS = [
  'CIP-001', 'CIP-002', 'CIP-003', 'CIP-004', 'CIP-005',
  'CIP-006', 'CIP-007', 'CIP-008', 'CIP-009', 'CIP-010',
  'CIP-011', 'CIP-012', 'CIP-013', 'CIP-014',
  'Physical Security', 'SCADA Security', 'Incident Response',
];

// ─── Header ───────────────────────────────────────────────────────────────
function Header({ user, onLogout }) {
  return (
    <header className="site-header">
      <div className="header-inner">
        <span className="logo" onClick={() => location.href='/'} style={{cursor:'pointer'}}>
          CIP<span className="logo-accent">Learn</span>
        </span>
        <nav className="header-nav">
          <a href="/app" className="active">AI Tutor</a>
          <a href="/dashboard">Dashboard</a>
        </nav>
        {user && (
          <div className="user-badge">
            <span style={{fontSize:'0.85rem',color:'var(--fg-muted)'}}>{user.email}</span>
            <button className="btn btn-ghost" style={{padding:'0.3rem 0.75rem',fontSize:'0.8rem'}} onClick={onLogout}>Sign out</button>
          </div>
        )}
      </div>
    </header>
  );
}

// ─── Auth ─────────────────────────────────────────────────────────────────
function Auth({ onAuth }) {
  const [mode, setMode] = useState('login');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e) {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      const endpoint = mode === 'login' ? '/login' : '/register';
      const body = mode === 'login' ? { email, password } : { email, password, name };
      const res = await fetch(`${API}/auth${endpoint}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'same-origin',
        body: JSON.stringify(body),
      });
      const data = await res.json();
      if (!res.ok) { setError(data.error || 'Failed'); return; }
      onAuth(data.user);
    } catch {
      setError('Network error — try again');
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="app-container">
      <div className="start-panel">
        <h2>Welcome to CIPLearn</h2>
        <p>Master NERC CIP with AI-powered adaptive quizzes. Sign in or create an account to begin.</p>
      </div>
      <div style={{display:'flex',gap:'1rem',justifyContent:'center'}}>
        <div className="auth-form">
          <h3>{mode === 'login' ? 'Sign In' : 'Create Account'}</h3>
          <form onSubmit={handleSubmit}>
            {mode === 'register' && (
              <div className="input-group">
                <label className="input-label">Name</label>
                <input className="input" type="text" placeholder="Jane Doe" value={name}
                  onChange={e => setName(e.target.value)} required />
              </div>
            )}
            <div className="input-group">
              <label className="input-label">Email</label>
              <input className="input" type="email" placeholder="you@example.com" value={email}
                onChange={e => setEmail(e.target.value)} required />
            </div>
            <div className="input-group">
              <label className="input-label">Password</label>
              <input className="input" type="password" placeholder="8+ characters" value={password}
                onChange={e => setPassword(e.target.value)} required />
            </div>
            {error && <div className="auth-error">{error}</div>}
            <button className="btn btn-primary btn-full" type="submit" disabled={loading}
              style={{marginTop:'0.5rem'}}>
              {loading ? 'Please wait…' : mode === 'login' ? 'Sign In' : 'Create Account'}
            </button>
          </form>
          <div style={{marginTop:'1rem',textAlign:'center',fontSize:'0.8rem',color:'var(--fg-muted)'}}>
            {mode === 'login' ? "No account? " : "Already a member? "}
            <span style={{color:'var(--accent)',cursor:'pointer'}}
              onClick={() => setMode(mode === 'login' ? 'register' : 'login')}>
              {mode === 'login' ? 'Create one' : 'Sign in'}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Start Screen ──────────────────────────────────────────────────────────
const QUESTION_COUNTS = [5, 8, 10, 15];

function StartScreen({ onStart }) {
  const [selectedDomain, setSelectedDomain] = useState(null);
  const [difficulty, setDifficulty] = useState('medium');
  const [count, setCount] = useState(8);
  const [loading, setLoading] = useState(false);

  async function handleStart() {
    setLoading(true);
    try {
      const res = await fetch(`${API}/quiz/sessions`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'same-origin',
        body: JSON.stringify({ domain: selectedDomain, difficulty, count }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error);
      onStart(data.sessionId, data.totalCount);
    } catch (err) {
      alert(err.message || 'Failed to start session');
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="app-container">
      <h1 className="page-title">AI Study Coach</h1>
      <p className="page-subtitle">Adaptive NERC CIP quiz — questions calibrate to your knowledge gaps.</p>

      <div style={{marginBottom:'1.5rem'}}>
        <div style={{fontSize:'0.8rem',color:'var(--fg-muted)',marginBottom:'0.75rem',textTransform:'uppercase',letterSpacing:'0.05em'}}>Select Domain (optional)</div>
        <div className="domain-grid">
          {CIP_DOMAINS.map(d => (
            <button key={d} className={`domain-chip${selectedDomain === d ? ' selected' : ''}`}
              onClick={() => setSelectedDomain(selectedDomain === d ? null : d)}>
              {d}
            </button>
          ))}
        </div>
      </div>

      <div style={{marginBottom:'1.5rem',display:'flex',gap:'2rem',flexWrap:'wrap'}}>
        <div>
          <div style={{fontSize:'0.8rem',color:'var(--fg-muted)',marginBottom:'0.75rem',textTransform:'uppercase',letterSpacing:'0.05em'}}>Difficulty</div>
          <div className="difficulty-row">
            {DIFFICULTIES.map(d => (
              <button key={d} className={`diff-btn${difficulty === d ? ' selected' : ''}`}
                onClick={() => setDifficulty(d)}>
                {d.charAt(0).toUpperCase() + d.slice(1)}
              </button>
            ))}
          </div>
        </div>
        <div>
          <div style={{fontSize:'0.8rem',color:'var(--fg-muted)',marginBottom:'0.75rem',textTransform:'uppercase',letterSpacing:'0.05em'}}>Questions</div>
          <div className="difficulty-row">
            {QUESTION_COUNTS.map(n => (
              <button key={n} className={`diff-btn${count === n ? ' selected' : ''}`}
                onClick={() => setCount(n)}>
                {n}
              </button>
            ))}
          </div>
        </div>
      </div>

      <div style={{textAlign:'center'}}>
        <button className="btn btn-primary" onClick={handleStart} disabled={loading}
          style={{fontSize:'1rem',padding:'0.85rem 2.5rem'}}>
          {loading ? 'Preparing quiz…' : `Start Session — ${count} questions`}
        </button>
      </div>
    </div>
  );
}

// ─── Quiz Card ────────────────────────────────────────────────────────────
function QuizCard({ sessionId, totalCount, onComplete }) {
  const [current, setCurrent] = useState(null);
  const [answered, setAnswered] = useState(null);
  const [result, setResult] = useState(null);
  const [selectedIndex, setSelectedIndex] = useState(null);
  const [loading, setLoading] = useState(true);
  const [done, setDone] = useState(false);
  const [score, setScore] = useState(null);

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

  async function fetchQuestion() {
    setLoading(true);
    setSelectedIndex(null);
    setResult(null);
    try {
      const res = await fetch(`${API}/quiz/sessions/${sessionId}/question`, {
        credentials: 'same-origin',
      });
      const data = await res.json();
      if (data.done) { setDone(true); return; }
      setCurrent(data);
    } catch {
      alert('Failed to load question');
    } finally {
      setLoading(false);
    }
  }

  async function handleAnswer(index) {
    if (result) return;
    setSelectedIndex(index);
    try {
      const res = await fetch(`${API}/quiz/sessions/${sessionId}/answer`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'same-origin',
        body: JSON.stringify({ questionId: current.questionId, selectedIndex: index }),
      });
      const data = await res.json();
      setResult(data);
      setAnswered({ index, correct: data.correct });
    } catch {
      alert('Failed to submit answer');
    }
  }

  async function handleNext() {
    if (answered && !answered.correct && current) {
      await new Promise(r => setTimeout(r, 800));
    }
    const res = await fetch(`${API}/quiz/sessions/${sessionId}/question`, { credentials: 'same-origin' });
    const data = await res.json();
    if (data.done) {
      const endRes = await fetch(`${API}/quiz/sessions/${sessionId}/end`, {
        method: 'POST', credentials: 'same-origin'
      });
      const endData = await endRes.json();
      setScore(endData.score);
      setDone(true);
    } else {
      setCurrent(data);
      setAnswered(null);
      setResult(null);
      setSelectedIndex(null);
    }
  }

  if (loading) return (
    <div className="loading-spinner">
      <div className="spinner"></div>
      <div className="loading-text">Generating question…</div>
    </div>
  );

  if (done) return (
    <div className="result-panel">
      {score !== null && (
        <>
          <div className="result-score">{score}%</div>
          <div className="result-label">score</div>
        </>
      )}
      <h2 className="page-title" style={{marginTop:'0.5rem'}}>Session Complete!</h2>
      <p className="page-subtitle">Great work. Head to your dashboard to review your mastery by domain.</p>
      <div className="result-actions">
        <button className="btn btn-primary" onClick={() => location.href='/dashboard'}>
          View Dashboard
        </button>
        <button className="btn btn-ghost" onClick={() => location.reload()}>
          New Session
        </button>
      </div>
    </div>
  );

  const progress = current ? `${answered ? totalCount : '?'}/${totalCount}` : `?/${totalCount}`;

  return (
    <div className="app-container">
      <div className="quiz-card slide-in">
        <div className="quiz-meta">
          <span className="quiz-domain">{current?.domain || 'General'}</span>
          <span className="quiz-progress">Question {progress}</span>
        </div>

        <div className="question-text">{current?.question}</div>

        <div className="options">
          {current?.options.map((opt, i) => (
            <button
              key={i}
              className={`option-btn${selectedIndex === i ? ' selected' : ''}${result && i === current.correctIndex ? ' correct' : ''}${result && selectedIndex === i && !result.correct ? ' wrong' : ''}`}
              onClick={() => handleAnswer(i)}
              disabled={result !== null}
            >
              <span className="option-letter">{LETTERS[i]}</span>
              <span className="option-text">{opt}</span>
            </button>
          ))}
        </div>

        {result && (
          <div className="explanation">
            <strong>{result.correct ? 'Correct!' : 'Incorrect.'}</strong> {result.explanation}
          </div>
        )}

        <div className="quiz-footer">
          <span style={{fontSize:'0.8rem',color:'var(--fg-subtle)'}}>
            {result ? (result.correct ? 'Well done' : 'Review and continue') : 'Select an answer'}
          </span>
          {result && (
            <button className="btn btn-primary" onClick={handleNext} style={{minWidth:'120px'}}>
              Continue →
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

// ─── App Root ──────────────────────────────────────────────────────────────
function App() {
  const [user, setUser] = useState(null);
  const [screen, setScreen] = useState('loading');
  const [sessionId, setSessionId] = useState(null);
  const [totalCount, setTotalCount] = useState(8);

  useEffect(() => {
    fetch(`${API}/auth/me`, { credentials: 'same-origin' })
      .then(r => r.ok ? r.json() : null)
      .then(data => {
        if (data?.user) { setUser(data.user); setScreen('start'); }
        else { setScreen('auth'); }
      })
      .catch(() => setScreen('auth'));
  }, []);

  function handleAuth(userData) {
    setUser(userData);
    setScreen('start');
  }

  async function handleLogout() {
    await fetch(`${API}/auth/logout`, { method: 'POST', credentials: 'same-origin' });
    setUser(null);
    setScreen('auth');
  }

  function handleStart(sid, count) {
    setSessionId(sid);
    setTotalCount(count);
    setScreen('quiz');
  }

  return (
    <div>
      <Header user={user} onLogout={handleLogout} />
      {screen === 'loading' && (
        <div className="app-container">
          <div className="loading-spinner">
            <div className="spinner"></div>
            <div className="loading-text">Loading…</div>
          </div>
        </div>
      )}
      {screen === 'auth' && <Auth onAuth={handleAuth} />}
      {screen === 'start' && <StartScreen onStart={handleStart} />}
      {screen === 'quiz' && sessionId && <QuizCard sessionId={sessionId} totalCount={totalCount} />}
    </div>
  );
}

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