// arcai-screen-a13.jsx — A13 Reports

function ScreenA13({ onNavigate }) {
  const [selected, setSelected] = React.useState('monthly');
  const [generated, setGenerated] = React.useState(false);
  const [scheduleOn, setScheduleOn] = React.useState(true);

  const reports = [
    {
      id: 'monthly',
      icon: '📄',
      eyebrow: 'BULANAN',
      title: 'Monthly Recap',
      desc: 'Rangkuman engagement, level-up, dan top performers bulan ini.',
      lastGen: '2 hari lalu',
    },
    {
      id: 'quarterly',
      icon: '📊',
      eyebrow: 'KUARTALAN',
      title: 'Quarterly Board Deck',
      desc: 'Executive summary AI maturity dan ROI estimate untuk presentasi board.',
      lastGen: '1 minggu lalu',
    },
    {
      id: 'cert',
      icon: '🏆',
      eyebrow: 'SERTIFIKASI',
      title: 'Certification List',
      desc: 'Daftar karyawan tersertifikasi dengan tanggal issued dan level.',
      lastGen: '3 hari lalu',
    },
  ];

  const monthlyTrend = [
    { label: 'W1', value: 1.9 }, { label: 'W2', value: 2.1 },
    { label: 'W3', value: 2.3 }, { label: 'W4', value: 2.4 },
  ];
  const monthlyMini = [1.9, 2.0, 2.1, 2.2, 2.3, 2.4];
  const quarterMini = [
    { label: 'Jan', value: 1.6 }, { label: 'Feb', value: 1.9 },
    { label: 'Mar', value: 2.2 }, { label: 'Apr', value: 2.4 },
  ];

  const topPerformers = [
    { name: 'Rayis Ananda', team: 'Product', xp: 1240, level: 4 },
    { name: 'Lina Sari', team: 'Engineering', xp: 1180, level: 4 },
    { name: 'Marco Tan', team: 'Design', xp: 920, level: 3 },
    { name: 'Nadia Putri', team: 'Marketing', xp: 860, level: 3 },
    { name: 'Omar Faisal', team: 'Product', xp: 810, level: 3 },
  ];

  const certPreview = [
    { name: 'Rayis Ananda', cert: 'AI Practitioner' },
    { name: 'Lina Sari', cert: 'Prompt Engineer' },
    { name: 'Marco Tan', cert: 'AI Foundations' },
  ];

  const certRows = [
    { name: 'Rayis Ananda', team: 'Product', cert: 'AI Practitioner L4', date: '12 Apr 2026', level: 4 },
    { name: 'Lina Sari', team: 'Engineering', cert: 'Prompt Engineer L4', date: '08 Apr 2026', level: 4 },
    { name: 'Marco Tan', team: 'Design', cert: 'AI Foundations L3', date: '02 Apr 2026', level: 3 },
    { name: 'Nadia Putri', team: 'Marketing', cert: 'AI Foundations L3', date: '28 Mar 2026', level: 3 },
    { name: 'Omar Faisal', team: 'Product', cert: 'AI Foundations L3', date: '24 Mar 2026', level: 3 },
    { name: 'Sinta Dewi', team: 'Product', cert: 'AI Practitioner L3', date: '18 Mar 2026', level: 3 },
    { name: 'Hendra Gunawan', team: 'Sales', cert: 'AI Foundations L2', date: '14 Mar 2026', level: 2 },
    { name: 'Maria Santoso', team: 'Finance', cert: 'AI Foundations L2', date: '10 Mar 2026', level: 2 },
  ];

  const radarData = [
    { label: 'Foundations', value: 0.82 },
    { label: 'Prompting', value: 0.74 },
    { label: 'Tools', value: 0.61 },
    { label: 'Workflow', value: 0.48 },
    { label: 'Building', value: 0.35 },
  ];

  const handleExport = () => {
    setGenerated(true);
    setTimeout(() => setGenerated(false), 2000);
  };

  const card = { background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 16, padding: '20px' };
  const sel = reports.find(r => r.id === selected);

  const renderMiniPreview = (id) => {
    if (id === 'monthly') {
      return (
        <div style={{ height: 80, background: 'var(--bg-soft)', borderRadius: 10, padding: '10px 12px', border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em' }}>AVG LEVEL · APR</div>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 8 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 700, color: 'var(--accent)', letterSpacing: '-0.02em', lineHeight: 1 }}>2.4</div>
            <Sparkline data={monthlyMini} width={120} height={36} />
          </div>
        </div>
      );
    }
    if (id === 'quarterly') {
      return (
        <div style={{ height: 80, background: 'var(--bg-soft)', borderRadius: 10, padding: '10px 12px', border: '1px solid var(--border)', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8, alignItems: 'center' }}>
          {[
            { v: '+0.8', l: 'Avg Level' },
            { v: '82%', l: 'On-track' },
            { v: 'Rp240jt', l: 'Time saved' },
          ].map(s => (
            <div key={s.l} style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 700, color: 'var(--accent)', letterSpacing: '-0.02em' }}>{s.v}</div>
              <div style={{ fontSize: 9, color: 'var(--text-muted)', marginTop: 2, textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>{s.l}</div>
            </div>
          ))}
        </div>
      );
    }
    return (
      <div style={{ height: 80, background: 'var(--bg-soft)', borderRadius: 10, padding: '8px 10px', border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        {certPreview.map((c, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <Avatar name={c.name} size={18} />
            <span style={{ fontSize: 11, color: 'var(--text)', fontWeight: 600, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.name}</span>
            <span style={{ fontSize: 9, color: 'var(--accent)', background: 'var(--accent-overlay-soft)', border: '1px solid var(--border)', padding: '1px 6px', borderRadius: 999, fontWeight: 700, letterSpacing: '0.04em' }}>{c.cert}</span>
          </div>
        ))}
      </div>
    );
  };

  return (
    <div style={{ display: 'flex', height: '100%', overflow: 'hidden' }}>
      <SidebarNav active="reports" onNavigate={onNavigate} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <TopBar title="Reports" subtitle="PT Acme · Pre-built recap untuk leadership" />
        <div style={{ flex: 1, overflowY: 'auto', padding: '24px 28px' }}>
          {/* Header strip */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20, gap: 12, flexWrap: 'wrap' }}>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700, color: 'var(--text)', letterSpacing: '-0.02em' }}>Pre-built Recap</div>
              <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>Rangkuman siap-pakai untuk leadership · Export PDF / CSV</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '7px 12px', borderRadius: 999, border: '1px solid var(--border)', background: 'var(--surface-1)', fontSize: 12, color: 'var(--text)', fontFamily: 'var(--font-mono)' }}>
                <span style={{ color: 'var(--accent)' }}>📅</span> Apr 2026
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '7px 12px', borderRadius: 999, border: '1px solid var(--border)', background: 'var(--surface-1)', fontSize: 12, color: 'var(--text-muted)', fontWeight: 600 }}>
                Bahasa: <span style={{ color: 'var(--text)' }}>Indonesia</span>
                <span style={{ color: 'var(--text-dim)', fontSize: 10 }}>▾</span>
              </div>
            </div>
          </div>

          {/* Three report cards */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 20 }}>
            {reports.map(r => {
              const isSelected = selected === r.id;
              return (
                <div key={r.id}
                  onClick={() => setSelected(r.id)}
                  style={{
                    ...card,
                    cursor: 'pointer',
                    borderColor: isSelected ? 'var(--accent)' : 'var(--border)',
                    boxShadow: isSelected ? '0 0 0 1px var(--accent), 0 0 24px -8px var(--accent-glow, rgba(212,255,58,0.4))' : 'none',
                    background: isSelected ? 'var(--accent-overlay-soft)' : 'var(--surface-1)',
                    transition: 'border-color 0.15s, background 0.15s, box-shadow 0.15s',
                    display: 'flex', flexDirection: 'column', gap: 12,
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <div style={{ fontSize: 24 }}>{r.icon}</div>
                    <EyebrowChip>{r.eyebrow}</EyebrowChip>
                  </div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 700, color: 'var(--text)', letterSpacing: '-0.02em' }}>{r.title}</div>
                    <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 4, lineHeight: 1.45 }}>{r.desc}</div>
                  </div>
                  {renderMiniPreview(r.id)}
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 'auto', paddingTop: 4 }}>
                    <span style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>Last gen: {r.lastGen}</span>
                    <button
                      onClick={(e) => { e.stopPropagation(); setSelected(r.id); }}
                      style={{
                        fontSize: 12, fontWeight: 700, fontFamily: 'var(--font-body)',
                        color: isSelected ? 'var(--bg)' : 'var(--accent)',
                        background: isSelected ? 'var(--accent)' : 'var(--accent-overlay-mid)',
                        border: '1px solid var(--accent)', padding: '5px 12px', borderRadius: 8, cursor: 'pointer',
                      }}
                    >{isSelected ? 'Dipilih ✓' : 'Lihat →'}</button>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Inline preview panel */}
          <div style={{ ...card, marginBottom: 20, padding: 0, overflow: 'hidden' }}>
            <div style={{ padding: '18px 22px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', background: 'var(--bg-soft)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ fontSize: 22 }}>{sel.icon}</span>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 700, color: 'var(--text)', letterSpacing: '-0.02em' }}>Preview · {sel.title}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>PT Acme · Apr 2026 · 180 karyawan</div>
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                {generated && (
                  <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--success)', background: 'rgba(123,237,111,0.12)', border: '1px solid rgba(123,237,111,0.3)', padding: '5px 10px', borderRadius: 999, fontFamily: 'var(--font-body)' }}>
                    ✓ Generated · siap diunduh
                  </span>
                )}
                <BtnPrimary size="sm" onClick={handleExport}>Export PDF</BtnPrimary>
                <BtnGhost small onClick={handleExport}>Export CSV</BtnGhost>
                <BtnGhost small onClick={handleExport}>Bagikan link</BtnGhost>
              </div>
            </div>

            <div style={{ padding: '20px 22px' }}>
              {selected === 'monthly' && (
                <div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 18 }}>
                    {[
                      { l: 'Avg Level', v: '2.4', s: 'dari 1.6 (+50%)' },
                      { l: 'Lessons selesai', v: '847', s: 'bulan ini' },
                      { l: 'Active days/user', v: '14.2', s: 'rata-rata' },
                      { l: 'Top team', v: 'Engineering', s: 'avg level 3.4' },
                    ].map(k => (
                      <div key={k.l} style={{ background: 'var(--bg-soft)', border: '1px solid var(--border)', borderRadius: 10, padding: '12px 14px' }}>
                        <div style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>{k.l}</div>
                        <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, color: 'var(--text)', letterSpacing: '-0.02em', lineHeight: 1 }}>{k.v}</div>
                        <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 4 }}>{k.s}</div>
                      </div>
                    ))}
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
                    <div style={{ background: 'var(--bg-soft)', border: '1px solid var(--border)', borderRadius: 12, padding: '14px 16px' }}>
                      <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text)', marginBottom: 2 }}>Tren mingguan</div>
                      <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 10 }}>Avg level per minggu — April 2026</div>
                      <LineChart data={monthlyTrend} width={420} height={140} />
                    </div>
                    <div style={{ background: 'var(--bg-soft)', border: '1px solid var(--border)', borderRadius: 12, padding: '14px 16px' }}>
                      <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text)', marginBottom: 10 }}>Top 5 Performers</div>
                      {topPerformers.map((u, i) => (
                        <div key={u.name} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: i < topPerformers.length - 1 ? '1px solid var(--border)' : 'none' }}>
                          <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', width: 16 }}>#{i+1}</span>
                          <Avatar name={u.name} size={24} />
                          <div style={{ flex: 1, minWidth: 0 }}>
                            <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{u.name}</div>
                            <div style={{ fontSize: 10, color: 'var(--text-muted)' }}>{u.team}</div>
                          </div>
                          <span style={{ fontSize: 10, color: 'var(--accent)', fontFamily: 'var(--font-mono)', fontWeight: 700 }}>{u.xp} XP</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              )}

              {selected === 'quarterly' && (
                <div>
                  <div style={{ background: 'var(--bg-soft)', border: '1px solid var(--border)', borderRadius: 12, padding: '14px 18px', marginBottom: 16 }}>
                    <div style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>Executive Summary</div>
                    <div style={{ fontSize: 13, color: 'var(--text)', lineHeight: 1.6 }}>
                      Q1 2026 menunjukkan peningkatan signifikan AI maturity di PT Acme: avg level naik dari <strong style={{ color: 'var(--accent)' }}>1.6 ke 2.4</strong> dalam 4 bulan, dengan 82% karyawan on-track terhadap target Q2. Engineering dan Product memimpin adopsi (avg level 3.4 dan 3.2), sementara Sales dan Operations butuh intervensi struktural. Estimasi waktu yang dihemat melalui AI-augmented workflow: <strong style={{ color: 'var(--accent)' }}>Rp 240 juta</strong> per kuartal di 4 departemen utama.
                    </div>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 16 }}>
                    {[
                      { v: '+0.8', l: 'Avg Level Gain', s: 'Q1 → akhir Apr' },
                      { v: '82%', l: 'On-track Q2', s: '148 / 180 karyawan' },
                      { v: 'Rp 240jt', l: 'Time Saved Est.', s: 'AI-augmented workflow' },
                    ].map(s => (
                      <div key={s.l} style={{ background: 'var(--accent-overlay-soft)', border: '1px solid var(--accent-deep)', borderRadius: 12, padding: '16px 18px' }}>
                        <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 700, color: 'var(--accent)', letterSpacing: '-0.03em', lineHeight: 1 }}>{s.v}</div>
                        <div style={{ fontSize: 11, color: 'var(--text)', fontWeight: 700, marginTop: 6, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{s.l}</div>
                        <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{s.s}</div>
                      </div>
                    ))}
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                    <div style={{ background: 'var(--bg-soft)', border: '1px solid var(--border)', borderRadius: 12, padding: '14px 16px' }}>
                      <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text)', marginBottom: 2 }}>Avg Level — Q1 → Q2</div>
                      <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 10 }}>Per bulan, semua departemen</div>
                      <LineChart data={quarterMini} width={320} height={140} />
                    </div>
                    <div style={{ background: 'var(--bg-soft)', border: '1px solid var(--border)', borderRadius: 12, padding: '14px 16px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                      <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text)', alignSelf: 'flex-start' }}>Competency Radar</div>
                      <div style={{ fontSize: 11, color: 'var(--text-muted)', alignSelf: 'flex-start', marginBottom: 4 }}>5 dimensi · org-wide</div>
                      <RadarChart data={radarData} size={180} />
                    </div>
                  </div>
                </div>
              )}

              {selected === 'cert' && (
                <div style={{ background: 'var(--bg-soft)', border: '1px solid var(--border)', borderRadius: 12, overflow: 'hidden' }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1.6fr 1fr 0.8fr', gap: 0, padding: '12px 18px', borderBottom: '1px solid var(--border)', background: 'var(--surface-2)' }}>
                    {['KARYAWAN', 'TIM', 'SERTIFIKAT', 'TANGGAL ISSUED', 'LEVEL'].map(h => (
                      <div key={h} style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-dim)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{h}</div>
                    ))}
                  </div>
                  {certRows.map((r, i) => (
                    <div key={i} style={{
                      display: 'grid', gridTemplateColumns: '1.5fr 1fr 1.6fr 1fr 0.8fr',
                      gap: 0, padding: '0 18px', height: 48, alignItems: 'center',
                      borderBottom: i < certRows.length - 1 ? '1px solid var(--border)' : 'none',
                    }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                        <Avatar name={r.name} size={24} />
                        <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.name}</span>
                      </div>
                      <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{r.team}</div>
                      <div style={{ fontSize: 12, color: 'var(--text)', fontWeight: 500 }}>{r.cert}</div>
                      <div style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>{r.date}</div>
                      <div><LevelChip level={r.level} /></div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>

          {/* Schedule strip */}
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 10 }}>Schedule otomatis</div>
            <div style={{ ...card, padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 14, marginBottom: 10 }}>
              <span style={{ fontSize: 18 }}>📬</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, color: 'var(--text)', fontWeight: 600 }}>
                  Kirim <strong style={{ color: 'var(--accent)' }}>Monthly Recap</strong> ke executive@acme.com setiap tanggal 1
                </div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2, fontFamily: 'var(--font-mono)' }}>Next run: 1 Mei 2026 · 08:00 WIB · PDF + CSV</div>
              </div>
              <span style={{ fontSize: 11, fontWeight: 700, color: scheduleOn ? 'var(--success)' : 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                {scheduleOn ? 'Aktif' : 'Off'}
              </span>
              <button
                onClick={() => setScheduleOn(!scheduleOn)}
                style={{
                  width: 38, height: 22, borderRadius: 999, border: 'none', cursor: 'pointer',
                  background: scheduleOn ? 'var(--accent)' : 'var(--surface-2)',
                  position: 'relative', padding: 0, transition: 'background 0.2s',
                }}
              >
                <span style={{
                  position: 'absolute', top: 2, left: scheduleOn ? 18 : 2,
                  width: 18, height: 18, borderRadius: '50%',
                  background: scheduleOn ? 'var(--bg)' : 'var(--text-dim)',
                  transition: 'left 0.2s',
                }} />
              </button>
            </div>
            <div style={{
              padding: '14px 18px', border: '1px dashed var(--border-strong, var(--border))', borderRadius: 16,
              background: 'transparent', color: 'var(--text-muted)',
              fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 8,
              cursor: 'pointer', fontFamily: 'var(--font-body)',
            }}>
              <span style={{ fontSize: 16, color: 'var(--accent)' }}>+</span>
              Schedule report baru
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenA13 });