/* Reports / Reporting — read-only analytics surface (RBAC: all roles can view). */
const { useMemo: useMemoRep } = React;

function Reports({ role }) {
  const D = window.MonolitData;
  const RB = window.MonolitRBAC;

  const stats = useMemoRep(() => {
    const deals = D.deals;
    const open = deals.filter(dealIsActive);
    const pipeline = open.filter(d => d.clientId).reduce((s, d) => s + (d.value || 0), 0);
    const won = deals.filter(d => d.stage === 'won');
    const revenue = won.reduce((s, d) => s + (d.value || 0), 0);
    const winRate = Math.round(won.length / (won.length + deals.filter(d => d.stage === 'lost').length) * 100);
    const byStage = ACTIVE_STAGES.concat(['won', 'lost']).map(st => ({ st, n: deals.filter(d => d.stage === st).length, val: deals.filter(d => d.stage === st).reduce((s, d) => s + (d.value || 0), 0) }));
    const leadStatus = ['new', 'in_progress', 'qualified', 'disqualified', 'converted'].map(s => ({ s, n: D.leads.filter(l => l.status === s).length }));
    const team = D.owners.map(o => ({
      o, leads: D.leads.filter(l => l.owner && l.owner.id === o.id).length,
      clients: D.clients.filter(c => c.owner && c.owner.id === o.id).length,
      open: D.deals.filter(d => d.owner && d.owner.id === o.id && dealIsActive(d)).length,
    })).sort((a, b) => (b.leads + b.clients) - (a.leads + a.clients)).slice(0, 5);
    return { pipeline, revenue, winRate, byStage, leadStatus, team, openCount: open.length };
  }, []);

  const maxStage = Math.max(1, ...stats.byStage.map(s => s.n));
  const maxLead = Math.max(1, ...stats.leadStatus.map(s => s.n));

  return (
    <React.Fragment>
      <div className="mn-page-h">
        <div className="mn-page-title"><h1 className="title-1">Reports</h1><span className="mn-page-count">Tenant · last 90 days</span></div>
        <div className="mn-page-actions">
          <Button variant="ghost" size="md" icon="calendar">Last 90 days</Button>
          {RB.can(role, 'audit.view') && role !== 'Viewer' && role !== 'Sales Rep' ? <Button variant="ghost" size="md" icon="download">Export</Button> : null}
        </div>
      </div>

      <div className="mn-kpi-row" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 16 }}>
        <KpiCard label="Open pipeline" value={'€' + (stats.pipeline / 1000).toFixed(0) + 'k'} sub={stats.openCount + ' active deals'} icon="trending-up" />
        <KpiCard label="Won revenue" value={'€' + (stats.revenue / 1000).toFixed(0) + 'k'} sub="closed-won, 90d" icon="badge-check" />
        <KpiCard label="Win rate" value={stats.winRate + '%'} sub="won / (won + lost)" icon="target" />
        <KpiCard label="Leads → clients" value={D.clients.filter(c => c.createdFromLead).length + ''} sub="converted this period" icon="git-branch" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <Card title="Deals by stage" eyebrow="Pipeline distribution">
          <div className="mn-stack" style={{ gap: 10 }}>
            {stats.byStage.map(s => (
              <div key={s.st} className="mn-bant-row mn-bant-row--2col">
                <span className="lbl">{DEAL_STAGES[s.st].label}</span>
                <span className="mn-bant-bar"><span style={{ width: `${(s.n / maxStage) * 100}%`, background: s.st === 'won' ? 'var(--success-main)' : s.st === 'lost' ? 'var(--error-main)' : 'var(--primary-main)' }} /></span>
                <span className="mn-bant-num">{s.n} · €{(s.val / 1000).toFixed(0)}k</span>
              </div>
            ))}
          </div>
        </Card>

        <Card title="Leads by status" eyebrow="Funnel snapshot">
          <div className="mn-stack" style={{ gap: 10 }}>
            {stats.leadStatus.map(s => (
              <div key={s.s} className="mn-bant-row mn-bant-row--2col">
                <span className="lbl"><StatusBadge status={s.s} /></span>
                <span className="mn-bant-bar"><span style={{ width: `${(s.n / maxLead) * 100}%` }} /></span>
                <span className="mn-bant-num">{s.n}</span>
              </div>
            ))}
          </div>
        </Card>

        <Card title="Team leaderboard" eyebrow="By owned records" action={role === 'Sales Rep' ? <span className="mn-chip mn-chip--tag">your team</span> : null}>
          <table className="mn-table" style={{ marginTop: -8 }}>
            <thead><tr><th>Owner</th><th style={{ width: 80 }}>Leads</th><th style={{ width: 90 }}>Clients</th><th style={{ width: 110 }}>Open deals</th></tr></thead>
            <tbody>{stats.team.map(t => (
              <tr key={t.o.id}>
                <td><div className="mn-cell-owner"><Avatar user={t.o} size={22} /><span>{t.o.name}</span></div></td>
                <td><span className="mn-mono" style={{ fontSize: 13 }}>{t.leads}</span></td>
                <td><span className="mn-mono" style={{ fontSize: 13 }}>{t.clients}</span></td>
                <td><span className="mn-mono" style={{ fontSize: 13 }}>{t.open}</span></td>
              </tr>
            ))}</tbody>
          </table>
        </Card>

        <Card title="Activity volume" eyebrow="Logged this period">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }}>
            {[{ k: 'Calls', n: 142, ic: 'phone' }, { k: 'Emails', n: 318, ic: 'mail' }, { k: 'Meetings', n: 47, ic: 'calendar' }, { k: 'Tasks', n: 96, ic: 'check-square' }, { k: 'Notes', n: 73, ic: 'sticky-note' }].map(a => (
              <div key={a.k} style={{ textAlign: 'center', padding: '12px 4px', background: 'var(--bg-2)', borderRadius: 'var(--radi-md)' }}>
                <Icon name={a.ic} size="md" color="text-3" />
                <div className="mn-mono" style={{ fontSize: 20, fontWeight: 700, marginTop: 4 }}>{a.n}</div>
                <div style={{ font: 'var(--font-weight-medium) 11px/14px var(--font-sans)', color: 'var(--text-3)' }}>{a.k}</div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </React.Fragment>
  );
}

function KpiCard({ label, value, sub, icon }) {
  return (
    <section className="mn-card mn-card--p-md">
      <div className="mn-row" style={{ justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div className="mn-eyebrow">{label}</div>
        <span className="mn-feed-icon"><Icon name={icon} size="sm" /></span>
      </div>
      <div className="mn-mono" style={{ fontSize: 26, fontWeight: 700, lineHeight: 1.1, marginTop: 4 }}>{value}</div>
      <div style={{ font: 'var(--font-weight-medium) 11px/15px var(--font-sans)', color: 'var(--text-3)', marginTop: 2 }}>{sub}</div>
    </section>
  );
}

Object.assign(window, { Reports });