// CIPLearn Dashboard — Mastery Progress per Domain
const { useState, useEffect } = React;

const API = '/api';

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">AI Tutor</a>
          <a href="/dashboard" className="active">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>
  );
}

function MasteryBar({ pct }) {
  const cls = pct >= 70 ? 'high' : pct >= 40 ? 'medium' : 'low';
  return (
    <div className="domain-row">
      <div className="progress-bar-wrap">
        <div className={`progress-bar ${cls}`} style={{ width: `${pct}%` }}></div>
      </div>
      <span className="domain-pct">{pct}%</span>
    </div>
  );
}

function Dashboard({ user }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`${API}/progress/mastery`, { credentials: 'same-origin' })
      .then(r => r.ok ? r.json() : null)
      .then(d => { setData(d); setLoading(false); })
      .catch(() => setLoading(false));
  }, []);

  if (loading) return (
    <div className="app-container">
      <div className="loading-spinner">
        <div className="spinner"></div>
        <div className="loading-text">Loading mastery data…</div>
      </div>
    </div>
  );

  return (
    <div className="app-container">
      <h1 className="page-title">Your Dashboard</h1>
      <p className="page-subtitle">Mastery breakdown by NERC CIP domain.</p>

      <div className="stats-row">
        <div className="stat-card">
          <div className="stat-value">{data?.overallPct || 0}%</div>
          <div className="stat-label">Overall Accuracy</div>
        </div>
        <div className="stat-card">
          <div className="stat-value">{data?.totalAnswered || 0}</div>
          <div className="stat-label">Questions Answered</div>
        </div>
        <div className="stat-card">
          <div className="stat-value">{data?.domains?.length || 0}</div>
          <div className="stat-label">Domains Studied</div>
        </div>
      </div>

      {data?.weakestDomain && (
        <div style={{background:'var(--accent-dim)',border:'1px solid var(--accent-border)',borderRadius:'10px',padding:'0.875rem 1.25rem',marginBottom:'2rem',fontSize:'0.875rem',color:'var(--fg-muted)'}}>
          Focus area: <strong style={{color:'var(--accent)'}}>{data.weakestDomain.domain}</strong> — only {data.weakestDomain.pct}% accuracy ({data.weakestDomain.correct}/{data.weakestDomain.total})
        </div>
      )}

      <div className="mastery-section">
        <h3>Domain Mastery</h3>
        {!data?.domains?.length ? (
          <div className="empty-state">No quiz data yet — <a href="/app" style={{color:'var(--accent)'}}>start a session</a> to see your progress.</div>
        ) : (
          data.domains.map(d => (
            <div key={d.domain} style={{marginBottom:'1rem'}}>
              <div style={{display:'flex',justifyContent:'space-between',marginBottom:'0.35rem'}}>
                <span className="domain-name">{d.domain}</span>
                <span style={{fontSize:'0.8rem',color:'var(--fg-muted)'}}>{d.correct}/{d.total} correct</span>
              </div>
              <MasteryBar pct={parseInt(d.pct) || 0} />
            </div>
          ))
        )}
      </div>

      {data?.recentSessions?.length > 0 && (
        <div className="recent-sessions">
          <h3 style={{fontSize:'1rem',fontWeight:'600',marginBottom:'1rem',color:'var(--fg)'}}>Recent Sessions</h3>
          {data.recentSessions.map(s => (
            <div key={s.id} className="session-item">
              <div>
                <div className="session-domain">{s.domain || 'Mixed'}</div>
                <div className="session-date">{new Date(s.created_at).toLocaleDateString()}</div>
              </div>
              <div style={{textAlign:'right'}}>
                <div className="session-score">{s.score ?? 0}%</div>
                <div style={{fontSize:'0.75rem',color:'var(--fg-subtle)'}}>{s.question_count || 0} questions</div>
              </div>
            </div>
          ))}
        </div>
      )}

      <div style={{textAlign:'center',marginTop:'2.5rem'}}>
        <a href="/app" className="btn btn-primary" style={{fontSize:'0.9rem',padding:'0.7rem 2rem'}}>
          Start New Quiz Session →
        </a>
      </div>
    </div>
  );
}

// Auth gate
function App() {
  const [user, setUser] = useState(null);
  const [screen, setScreen] = useState('loading');

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

  if (!user) return (
    <div className="app-container">
      <div className="loading-spinner"><div className="spinner"></div></div>
    </div>
  );

  return (
    <div>
      <Header user={user} onLogout={() => location.href='/'} />
      <Dashboard user={user} />
    </div>
  );
}

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