function ScreenProject({ go, notify }) {
  const { Panel, Card, Button, IconButton, Badge, Breadcrumb, Tabs, ProgressBar, MetricTile, Checkbox,
          ActivityFeed, AgentChip, ArtifactCard, Avatar, FileCard, BeforeAfter, StatusDot } = window.EG;
  const D = window.EGData;
  const [tab, setTab] = React.useState('trabajo');

  return (
    <>
      <div className="ws-subbar">
        <Breadcrumb items={[{ label: 'ACME Industrial', icon: 'business' }, { label: 'Automatización comercial' }]} onNavigate={() => go('clients')} />
        <Badge tone="accent" variant="quiet">En construcción</Badge>
        <span style={{ marginLeft: 'auto' }} />
        <Button size="sm" variant="secondary" icon="account_tree" onClick={() => go('flows')}>Workflows</Button>
        <Button size="sm" icon="bolt" onClick={() => go('agent')}>Ejecutar agente</Button>
        <IconButton icon="more_horiz" label="Más" size="sm" />
      </div>

      <div className="ws-pad ws-stack">
        <div className="ws-row" style={{ justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ maxWidth: '62ch' }}>
            <span className="eg-eyebrow">Objetivo</span>
            <h1 className="ws-h1" style={{ margin: '10px 0 12px', font: 'var(--type-h3)' }}>Reducir el tiempo de propuesta comercial de 5,5 días a menos de 4 horas.</h1>
            <p style={{ font: 'var(--type-body-sm)', color: 'var(--text-tertiary)' }}>
              Fase 2 de 3 · el agente de propuestas ya redacta con catálogo y tarifas; falta la aprobación por márgenes.
            </p>
          </div>
          <div className="ws-row" style={{ gap: 22 }}>
            <div>
              <span className="eg-eyebrow">Equipo</span>
              <div className="ws-row" style={{ gap: -6, marginTop: 10 }}>
                {['Esteban Guzmán', 'Marta Sanz', 'Diego Peña', 'Laura Beltrán'].map((n, i) => (
                  <Avatar key={n} name={n} size="sm" tone={i < 3 ? 'accent' : 'neutral'} style={{ marginLeft: i ? -7 : 0, boxShadow: '0 0 0 2px var(--bg-base)' }} />
                ))}
              </div>
            </div>
            <div>
              <span className="eg-eyebrow">Entrega</span>
              <div className="eg-data" style={{ fontSize: 18, marginTop: 8 }}>12 sep</div>
            </div>
            <div style={{ width: 160 }}>
              <span className="eg-eyebrow">Avance</span>
              <div style={{ marginTop: 10 }}><ProgressBar value={62} showValue tone="ribbon" /></div>
            </div>
          </div>
        </div>

        <Tabs activeId={tab} onChange={setTab} tabs={[
          { id: 'trabajo', label: 'Trabajo' }, { id: 'contexto', label: 'Contexto', count: 14 },
          { id: 'outputs', label: 'Outputs', count: 9 }, { id: 'resultados', label: 'Resultados' }, { id: 'actividad', label: 'Actividad' }
        ]} />

        <div className="ws-grid-2">
          <div className="ws-stack">
            <Panel eyebrow="Tareas" title="Esta semana" padding="md" seam
              actions={<Button size="sm" variant="ghost" icon="add">Añadir</Button>}>
              <ul className="ws-list ws-stack-sm">
                {[['Definir política de márgenes por línea', 'Marta · vence jueves', false],
                  ['Conectar catálogo del ERP', 'Diego · en curso', false],
                  ['Validar tono de la propuesta con Laura', 'Esteban · vence hoy', false],
                  ['Mapear excepciones de precio', 'Marta · hecho', true]].map(([label, meta, done]) => (
                  <li key={label} className="ws-row" style={{ gap: 10, opacity: done ? 0.5 : 1 }}>
                    <Checkbox checked={done} onChange={() => {}} />
                    <span style={{ flex: 1, minWidth: 0 }}>
                      <span style={{ display: 'block', font: 'var(--type-body-sm)', textDecoration: done ? 'line-through' : 'none' }}>{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="Workflows del proyecto" title="Automatizaciones montadas" padding="none"
              footer={<Button variant="ghost" size="sm" iconRight="chevron_right" onClick={() => go('flows')}>Abrir el constructor</Button>}>
              <ul className="ws-list">
                {[['Propuesta comercial', '5 pasos', 'running', 'Disparador: reunión finalizada'],
                  ['Alta de cliente en ERP', '3 pasos', 'idle', 'Disparador: manual'],
                  ['Revisión de márgenes', '4 pasos', 'idle', 'Disparador: lunes 08:00']].map(([name, steps, state, trigger]) => (
                  <li key={name}>
                    <button type="button" onClick={() => go('flows')} style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 16px', background: 'transparent', border: 0, borderBottom: '1px solid var(--border-subtle)', textAlign: 'left' }}>
                      <span className="eg-icon eg-icon--sm" style={{ color: state === 'running' ? 'var(--signal-400)' : 'var(--text-muted)' }}>account_tree</span>
                      <span style={{ flex: 1, minWidth: 0 }}>
                        <span style={{ display: 'block', font: 'var(--type-body-sm)' }}>{name}</span>
                        <span style={{ display: 'block', font: 'var(--type-mono-sm)', color: 'var(--text-muted)', marginTop: 3 }}>{steps} · {trigger}</span>
                      </span>
                      <StatusDot state={state === 'running' ? 'running' : 'idle'} />
                    </button>
                  </li>
                ))}
              </ul>
            </Panel>

            <Panel eyebrow="Resultados" title="Antes y después" padding="md">
              <BeforeAfter label="Tiempo medio por propuesta" before="5.5 días" after="4 horas" delta="92%" />
              <div className="ws-grid-3" style={{ gap: 12, marginTop: 14 }}>
                <MetricTile label="Propuestas / mes" value="48" delta="+12" style={{ padding: 13 }} />
                <MetricTile label="Errores de precio" value="0" delta="−7" deltaDirection="down" style={{ padding: 13 }} />
                <MetricTile label="Horas / mes" value="62" unit="h" delta="+14%" style={{ padding: 13 }} />
              </div>
            </Panel>
          </div>

          <div className="ws-stack">
            <Panel eyebrow="Contexto del proyecto" title="Lo que saben los agentes" padding="md"
              actions={<IconButton icon="upload" label="Subir" size="sm" />}>
              <ProgressBar value={74} label="Completitud" showValue size="sm" />
              <div className="ws-stack-sm" style={{ marginTop: 14 }}>
                <FileCard name="Procesos comerciales v3.pdf" kind="pdf" meta="Marta" size="2.4 MB" />
                <FileCard name="Tarifas 2026.xlsx" kind="sheet" meta="ERP" size="640 KB" />
                <FileCard name="Política de descuentos.docx" kind="doc" meta="Laura" size="88 KB" />
                <FileCard name="catalogo-skus.json" kind="data" meta="Integración" size="1.2 MB" />
              </div>
            </Panel>

            <Panel eyebrow="Agentes asignados" title="Quién trabaja aquí" padding="md">
              <div className="ws-row" style={{ flexWrap: 'wrap', gap: 8 }}>
                {['PR', 'RS', 'DT', 'QA', 'AU'].map(code => {
                  const a = D.agents.find(x => x.code === code);
                  return <AgentChip key={code} name={a.name} code={a.code} domain={a.domain} running={code === 'PR'} onClick={() => go('agent')} />;
                })}
              </div>
            </Panel>

            <Panel eyebrow="Outputs" title="Entregables del proyecto" padding="md"
              footer={<Button variant="ghost" size="sm" iconRight="chevron_right" onClick={() => go('artifact')}>Ver todos</Button>}>
              <div className="ws-stack-sm">
                {D.artifacts.slice(0, 3).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} onClick={() => go('artifact')}
                    status={<Badge tone={a.state === 'review' ? 'warning' : 'success'}>{a.state === 'review' ? 'Revisión' : 'Aprobado'}</Badge>} />
                ))}
              </div>
            </Panel>

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

Object.assign(window, { ScreenProject });