// Command center. Answers four questions in order: what is running, what needs me,
// what did the agents do, what could be automated.
function ScreenHome({ go, notify, openPalette }) {
  const { Panel, Card, Button, IconButton, Badge, StatusDot, MetricTile, Sparkline, SpectrumBars,
          DataTable, ActivityFeed, AiSuggestion, AgentChip, Checkbox, ProgressBar, Tabs } = window.EG;
  const D = window.EGData;
  const [scope, setScope] = React.useState('mios');

  const stateBadge = s => s === 'running' ? <Badge tone="signal" icon="bolt">Ejecutando</Badge>
    : s === 'review' ? <Badge tone="warning">Revisión</Badge>
    : s === 'error' ? <Badge tone="danger">Error</Badge>
    : <Badge tone="success">Completado</Badge>;

  return (
    <div className="ws-pad ws-stack">
      <div className="ws-row" style={{ justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16 }}>
        <div>
          <span className="eg-eyebrow">Martes 11 de agosto · 09:24</span>
          <h1 className="ws-h1" style={{ marginTop: 10 }}>Buenos días, Esteban.</h1>
        </div>
        <div className="ws-row" style={{ gap: 10 }}>
          <Tabs variant="pill" activeId={scope} onChange={setScope} tabs={[{ id: 'mios', label: 'Mi trabajo' }, { id: 'equipo', label: 'Equipo' }]} />
          <Button variant="secondary" size="sm" icon="add">Nuevo proyecto</Button>
        </div>
      </div>

      <button type="button" className="ws-ask" onClick={openPalette}>
        <span className="eg-icon" style={{ color: 'var(--accent-text)' }}>auto_awesome</span>
        <span style={{ flex: 1, textAlign: 'left' }}>¿Qué quieres hacer?</span>
        <span className="ws-row" style={{ gap: 4 }}>
          <span style={{ display: 'inline-grid', placeItems: 'center', minWidth: 22, height: 22, padding: '0 6px', borderRadius: 'var(--radius-xs)', background: 'var(--surface-3)', border: '1px solid var(--border-default)', font: 'var(--type-mono-sm)' }}>
            <span className="eg-icon" style={{ fontSize: 13 }}>keyboard_command_key</span>
          </span>
          <span style={{ display: 'inline-grid', placeItems: 'center', minWidth: 22, height: 22, borderRadius: 'var(--radius-xs)', background: 'var(--surface-3)', border: '1px solid var(--border-default)', font: 'var(--type-mono-sm)' }}>K</span>
        </span>
      </button>

      <div className="ws-grid-3">
        {[['Ejecuciones esta semana', '84', '+18%', 'up', [9, 12, 10, 15, 18, 14, 20]],
          ['Horas recuperadas / mes', '146', '+11%', 'up', [88, 96, 104, 118, 126, 138, 146]],
          ['Pendientes de revisión', '5', '−2', 'down', [9, 8, 7, 8, 6, 6, 5]]].map(([label, value, delta, dir, pts]) => (
          <MetricTile key={label} label={label} value={value} delta={delta} deltaDirection={dir}
            chart={<Sparkline points={pts} width={140} height={26} tone={label[0] === 'P' ? 'signal' : 'accent'} />} />
        ))}
      </div>

      <div>
        <div className="ws-row" style={{ justifyContent: 'space-between', marginBottom: 12 }}>
          <span className="eg-eyebrow">Continuar trabajando</span>
          <Button variant="ghost" size="sm" iconRight="chevron_right" onClick={() => go('project')}>Todos los proyectos</Button>
        </div>
        <div className="ws-grid-3">
          {D.projects.slice(0, 3).map((p, i) => (
            <Card key={p.id} interactive seam={i === 0} onClick={() => go(i === 0 ? 'project' : 'clients')} padding="15px 16px">
              <div className="ws-row" style={{ justifyContent: 'space-between' }}>
                <span style={{ font: 'var(--type-mono-sm)', color: 'var(--text-tertiary)' }}>{p.client}</span>
                <Badge tone={p.state === 'Implementación' ? 'success' : 'neutral'} variant="quiet">{p.state}</Badge>
              </div>
              <h3 style={{ font: 'var(--type-h5)', margin: '10px 0 14px' }}>{p.name}</h3>
              <ProgressBar value={p.progress} size="sm" tone={i === 0 ? 'ribbon' : 'accent'} />
              <div className="ws-row" style={{ justifyContent: 'space-between', marginTop: 12 }}>
                <span style={{ font: 'var(--type-mono-sm)', color: 'var(--text-muted)' }}>{p.agents} agentes · {p.progress}%</span>
                <span style={{ font: 'var(--type-mono-sm)', color: 'var(--text-muted)' }}>{p.due}</span>
              </div>
            </Card>
          ))}
        </div>
      </div>

      <div className="ws-grid-2">
        <div className="ws-stack">
          <Panel eyebrow="Ejecuciones recientes" title="Qué han hecho los agentes" padding="none" seam
            actions={<><IconButton icon="filter_list" label="Filtrar" size="sm" /><IconButton icon="open_in_full" label="Ampliar" size="sm" onClick={() => go('agent')} /></>}
            footer={<Button variant="ghost" size="sm" iconRight="chevron_right" onClick={() => go('agent')}>Ver historial completo</Button>}>
            <DataTable dense onRowClick={() => go('agent')} rows={D.executions}
              columns={[
                { key: 'name', label: 'Ejecución' },
                { key: 'agent', label: 'Agente', width: 150, render: r => <AgentChip name={r.agent} code={r.agent} domain={r.domain} running={r.state === 'running'} /> },
                { key: 'client', label: 'Cliente', width: 150, muted: true },
                { key: 'state', label: 'Estado', width: 128, render: r => stateBadge(r.state) },
                { key: 'time', label: 'Duración', width: 84, mono: true, align: 'right' }
              ]} />
          </Panel>

          <Panel eyebrow="Actividad" title="Hoy en el estudio" padding="md">
            <div className="ws-row" style={{ gap: 14, marginBottom: 14, paddingBottom: 14, borderBottom: '1px solid var(--border-subtle)' }}>
              <SpectrumBars animated height={26} count={20} />
              <div>
                <div style={{ font: 'var(--type-caption)' }}>4 agentes trabajando ahora</div>
                <div style={{ font: 'var(--type-mono-sm)', color: 'var(--text-muted)', marginTop: 3 }}>2 en ACME · 1 en Nordika · 1 en Vector Salud</div>
              </div>
              <StatusDot state="running" showLabel style={{ marginLeft: 'auto' }} />
            </div>
            <ActivityFeed items={D.activity} />
          </Panel>
        </div>

        <div className="ws-stack">
          <Panel eyebrow="Sugerencias" title="Qué se puede automatizar" padding="md">
            <div className="ws-stack-sm">
              {D.suggestions.map(s => (
                <AiSuggestion key={s.title} title={s.title} description={s.desc} evidence={s.evidence}
                  onDismiss={() => {}}
                  actions={<>
                    <Button size="sm" variant="quiet" icon="bolt" onClick={() => { notify({ tone: 'running', title: 'Ejecución iniciada', description: s.action }); go('agent'); }}>{s.action}</Button>
                    <Button size="sm" variant="ghost">Ver detalle</Button>
                  </>} />
              ))}
            </div>
          </Panel>

          <Panel eyebrow="Tareas" title="Necesita tu atención" padding="md"
            actions={<Badge tone="warning" variant="quiet">3 abiertas</Badge>}>
            <ul className="ws-list ws-stack-sm">
              {D.tasks.map(t => (
                <li key={t.label} className="ws-row" style={{ gap: 10, opacity: t.done ? 0.5 : 1 }}>
                  <Checkbox checked={t.done} onChange={() => {}} />
                  <span style={{ flex: 1, minWidth: 0 }}>
                    <span style={{ display: 'block', font: 'var(--type-body-sm)', textDecoration: t.done ? 'line-through' : 'none' }}>{t.label}</span>
                    <span style={{ display: 'block', font: 'var(--type-mono-sm)', color: 'var(--text-muted)', marginTop: 3 }}>{t.meta}</span>
                  </span>
                </li>
              ))}
            </ul>
          </Panel>

          <Panel eyebrow="Clientes activos" title="Con actividad esta semana" padding="none"
            footer={<Button variant="ghost" size="sm" iconRight="chevron_right" onClick={() => go('clients')}>Ver todos</Button>}>
            <ul className="ws-list">
              {D.clients.map(c => (
                <li key={c.id}>
                  <button type="button" onClick={() => go('clients')} style={{ display: 'flex', alignItems: 'center', gap: 11, width: '100%', padding: '11px 16px', background: 'transparent', border: 0, borderBottom: '1px solid var(--border-subtle)', textAlign: 'left' }}>
                    <span style={{ width: 26, height: 26, flex: 'none', display: 'grid', placeItems: 'center', borderRadius: 'var(--radius-xs)', background: 'var(--surface-3)', border: '1px solid var(--border-subtle)', font: 'var(--type-mono-sm)', fontSize: 10, color: 'var(--text-secondary)' }}>{c.code}</span>
                    <span style={{ flex: 1, minWidth: 0 }}>
                      <span style={{ display: 'block', font: 'var(--type-body-sm)' }}>{c.name}</span>
                      <span style={{ display: 'block', font: 'var(--type-mono-sm)', color: 'var(--text-muted)', marginTop: 2 }}>{c.projects} proyectos · contexto {c.context}%</span>
                    </span>
                    {c.health === 'warn' && <span className="eg-icon eg-icon--sm" style={{ color: 'var(--warning)' }}>warning</span>}
                    <span style={{ font: 'var(--type-mono-sm)', color: 'var(--text-muted)' }}>{c.activity}</span>
                  </button>
                </li>
              ))}
            </ul>
          </Panel>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenHome });