// Dashboard — overview of all apps + KPIs

const Dashboard = ({ apps, onRoute, onRefresh, onSeed }) => {
  const list = Object.values(apps);
  const total = list.length;
  const live = list.filter(a => a.enabled).length;
  const draft = list.filter(a => !a.enabled && a.status === 'draft').length;
  const deployed = list.filter(a => !a.enabled && a.status === 'deployed').length;
  const totalLeads = list.reduce((s, a) => s + (a.leads7d || 0), 0);
  const totalFtds = list.reduce((s, a) => s + (a.ftds7d || 0), 0);
  const totalInstalls = list.reduce((s, a) => s + (a.installs7d || 0), 0);

  return (
    <div className="page step-anim">
      <div className="page-head">
        <div>
          <h1>Dashboard</h1>
          <div className="desc">All casino apps across IRIS, FUGU & FLAGMAN brands.</div>
        </div>
        <div className="right">
          <button className="btn ghost" onClick={onRefresh}><window.IconRefresh size={13} />Refresh</button>
          {total === 0 && onSeed && (
            <button className="btn secondary" onClick={onSeed}>Import legacy apps</button>
          )}
          <button className="btn primary" onClick={() => onRoute({ page: 'create' })}>
            <window.IconPlus size={14} />Create app
          </button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', gap: 14, marginBottom: 22 }}>
        <div className="stat">
          <div className="accent-bar"></div>
          <div className="label">Total apps</div>
          <div className="v">{total}</div>
          <div className="sub">{Object.keys(window.BRANDS).length - 1} brands · {new Set(list.flatMap(a => a.geos || [])).size} GEOs</div>
        </div>
        <div className="stat">
          <div className="label" style={{ color: 'var(--accent)' }}><span style={{ width: 6, height: 6, borderRadius: '50%', background: 'currentColor', display: 'inline-block' }}></span>Live</div>
          <div className="v live">{live}</div>
          <div className="sub">{deployed} deployed · {draft} drafts</div>
        </div>
        <div className="stat">
          <div className="label">Installs · 7d</div>
          <div className="v">{window.fmtNum(totalInstalls)}</div>
          <div className="sub">across all live apps</div>
        </div>
        <div className="stat">
          <div className="label">Leads · 7d</div>
          <div className="v">{window.fmtNum(totalLeads)}</div>
          <div className="sub">{Math.round(totalLeads / Math.max(totalInstalls, 1) * 100)}% install→lead</div>
        </div>
        <div className="stat">
          <div className="label">FTDs · 7d</div>
          <div className="v" style={{ color: 'var(--purple)' }}>{window.fmtNum(totalFtds)}</div>
          <div className="sub">{Math.round(totalFtds / Math.max(totalLeads, 1) * 100)}% lead→FTD</div>
        </div>
      </div>

      <div className="panel">
        <div className="panel-head">
          <h2>Your apps</h2>
          <span style={{ fontSize: 11, color: 'var(--muted)', fontFamily: 'JetBrains Mono, monospace', background: 'var(--bg-3)', padding: '2px 8px', borderRadius: 10 }}>{total}</span>
          <div className="right">
            <button className="btn ghost small"><window.IconSearch size={12} />Filter</button>
          </div>
        </div>

        <table className="data">
          <thead>
            <tr>
              <th style={{ width: 30 }}></th>
              <th>App</th>
              <th>Type</th>
              <th>Brand</th>
              <th>GEOs</th>
              <th>Installs · 7d</th>
              <th>Leads · 7d</th>
              <th>FTDs · 7d</th>
              <th>Status</th>
              <th style={{ width: 50 }}></th>
            </tr>
          </thead>
          <tbody>
            {list.map(a => (
              <tr key={a.id} className="clickable" onClick={() => onRoute({ page: 'app', appId: a.id })}>
                <td>
                  <div style={{ width: 32, height: 32, borderRadius: 7, display: 'grid', placeItems: 'center', background: 'var(--bg-3)', fontSize: 16, border: '1px solid var(--line)' }}>
                    {a.icon}
                  </div>
                </td>
                <td>
                  <div style={{ fontWeight: 500 }}>{a.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--muted-2)', fontFamily: 'JetBrains Mono, monospace', marginTop: 2 }}>{a.id}</div>
                </td>
                <td>
                  <span className="pill">
                    {a.type === 'pwa' ? <window.IconGlobe size={10} /> : <window.IconSmartphone size={10} />}
                    {a.type.toUpperCase()}
                  </span>
                </td>
                <td style={{ color: window.BRANDS[a.brand]?.color || 'var(--text)' }}>{window.BRANDS[a.brand]?.name || a.brand}</td>
                <td>
                  <div style={{ display: 'flex', gap: 2, alignItems: 'center' }}>
                    {(a.geos || []).slice(0, 5).map(g => (
                      <span key={g} style={{ fontSize: 14 }}>{window.COUNTRY_FLAGS[g]}</span>
                    ))}
                    {(a.geos || []).length > 5 && <span style={{ fontSize: 11, color: 'var(--muted)', marginLeft: 4 }}>+{a.geos.length - 5}</span>}
                  </div>
                </td>
                <td className="mono">{window.fmtNum(a.installs7d)}</td>
                <td className="mono">{window.fmtNum(a.leads7d)}</td>
                <td className="mono" style={{ color: a.ftds7d > 0 ? 'var(--purple)' : 'var(--muted)' }}>{window.fmtNum(a.ftds7d)}</td>
                <td><window.StatusPill status={a.status} enabled={a.enabled} /></td>
                <td onClick={e => e.stopPropagation()}>
                  <button className="btn ghost small"><window.IconMoreVert size={14} /></button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

window.Dashboard = Dashboard;