function AdminDashboard({ onNavigate }) {
  // Institute data by Indian state
  const states = [
    { name: 'Odisha', code: 'OD', itis: 68, students: 14200, prog: 78, hot: true },
    { name: 'Maharashtra', code: 'MH', itis: 84, students: 21400, prog: 82 },
    { name: 'Tamil Nadu', code: 'TN', itis: 71, students: 18900, prog: 74 },
    { name: 'Karnataka', code: 'KA', itis: 52, students: 12800, prog: 80 },
    { name: 'Uttar Pradesh', code: 'UP', itis: 48, students: 11600, prog: 61 },
    { name: 'Gujarat', code: 'GJ', itis: 39, students: 9400, prog: 76 },
    { name: 'Telangana', code: 'TS', itis: 28, students: 7100, prog: 79 },
    { name: 'West Bengal', code: 'WB', itis: 22, students: 5400, prog: 68 },
  ];

  return (
    <div className="content">
      <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', marginBottom: 20 }}>
        <div>
          <div className="section-eyebrow">Institute Admin</div>
          <h1 className="section-title" style={{ fontSize: 30 }}>State-wide overview</h1>
          <p className="section-sub">Live deployment across DTET partner institutes · Updated 2 min ago</p>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <button className="btn btn-ghost" onClick={() => onNavigate && onNavigate('reports')}><window.IconServer size={13}/> Reports & Analytics</button>
          <button className="btn btn-ghost" onClick={() => window.toast('Exporting state-wide overview…')}><window.IconDownload size={13}/> Export</button>
          <button className="btn btn-primary" onClick={() => window.toast('Onboard institute — start a new DTET deployment')}><window.IconPlus size={13}/> Onboard institute</button>
        </div>
      </div>

      {/* Top stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16, marginBottom: 20 }}>
        {[
          { k: '412', v: 'ITIs deployed', sub: 'across 8 states' },
          { k: '84,200', v: 'Active students', sub: '↑ 3,120 this month' },
          { k: '2,140', v: 'Instructors', sub: '96% certified' },
          { k: '99.7%', v: 'System uptime', sub: '30-day SLA' },
          { k: '82%', v: 'AITT pass rate', sub: 'vs 61% baseline' },
        ].map((s, i) => (
          <div key={i} className="card" style={{ padding: 20 }}>
            <div className="stat-num">{s.k}</div>
            <div className="stat-label">{s.v}</div>
            <div style={{ fontSize: 11, color: 'var(--ink-600)', marginTop: 8 }}>{s.sub}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 20, marginBottom: 20 }}>
        {/* Map + state ranking */}
        <div className="card">
          <div className="card-header" style={{ justifyContent: 'space-between' }}>
            <div>
              <div className="card-title">Deployments by state</div>
              <div className="card-sub">Ranked by student engagement</div>
            </div>
            <div style={{ display: 'flex', gap: 4, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-600)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}><div style={{ width: 10, height: 10, borderRadius: 2, background: 'var(--green-600)' }}/> HIGH</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginLeft: 8 }}><div style={{ width: 10, height: 10, borderRadius: 2, background: 'var(--saffron-500)' }}/> MED</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginLeft: 8 }}><div style={{ width: 10, height: 10, borderRadius: 2, background: 'var(--red-600)' }}/> LOW</div>
            </div>
          </div>
          <div style={{ padding: 20, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            {/* India map placeholder */}
            <div style={{ position: 'relative', borderRadius: 10, background: 'var(--navy-50)', border: '1px solid var(--ink-200)', padding: 16, display: 'grid', placeItems: 'center', minHeight: 300 }}>
              <IndiaMapSvg states={states} />
              <div style={{ position: 'absolute', bottom: 10, right: 10, fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--ink-500)', letterSpacing: '0.08em' }}>DEPLOYMENT DENSITY MAP</div>
            </div>
            <div>
              {states.map(s => (
                <div key={s.code} style={{
                  padding: '10px 0',
                  borderBottom: '1px dashed var(--ink-200)',
                  display: 'grid', gridTemplateColumns: '32px 1fr 60px 40px', gap: 10, alignItems: 'center',
                  background: s.hot ? 'linear-gradient(90deg, rgba(230,117,20,0.06), transparent)' : 'transparent',
                }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: s.hot ? 'var(--saffron-600)' : 'var(--ink-600)' }}>{s.code}</div>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-900)' }}>{s.name}</div>
                    <div style={{ fontSize: 11, color: 'var(--ink-600)', marginTop: 2 }}>{s.itis} ITIs · {s.students.toLocaleString('en-IN')} students</div>
                  </div>
                  <div className="progress-track" style={{ height: 4 }}>
                    <div className="progress-fill" style={{ width: `${s.prog}%`, background: s.prog >= 75 ? 'var(--green-600)' : s.prog >= 65 ? 'var(--saffron-500)' : 'var(--red-600)' }}/>
                  </div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-700)', fontWeight: 600 }}>{s.prog}%</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Live activity feed */}
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">Live activity</div>
              <div className="card-sub">Across all institutes · last 5 min</div>
            </div>
            <span className="badge" style={{ marginLeft: 'auto', background: 'var(--red-100)', color: 'var(--red-600)' }}>● LIVE</span>
          </div>
          <div style={{ padding: '6px 0', maxHeight: 380, overflow: 'auto' }}>
            {[
              { t: '2s', a: 'ITI Cuttack', m: 'Fitter batch F-2024-A started MIG welding sim', ic: window.IconBeaker, c: 'var(--saffron-500)' },
              { t: '14s', a: 'ITI Pune', m: 'Machinist lesson L12 completed by 24 students', ic: window.IconCube, c: 'var(--green-600)' },
              { t: '38s', a: 'ITI Coimbatore', m: 'Instructor Rajesh graded 18 practicals', ic: window.IconClipboard, c: 'var(--navy-700)' },
              { t: '52s', a: 'ITI Lucknow', m: 'AI Tutor answered 142 queries', ic: window.IconChat, c: 'var(--navy-700)' },
              { t: '1m', a: 'ITI Bhubaneswar', m: 'CNC operator sim — new attempt score 94%', ic: window.IconTarget, c: 'var(--green-600)' },
              { t: '2m', a: 'ITI Bangalore', m: 'Solar Tech Sem 2 exam completed', ic: window.IconAward, c: 'var(--saffron-500)' },
              { t: '3m', a: 'ITI Ahmedabad', m: '38 new students enrolled to Electrician trade', ic: window.IconUsers, c: 'var(--navy-700)' },
              { t: '4m', a: 'ITI Hyderabad', m: 'Fitter viva prep session started', ic: window.IconGraduation, c: 'var(--navy-700)' },
            ].map((e, i) => {
              const I = e.ic;
              return (
                <div key={i} style={{ padding: '10px 20px', display: 'flex', gap: 12, borderTop: i > 0 ? '1px solid var(--ink-100)' : 'none' }}>
                  <div style={{ width: 28, height: 28, borderRadius: 6, background: 'var(--ink-100)', color: e.c, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                    <I size={13}/>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 12.5, color: 'var(--ink-900)', lineHeight: 1.4 }}>
                      <strong>{e.a}</strong> — {e.m}
                    </div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-500)', marginTop: 2, letterSpacing: '0.06em' }}>{e.t} ago</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Usage analytics */}
      <div className="card">
        <div className="card-header">
          <div className="card-title">Module usage this week</div>
          <div className="card-sub">Across 84,200 active students</div>
        </div>
        <div style={{ padding: 20, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
          {[
            { m: '3D Lessons', v: '412K', s: 'views', trend: 68 },
            { m: 'Virtual Labs', v: '84K', s: 'sessions', trend: 82 },
            { m: 'Assessments', v: '146K', s: 'attempts', trend: 74 },
            { m: 'AI Tutor', v: '392K', s: 'queries', trend: 91 },
            { m: 'Downloads', v: '28K', s: 'PDFs', trend: 44 },
          ].map(x => (
            <div key={x.m} style={{ padding: 16, background: 'var(--ink-50)', borderRadius: 10 }}>
              <div style={{ fontSize: 12, color: 'var(--ink-600)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{x.m}</div>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 28, fontWeight: 500, color: 'var(--ink-900)', marginTop: 4, letterSpacing: '-0.02em' }}>{x.v}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-600)' }}>{x.s} this week</div>
              <div style={{ marginTop: 10, height: 34, display: 'flex', alignItems: 'end', gap: 3 }}>
                {[52, 44, 68, 55, 72, 61, x.trend].map((h, i) => (
                  <div key={i} style={{ flex: 1, height: `${h}%`, background: i === 6 ? 'var(--navy-800)' : 'var(--navy-100)', borderRadius: 2 }}/>
                ))}
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--ink-500)', marginTop: 4, letterSpacing: '0.05em' }}>MON — SUN</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// Simplified India map with state dots
function IndiaMapSvg({ states }) {
  // Positions in the viewBox coordinate system (400x460)
  const coords = {
    UP: { x: 215, y: 130 }, GJ: { x: 110, y: 195 }, MH: { x: 160, y: 260 },
    OD: { x: 268, y: 230 }, WB: { x: 300, y: 155 }, TS: { x: 205, y: 285 },
    KA: { x: 185, y: 335 }, TN: { x: 225, y: 375 },
  };
  return (
    <svg viewBox="0 0 400 460" width="100%" style={{ maxHeight: 320 }} preserveAspectRatio="xMidYMid meet">
      {/* India silhouette — a more recognizable outline: narrow N Kashmir cone,
          wide central belt, tapering peninsula to Kanyakumari. */}
      <path
        d="
          M 160 30
          Q 175 15 205 22
          L 240 20
          Q 265 15 280 30
          L 275 55
          Q 260 70 250 65
          L 265 80
          Q 285 78 305 70
          L 340 62
          Q 358 70 358 88
          L 348 108
          Q 332 122 314 118
          L 300 128
          L 305 148
          Q 320 165 328 180
          L 328 200
          Q 320 218 300 218
          L 285 235
          L 282 260
          L 278 285
          L 270 310
          L 258 340
          L 244 365
          L 232 390
          L 222 410
          L 214 425
          L 208 415
          L 202 395
          L 195 370
          L 188 345
          L 178 320
          L 165 300
          L 148 285
          L 128 275
          L 108 260
          L 92 240
          L 80 218
          L 72 195
          L 68 170
          L 72 148
          L 82 128
          L 100 108
          L 118 92
          L 135 72
          L 148 52
          Z
        "
        fill="var(--navy-100)"
        stroke="var(--navy-700)"
        strokeWidth="1.5"
        opacity="0.85"
      />
      {/* Sri Lanka */}
      <ellipse cx="225" cy="445" rx="12" ry="18" fill="var(--navy-100)" stroke="var(--navy-700)" strokeWidth="1" opacity="0.6" transform="rotate(-10 225 445)"/>
      {/* Grid overlay */}
      <defs>
        <pattern id="mapgrid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="var(--navy-700)" strokeWidth="0.3" opacity="0.15"/>
        </pattern>
      </defs>
      <rect width="400" height="460" fill="url(#mapgrid)" opacity="0.5"/>

      {states.map(s => {
        const c = coords[s.code];
        if (!c) return null;
        const color = s.prog >= 75 ? '#0d8a5a' : s.prog >= 65 ? '#e67514' : '#c1281c';
        const r = 5 + s.itis / 15;
        return (
          <g key={s.code}>
            <circle cx={c.x} cy={c.y} r={r + 6} fill={color} opacity="0.15">
              <animate attributeName="r" values={`${r+6};${r+12};${r+6}`} dur="2.5s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.15;0.05;0.15" dur="2.5s" repeatCount="indefinite"/>
            </circle>
            <circle cx={c.x} cy={c.y} r={r} fill={color} stroke="white" strokeWidth="2"/>
            <text x={c.x + r + 6} y={c.y + 3} fontSize="10" fontFamily="var(--font-mono)" fill="var(--navy-900)" fontWeight="700" letterSpacing="0.05em">{s.code}</text>
          </g>
        );
      })}
    </svg>
  );
}

window.AdminDashboard = AdminDashboard;