/* Page: Portfolio (multi-client overview) */
function PortfolioView({ onOpenClient }) {
  const { data, loading, error } = useApi('/api/clients', []);

  if (loading) return <div className="loading-state">Loading portfolio...</div>;
  if (error) return <div className="error-state">Failed to load portfolio: {error}</div>;

  const clients = data || [];
  const count = clients.length;

  return (
    <>
      <div style={{position:'relative'}}>
        <div className="wash agency-only" />
        <div className="page-head" style={{position:'relative', zIndex:1}}>
          <div>
            <div className="eyebrow gold"><span className="dot"/>01 — Agency portfolio</div>
            <h1>{count === 0 ? 'No active clients yet.'
                : count === 1 ? `One active client. Open ${clients[0].name} to drill in.`
                : `${count} active clients.`}</h1>
            <div className="sub">Roll-up of organic performance across all SEO retainers. Click a row to drill into a client.</div>
          </div>
        </div>
      </div>

      <div className="section-head" style={{marginTop: 8}}>
        <span className="label">Client book</span>
        <span className="rule" />
      </div>

      <div className="panel">
        <table className="table">
          <thead>
            <tr>
              <th style={{width: 28}}></th>
              <th>Client</th>
              <th>Tier</th>
              <th>Sources</th>
              <th>Health</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {clients.map(c => (
              <tr key={c.id} onClick={() => onOpenClient(c.id)} style={{cursor: 'pointer'}}>
                <td><div className="sb-avatar" style={{width: 26, height: 26, fontSize: 9}}>{c.initials}</div></td>
                <td>
                  <div className="cell-stack">
                    <span className="lead">{c.name}</span>
                    <span className="url">{c.url}</span>
                  </div>
                </td>
                <td><span className="tag">{c.tier}</span></td>
                <td>
                  <div style={{display:'flex', gap: 4, flexWrap: 'wrap'}}>
                    {(c.integrations || []).map(s => (
                      <span key={s} className="serp-badge">{s.toUpperCase()}</span>
                    ))}
                  </div>
                </td>
                <td>
                  <span className={`status ${c.health || 'ok'}`}>
                    <span className="dot"/>
                    {c.health === 'ok' ? 'On track' : c.health === 'warn' ? 'Watch' : c.health === 'err' ? 'At risk' : 'Setup'}
                  </span>
                </td>
                <td><Icon name="chevR" size={14} color="var(--text-dim)"/></td>
              </tr>
            ))}
            {clients.length === 0 && (
              <tr><td colSpan={6} style={{textAlign: 'center', padding: 32, color: 'var(--text-muted)'}}>
                No clients configured. Add one in <code>api/config/clients.json</code>.
              </td></tr>
            )}
          </tbody>
        </table>
      </div>
    </>
  );
}

window.PortfolioView = PortfolioView;