// Dashboard overviews — Admin + Reseller. All data from the API.

function AdminDashboard() {
  const { data: s } = useApi('/api/stats/admin');
  const { data: products } = useApi('/api/products');
  const { data: logs } = useApi('/api/logs');

  const stats = [
    { label: "Revenue (30 days)",   value: fmtMoney(s?.revenue30||0), icon: <Ico.Money/> },
    { label: "Active Resellers",    value: String(s?.activeResellers||0), icon: <Ico.Users/> },
    { label: "Keys Generated (30d)",value: String(s?.keys30||0), icon: <Ico.Key/>   },
    { label: "Open Tickets",        value: String(s?.openTickets||0), icon: <Ico.Chat/> },
  ];
  const bars = s?.bars14d || [];
  const barLabels = Array.from({length: 14}, (_, i) => {
    const d = new Date(); d.setDate(d.getDate() - (13 - i));
    return String(d.getDate());
  });

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Dashboard</h1>
          <p>What's happening right now.</p>
        </div>
        <div className="flex gap-8">
          <button className="btn btn-ghost" onClick={()=>location.reload()}><Ico.Refresh className="icon"/> Refresh</button>
          <button className="btn btn-primary" onClick={()=>window.goTo('products')}><Ico.Plus className="icon"/> Add product</button>
        </div>
      </div>

      <div className="grid grid-4">
        {stats.map((s, i) => <Stat key={i} {...s}/>)}
      </div>

      <div className="grid grid-2-1 mt-16">
        <div className="card">
          <div className="card-head">
            <div>
              <h3>Sales over time</h3>
              <div className="sub">Last 14 days</div>
            </div>
          </div>
          <div className="card-pad">
            <Bars data={bars.length?bars:Array(14).fill(0)} labels={barLabels} height={160}/>
            <div className="flex gap-24 mt-16" style={{ fontSize: 12, color: 'var(--text-dim)' }}>
              <div><span className="mono" style={{ color: 'var(--accent)', fontSize: 18, fontWeight: 700 }}>{fmtMoney((bars.reduce((a,b)=>a+b,0)||0)/14)}</span> average per day</div>
              <div><span className="mono" style={{ color: 'var(--text)', fontSize: 18, fontWeight: 700 }}>{fmtMoney(s?.revenue30||0)}</span> revenue 30d</div>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Best sellers this week</h3></div>
          <div style={{ padding: '4px 0' }}>
            {(products||[]).slice().sort((a,b)=>b.sales7d-a.sales7d).slice(0,5).map(p => (
              <div key={p.id} className="flex" style={{ padding: '10px 18px', borderBottom: '1px solid var(--border)', gap: 12 }}>
                <div style={{ width: 32, height: 32, borderRadius: 6, background: 'var(--bg-card-2)', border: '1px solid var(--border)', display: 'grid', placeItems: 'center', color: 'var(--accent)' }}><Ico.Box width={16} height={16}/></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 600, fontSize: 13, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-dimmer)' }}>{p.game}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div className="mono" style={{ fontWeight: 700, color: 'var(--accent)' }}>{p.sales7d}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-dimmer)' }}>orders</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="grid grid-3 mt-16">
        <div className="card" style={{ gridColumn: 'span 2' }}>
          <div className="card-head">
            <h3>Recent activity</h3>
            <a className="pill" style={{ cursor: 'pointer' }} onClick={() => window.goTo('logs')}>View all logs →</a>
          </div>
          <table className="table">
            <thead><tr><th>Time</th><th>Actor</th><th>Action</th><th>Target</th><th>Status</th></tr></thead>
            <tbody>
              {(logs||[]).slice(0, 8).map((l) => (
                <tr key={l.id}>
                  <td className="mono" style={{ color: 'var(--text-dimmer)', fontSize: 12 }}>{fmtTime(l.ts)}</td>
                  <td>{l.actor === 'system' || l.actor === 'admin' ? <span className="pill amber">{l.actor}</span> : <div className="user"><Avatar name={l.actor} size={22}/><span>{l.actor}</span></div>}</td>
                  <td className="mono" style={{ fontSize: 12 }}>{l.action}</td>
                  <td className="mono" style={{ fontSize: 12, color: 'var(--text-dim)' }}>{l.target}</td>
                  <td>
                    {l.status === 'ok' && <span className="pill green"><span className="dot"/>ok</span>}
                    {l.status === 'fail' && <span className="pill red"><span className="dot"/>fail</span>}
                    {l.status === 'warn' && <span className="pill amber"><span className="dot"/>warn</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="card">
          <div className="card-head"><h3>System status</h3></div>
          <div className="card-pad flex-col" style={{ gap: 14 }}>
            {[
              { name: "API",              up: 99.99, status: "operational" },
              { name: "Key generator",    up: 100.0, status: "operational" },
              { name: "Loader downloads", up: 99.94, status: "operational" },
              { name: "Discord login",    up: 99.81, status: "operational" },
              { name: "Crypto payments",  up: 99.99, status: "operational" },
            ].map(s => (
              <div key={s.name} className="flex-between">
                <div className="flex gap-8">
                  <span className="pill" style={{ background: 'var(--success-soft)', borderColor: 'color-mix(in oklab, var(--success) 30%, transparent)', color: 'var(--success)' }}>
                    <span className="dot"/>
                  </span>
                  <span style={{ fontSize: 13, fontWeight: 500 }}>{s.name}</span>
                </div>
                <span className="mono" style={{ fontSize: 12, color: 'var(--text-dim)' }}>{s.up.toFixed(2)}%</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function ResellerDashboard({ me }) {
  const { data: s } = useApi('/api/stats/me');
  const { data: products } = useApi('/api/products');

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Hey {me?.username || 'there'}</h1>
          <p>{me?.rank} · {fmtMoney(me?.total_sold||0)} spent all-time</p>
        </div>
        <div className="flex gap-8">
          <button className="btn btn-ghost" onClick={() => window.goTo('loader')}><Ico.Down className="icon"/> Download loader</button>
          <button className="btn btn-primary" onClick={() => window.goTo('balance')}><Ico.Plus className="icon"/> Top up</button>
        </div>
      </div>

      <div className="card card-glow">
        <div className="card-pad" style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, alignItems: 'center' }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--text-dim)' }}>Your balance</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 6 }}>
              <span className="mono" style={{ fontSize: 56, fontWeight: 800, color: 'var(--accent)', letterSpacing: '-0.03em', textShadow: '0 0 30px var(--accent-glow)' }}>{fmtMoney(me?.balance||0)}</span>
              <span style={{ color: 'var(--text-dimmer)', fontSize: 14 }}>USD</span>
            </div>
            <div style={{ color: 'var(--text-dim)', fontSize: 13, marginTop: 8 }}>
              <Ico.Crown width={12} height={12} style={{ display: 'inline', marginRight: 4, color: RANK_COLORS[me?.rank]||'#FFB800', verticalAlign: 'middle' }}/> {me?.rank} rank
            </div>
          </div>
          <div className="flex-col gap-8" style={{ alignItems: 'stretch', minWidth: 220 }}>
            <button className="btn btn-primary btn-lg" onClick={() => window.goTo('balance')}><Ico.Plus className="icon"/> Add funds</button>
            <button className="btn" onClick={() => window.goTo('products')}><Ico.Key className="icon"/> Generate keys</button>
          </div>
        </div>
      </div>

      <div className="grid grid-4 mt-24">
        <Stat label="Orders (30 days)"  value={String(s?.sales30||0)} icon={<Ico.Box/>}/>
        <Stat label="Spent (30 days)"   value={fmtMoney(s?.revenue30||0)} icon={<Ico.Money/>}/>
        <Stat label="Active keys"       value={String(s?.activeKeys||0)} icon={<Ico.Key/>}/>
        <Stat label="Rank"              value={s?.rank||me?.rank||'Bronze'} icon={<Ico.Trophy/>}/>
      </div>

      <div className="card mt-24">
        <div className="card-head"><h3>Quick actions</h3></div>
        <div className="card-pad">
          <div className="grid grid-3" style={{ gap: 12 }}>
            {[
              { ico: <Ico.Box/>,   label: "Browse products",  sub: "Buy access or pay per key", to: "products" },
              { ico: <Ico.Shield/>,label: "Manage my keys",   sub: "Compensate · freeze · HWID reset", to: "licenses" },
              { ico: <Ico.Down/>,  label: "Download loader",  sub: "Latest builds",   to: "loader" },
              { ico: <Ico.Money/>, label: "Top up balance",   sub: "Crypto payments", to: "balance" },
              { ico: <Ico.Code/>,  label: "API tokens",       sub: "Automate generation", to: "api" },
              { ico: <Ico.Chat/>,  label: "Get help",         sub: "Open a ticket",   to: "tickets" },
            ].map((a, i) => (
              <div key={i} onClick={() => window.goTo(a.to)} style={{
                padding: 18, background: 'var(--bg-card-2)', border: '1px solid var(--border)',
                borderRadius: 'var(--r-md)', cursor: 'pointer',
                transition: 'border-color 0.12s, box-shadow 0.12s',
              }} onMouseEnter={e => { e.currentTarget.style.borderColor = 'color-mix(in oklab, var(--accent) 50%, transparent)'; e.currentTarget.style.boxShadow = '0 0 24px -8px var(--accent-glow)'; }} onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.boxShadow = 'none'; }}>
                <div style={{ width: 34, height: 34, borderRadius: 6, background: 'var(--accent-soft)', color: 'var(--accent)', display: 'grid', placeItems: 'center', marginBottom: 14 }}>{React.cloneElement(a.ico, { width: 16, height: 16 })}</div>
                <div style={{ fontWeight: 700, fontSize: 13.5 }}>{a.label}</div>
                <div style={{ fontSize: 12, color: 'var(--text-dimmer)', marginTop: 2 }}>{a.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AdminDashboard, ResellerDashboard });