// Client 360 — opening a client should feel like opening its digital brain: context
// first, then what is being built on top of it.
function ScreenClient({ go, notify }) {
  const { Panel, Card, Button, IconButton, Badge, Tabs, ProgressBar, MetricTile, FileCard,
          ActivityFeed, AgentChip, ArtifactCard, Avatar, Callout, StatusDot, DataTable } = window.EG;
  const D = window.EGData;
  const [tab, setTab] = React.useState('resumen');

  return (
    <>
      <div className="ws-subbar">
        <div className="ws-row" style={{ gap: 12, flex: 1, minWidth: 0 }}>
          <span style={{ width: 30, height: 30, display: 'grid', placeItems: 'center', borderRadius: 'var(--radius-sm)', background: 'var(--accent-quiet)', border: '1px solid var(--border-accent)', font: 'var(--type-mono-sm)', color: 'var(--accent-text)' }}>AC</span>
          <div style={{ minWidth: 0 }}>
            <div className="ws-row" style={{ gap: 8 }}>
              <span style={{ font: 'var(--type-h5)' }}>ACME Industrial</span>
              <Badge tone="success" variant="quiet">Activo</Badge>
            </div>
          </div>
          <span style={{ font: 'var(--type-mono-sm)', color: 'var(--text-muted)' }}>Distribución industrial · 180 empleados · cliente desde 2024</span>
        </div>
        <Button size="sm" variant="secondary" icon="upload">Añadir contexto</Button>
        <Button size="sm" icon="bolt" onClick={() => go('agent')}>Nueva ejecución</Button>
        <IconButton icon="more_horiz" label="Más" size="sm" />
      </div>

      <div className="ws-pad ws-stack">
        <Tabs activeId={tab} onChange={setTab} tabs={[
          { id: 'resumen', label: 'Resumen' }, { id: 'proyectos', label: 'Proyectos', count: 3 },
          { id: 'contexto', label: 'Contexto', count: 42 }, { id: 'reuniones', label: 'Reuniones', count: 18 },
          { id: 'automatizaciones', label: 'Automatizaciones', count: 6 }, { id: 'actividad', label: 'Actividad' }
        ]} />

        <div className="ws-grid-4">
          <MetricTile label="Horas recuperadas / mes" value="62" unit="h" delta="+14%" />
          <MetricTile label="Automatizaciones activas" value="6" delta="+2" caption="últimos 30 días" />
          <MetricTile label="Ejecuciones / mes" value="41" delta="+9" />
          <MetricTile label="Contexto del cliente" value="86" unit="%" delta="+12" seam />
        </div>

        <div className="ws-grid-2">
          <div className="ws-stack">
            <Panel eyebrow="Proyectos" title="Qué estamos construyendo" padding="none" seam
              actions={<Button size="sm" variant="ghost" icon="add">Añadir</Button>}>
              <DataTable onRowClick={() => go('project')} rows={D.projects.filter(p => p.client === 'ACME Industrial').concat([{ id: 'p9', name: 'Integración ERP → CRM', state: 'Cerrado', progress: 100, owner: 'Marta', due: 'jun', agents: 3 }])}
                columns={[
                  { key: 'name', label: 'Proyecto' },
                  { key: 'state', label: 'Estado', width: 150, render: r => <Badge tone={r.state === 'Cerrado' ? 'neutral' : r.state === 'Diagnóstico' ? 'info' : 'accent'} variant="quiet">{r.state}</Badge> },
                  { key: 'progress', label: 'Avance', width: 130, render: r => <ProgressBar value={r.progress} size="sm" /> },
                  { key: 'owner', label: 'Responsable', width: 110, muted: true },
                  { key: 'due', label: 'Entrega', width: 76, mono: true, align: 'right' }
                ]} />
            </Panel>

            <Panel eyebrow="Objetivos del cliente" title="Lo que el cliente quiere lograr" padding="md">
              <ul className="ws-list ws-stack-sm">
                {[['Reducir el tiempo de propuesta comercial', 'ok', 'Propuesta media: 5.5 días → 4 h'],
                  ['Dar visibilidad de margen por línea', 'ok', 'Panel de márgenes en producción'],
                  ['Eliminar la conciliación manual de pedidos', 'wip', 'En construcción · 62%'],
                  ['Formalizar el onboarding de comerciales', 'todo', 'Sin empezar']].map(([label, state, meta]) => (
                  <li key={label} className="ws-row" style={{ gap: 11, alignItems: 'flex-start' }}>
                    <span className="eg-icon eg-icon--sm" style={{ marginTop: 2, color: state === 'ok' ? 'var(--success)' : state === 'wip' ? 'var(--signal-400)' : 'var(--text-muted)' }}>
                      {state === 'ok' ? 'check_circle' : state === 'wip' ? 'pending' : 'radio_button_unchecked'}
                    </span>
                    <span style={{ flex: 1, minWidth: 0 }}>
                      <span style={{ display: 'block', font: 'var(--type-body-sm)' }}>{label}</span>
                      <span style={{ display: 'block', font: 'var(--type-mono-sm)', color: 'var(--text-muted)', marginTop: 3 }}>{meta}</span>
                    </span>
                  </li>
                ))}
              </ul>
            </Panel>

            <Panel eyebrow="Outputs recientes" title="Lo último entregado" padding="md"
              footer={<Button variant="ghost" size="sm" iconRight="chevron_right" onClick={() => go('artifact')}>Ver todos los outputs</Button>}>
              <div className="ws-grid-3">
                {D.artifacts.filter(a => a.client === 'ACME Industrial').map(a => (
                  <ArtifactCard key={a.title} title={a.title} kind={a.kind} client={a.client} project={a.project}
                    version={a.version} updated={a.updated} preview={false}
                    status={a.state === 'review' ? <Badge tone="warning">Revisión</Badge> : <Badge tone="success">Aprobado</Badge>}
                    onClick={() => go('artifact')} />
                ))}
              </div>
            </Panel>
          </div>

          <div className="ws-stack">
            <Panel eyebrow="Cerebro digital" title="Contexto persistente" padding="md" seam
              actions={<IconButton icon="upload" label="Subir" size="sm" />}>
              <ProgressBar value={86} label="Completitud del contexto" showValue tone="ribbon" />
              <div className="ws-grid-3" style={{ gap: 10, marginTop: 16 }}>
                {[['description', '42', 'documentos'], ['forum', '18', 'reuniones'], ['schema', '11', 'procesos']].map(([icon, n, l]) => (
                  <div key={l} style={{ padding: '11px 12px', borderRadius: 'var(--radius-sm)', background: 'var(--surface-2)', border: '1px solid var(--border-subtle)' }}>
                    <span className="eg-icon eg-icon--sm" style={{ color: 'var(--text-muted)' }}>{icon}</span>
                    <div className="eg-data" style={{ fontSize: 18, marginTop: 7 }}>{n}</div>
                    <div style={{ font: 'var(--type-mono-sm)', color: 'var(--text-muted)' }}>{l}</div>
                  </div>
                ))}
              </div>
              <div className="ws-stack-sm" style={{ marginTop: 14 }}>
                <FileCard name="Procesos comerciales v3.pdf" kind="pdf" meta="Marta" size="2.4 MB" onClick={() => {}} />
                <FileCard name="Tarifas 2026.xlsx" kind="sheet" meta="Sincronizado" size="640 KB" onClick={() => {}} />
                <FileCard name="transcripcion-08ago.txt" kind="doc" meta="Reunión comercial" size="42 KB" onClick={() => {}} />
              </div>
            </Panel>

            <Panel eyebrow="Equipo" title="Personas" padding="md">
              <div className="ws-stack-sm">
                {[['Laura Beltrán', 'Directora de operaciones', 'cliente'], ['Javier Ruiz', 'Responsable comercial', 'cliente'], ['Esteban Guzmán', 'Dirección de proyecto', 'estudio'], ['Marta Sanz', 'Implementación', 'estudio']].map(([n, r, side]) => (
                  <div key={n} className="ws-row" style={{ gap: 10 }}>
                    <Avatar name={n} size="sm" tone={side === 'estudio' ? 'accent' : 'neutral'} />
                    <span style={{ flex: 1, minWidth: 0 }}>
                      <span style={{ display: 'block', font: 'var(--type-body-sm)' }}>{n}</span>
                      <span style={{ display: 'block', font: 'var(--type-mono-sm)', color: 'var(--text-muted)', marginTop: 2 }}>{r}</span>
                    </span>
                    <Badge variant="outline" tone={side === 'estudio' ? 'accent' : 'neutral'}>{side}</Badge>
                  </div>
                ))}
              </div>
            </Panel>

            <Panel eyebrow="Agentes" title="Quién trabaja este cliente" padding="md">
              <div className="ws-row" style={{ flexWrap: 'wrap', gap: 8 }}>
                {['PR', 'RS', 'DT', 'QA', 'RE'].map(code => {
                  const a = D.agents.find(x => x.code === code);
                  return <AgentChip key={code} name={a.name} code={a.code} domain={a.domain} meta={a.runs + ' ejec.'} onClick={() => go('agent')} />;
                })}
              </div>
              <Callout tone="warning" title="Falta contexto de finanzas" style={{ marginTop: 14 }}
                action={<Button size="sm" variant="secondary" icon="upload">Subir documentos</Button>}>
                Los agentes de análisis financiero no tienen datos de coste por línea de producto.
              </Callout>
            </Panel>

            <Panel eyebrow="Actividad" title="Últimos movimientos" padding="md">
              <ActivityFeed dense items={D.activity.slice(0, 4)} />
            </Panel>
          </div>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { ScreenClient });