function ReportsScreen() {
  const [tab, setTab] = useState("reports");

  const channelIcon = { email: "mail", sms: "activity", whatsapp: "activity", teams: "users", slack: "slack", webhook: "external" };

  return (
    <div className="screen">
      <div className="screen-head">
        <div>
          <div className="screen-title">Reports & Alerts</div>
          <div className="screen-sub">Scheduled reports and real-time alert rules · <span className="mono">2,148</span> deliveries in last 24h</div>
        </div>
        <div className="screen-actions">
          <button className="btn"><Icon name="sparkles"/>AI Draft report</button>
          <button className="btn primary"><Icon name="plus"/>New {tab === "reports" ? "report" : "alert"}</button>
        </div>
      </div>

      {/* Tabs */}
      <div style={{ borderBottom: '1px solid var(--border)', marginBottom: 16, display: 'flex', gap: 4 }}>
        {[{ id: "reports", label: "Scheduled Reports", count: 24 }, { id: "alerts", label: "Alert Rules", count: 18 }, { id: "history", label: "Delivery History", count: null }].map(t => (
          <button key={t.id} onClick={() => setTab(t.id)}
            style={{ padding: '10px 14px', border: 'none', background: 'none', color: tab === t.id ? 'var(--ink)' : 'var(--ink-3)', fontWeight: tab === t.id ? 600 : 500, fontSize: 13, cursor: 'pointer', borderBottom: '2px solid ' + (tab === t.id ? 'var(--primary)' : 'transparent'), marginBottom: -1, fontFamily: 'inherit' }}
          >
            {t.label} {t.count != null && <span style={{ color: 'var(--ink-4)', fontWeight: 500 }}>· {t.count}</span>}
          </button>
        ))}
      </div>

      {tab === "reports" && (
        <div className="grid" style={{ gridTemplateColumns: '2.5fr 1fr' }}>
          <div className="card">
            <div className="card-body" style={{ padding: 0 }}>
              <table className="data">
                <thead><tr>
                  <th>Report</th>
                  <th>Schedule</th>
                  <th>Format · Channel</th>
                  <th className="num">Subs</th>
                  <th>Last</th>
                  <th></th>
                </tr></thead>
                <tbody>
                  {REPORTS.map((r, i) => (
                    <tr key={i}>
                      <td>
                        <div style={{ fontWeight: 500 }}>{r.name}</div>
                      </td>
                      <td style={{ color: 'var(--ink-2)' }} className="mono small">{r.schedule}</td>
                      <td style={{ color: 'var(--ink-2)' }}>{r.format}</td>
                      <td className="num">{r.subs}</td>
                      <td>
                        <div style={{ fontSize: 11.5 }}>{r.last}</div>
                        <span className={`tag ${r.status === 'delivered' ? 'ok' : 'primary'}`} style={{ fontSize: 10, marginTop: 2 }}>{r.status}</span>
                      </td>
                      <td>
                        <div style={{ display: 'flex', gap: 4 }}>
                          <button className="icon-btn" style={{ width: 24, height: 24 }}><Icon name="play" size={11}/></button>
                          <button className="icon-btn" style={{ width: 24, height: 24 }}><Icon name="settings" size={11}/></button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {/* Right: delivery health */}
          <div className="vstack" style={{ gap: 14 }}>
            <div className="card">
              <div className="card-head" style={{ padding: '10px 12px' }}>
                <h3 style={{ fontSize: 12 }}>Delivery health (24h)</h3>
                <span className="tag ok" style={{ fontSize: 10 }}>99.2%</span>
              </div>
              <div className="card-body" style={{ padding: 12 }}>
                <Donut data={[{ label: "Delivered", value: 2130 }, { label: "Queued", value: 12 }, { label: "Failed", value: 6 }]} w={120} centerLabel="2,148" centerSub="messages"/>
              </div>
            </div>
            <div className="card">
              <div className="card-head" style={{ padding: '10px 12px' }}><h3 style={{ fontSize: 12 }}>Channels used</h3></div>
              <div className="card-body" style={{ padding: 12 }}>
                <BarChart data={[1240, 486, 218, 142, 62]} labels={["Email", "WhatsApp", "Teams", "SMS", "Webhook"]} horizontal w={280} h={140} format={v => v}/>
              </div>
            </div>
          </div>
        </div>
      )}

      {tab === "alerts" && (
        <div className="card">
          <div className="card-body" style={{ padding: 0 }}>
            <table className="data">
              <thead><tr>
                <th>Rule</th>
                <th>Severity</th>
                <th>Channels</th>
                <th className="num">Triggered (30d)</th>
                <th>Last</th>
                <th>Status</th>
                <th></th>
              </tr></thead>
              <tbody>
                {ALERT_RULES.map((r, i) => (
                  <tr key={i}>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <div style={{ width: 28, height: 28, borderRadius: 7, background: r.severity === 'critical' ? 'var(--danger-tint)' : r.severity === 'high' ? 'var(--accent-tint)' : 'var(--primary-tint)', display: 'grid', placeItems: 'center' }}>
                          <Icon name={r.severity === 'critical' ? 'alert' : r.severity === 'high' ? 'trending' : 'bell'} size={13} style={{ color: r.severity === 'critical' ? 'var(--danger)' : r.severity === 'high' ? 'var(--accent-2)' : 'var(--primary)' }}/>
                        </div>
                        <div style={{ fontWeight: 500 }}>{r.name}</div>
                      </div>
                    </td>
                    <td><span className={`tag ${r.severity === 'critical' ? 'danger' : r.severity === 'high' ? 'warn' : 'primary'}`}>{r.severity}</span></td>
                    <td>
                      <div style={{ display: 'flex', gap: 4 }}>
                        {r.channels.map(c => (
                          <div key={c} title={c} style={{ width: 24, height: 24, borderRadius: 5, background: 'var(--panel-2)', border: '1px solid var(--border)', display: 'grid', placeItems: 'center', color: 'var(--ink-2)' }}>
                            <Icon name={channelIcon[c] || 'bell'} size={11}/>
                          </div>
                        ))}
                      </div>
                    </td>
                    <td className="num">{r.triggered}</td>
                    <td className="small" style={{ color: 'var(--ink-2)' }}>{r.last}</td>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                        <div style={{ width: 28, height: 16, background: 'var(--primary)', borderRadius: 999, position: 'relative' }}>
                          <div style={{ position: 'absolute', top: 2, right: 2, width: 12, height: 12, background: 'white', borderRadius: 50 }}/>
                        </div>
                        <span className="small" style={{ color: 'var(--ink-3)' }}>on</span>
                      </div>
                    </td>
                    <td><button className="icon-btn" style={{ width: 24, height: 24 }}><Icon name="settings" size={11}/></button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {tab === "history" && (
        <div className="card">
          <div className="card-body" style={{ padding: 20, textAlign: 'center', color: 'var(--ink-3)' }}>
            <Icon name="calendar" size={32}/>
            <div style={{ marginTop: 10, fontSize: 13 }}>Full delivery history with filters, retries, and receipts.</div>
            <div style={{ fontSize: 11, marginTop: 4 }}>2,148 messages in the last 24 hours across 5 channels.</div>
          </div>
        </div>
      )}
    </div>
  );
}

window.ReportsScreen = ReportsScreen;