/* global React, Icons, Sparkline, ProductImage */
const { useMemo } = React;

const DashboardPage = ({ leads, setPage }) => {
  const { fmtUSD, fmtInt } = window.AIP_DATA;
  const totalLeads = leads.products.length;
  const totalVideos = leads.products.reduce((a, p) => a + p.videos, 0);
  const onSiteEarnings = leads.products.reduce((a, p) => a + p.onSiteCommission, 0);
  const ccEarnings = leads.products.reduce((a, p) => a + p.ccCommission, 0);

  // synthetic 30-day chart
  const points = useMemo(() => {
    let v = 12;
    return Array.from({ length: 30 }).map((_, i) => {
      v += (Math.sin(i / 3) + Math.random() - 0.4) * 4;
      return Math.max(2, v);
    });
  }, []);

  const recent = leads.products.slice(0, 5);

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-title-block">
          <h1>Dashboard</h1>
          <div className="subtitle">Snapshot of your lead pipeline, top performers, and creator‑connection earnings.</div>
        </div>
        <div className="page-actions">
          <button className="btn" onClick={() => setPage('search')}><Icons.search size={13}/> Find new leads</button>
          <button className="btn btn-primary" onClick={() => setPage('leads')}><Icons.bookmark size={13}/> Open Leads</button>
        </div>
      </div>

      {/* hero card + KPIs */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16, marginBottom: 16 }}>
        <div className="card" style={{ padding: 24, position: 'relative', overflow: 'hidden', minHeight: 220 }}>
          <div style={{ position: 'absolute', inset: 0,
            background: 'radial-gradient(ellipse 80% 100% at 100% 0%, oklch(0.55 0.20 250 / 0.4), transparent 55%), radial-gradient(ellipse 60% 80% at 0% 100%, oklch(0.45 0.18 270 / 0.25), transparent 60%)',
            pointerEvents: 'none' }}/>
          <div style={{ position: 'relative' }}>
            <div className="card-eyebrow">Welcome back</div>
            <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.6px', marginTop: 6 }}>Jordan Reese</div>
            <div style={{ color: 'var(--text-2)', fontSize: 13, maxWidth: 460, lineHeight: 1.55, marginTop: 8 }}>
              You have <b style={{ color: 'var(--text-0)' }}>{totalLeads}</b> active leads across <b style={{ color: 'var(--text-0)' }}>{leads.lists.length}</b> lists, with <b style={{ color: 'var(--text-0)' }}>{totalVideos}</b> review videos already published.
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
              <button className="btn btn-primary" onClick={() => setPage('search')}><Icons.zap size={13}/> Start a new search</button>
              <button className="btn" onClick={() => setPage('connections')}><Icons.users size={13}/> Creator Connections</button>
            </div>
            <div style={{ marginTop: 22 }}>
              <Sparkline data={points} w={520} h={70} />
              <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 4, fontFamily: 'var(--font-mono)' }}>30‑day commission trend · ▲ 14%</div>
            </div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateRows: 'repeat(2, 1fr)', gap: 16 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <div className="stat-card glow">
              <div className="stat-label">Total leads</div>
              <div className="stat-value">{totalLeads}</div>
              <div className="stat-delta" style={{ color: 'var(--success)' }}>+8 this week</div>
            </div>
            <div className="stat-card">
              <div className="stat-label">Total videos</div>
              <div className="stat-value">{totalVideos}</div>
              <div className="stat-delta" style={{ color: 'var(--text-2)' }}>across all leads</div>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <div className="stat-card">
              <div className="stat-label">On‑Site Earnings</div>
              <div className="stat-value">{fmtUSD(onSiteEarnings)}</div>
              <div className="stat-delta" style={{ color: 'var(--success)' }}>per qualifying sale</div>
            </div>
            <div className="stat-card glow">
              <div className="stat-label">Creator Connections Earnings</div>
              <div className="stat-value">{fmtUSD(ccEarnings)}</div>
              <div className="stat-delta" style={{ color: 'var(--accent)' }}>campaign commission</div>
            </div>
          </div>
        </div>
      </div>

      {/* lists + recent leads */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 16 }}>
        <div className="card">
          <div className="card-header">
            <div className="card-title">Lead lists</div>
            <button className="btn btn-sm btn-ghost" onClick={() => setPage('leads')}>View all <Icons.arrow size={11}/></button>
          </div>
          <div style={{ padding: 14, display: 'grid', gap: 6 }}>
            {leads.lists.map(l => {
              const count = leads.products.filter(p => p.list === l.id).length;
              return (
                <div key={l.id} className="list-pill" onClick={() => setPage('leads')}>
                  <span className="dot-sq" style={{ background: l.color, boxShadow: `0 0 6px ${l.color}` }}/>
                  <span className="name">{l.name}</span>
                  <span className="count">{count}</span>
                </div>
              );
            })}
          </div>
        </div>

        <div className="card">
          <div className="card-header">
            <div className="card-title">Recently added leads</div>
            <button className="btn btn-sm btn-ghost" onClick={() => setPage('leads')}>Open Leads <Icons.arrow size={11}/></button>
          </div>
          <div style={{ padding: 0 }}>
            <table className="data-table">
              <thead>
                <tr>
                  <th>Product</th>
                  <th style={{ textAlign: 'right' }}>ROI</th>
                  <th style={{ textAlign: 'right' }}>Price</th>
                  <th>Trend</th>
                </tr>
              </thead>
              <tbody>
                {recent.map((p, i) => (
                  <tr key={p.id}>
                    <td>
                      <div className="cell-product">
                        <ProductImage seed={i+3} label={p.name}/>
                        <div>
                          <div className="product-name">{p.name}</div>
                          <div className="product-asin">{p.asin}</div>
                        </div>
                      </div>
                    </td>
                    <td style={{ textAlign: 'right' }}>
                      <span className={`badge ${p.roi >= 30 ? 'badge-success' : 'badge-warn'}`}>{p.roi}%</span>
                    </td>
                    <td className="num" style={{ textAlign: 'right' }}>{fmtUSD(p.price)}</td>
                    <td><Sparkline data={p.trend}/></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

window.DashboardPage = DashboardPage;