// Agent workspace: context on the left, the work in the middle, what came out of it
// on the right. The composer is always reachable and always shows its scope.
function ScreenAgentWork({ go, notify }) {
  const { Panel, Button, IconButton, Badge, AgentGlyph, AgentChip, ExecutionTrace, FileCard, Checkbox,
          Textarea, Tabs, StatusDot, SpectrumBars, Callout, ArtifactCard, Tag, ProgressBar, Skeleton,
          ThinkingOrb, BeamFrame } = window.EG;
  const D = window.EGData;
  const [tab, setTab] = React.useState('insights');
  const [running, setRunning] = React.useState(true);

  const steps = [
    { label: 'Leyendo la transcripción del 8 ago', count: '48 min', status: 'done', duration: '6s' },
    { label: 'Investigando el sector', count: '12 fuentes', status: 'done', duration: '18s' },
    { label: 'Cruzando con procesos del cliente', detail: '3 documentos · 11 procesos mapeados', status: running ? 'running' : 'done' },
    { label: 'Redactando propuesta', status: running ? 'pending' : 'done' },
    { label: 'Revisión de QA', status: 'pending' }
  ];

  return (
    <div className="ws-cols-3" style={{ flex: 1 }}>
      <aside className="ws-col">
        <div className="ws-subbar" style={{ padding: '0 16px' }}>
          <span className="eg-eyebrow">Contexto</span>
          <IconButton icon="tune" label="Ajustar contexto" size="sm" style={{ marginLeft: 'auto' }} />
        </div>
        <div className="ws-col-scroll ws-stack">
          <div className="ws-stack-sm">
            <span className="eg-eyebrow">Alcance</span>
            <button type="button" onClick={() => go('clients')} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 11px', borderRadius: 'var(--radius-sm)', background: 'var(--surface-2)', border: '1px solid var(--border-default)', textAlign: 'left' }}>
              <span style={{ width: 24, height: 24, display: 'grid', placeItems: 'center', borderRadius: 'var(--radius-xs)', background: 'var(--accent-quiet)', border: '1px solid var(--border-accent)', font: 'var(--type-mono-sm)', fontSize: 9, color: 'var(--accent-text)' }}>AC</span>
              <span style={{ flex: 1, minWidth: 0 }}>
                <span style={{ display: 'block', font: 'var(--type-body-sm)' }}>ACME Industrial</span>
                <span style={{ display: 'block', font: 'var(--type-mono-sm)', color: 'var(--text-muted)', marginTop: 2 }}>Automatización comercial</span>
              </span>
              <span className="eg-icon eg-icon--sm" style={{ color: 'var(--text-muted)' }}>unfold_more</span>
            </button>
            <ProgressBar value={86} label="Contexto disponible" showValue size="sm" tone="ribbon" />
          </div>

          <div>
            <div className="ws-row" style={{ justifyContent: 'space-between', marginBottom: 10 }}>
              <span className="eg-eyebrow">Fuentes en uso</span>
              <span style={{ font: 'var(--type-mono-sm)', color: 'var(--text-muted)' }}>4 / 42</span>
            </div>
            <div className="ws-stack-sm">
              <FileCard name="transcripcion-08ago.txt" kind="doc" meta="Reunión comercial" size="42 KB" selected />
              <FileCard name="Procesos comerciales v3.pdf" kind="pdf" meta="Marta" size="2.4 MB" selected />
              <FileCard name="Tarifas 2026.xlsx" kind="sheet" meta="Sincronizado" size="640 KB" selected />
              <FileCard name="Briefing de industria" kind="data" meta="Research Agent" size="18 KB" selected />
            </div>
            <Button variant="ghost" size="sm" icon="add" style={{ marginTop: 10 }}>Añadir fuente</Button>
          </div>

          <div>
            <span className="eg-eyebrow">Instrucciones activas</span>
            <div className="ws-stack-sm" style={{ marginTop: 10 }}>
              <Checkbox checked label="Usar tarifas vigentes 2026" />
              <Checkbox checked label="Tono directo, sin superlativos" />
              <Checkbox checked label="Incluir fases y supuestos" />
              <Checkbox label="Añadir comparativa con competencia" />
            </div>
          </div>

          <div>
            <span className="eg-eyebrow">Prompts reutilizables</span>
            <div className="ws-row" style={{ flexWrap: 'wrap', gap: 7, marginTop: 10 }}>
              <Tag icon="bookmark">Propuesta estándar</Tag>
              <Tag icon="bookmark">Alcance por fases</Tag>
              <Tag icon="bookmark">Resumen para dirección</Tag>
            </div>
          </div>
        </div>
      </aside>

      <section style={{ display: 'flex', flexDirection: 'column', minHeight: 0, background: 'var(--bg-base)' }}>
        <div className="ws-subbar">
          <AgentGlyph code="PR" domain="comms" size="md" running={running} />
          <div>
            <div className="ws-row" style={{ gap: 8 }}>
              <span style={{ font: 'var(--type-h5)' }}>Propuestas Agent</span>
              <Badge tone={running ? 'signal' : 'success'} icon={running ? 'bolt' : 'check'}>{running ? 'Ejecutando' : 'Completado'}</Badge>
            </div>
            <div style={{ font: 'var(--type-mono-sm)', color: 'var(--text-muted)', marginTop: 3 }}>EXE-4821 · iniciado 09:24 · 0:41</div>
          </div>
          <div className="ws-row" style={{ marginLeft: 'auto', gap: 6 }}>
            <Button size="sm" variant="secondary" icon={running ? 'pause' : 'replay'} onClick={() => setRunning(r => !r)}>{running ? 'Pausar' : 'Re-ejecutar'}</Button>
            <IconButton icon="account_tree" label="Ver como workflow" size="sm" onClick={() => go('flows')} />
            <IconButton icon="more_horiz" label="Más" size="sm" />
          </div>
        </div>

        <div className="ws-scroll" style={{ padding: '20px 24px 0' }}>
          <div className="ws-stack">
            <Panel tone="inset" padding="md" seam eyebrow="Ejecución" title="Qué está haciendo el agente"
              actions={running ? <ThinkingOrb state="searching" size={20} /> : <StatusDot state="success" showLabel />}>
              <ExecutionTrace steps={steps} />
            </Panel>

            <Panel padding="none" seam={!running}
              eyebrow="Output en construcción" title="Propuesta — Automatización comercial v2"
              actions={<>
                <Badge tone="neutral" variant="outline">borrador</Badge>
                <IconButton icon="open_in_full" label="Abrir output" size="sm" onClick={() => go('artifact')} />
              </>}>
              <div style={{ padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div>
                  <h2 style={{ font: 'var(--type-h3)', letterSpacing: 'var(--tracking-tight)' }}>Automatización del ciclo comercial</h2>
                  <p style={{ font: 'var(--type-body-sm)', color: 'var(--text-muted)', marginTop: 8 }}>ACME Industrial · preparado el 11 de agosto de 2026</p>
                </div>
                <p style={{ font: 'var(--type-body)', color: 'var(--text-secondary)', maxWidth: '68ch' }}>
                  Hoy cada propuesta requiere reunir precios, histórico del cliente y condiciones de tres
                  sistemas distintos. El tiempo medio es de 5,5 días y el margen se decide sin visibilidad
                  completa. Proponemos un sistema en tres fases que deja la redacción y la aprobación
                  dentro de un único flujo.
                </p>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: 12 }}>
                  {[['Fase 1', 'Contexto y catálogo', '2 semanas'], ['Fase 2', 'Agente de propuestas', '3 semanas'], ['Fase 3', 'Aprobación por márgenes', '2 semanas']].map(([p, t, d]) => (
                    <div key={p} style={{ padding: '13px 14px', borderRadius: 'var(--radius-md)', background: 'var(--surface-2)', border: '1px solid var(--border-subtle)' }}>
                      <span className="eg-eyebrow">{p}</span>
                      <div style={{ font: 'var(--type-caption)', marginTop: 8 }}>{t}</div>
                      <div style={{ font: 'var(--type-mono-sm)', color: 'var(--text-muted)', marginTop: 5 }}>{d}</div>
                    </div>
                  ))}
                </div>
                {running && <div style={{ paddingTop: 4 }}><Skeleton variant="text" lines={3} /></div>}
              </div>
            </Panel>
          </div>
        </div>

        <div style={{ flex: 'none', padding: '14px 24px 18px', borderTop: '1px solid var(--border-subtle)', background: 'var(--surface-1)' }}>
          <div style={{ position: 'relative' }}>
            <Textarea rows={2} placeholder="Pide un cambio, añade una restricción o pregunta por el contexto…" />
            <div className="ws-row" style={{ justifyContent: 'space-between', marginTop: 10 }}>
              <div className="ws-row" style={{ gap: 7 }}>
                <Button size="sm" variant="ghost" icon="attach_file">Adjuntar</Button>
                <Button size="sm" variant="ghost" icon="alternate_email">Agente</Button>
                <span style={{ font: 'var(--type-mono-sm)', color: 'var(--text-muted)' }}>usa el contexto de ACME · Automatización comercial</span>
              </div>
              <Button size="sm" icon="send" onClick={() => notify({ tone: 'running', title: 'Instrucción enviada', description: 'Propuestas Agent la aplicará al borrador actual' })}>Enviar</Button>
            </div>
          </div>
        </div>
      </section>

      <aside className="ws-col ws-col--right">
        <div className="ws-subbar" style={{ padding: '0 12px' }}>
          <Tabs variant="pill" activeId={tab} onChange={setTab} tabs={[{ id: 'insights', label: 'Insights' }, { id: 'outputs', label: 'Outputs' }, { id: 'historial', label: 'Historial' }]} />
        </div>
        <div className="ws-col-scroll ws-stack">
          {tab === 'insights' && <>
            <Callout tone="info" title="3 hallazgos del contexto">
              El agente encontró información que cambia el alcance propuesto.
            </Callout>
            {[['El descuento medio aplicado supera la política vigente en 4 de 10 pedidos', 'Tarifas 2026 · histórico de pedidos'],
              ['El 62% del tiempo de propuesta se gasta en reunir datos, no en decidir', 'Transcripción 8 ago · procesos v3'],
              ['Dos sistemas mantienen precios distintos para el mismo SKU', 'ERP · catálogo comercial']].map(([t, src]) => (
              <div key={t} style={{ padding: '13px 14px', borderRadius: 'var(--radius-md)', background: 'var(--surface-2)', border: '1px solid var(--border-subtle)' }}>
                <div className="ws-row" style={{ gap: 8, alignItems: 'flex-start' }}>
                  <span className="eg-icon eg-icon--sm" style={{ color: 'var(--signal-400)', marginTop: 1 }}>lightbulb</span>
                  <span style={{ font: 'var(--type-body-sm)', color: 'var(--text-primary)', lineHeight: 1.5 }}>{t}</span>
                </div>
                <div style={{ font: 'var(--type-mono-sm)', color: 'var(--text-muted)', marginTop: 9, paddingLeft: 24 }}>{src}</div>
              </div>
            ))}
            <div>
              <span className="eg-eyebrow">Acciones</span>
              <div className="ws-stack-sm" style={{ marginTop: 10 }}>
                <Button variant="secondary" size="sm" fullWidth icon="table">Crear tabla de excepciones</Button>
                <Button variant="secondary" size="sm" fullWidth icon="account_tree">Convertir en workflow</Button>
                <Button variant="secondary" size="sm" fullWidth icon="task">Crear tarea para Marta</Button>
              </div>
            </div>
          </>}
          {tab === 'outputs' && <>
            {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>} />
            ))}
          </>}
          {tab === 'historial' && <>
            {[['09:24', 'Ejecución iniciada por Esteban', 'PR'], ['09:18', 'Contexto actualizado: +1 documento', 'AC'], ['08:52', 'Resumen de reunión generado', 'RE'], ['ayer', 'Briefing de industria completado', 'RS']].map(([t, label, code]) => (
              <div key={t + label} className="ws-row" style={{ gap: 10, padding: '9px 0', borderBottom: '1px solid var(--border-subtle)' }}>
                <span style={{ font: 'var(--type-mono-sm)', color: 'var(--text-muted)', width: 40, flex: 'none' }}>{t}</span>
                <span style={{ flex: 1, font: 'var(--type-body-sm)', color: 'var(--text-secondary)' }}>{label}</span>
                <AgentChip name={code} code={code} domain="comms" style={{ height: 22 }} />
              </div>
            ))}
          </>}
        </div>
      </aside>
    </div>
  );
}

Object.assign(window, { ScreenAgentWork });