function ReportsAnalytics({ onNavigate }) {
  const [report, setReport] = React.useState('Institute');
  const reports = ['Institute', 'Instructor', 'Trade-wise', 'Usage'];

  // Line chart data (weekly active learners, in thousands)
  const trend = [42, 48, 45, 58, 62, 71, 68, 78, 82, 88, 84, 92];
  const maxT = Math.max(...trend);
  const w = 620, h = 180, pad = 10;
  const pts = trend.map((v, i) => [pad + (i * (w - 2 * pad)) / (trend.length - 1), h - pad - (v / maxT) * (h - 2 * pad)]);
  const linePath = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
  const areaPath = `${linePath} L ${pts[pts.length - 1][0].toFixed(1)} ${h - pad} L ${pts[0][0].toFixed(1)} ${h - pad} Z`;

  const tradeBars = [
    { t: 'COPA', v: 91 }, { t: 'Electrician', v: 84 }, { t: 'Fitter', v: 78 },
    { t: 'Welder', v: 72 }, { t: 'Machinist', v: 68 }, { t: 'Diesel', v: 64 },
    { t: 'Electronics', v: 61 }, { t: 'Solar', v: 55 },
  ];

  const rows = [
    { name: 'Govt ITI Cuttack', instr: 42, students: 1240, comp: 82, aitt: 86, trend: 'up' },
    { name: 'Govt ITI Pune', instr: 58, students: 1890, comp: 78, aitt: 81, trend: 'up' },
    { name: 'Govt ITI Coimbatore', instr: 36, students: 1120, comp: 74, aitt: 77, trend: 'flat' },
    { name: 'Govt ITI Lucknow', instr: 44, students: 1560, comp: 61, aitt: 64, trend: 'down' },
    { name: 'Govt ITI Bengaluru', instr: 51, students: 1710, comp: 80, aitt: 83, trend: 'up' },
    { name: 'Govt ITI Ahmedabad', instr: 33, students: 980, comp: 76, aitt: 79, trend: 'up' },
  ];

  return (
    <div className="content">
      <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', marginBottom: 20, gap: 20, flexWrap: 'wrap' }}>
        <div>
          <div className="section-eyebrow">Reports & Analytics</div>
          <h1 className="section-title" style={{ fontSize: 30 }}>Every metric, every level.</h1>
          <p className="section-sub">Drill from state to institute to instructor. Export detailed reports for DTET / NSDC review.</p>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <button className="btn btn-ghost" onClick={() => window.toast('Date range: Last 90 days')}><window.IconCalendar size={13}/> Last 90 days</button>
          <button className="btn btn-primary" onClick={() => window.toast('Exporting ' + report + ' report as CSV…')}><window.IconDownload size={13}/> Export CSV</button>
        </div>
      </div>

      {/* Report type selector */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 20 }}>
        {reports.map(r => (
          <button key={r} onClick={() => setReport(r)} style={{ padding: '9px 16px', fontSize: 13, fontWeight: 600, borderRadius: 8, background: report === r ? 'var(--navy-800)' : 'white', color: report === r ? 'white' : 'var(--ink-700)', border: report === r ? 'none' : '1px solid var(--ink-200)' }}>{r} report</button>
        ))}
      </div>

      {/* KPI row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 20 }}>
        {[
          { k: '84,200', v: 'Active students', s: '↑ 3,120 (3.8%)', c: 'var(--green-600)' },
          { k: '412', v: 'Institutes reporting', s: 'across 8 states', c: 'var(--ink-600)' },
          { k: '78.4%', v: 'Avg. completion', s: '↑ 6.2% MoM', c: 'var(--green-600)' },
          { k: '82%', v: 'AITT pass (pilot)', s: 'vs 61% baseline', c: 'var(--green-600)' },
        ].map(s => (
          <div key={s.v} className="card" style={{ padding: 20 }}>
            <div className="stat-num">{s.k}</div>
            <div className="stat-label">{s.v}</div>
            <div style={{ fontSize: 11, color: s.c, marginTop: 8, fontWeight: 500 }}>{s.s}</div>
          </div>
        ))}
      </div>

      {/* Charts row */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 20, marginBottom: 20 }}>
        {/* Trend line chart */}
        <div className="card">
          <div className="card-header" style={{ justifyContent: 'space-between' }}>
            <div>
              <div className="card-title">Active learners — 12-week trend</div>
              <div className="card-sub">Thousands of students, weekly</div>
            </div>
            <span className="badge green" style={{ fontSize: 10 }}>↑ 24% growth</span>
          </div>
          <div style={{ padding: 20 }}>
            <svg viewBox={`0 0 ${w} ${h}`} width="100%" preserveAspectRatio="xMidYMid meet">
              <defs>
                <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="var(--saffron-500)" stopOpacity="0.25"/>
                  <stop offset="100%" stopColor="var(--saffron-500)" stopOpacity="0"/>
                </linearGradient>
              </defs>
              {[0.25, 0.5, 0.75, 1].map(g => (
                <line key={g} x1={pad} y1={h - pad - g * (h - 2 * pad)} x2={w - pad} y2={h - pad - g * (h - 2 * pad)} stroke="var(--ink-200)" strokeWidth="1" strokeDasharray="3 3"/>
              ))}
              <path d={areaPath} fill="url(#areaGrad)"/>
              <path d={linePath} fill="none" stroke="var(--saffron-500)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
              {pts.map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r={i === pts.length - 1 ? 5 : 3} fill={i === pts.length - 1 ? 'var(--saffron-600)' : 'white'} stroke="var(--saffron-500)" strokeWidth="2"/>)}
            </svg>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--ink-500)', marginTop: 6, letterSpacing: '0.05em' }}>
              <span>W1</span><span>W4</span><span>W8</span><span>W12</span>
            </div>
          </div>
        </div>

        {/* Trade-wise bars */}
        <div className="card">
          <div className="card-header"><div className="card-title">Completion by trade</div></div>
          <div style={{ padding: 20 }}>
            {tradeBars.map(t => (
              <div key={t.t} style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                <span style={{ width: 78, fontSize: 12, color: 'var(--ink-700)', fontWeight: 500 }}>{t.t}</span>
                <div style={{ flex: 1, height: 18, background: 'var(--ink-100)', borderRadius: 4, overflow: 'hidden' }}>
                  <div style={{ width: `${t.v}%`, height: '100%', background: t.v >= 80 ? 'var(--green-600)' : t.v >= 65 ? 'var(--saffron-500)' : 'var(--navy-600)', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'end', paddingRight: 6 }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'white', fontWeight: 600 }}>{t.v}%</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Detailed table */}
      <div className="card">
        <div className="card-header" style={{ justifyContent: 'space-between' }}>
          <div>
            <div className="card-title">{report} report — top institutes</div>
            <div className="card-sub">Ranked by completion & AITT pass rate</div>
          </div>
          <button className="btn btn-ghost" style={{ padding: '6px 12px', fontSize: 12 }} onClick={() => window.toast('Filter institutes by state, completion or AITT')}><window.IconFilter size={12}/> Filter</button>
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr style={{ background: 'var(--ink-50)', fontFamily: 'var(--font-mono)', fontSize: 10, textAlign: 'left', letterSpacing: '0.08em', color: 'var(--ink-600)' }}>
              <th style={{ padding: '10px 16px', fontWeight: 600 }}>INSTITUTE</th>
              <th style={{ padding: '10px 8px', fontWeight: 600 }}>INSTRUCTORS</th>
              <th style={{ padding: '10px 8px', fontWeight: 600 }}>STUDENTS</th>
              <th style={{ padding: '10px 8px', fontWeight: 600 }}>COMPLETION</th>
              <th style={{ padding: '10px 8px', fontWeight: 600 }}>AITT PASS</th>
              <th style={{ padding: '10px 16px', fontWeight: 600 }}>TREND</th>
            </tr>
          </thead>
          <tbody>
            {rows.map(r => (
              <tr key={r.name} style={{ borderTop: '1px solid var(--ink-100)' }}>
                <td style={{ padding: '12px 16px', fontSize: 13, fontWeight: 600, color: 'var(--ink-900)' }}>{r.name}</td>
                <td style={{ padding: '12px 8px', fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--ink-700)' }}>{r.instr}</td>
                <td style={{ padding: '12px 8px', fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--ink-700)' }}>{r.students.toLocaleString('en-IN')}</td>
                <td style={{ padding: '12px 8px', minWidth: 130 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div className="progress-track" style={{ flex: 1 }}><div className="progress-fill" style={{ width: `${r.comp}%`, background: r.comp >= 75 ? 'var(--green-600)' : r.comp >= 65 ? 'var(--saffron-500)' : 'var(--red-600)' }} /></div>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, color: 'var(--ink-700)', width: 28 }}>{r.comp}%</span>
                  </div>
                </td>
                <td style={{ padding: '12px 8px', fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--ink-900)', fontWeight: 600 }}>{r.aitt}%</td>
                <td style={{ padding: '12px 16px' }}>
                  <span style={{ color: r.trend === 'up' ? 'var(--green-600)' : r.trend === 'down' ? 'var(--red-600)' : 'var(--ink-500)', fontSize: 16, fontWeight: 700 }}>
                    {r.trend === 'up' ? '↑' : r.trend === 'down' ? '↓' : '→'}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{ padding: '14px 20px', borderTop: '1px solid var(--ink-200)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontSize: 12, color: 'var(--ink-600)' }}>Showing 6 of 412 institutes</span>
          <button className="btn btn-ghost" style={{ padding: '6px 12px', fontSize: 12 }} onClick={() => onNavigate('admin')}>Open full dashboard <window.IconArrow size={12}/></button>
        </div>
      </div>
    </div>
  );
}

window.ReportsAnalytics = ReportsAnalytics;