// Reports — audit-ready operational & compliance reporting across the portfolio.
const TREND = [
  ['Avg. response time', '2h 10m', -18, 'down-good'],
  ['Compliance rate', '93.6%', 4, 'up-good'],
  ['Jobs closed on time', '88%', 6, 'up-good'],
  ['Owner follow-up calls', '-38%', -38, 'down-good'],
];

function Reports({ persona }) {
  const pid = persona && persona.id;
  const scopeBldg = pid === 'treasurer' ? 'Harbourview' : pid === 'building' ? 'The Lumen' : null;
  const scopeSp   = pid === 'treasurer' ? 'SP 84021'    : pid === 'building' ? 'SP 67203' : null;
  const isScoped = !!scopeBldg;
  const REPORT_TEMPLATES = [
    ['file-text', pid === 'building' ? 'Monthly resident report' : 'Monthly owner report', isScoped ? `${scopeBldg} pack: budget, works, compliance, comms — branded, owner-ready.` : 'Per-scheme pack: budget, works, compliance, comms — branded, owner-ready.', isScoped ? scopeBldg : '127 schemes'],
    ['shield-check', 'AS 1851 compliance summary', 'Every routine, certificate and AFSS status, ranked by exposure.', 'Audit-ready'],
    ['receipt', 'Invoice & spend report', 'Approvals, payment runs and spend by category, scheme and creditor.', 'FY26 to date'],
    ['gavel', 'AGM minutes & motions', 'Compliant minutes from live tallies, with the voting record attached.', 'Per meeting'],
    ['activity', 'Predictive maintenance forecast', 'Assets trending to failure, ranked by confidence and cost to prevent.', '30–90 days'],
    ['gauge', 'SLA & response report', 'Response and resolution times by channel, category and team.', 'Rolling 90d'],
  ];
  const scopedBuildings = isScoped ? BUILDINGS.filter(b => b.nm === scopeBldg) : BUILDINGS;
  const ranked = [...scopedBuildings].sort((a, b) => a.compliance - b.compliance);
  return (
    <div className="view"><div className="wrap">
      <div className="eyebrow">{isScoped ? `Reports · ${scopeBldg} · ${scopeSp} · FY26` : 'Reports · 127 schemes · FY26'}</div>
      <h1 className="h-serif" style={{ fontSize: 28, margin: '12px 0 6px' }}>Audit-ready, <em>on tap.</em></h1>
      <p style={{ color: 'var(--fg-2)', fontSize: 14, margin: '0 0 22px', maxWidth: 560 }}>Every report is generated from the live record — no spreadsheets, no copy-paste. Defensible the moment it is created.</p>

      <div className="rep-trends">
        {TREND.map(([label, val, delta, dir]) => (
          <div className="rep-trend" key={label}>
            <div className="rt-top">
              <span className="rt-val">{val}</span>
              <span className={`rt-delta ${dir.includes('good') ? 'good' : 'bad'}`}>
                <Icon name={delta < 0 ? 'arrow-down-right' : 'arrow-up-right'} />{Math.abs(delta)}{label.includes('%') || label.includes('calls') ? 'pt' : '%'}
              </span>
            </div>
            <div className="rt-label">{label}</div>
            <div className="rt-spark"><i style={{ width: (55 + Math.abs(delta)) + '%' }} /></div>
          </div>
        ))}
      </div>

      <div className="rep-cols">
        <div className="rep-main">
          <div className="card-h plain"><h3>Generate a report</h3><span className="more" onClick={() => act('Custom report builder', { kind: 'info', icon: 'sliders-horizontal' })}>Custom <Icon name="arrow-right" /></span></div>
          <div className="rep-grid">
            {REPORT_TEMPLATES.map(([icon, title, desc, tag]) => (
              <div className="rep-card" key={title}>
                <div className="rc-ic"><Icon name={icon} /></div>
                <div className="rc-body">
                  <div className="rc-title">{title}</div>
                  <div className="rc-desc">{desc}</div>
                  <div className="rc-foot">
                    <span className="rc-tag">{tag}</span>
                    <button className="btn btn-ghost btn-sm" onClick={() => act('Generating: ' + title, { kind: 'auto', icon: 'download', sub: 'Compiling from the live record' })}><Icon name="download" />Generate</button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="rep-side">
          <div className="card">
            <div className="card-h"><h3>{isScoped ? `Compliance · ${scopeBldg}` : 'Compliance by scheme'}</h3><span className="more" onClick={() => window.opsNav && window.opsNav('compliance')}>Tracker <Icon name="arrow-right" /></span></div>
            <div style={{ padding: '6px 0' }}>
              {ranked.map(b => (
                <div className="rep-bar-row" key={b.nm} onClick={() => window.opsBuilding && window.opsBuilding(b.nm)}>
                  <div className="rbr-name">{b.addr.replace(/,?\s+[A-Z]{2,3}$/, '')}<small>{b.sp}</small></div>
                  <div className="rbr-track"><i style={{ width: b.compliance + '%', background: HEALTH[b.health] }} /></div>
                  <div className="rbr-val">{b.compliance}%</div>
                </div>
              ))}
            </div>
          </div>
          <div className="card rep-schedule">
            <div className="card-h"><h3>Scheduled</h3></div>
            <div className="mini-row"><div className="chan"><Icon name="calendar-clock" /></div><div className="tx"><div className="s">Monthly owner reports</div><div className="b">{isScoped ? `Auto-sent 1st of month · ${scopeBldg}` : 'Auto-sent 1st of month · 127 schemes'}</div></div></div>
            <div className="mini-row"><div className="chan"><Icon name="calendar-clock" /></div><div className="tx"><div className="s">Quarterly compliance board pack</div><div className="b">Next: 30 June · to principals</div></div></div>
          </div>
        </div>
      </div>
    </div></div>
  );
}
Object.assign(window, { Reports });