// assets/screen_user_detail.jsx
function ScreenUserDetail({ id, go }) {
  const user = USERS.find(u => u.id === id) || USERS.find(u => u.id.startsWith(id)) || USERS[0];
  const balance = BALANCES[user.id];
  const [tab, setTab] = React.useState('overview');
  const [active, setActive] = React.useState(user.is_active);
  const [verified, setVerified] = React.useState(user.is_verified);

  // ownership
  const userStores = STORES.filter(s => s.owner_user_id === user.id);

  return (
    <div className="page">
      {/* Hero */}
      <div style={{ display: 'flex', gap: 20, marginBottom: 16, alignItems: 'flex-start', padding: 16, background: 'var(--bg-surface)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-subtle)' }}>
        <UserAvatar username={user.username} size={72} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6, flexWrap: 'wrap' }}>
            <h1 style={{ margin: 0, fontSize: 22, fontWeight: 600 }}>{user.username}</h1>
            <Badge kind={active ? 'success' : 'neutral'} dot>{active ? 'active' : 'inactive'}</Badge>
            {verified && <Badge kind="accent" dot>verified</Badge>}
            <Badge kind="neutral">{user.role}</Badge>
            {balance && balance.total_balance_cents > 0 && <Badge kind="success">{fmtMoney(balance.total_balance_cents)} balance</Badge>}
            {balance && balance.total_balance_cents < 0 && <Badge kind="danger">{fmtMoney(balance.total_balance_cents)} balance</Badge>}
          </div>
          <div style={{ display: 'flex', gap: 14, fontSize: 12, color: 'var(--text-secondary)', flexWrap: 'wrap' }}>
            <span><Icon name="mail" size={12} style={{ verticalAlign: 'middle' }} /> <a className="text-accent" href={'mailto:' + user.email}><Mono>{user.email}</Mono></a></span>
            <span><Icon name="globe" size={12} style={{ verticalAlign: 'middle' }} /> <a href="#" className="text-accent"><Mono>{user.subdomain}</Mono></a></span>
            <span><span className="dim">id</span> <Mono dim>{user.id}</Mono></span>
            <span><span className="dim">joined</span> <Mono>{fmtDate(user.created_at)}</Mono></span>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
          <a href="#/users" className="btn ghost"><Icon name="chevron" size={13} style={{ transform: 'rotate(180deg)' }} /> All users</a>
          {user.subdomain && <button className="btn"><Icon name="external" size={12} /> Visit workspace</button>}
          <button className={'btn ' + (active ? 'danger' : 'primary')} onClick={() => setActive(a => !a)}>
            <Icon name={active ? 'ban' : 'check'} size={12} /> {active ? 'Ban' : 'Unban'}
          </button>
          <button className="btn" onClick={() => setVerified(v => !v)}>
            <Icon name={verified ? 'eyeOff' : 'check2'} size={12} /> {verified ? 'Revoke verified' : 'Verify'}
          </button>
          <button className="btn ghost danger"><Icon name="trash" size={12} /> Delete</button>
        </div>
      </div>

      {/* Tabs */}
      <div className="tabs">
        <div className={`tab ${tab === 'overview' ? 'active' : ''}`} onClick={() => setTab('overview')}>
          <Icon name="user" size={12} /> Overview
        </div>
        <div className={`tab ${tab === 'stats' ? 'active' : ''}`} onClick={() => setTab('stats')}>
          <Icon name="trend" size={12} /> Statistics
        </div>
        <div className={`tab ${tab === 'stores' ? 'active' : ''}`} onClick={() => setTab('stores')}>
          <Icon name="package" size={12} /> Stores <span className="count">{userStores.length}</span>
        </div>
      </div>

      {tab === 'overview' && (
        <div className="grid cols-2">
          <div className="card">
            <div className="card-head"><h3>Identity</h3></div>
            <div className="card-body">
              <KVGrid pairs={[
                ['username', <Mono key="u">{user.username}</Mono>],
                ['email', <a key="e" className="text-accent" href={'mailto:' + user.email}><Mono>{user.email}</Mono></a>],
                ['subdomain', <Mono key="s">{user.subdomain}</Mono>],
                ['user id', <Mono key="i" dim>{user.id}</Mono>],
                ['role', <Badge key="r" kind="neutral">{user.role}</Badge>],
              ]} />
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3>Activity</h3></div>
            <div className="card-body">
              <KVGrid pairs={[
                ['created', <Mono key="c">{fmtDate(user.created_at)}</Mono>],
                ['updated', <Mono key="u">{fmtDate(user.updated_at)}</Mono>],
                ['last login', user.last_login ? <Mono key="l">{formatRel(user.last_login)}</Mono> : <span key="ne" className="dim">Never</span>],
                ['balance', balance ? <Mono key="b" style={{ color: balance.total_balance_cents >= 0 ? 'var(--success)' : 'var(--danger)' }}>{fmtMoney(balance.total_balance_cents)}</Mono> : <span key="nb" className="dim">no account</span>],
              ]} />
            </div>
          </div>

          {balance && (
            <div className="card" style={{ gridColumn: 'span 2' }}>
              <div className="card-head">
                <h3>Account balance</h3>
                <span className="sub">stored as integer cents · ÷100 = USD</span>
              </div>
              <div className="card-body">
                <div className="grid cols-4" style={{ gap: 12 }}>
                  <BalanceCell label="Total balance" cents={balance.total_balance_cents} color={balance.total_balance_cents >= 0 ? 'var(--success)' : 'var(--danger)'} />
                  <BalanceCell label="Available" cents={balance.available_cents} />
                  <BalanceCell label="Frozen" cents={balance.frozen_cents} color={balance.frozen_cents > 0 ? 'var(--warning)' : undefined} />
                  <BalanceCell label="Total deposit" cents={balance.total_deposit_cents} dim />
                </div>
                <div style={{ marginTop: 12 }}>
                  <BalanceCell inline label="Total spend" cents={balance.total_spend_cents} dim />
                </div>
              </div>
            </div>
          )}
        </div>
      )}

      {tab === 'stats' && (
        <div className="grid cols-4">
          <KpiCard label="Total projects" value={user.projects_count} icon="layers" />
          <KpiCard label="Active projects" value={user.active_projects_count} icon="zap" />
          <KpiCard label="Sessions" value={user.sessions_count.toLocaleString()} icon="trace" />
          <KpiCard label="Messages" value={user.messages_count.toLocaleString()} icon="message" />
        </div>
      )}

      {tab === 'stores' && (
        <div className="card">
          <div className="card-head">
            <h3>Stores owned by {user.username}</h3>
            <span className="sub">{userStores.length} stores</span>
          </div>
          {userStores.length === 0 ? (
            <div className="empty-state" style={{ padding: 40 }}>This user owns no stores.</div>
          ) : (
            <div className="card-body flush">
              <table className="tbl">
                <thead><tr><th>Store</th><th>Platform</th><th className="num">Orders</th><th className="num">Revenue</th><th>Plan</th><th>Created</th></tr></thead>
                <tbody>
                  {userStores.map(s => (
                    <tr key={s.id} className="clickable" onClick={() => go('/stores/' + s.id)}>
                      <td>{s.name}<br/><span className="dim mono fs-11">{s.store_domain}</span></td>
                      <td><Badge kind="neutral">{s.platform}</Badge></td>
                      <td className="num"><Mono>{s.total_orders}</Mono></td>
                      <td className="num"><Mono className="text-success">{fmtMoneyCompact(s.revenue_cents)}</Mono></td>
                      <td><Badge kind={s.plan === 'max' ? 'accent' : 'neutral'}>{s.plan || 'none'}</Badge></td>
                      <td className="dim"><Mono>{fmtDate(s.created_at)}</Mono></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

function BalanceCell({ label, cents, color, dim, inline }) {
  const style = inline ? { display: 'flex', alignItems: 'baseline', gap: 8 } : { padding: 14, background: 'var(--bg-base)', borderRadius: 'var(--radius)', border: '1px solid var(--border-subtle)' };
  return (
    <div style={style}>
      <div className="dim fs-11" style={{ textTransform: 'uppercase', letterSpacing: '.04em', fontWeight: 500, marginBottom: inline ? 0 : 4 }}>{label}</div>
      <div style={{ fontSize: inline ? 14 : 20, fontWeight: 600, fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums', color: color || (dim ? 'var(--text-secondary)' : 'var(--text-primary)') }}>
        {fmtMoney(cents)}
      </div>
    </div>
  );
}

Object.assign(window, { ScreenUserDetail });