// Artifact viewer. An output is an object with provenance: which agent produced it,
// from which sources, in which version, for which client.
function ScreenArtifact({ go, notify }) {
  const { Panel, Button, IconButton, Badge, Breadcrumb, AgentChip, FileCard, Callout, Tabs,
          BeforeAfter, MetricTile, StatusDot, Avatar, Tag } = window.EG;
  const [tab, setTab] = React.useState('documento');

  const outline = [['Resumen ejecutivo', true], ['Situación actual', false], ['Sistema propuesto', false], ['Fases y plazos', false], ['Inversión', false], ['Supuestos', false]];

  return (
    <>
      <div className="ws-subbar">
        <Breadcrumb items={[{ label: 'ACME Industrial', icon: 'business' }, { label: 'Automatización comercial' }, { label: 'Propuesta v2' }]}
          onNavigate={(it, i) => go(i === 0 ? 'clients' : 'project')} />
        <Badge tone="warning">En revisión</Badge>
        <span style={{ marginLeft: 'auto' }} />
        <Button size="sm" variant="ghost" icon="replay" onClick={() => { notify({ tone: 'running', title: 'Re-ejecutando', description: 'Propuestas Agent · v3' }); go('agent'); }}>Re-ejecutar</Button>
        <Button size="sm" variant="secondary" icon="content_copy">Duplicar</Button>
        <Button size="sm" icon="ios_share">Exportar</Button>
        <IconButton icon="more_horiz" label="Más" size="sm" />
      </div>

      <div className="ws-cols-3 ws-cols-3--doc" style={{ flex: 1 }}>
        <aside className="ws-col">
          <div className="ws-col-scroll ws-stack">
            <div>
              <span className="eg-eyebrow">Contenido</span>
              <ul className="ws-list ws-stack-sm" style={{ marginTop: 10 }}>
                {outline.map(([label, on]) => (
                  <li key={label}>
                    <button type="button" style={{ position: 'relative', display: 'block', width: '100%', padding: '6px 9px', borderRadius: 'var(--radius-sm)', border: 0, background: on ? 'var(--surface-selected)' : 'transparent', color: on ? 'var(--text-primary)' : 'var(--text-tertiary)', font: 'var(--type-body-sm)', textAlign: 'left' }}>
                      {on && <span style={{ position: 'absolute', left: 0, top: 6, bottom: 6, width: 2, borderRadius: 1, background: 'var(--grad-ribbon)' }} />}
                      {label}
                    </button>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <span className="eg-eyebrow">Versiones</span>
              <div className="ws-stack-sm" style={{ marginTop: 10 }}>
                {[['v2', 'hace 20 min', 'Propuestas Agent', true], ['v1', 'ayer 18:04', 'Propuestas Agent', false], ['v0', 'ayer 11:20', 'Esteban', false]].map(([v, when, who, on]) => (
                  <div key={v} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '8px 9px', borderRadius: 'var(--radius-sm)', background: on ? 'var(--surface-2)' : 'transparent', border: '1px solid ' + (on ? 'var(--border-default)' : 'transparent') }}>
                    <span className="eg-data" style={{ fontSize: 11, color: on ? 'var(--accent-text)' : 'var(--text-muted)' }}>{v}</span>
                    <span style={{ flex: 1, minWidth: 0 }}>
                      <span style={{ display: 'block', font: 'var(--type-body-sm)', fontSize: 12 }}>{when}</span>
                      <span style={{ display: 'block', font: 'var(--type-mono-sm)', color: 'var(--text-muted)', marginTop: 2 }}>{who}</span>
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </aside>

        <section style={{ display: 'flex', flexDirection: 'column', minHeight: 0, background: 'var(--bg-base)' }}>
          <div className="ws-subbar" style={{ background: 'transparent' }}>
            <Tabs variant="pill" activeId={tab} onChange={setTab} tabs={[{ id: 'documento', label: 'Documento' }, { id: 'datos', label: 'Datos' }, { id: 'fuentes', label: 'Fuentes' }]} />
            <span style={{ marginLeft: 'auto', font: 'var(--type-mono-sm)', color: 'var(--text-muted)' }}>4 páginas · 1.240 palabras</span>
          </div>
          <div className="ws-scroll" style={{ padding: '26px 0 40px' }}>
            <article style={{ width: 'min(720px, 92%)', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 22 }}>
              {tab === 'documento' && <>
                <div>
                  <span className="eg-eyebrow">Propuesta · ACME Industrial</span>
                  <h1 style={{ font: 'var(--type-h2)', letterSpacing: 'var(--tracking-tighter)', margin: '14px 0 10px' }}>Automatización del ciclo comercial</h1>
                  <p style={{ font: 'var(--type-body-sm)', color: 'var(--text-muted)' }}>Preparado el 11 de agosto de 2026 · válido 30 días</p>
                </div>
                <div style={{ height: 1, background: 'var(--border-subtle)' }} />
                <div>
                  <h2 style={{ font: 'var(--type-h4)', marginBottom: 12 }}>Resumen ejecutivo</h2>
                  <p style={{ font: 'var(--type-body)', color: 'var(--text-secondary)', marginBottom: 14 }}>
                    Cada propuesta comercial requiere hoy reunir precios, histórico del cliente y condiciones
                    de tres sistemas distintos. El tiempo medio es de 5,5 días y en 4 de cada 10 pedidos el
                    descuento aplicado supera la política vigente.
                  </p>
                  <p style={{ font: 'var(--type-body)', color: 'var(--text-secondary)' }}>
                    Proponemos un sistema en tres fases: consolidar el contexto comercial, incorporar un agente
                    que redacte con catálogo y tarifas vigentes, y automatizar la aprobación por márgenes.
                  </p>
                </div>
                <BeforeAfter label="Tiempo medio por propuesta" before="5.5 días" after="4 horas" delta="92%" />
                <div>
                  <h2 style={{ font: 'var(--type-h4)', marginBottom: 12 }}>Fases y plazos</h2>
                  <div style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', overflow: 'hidden' }}>
                    {[['01', 'Contexto y catálogo', '2 semanas', 'Consolidación de tarifas, catálogo y histórico'],
                      ['02', 'Agente de propuestas', '3 semanas', 'Redacción con contexto y tono del cliente'],
                      ['03', 'Aprobación por márgenes', '2 semanas', 'Reglas, excepciones y trazabilidad']].map(([n, t, d, desc], i) => (
                      <div key={n} style={{ display: 'grid', gridTemplateColumns: '48px minmax(0,1fr) 110px', gap: 14, padding: '14px 16px', borderTop: i ? '1px solid var(--border-subtle)' : 0, alignItems: 'baseline' }}>
                        <span className="eg-data" style={{ fontSize: 12, color: 'var(--accent-text)' }}>{n}</span>
                        <span>
                          <span style={{ display: 'block', font: 'var(--type-caption)' }}>{t}</span>
                          <span style={{ display: 'block', font: 'var(--type-body-sm)', fontSize: 12, color: 'var(--text-muted)', marginTop: 4 }}>{desc}</span>
                        </span>
                        <span className="eg-data" style={{ fontSize: 12, color: 'var(--text-tertiary)', textAlign: 'right' }}>{d}</span>
                      </div>
                    ))}
                  </div>
                </div>
                <Callout tone="info" title="Editable en línea">
                  Cualquier bloque se puede editar aquí y volver a exportar sin re-ejecutar el agente.
                </Callout>
              </>}
              {tab === 'datos' && <div className="ws-grid-3">
                <MetricTile label="Ahorro anual estimado" value="€148k" delta="+" caption="a partir del mes 4" />
                <MetricTile label="Horas / mes" value="62" unit="h" delta="+14%" />
                <MetricTile label="Errores de precio" value="0" delta="−7" deltaDirection="down" />
              </div>}
              {tab === 'fuentes' && <div className="ws-stack-sm">
                <FileCard name="transcripcion-08ago.txt" kind="doc" meta="Reunión comercial · 48 min" size="42 KB" />
                <FileCard name="Procesos comerciales v3.pdf" kind="pdf" meta="Marta Sanz" size="2.4 MB" />
                <FileCard name="Tarifas 2026.xlsx" kind="sheet" meta="ERP · sincronizado" size="640 KB" />
                <FileCard name="Briefing de industria" kind="data" meta="Research Agent · 12 fuentes" size="18 KB" />
              </div>}
            </article>
          </div>
        </section>

        <aside className="ws-col ws-col--right">
          <div className="ws-col-scroll ws-stack">
            <div>
              <span className="eg-eyebrow">Procedencia</span>
              <div className="ws-stack-sm" style={{ marginTop: 10 }}>
                <div className="ws-row" style={{ gap: 9 }}>
                  <AgentChip name="Propuestas" code="PR" domain="comms" meta="v2" />
                  <StatusDot state="success" />
                </div>
                <div style={{ font: 'var(--type-body-sm)', fontSize: 12, color: 'var(--text-tertiary)', lineHeight: 1.5 }}>
                  Generado desde 4 fuentes con el contexto de ACME Industrial. Revisado por QA con 2 observaciones.
                </div>
              </div>
            </div>
            <Callout tone="warning" title="2 observaciones de QA"
              action={<Button size="sm" variant="secondary">Ver observaciones</Button>}>
              Falta el supuesto de disponibilidad del ERP y una fase no tiene responsable asignado.
            </Callout>
            <div>
              <span className="eg-eyebrow">Acciones</span>
              <div className="ws-stack-sm" style={{ marginTop: 10 }}>
                <Button variant="secondary" size="sm" fullWidth icon="check">Aprobar y enviar</Button>
                <Button variant="secondary" size="sm" fullWidth icon="edit">Editar en línea</Button>
                <Button variant="secondary" size="sm" fullWidth icon="account_tree" onClick={() => go('flows')}>Ver workflow origen</Button>
                <Button variant="secondary" size="sm" fullWidth icon="picture_as_pdf">Exportar PDF</Button>
              </div>
            </div>
            <div>
              <span className="eg-eyebrow">Relacionado</span>
              <div className="ws-row" style={{ flexWrap: 'wrap', gap: 7, marginTop: 10 }}>
                <Tag icon="description">Briefing de industria</Tag>
                <Tag icon="table">Panel de márgenes</Tag>
                <Tag icon="account_tree">Propuesta comercial</Tag>
              </div>
            </div>
            <div>
              <span className="eg-eyebrow">Revisores</span>
              <div className="ws-stack-sm" style={{ marginTop: 10 }}>
                {[['Esteban Guzmán', 'Pendiente'], ['Laura Beltrán', 'No enviado']].map(([n, s]) => (
                  <div key={n} className="ws-row" style={{ gap: 9 }}>
                    <Avatar name={n} size="sm" />
                    <span style={{ flex: 1, font: 'var(--type-body-sm)' }}>{n}</span>
                    <Badge variant="outline">{s}</Badge>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </aside>
      </div>
    </>
  );
}

Object.assign(window, { ScreenArtifact });