/* AIWine CRM — Analytics: coverage, growth, engagement, campaigns */
function Analytics({ country }) {
  const store = window.UI.useStore();
  const { HBar, Spark, pct } = window.UI;
  const F = (rows) => rows.filter((r) => window.UI.inCountry(r, country));

  const wineries = F(store.t('wineries'));
  const consumers = F(store.t('consumers'));
  const wines = F(store.t('wines'));
  const campaigns = store.t('campaigns').filter((c) => c.status === 'sent' && c.stats);

  // regional coverage
  const byRegion = {};
  wineries.forEach((w) => { byRegion[w.region] = (byRegion[w.region] || 0) + 1; });
  const regions = Object.entries(byRegion).sort((a, b) => b[1] - a[1]);
  const maxR = Math.max(...regions.map(([, n]) => n), 1);

  // consumer growth — last 12 months by join date
  const months = [];
  for (let i = 11; i >= 0; i--) {
    const d = new Date(); d.setMonth(d.getMonth() - i);
    months.push({ key: d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0'), label: d.toLocaleDateString('en-NZ', { month: 'short' }) });
  }
  const joins = months.map((m) => consumers.filter((c) => c.joined.slice(0, 7) === m.key).length);

  // engagement distribution
  const buckets = [['0–25', 0], ['26–50', 0], ['51–75', 0], ['76–100', 0]];
  wineries.forEach((w) => { buckets[Math.min(3, Math.floor(w.engagement / 25.01))][1]++; });

  // app usage
  const totalScans = consumers.reduce((s, c) => s + c.scans, 0);
  const totalTastings = consumers.reduce((s, c) => s + c.tastings, 0);
  const enriched = wines.filter((v) => v.enrichment === 'complete').length;

  const avgOpen = campaigns.length ? Math.round(campaigns.reduce((s, c) => s + c.stats.opens / c.stats.delivered, 0) / campaigns.length * 100) : 0;
  const avgClick = campaigns.length ? Math.round(campaigns.reduce((s, c) => s + c.stats.clicks / c.stats.delivered, 0) / campaigns.length * 100) : 0;

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="label" style={{ marginBottom: 6 }}>{country === 'ALL' ? 'Both markets' : window.CRM_CONFIG.BRANDS[country].label} · live from the database</div>
          <h1 className="page-title">Analytics</h1>
        </div>
      </div>

      <div className="stat-grid" style={{ marginBottom: 18 }}>
        <window.UI.StatTile label="Label scans" num={totalScans.toLocaleString()} delta="all time, app users" />
        <window.UI.StatTile label="Tastings logged" num={totalTastings.toLocaleString()} delta={Math.round(totalTastings / Math.max(consumers.length, 1)) + ' per member'} />
        <window.UI.StatTile label="Catalogue enriched" num={pct(enriched, wines.length)} delta={enriched + ' of ' + wines.length + ' wines'} deltaClass={enriched / Math.max(wines.length, 1) > 0.7 ? 'up' : 'warn'} />
        <window.UI.StatTile label="Avg open rate" num={avgOpen + '%'} delta={'click rate ' + avgClick + '%'} />
      </div>

      <div className="grid-2" style={{ marginBottom: 16 }}>
        <div className="card">
          <div className="card-head"><h3 className="card-title">Regional coverage</h3><span className="label" style={{ fontSize: 9 }}>Wineries listed</span></div>
          <div className="card-pad" style={{ paddingTop: 10 }}>
            {regions.map(([r, n]) => <HBar key={r} label={r} value={n} max={maxR} color="var(--claret)" />)}
            {regions.length === 0 && <window.UI.Empty msg="No wineries in this market yet" />}
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card">
            <div className="card-head"><h3 className="card-title">New members by month</h3><span className="label" style={{ fontSize: 9 }}>Last 12 months</span></div>
            <div className="card-pad">
              <Spark values={joins} hotLast />
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6 }}>
                <span className="mono" style={{ fontSize: 9.5, color: 'var(--faint)' }}>{months[0].label}</span>
                <span className="mono" style={{ fontSize: 9.5, color: 'var(--faint)' }}>{months[11].label}</span>
              </div>
            </div>
          </div>
          <div className="card">
            <div className="card-head"><h3 className="card-title">Winery engagement</h3><span className="label" style={{ fontSize: 9 }}>Portal + email score</span></div>
            <div className="card-pad" style={{ paddingTop: 10 }}>
              {buckets.map(([label, n]) => <HBar key={label} label={label} value={n} max={Math.max(...buckets.map((b) => b[1]), 1)} color={label === '0–25' ? 'var(--claret)' : label === '76–100' ? 'var(--green)' : 'var(--brass)'} />)}
            </div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3 className="card-title">Campaign performance</h3><span className="label" style={{ fontSize: 9 }}>Sent via Resend</span></div>
        <div className="tbl-wrap" style={{ border: 'none' }}>
          <table className="tbl">
            <thead><tr><th>Campaign</th><th>Sent</th><th>Delivered</th><th>Open rate</th><th>Click rate</th><th>Unsubs</th></tr></thead>
            <tbody>
              {campaigns.map((c) => (
                <tr key={c.id} className="rowlink" onClick={() => window.go('campaigns')}>
                  <td className="main-cell">{c.name}</td>
                  <td className="num">{c.stats.sent}</td>
                  <td className="num">{c.stats.delivered}</td>
                  <td className="num">{pct(c.stats.opens, c.stats.delivered)}</td>
                  <td className="num">{pct(c.stats.clicks, c.stats.delivered)}</td>
                  <td className="num">{c.stats.unsubs}</td>
                </tr>
              ))}
              {campaigns.length === 0 && <tr><td colSpan="6"><window.UI.Empty msg="No sent campaigns yet" /></td></tr>}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}
window.Analytics = Analytics;