/* global React, SaoriIcons, SaoriShell */
const Ic2 = SaoriIcons;
const { KpiCard, IntegrationCard, StatusChip, ChannelDot, Sparkline } = SaoriShell;

/* ============================================================
   PANTALLA 1 — Inicio / Dashboard
   ============================================================ */
function ScreenInicio({ onNavigate, toast }) {
  const [active, setActive] = React.useState(0);
  const conversations = [
    { name: 'Paola Gutiérrez', preview: 'Hola, ¿tienen disponibilidad para este fin de semana?', time: '11:32', channel: 'whatsapp', unread: 2, initials: 'PG', tone: '#F472B6' },
    { name: 'Carlos Mendoza',  preview: '¿El check-in es a partir de qué hora?',                  time: '11:15', channel: 'messenger', unread: 1, initials: 'CM', tone: '#60A5FA' },
    { name: 'Mariana López',   preview: 'Vi su promoción de verano, ¿aplica para 2 noches?',      time: '10:58', channel: 'instagram', unread: 0, initials: 'ML', tone: '#A78BFA' },
    { name: 'Jorge Ramírez',   preview: 'Requiero factura de mi estancia del 5 al 7 de junio.',   time: '10:21', channel: 'email', unread: 1, initials: 'JR', tone: '#FB7185' },
    { name: 'Lucía Fernández', preview: '¿Tienen servicio de transporte al aeropuerto?',          time: '09:45', channel: 'whatsapp', unread: 0, initials: 'LF', tone: '#34D399' },
  ];

  return (
    <div className="page fade-in">
      {/* KPIs */}
      <div className="kpis">
        <KpiCard label="Conversaciones activas" value="48" icon={Ic2.MessageSquare} iconTone="violet" delta="18%" deltaTone="up" spark={[2,4,3,5,4,6,5,7,5,8,9,8]} />
        <KpiCard label="Leads nuevos" value="32" icon={Ic2.UserPlus} iconTone="sky" delta="12%" deltaTone="up" spark={[3,4,5,4,6,5,7,6,8,7,9,8]} />
        <KpiCard label="Reservas potenciales" value="15" icon={Ic2.Calendar} iconTone="mint" delta="25%" deltaTone="up" spark={[2,3,2,4,3,5,4,6,5,7,6,8]} />
        <KpiCard label="Campañas pendientes" value="7" icon={Ic2.Megaphone} iconTone="peach" delta="2" deltaTone="flat" deltaSub="vs ayer" spark={[3,4,5,4,5,4,5,6,5,5,6,5]} />
        <KpiCard label="Handoff humano" value="6" icon={Ic2.Users} iconTone="rose" delta="25%" deltaTone="down" spark={[8,7,8,6,7,5,6,5,4,5,4,3]} />
      </div>

      {/* Main grid */}
      <div style={{ display: 'grid', gridTemplateColumns: '360px 1fr 320px', gap: 16 }}>
        {/* Inbox list */}
        <div className="card" style={{ overflow: 'hidden' }}>
          <div className="card__header" style={{ padding: '14px 18px' }}>
            <div className="card__title">Inbox omnicanal</div>
            <div className="row gap-8">
              <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><Ic2.Filter size={15}/></button>
              <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><Ic2.Search size={15}/></button>
            </div>
          </div>
          <div className="tabs">
            <div className="tab tab--active">Todas <span className="tab__count">48</span></div>
            <div className="tab">No leídas <span className="tab__count">12</span></div>
            <div className="tab">Mías <span className="tab__count">8</span></div>
          </div>
          <div className="conv-list">
            {conversations.map((c, i) => (
              <div key={i} className={'conv-item' + (active === i ? ' conv-item--active' : '')} onClick={() => setActive(i)}>
                <div className="avatar" style={{ background: c.tone }}>
                  {c.initials}
                  <ChannelDot kind={c.channel} size={16} />
                </div>
                <div className="col" style={{ minWidth: 0 }}>
                  <div className="row row--between">
                    <div className="conv-item__name">{c.name}</div>
                    <div className="conv-item__time">{c.time}</div>
                  </div>
                  <div className="conv-item__preview">{c.preview}</div>
                </div>
                {c.unread > 0 && <div className="conv-item__unread">{c.unread}</div>}
              </div>
            ))}
          </div>
          <button type="button" style={{ width: '100%', padding: '14px 0', color: 'var(--text-muted)', fontSize: 13, fontWeight: 500, borderTop: '1px solid var(--border)' }}>
            Ver más conversaciones
          </button>
        </div>

        {/* Conversation thread */}
        <div className="card" style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
          <div className="thread__header">
            <div className="thread__contact">
              <div className="avatar" style={{ background: '#F472B6' }}>
                PG
                <ChannelDot kind="whatsapp" size={16} />
              </div>
              <div className="col">
                <div className="thread__contact-name">Paola Gutiérrez</div>
                <div className="row gap-6 muted text-sm"><Ic2.ChWhatsapp size={13} /> WhatsApp · <span className="row gap-4"><span className="dot-pulse"></span> En línea</span></div>
              </div>
            </div>
            <div className="row gap-8">
              <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><Ic2.Star size={15}/></button>
              <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><Ic2.Tag size={15}/></button>
              <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><Ic2.Check size={15}/></button>
              <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><Ic2.MoreVertical size={15}/></button>
            </div>
          </div>
          <div className="thread__messages">
            <div className="day-divider">Hoy</div>
            <div className="bubble bubble--in">
              Hola, ¿tienen disponibilidad para este fin de semana? Somos 2 adultos.
              <span className="bubble__time">11:31 AM</span>
            </div>
            <div className="bubble bubble--out">
              ¡Hola Paola! 👋<br/>
              Con gusto te ayudo a revisar la disponibilidad para este fin de semana. Permíteme un momento, por favor.
              <span className="bubble__time">11:32 AM ✓✓</span>
            </div>
            <div className="bubble bubble--in">
              Perfecto, también me gustaría saber si tienen desayuno incluido y si hay estacionamiento.
              <span className="bubble__time">11:33 AM</span>
            </div>
          </div>
          <div className="composer">
            <div className="composer__tabs">
              <div className="tab tab--active" style={{ padding: '8px 0' }}>Responder</div>
              <div className="tab" style={{ padding: '8px 0' }}>Nota interna</div>
            </div>
            <div className="composer__inner">
              <input className="composer__input" placeholder="Escribe tu mensaje..." />
              <div className="composer__actions">
                <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><Ic2.Smile size={16}/></button>
                <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><Ic2.Paperclip size={16}/></button>
                <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><Ic2.Bookmark size={16}/></button>
                <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><Ic2.Zap size={16}/></button>
                <button type="button" className="btn btn--primary" style={{ marginLeft: 'auto' }}>Enviar <Ic2.ChevronDown size={14}/></button>
              </div>
            </div>
          </div>
        </div>

        {/* AI panel */}
        <div className="card" style={{ alignSelf: 'flex-start' }}>
          <div className="card__header" style={{ padding: '16px 18px' }}>
            <div className="card__title">
              <div className="icon-chip icon-chip--violet"><Ic2.Sparkles size={16}/></div>
              <div className="col">
                <span>Asistente IA</span>
                <span className="muted text-sm" style={{ fontWeight: 400 }}>Copiloto inteligente</span>
              </div>
            </div>
            <span className="badge badge--violet">IA</span>
          </div>
          <div className="card__body" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div>
              <div className="muted text-sm fw-500" style={{ marginBottom: 8 }}>Resumen de la conversación</div>
              <div style={{ background: 'var(--violet-50)', borderRadius: 10, padding: '10px 12px', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <div className="icon-chip" style={{ background: '#fff', color: 'var(--violet-600)', width: 30, height: 30 }}><Ic2.MessageSquare size={15}/></div>
                <span className="text-md">El cliente pregunta disponibilidad para este fin de semana</span>
              </div>
            </div>
            <div>
              <div className="row row--between" style={{ marginBottom: 8 }}>
                <span className="muted text-sm fw-500">Herramienta sugerida</span>
                <SaoriShell.StatusChip state="disenado" />
              </div>
              <div style={{ background: 'var(--mint-50)', borderRadius: 10, padding: '10px 12px', display: 'flex', gap: 10, alignItems: 'center' }}>
                <div className="icon-chip" style={{ background: '#fff', color: 'var(--mint-600)', width: 30, height: 30 }}><Ic2.Wrench size={15}/></div>
                <span className="text-md"><b className="mono-token">virtualia.pms.getAvailability</b> · read-only</span>
                {/* token con tipografía mono per BRAND.md */}
              </div>
            </div>
            <div>
              <div className="muted text-sm fw-500" style={{ marginBottom: 8 }}>Siguiente acción sugerida</div>
              <div style={{ background: 'var(--violet-50)', borderRadius: 10, padding: '10px 12px', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <div className="icon-chip" style={{ background: '#fff', color: 'var(--violet-600)', width: 30, height: 30 }}><Ic2.ArrowRight size={15}/></div>
                <span className="text-md">Siguiente acción: enviar cotización y pasar a recepción</span>
              </div>
            </div>
            <div className="row gap-10">
              <button type="button" className="btn btn--ghost btn--block" onClick={() => toast('Marcado como útil')}><Ic2.ThumbsUp size={14}/> Útil</button>
              <button type="button" className="btn btn--violet-soft btn--block" onClick={() => { toast('Acción aplicada'); onNavigate('agentes'); }}>Aplicar acción <Ic2.ArrowRight size={14}/></button>
            </div>
          </div>
        </div>
      </div>

      {/* Estado honesto de integraciones · vocabulario BRAND.md (nada conectado en runtime) */}
      <div>
        <div className="row row--between" style={{ marginBottom: 10 }}>
          <div className="muted text-sm fw-600">Estado de integraciones</div>
          <span className="muted text-sm">Demo visual · sin conexiones reales</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 14 }}>
          <IntegrationCard icon={Ic2.Calendar} iconTone="mint" title="Virtualia PMS" sub="Tools read-only" state="disenado" />
          <IntegrationCard icon={Ic2.Utensils} iconTone="violet" title="Virtualia Restaurant" sub="Integración por API" state="proxima-fase" />
          <IntegrationCard icon={Ic2.MessageSquare} iconTone="mint" title="Inbox omnicanal" sub="Motor Chatwoot" state="demo" />
          <IntegrationCard icon={Ic2.Brain} iconTone="violet" title="Agente IA · copiloto" sub="Solo sugerencias" state="demo" />
          <IntegrationCard icon={Ic2.Megaphone} iconTone="peach" title="Publicaciones" sub="Borradores" state="proxima-fase" />
          <IntegrationCard icon={Ic2.ShieldCheck} iconTone="violet" title="Aprobaciones" sub="2 en cola" state="requiere-aprobacion" />
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   PANTALLA 2 — Agente comercial · Workbench + Seguridad
   ============================================================ */
function RiskChip({ level }) {
  const m = { bajo: ['badge--green', 'Riesgo bajo'], medio: ['badge--peach', 'Riesgo medio'], alto: ['badge--rose', 'Riesgo alto'] };
  const [cls, label] = m[level] || m.bajo;
  return <span className={'badge ' + cls}><Ic2.Gauge size={12}/> {label}</span>;
}

function ScreenAgente({ toast }) {
  const [tab, setTab] = React.useState('workbench');

  const tabs = [
    { id: 'workbench',    label: 'Workbench',    icon: Ic2.Bot },
    { id: 'aprobaciones', label: 'Aprobaciones', icon: Ic2.ShieldCheck, count: 2 },
    { id: 'auditoria',    label: 'Auditoría',    icon: Ic2.FileText },
  ];

  /* Pipeline obligatorio · superreadme §11.5 (Operational Safety Model) */
  const pipeline = [
    { icon: Ic2.Shield,      tone: 'sky',    name: 'Input guard',       desc: 'Filtra PII y entradas inseguras' },
    { icon: Ic2.Brain,       tone: 'violet', name: 'Intent',            desc: 'Detecta intención: disponibilidad' },
    { icon: Ic2.Gauge,       tone: 'mint',   name: 'Risk',              desc: 'Riesgo bajo · acción reversible' },
    { icon: Ic2.Wrench,      tone: 'mint',   name: 'Tool selector',     desc: 'Allowlist del tenant · read-only' },
    { icon: Ic2.Bot,         tone: 'violet', name: 'Agent',             desc: 'Redacta sugerencia (no la envía)' },
    { icon: Ic2.ShieldCheck, tone: 'sky',    name: 'Output validator',  desc: 'Valida tono y políticas' },
    { icon: Ic2.UserPlus,    tone: 'peach',  name: 'Handoff / approval', desc: 'Espera checkpoint humano', now: true },
  ];

  const approvals = [
    { id: 'A1', title: 'Enviar cotización a Paola Gutiérrez', source: 'agente.comercial', risk: 'bajo', sensitive: false,
      summary: 'Vista mar · 2 noches · $6,400 MXN. Incluye desayuno y estacionamiento.' },
    { id: 'A2', title: 'Crear borrador de reserva', source: 'virtualia.pms.createReservationDraft', risk: 'alto', sensitive: true,
      summary: 'Toca inventario y condiciones comerciales. Debe confirmarlo recepción antes de cualquier cargo.' },
    { id: 'A3', title: 'Sugerir promoción de temporada baja', source: 'marketing.suggestPromo', risk: 'medio', sensitive: false,
      summary: 'Descuento 15% entre semana para leads sin respuesta > 48 h. Solo se envía si se aprueba.' },
  ];

  const audit = [
    { t: '11:42:03', who: 'Agente IA',      act: 'tool.call',        tool: 'virtualia.pms.getAvailability', risk: 'bajo', res: '2 resultados',       cost: '$0.004' },
    { t: '11:42:05', who: 'Agente IA',      act: 'tool.call',        tool: 'virtualia.pms.getRates',        risk: 'bajo', res: 'OK',                 cost: '$0.003' },
    { t: '11:43:10', who: 'Agente IA',      act: 'lead.create',      tool: 'hub.leads.create',              risk: 'bajo', res: 'lead #L2',           cost: '—' },
    { t: '11:44:00', who: 'Agente IA',      act: 'suggestion',       tool: 'agent.compose',                 risk: 'bajo', res: 'borrador sugerido',  cost: '$0.012' },
    { t: '11:45:21', who: 'Ana Martínez',   act: 'approval.approve', tool: 'agente.comercial',              risk: '—',    res: 'cotización enviada', cost: '—' },
    { t: '11:46:02', who: 'Ana Martínez',   act: 'handoff',          tool: 'hub.handoff',                   risk: '—',    res: '→ Recepción',        cost: '—' },
  ];

  return (
    <div className="page fade-in">
      <div className="page-header__row">
        <div className="page-header">
          <h1>Agente comercial</h1>
          <p>Copiloto que <b>sugiere</b>; las acciones sensibles las <b>aprueba una persona</b></p>
        </div>
        <div className="page-header__actions">
          {tabs.map(t => (
            <button key={t.id} type="button"
              className={'btn btn--sm ' + (tab === t.id ? 'btn--violet-soft' : 'btn--ghost')}
              onClick={() => setTab(t.id)}>
              <t.icon size={14}/> {t.label}{t.count ? <span className="tab__count" style={{ marginLeft: 4 }}>{t.count}</span> : null}
            </button>
          ))}
        </div>
      </div>

      <div className="banner banner--violet">
        <div className="banner__icon"><Ic2.ShieldCheck size={18}/></div>
        <span>Modelo de seguridad operacional: el agente solo actúa por <b>tools read-only de allowlist</b>; todo lo que toca dinero, inventario, reservas o campañas pasa por <b>checkpoint humano</b>. <span className="muted">Demo visual.</span></span>
      </div>

      {/* ---------- WORKBENCH ---------- */}
      {tab === 'workbench' && (
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
        {/* Col 1 — Conversation */}
        <div className="card" style={{ display: 'flex', flexDirection: 'column' }}>
          <div className="card__header">
            <div className="card__title">Conversación activa</div>
            <span className="badge" style={{ background: 'var(--green-50)', color: '#15803D' }}>
              <Ic2.ChWhatsapp size={13}/> WhatsApp
            </span>
          </div>
          <div className="card__body" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div className="row gap-10">
              <div className="avatar" style={{ background: 'var(--violet-300)' }}>CL</div>
              <div className="col" style={{ flex: 1 }}>
                <div className="fw-600 text-md">Cliente nuevo</div>
                <div className="muted text-sm">+52 744 123 4567</div>
              </div>
              <div className="muted text-sm">Hoy, 11:42</div>
              <button type="button" className="icon-btn" style={{ width: 28, height: 28 }}><Ic2.MoreVertical size={14}/></button>
            </div>

            <div className="bubble bubble--in" style={{ alignSelf: 'flex-start', maxWidth: '92%' }}>
              Hola, ¿tienen habitación para este viernes y sábado para 2 personas?
              <span className="bubble__time">11:42</span>
            </div>

            <div className="ai-suggestion-label" style={{ alignSelf: 'flex-end' }}>
              <Ic2.Sparkles size={13}/> Borrador del agente · sin enviar
            </div>
            <div className="bubble bubble--out" style={{ maxWidth: '92%', opacity: 0.96 }}>
              Sí contamos con disponibilidad para esas fechas. ¿Te comparto las opciones y tarifas?
              <span className="bubble__time">Pendiente de aprobación</span>
            </div>

            <div className="row gap-8" style={{ marginTop: 6 }}>
              <button type="button" className="btn btn--primary btn--sm" onClick={() => toast('Borrador aprobado y enviado')}><Ic2.Check size={13}/> Aprobar y enviar</button>
              <button type="button" className="btn btn--secondary btn--sm"><Ic2.Pencil size={13}/> Editar</button>
              <button type="button" className="btn btn--secondary btn--sm" onClick={() => toast('Conversación pasada a recepción')}><Ic2.UserPlus size={13}/> Pasar a recepción</button>
            </div>
          </div>
          <div className="composer">
            <div className="composer__tabs">
              <div className="tab tab--active" style={{ padding: '8px 0' }}>Responder</div>
              <div className="tab" style={{ padding: '8px 0' }}>Nota interna</div>
            </div>
            <div className="composer__inner">
              <input className="composer__input" placeholder="Escribe un mensaje..." />
              <div className="composer__actions">
                <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><Ic2.Smile size={16}/></button>
                <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><Ic2.Paperclip size={16}/></button>
                <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><Ic2.Bookmark size={16}/></button>
                <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><Ic2.Zap size={16}/></button>
                <button type="button" className="composer__send"><Ic2.Send size={15}/></button>
              </div>
            </div>
          </div>
        </div>

        {/* Col 2 — Safety pipeline + summary */}
        <div className="col gap-16">
          <div className="card">
            <div className="card__header">
              <div className="card__title">
                <div className="icon-chip icon-chip--violet" style={{ width: 28, height: 28 }}><Ic2.Shield size={14}/></div>
                Pipeline de seguridad
              </div>
              <span className="muted text-sm">por mensaje</span>
            </div>
            <div className="card__body">
              <div className="action-list">
                {pipeline.map((s, i) => (
                  <div key={i} className="action-row">
                    <div className="action-row__bullet" />
                    <div className={'icon-chip icon-chip--' + s.tone}><s.icon size={15}/></div>
                    <div className="action-row__title"><b>{s.name}</b> <span className="muted">· {s.desc}</span></div>
                    {s.now
                      ? <span className="badge badge--peach">Checkpoint humano</span>
                      : <div className="status-check"><Ic2.Check size={12} strokeWidth={2.6}/></div>}
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card__header">
              <div className="card__title">
                <div className="icon-chip icon-chip--violet" style={{ width: 28, height: 28 }}><Ic2.Sparkles size={14}/></div>
                Resumen inteligente
              </div>
            </div>
            <div className="card__body">
              <div className="col gap-12">
                {[
                  'Cliente nuevo interesado en estancia de fin de semana',
                  'Disponibilidad y tarifa consultadas por tools read-only',
                  'Lead registrado en el Hub',
                  'Siguiente paso: aprobar cotización y pasar a recepción',
                ].map((t, i) => (
                  <div key={i} className="row gap-10" style={{ alignItems: 'flex-start' }}>
                    <div className="status-check" style={{ marginTop: 1 }}><Ic2.Check size={12} strokeWidth={2.6}/></div>
                    <span className="text-md">{t}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Col 3 — Lead + recommended action + read-only tools */}
        <div className="col gap-16">
          <div className="card">
            <div className="card__header">
              <div className="card__title">
                <div className="icon-chip icon-chip--violet" style={{ width: 28, height: 28 }}><Ic2.UserPlus size={14}/></div>
                Lead generado
              </div>
              <span className="badge badge--violet">IA</span>
            </div>
            <div className="card__body">
              <div className="kv-list">
                <div className="kv-row"><span className="kv-row__k">Nombre</span><span className="kv-row__v">Cliente nuevo</span></div>
                <div className="kv-row"><span className="kv-row__k">Canal</span><span className="kv-row__v"><Ic2.ChWhatsapp size={13}/> WhatsApp</span></div>
                <div className="kv-row"><span className="kv-row__k">Interés</span><span className="kv-row__v">Habitación fin de semana</span></div>
                <div className="kv-row"><span className="kv-row__k">Estado</span><span className="badge badge--violet">Cotización sugerida</span></div>
                <div className="kv-row"><span className="kv-row__k">Responsable</span><span className="kv-row__v">Recepción</span></div>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card__header">
              <div className="card__title">
                <div className="icon-chip icon-chip--mint" style={{ width: 28, height: 28 }}><Ic2.Wrench size={14}/></div>
                Tools usadas
              </div>
              <StatusChip state="disenado" />
            </div>
            <div className="card__body">
              <div className="col gap-10">
                {[
                  { tool: 'virtualia.pms.getRoomTypes',   icon: Ic2.Building },
                  { tool: 'virtualia.pms.getAvailability', icon: Ic2.Calendar },
                  { tool: 'virtualia.pms.getRates',        icon: Ic2.Tag },
                  { tool: 'hub.leads.create',              icon: Ic2.UserPlus },
                ].map((it, i) => (
                  <div key={i} className="row gap-10">
                    <div className="icon-chip icon-chip--mint" style={{ width: 28, height: 28 }}><it.icon size={14}/></div>
                    <span className="mono-token" style={{ flex: 1, minWidth: 0 }}>{it.tool}</span>
                    <span className="badge badge--green" style={{ fontSize: 11 }}>read-only</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card__header">
              <div className="card__title">
                <div className="icon-chip icon-chip--violet" style={{ width: 28, height: 28 }}><Ic2.Sparkles size={14}/></div>
                Acción recomendada
              </div>
            </div>
            <div className="card__body">
              <div className="numbered" style={{ marginBottom: 16 }}>
                <div className="numbered__item"><span className="numbered__num">1</span><span className="numbered__text">Aprobar y enviar cotización</span></div>
                <div className="numbered__item"><span className="numbered__num">2</span><span className="numbered__text">Dar seguimiento en 2 horas</span></div>
                <div className="numbered__item"><span className="numbered__num">3</span><span className="numbered__text">Si no responde, sugerir promoción de temporada baja</span></div>
              </div>
              <button type="button" className="btn btn--primary btn--block btn--lg" onClick={() => setTab('aprobaciones')}>
                <Ic2.ShieldCheck size={15}/> Revisar en Aprobaciones
              </button>
            </div>
          </div>
        </div>
      </div>
      )}

      {/* ---------- APROBACIONES ---------- */}
      {tab === 'aprobaciones' && (
      <div className="col gap-16">
        <div className="banner" style={{ background: 'var(--bg-soft)', border: '1px solid var(--border)' }}>
          <div className="banner__icon" style={{ background: '#fff', color: 'var(--violet-600)' }}><Ic2.Users size={18}/></div>
          <span>El agente <b>sugiere</b>; una persona <b>aprueba, edita, rechaza o pasa a humano</b>. Nunca se oculta si una acción toca dinero, inventario, reservas o campañas.</span>
        </div>
        {approvals.map(a => (
          <div key={a.id} className="card" style={a.sensitive ? { borderColor: '#FBCFE8' } : null}>
            <div className="card__header">
              <div className="card__title">
                <div className={'icon-chip ' + (a.sensitive ? 'icon-chip--rose' : 'icon-chip--violet')} style={{ width: 28, height: 28 }}>
                  {a.sensitive ? <Ic2.AlertTriangle size={14}/> : <Ic2.Sparkles size={14}/>}
                </div>
                {a.title}
              </div>
              <RiskChip level={a.risk} />
            </div>
            <div className="card__body">
              <div className="row gap-16" style={{ flexWrap: 'wrap', marginBottom: 12 }}>
                <div className="col"><span className="muted text-sm">Fuente / tool</span><span className="mono-token">{a.source}</span></div>
                <div className="col"><span className="muted text-sm">Origen</span><span className="text-md fw-500">Conversación · Agente comercial</span></div>
              </div>
              <div style={{ background: a.sensitive ? 'var(--rose-50)' : 'var(--bg-soft)', border: '1px solid var(--border)', borderRadius: 10, padding: '10px 12px', marginBottom: 14 }}>
                <span className="text-md">{a.summary}</span>
                {a.sensitive && <div className="row gap-6" style={{ marginTop: 8, color: 'var(--rose-600)' }}><Ic2.Lock size={13}/> <span className="text-sm fw-600">Acción sensible · requiere recepción</span></div>}
              </div>
              <div className="row gap-8" style={{ flexWrap: 'wrap' }}>
                <button type="button" className="btn btn--primary btn--sm" disabled={a.sensitive} onClick={() => toast('Acción aprobada y auditada')}><Ic2.Check size={13}/> Aprobar</button>
                <button type="button" className="btn btn--secondary btn--sm"><Ic2.Pencil size={13}/> Editar</button>
                <button type="button" className="btn btn--ghost btn--sm" onClick={() => toast('Acción rechazada')}><Ic2.X size={13}/> Rechazar</button>
                <button type="button" className="btn btn--secondary btn--sm" onClick={() => toast('Pasado a recepción')}><Ic2.UserPlus size={13}/> Pasar a humano</button>
              </div>
            </div>
          </div>
        ))}
      </div>
      )}

      {/* ---------- AUDITORÍA ---------- */}
      {tab === 'auditoria' && (
      <div className="card">
        <div className="card__header">
          <div className="card__title">
            <div className="icon-chip icon-chip--violet" style={{ width: 28, height: 28 }}><Ic2.FileText size={14}/></div>
            Auditoría · tool_call_logs + audit_logs
          </div>
          <span className="muted text-sm">Logs detallados 7 días en piloto · métricas agregadas más tiempo</span>
        </div>
        <div className="card__body" style={{ paddingTop: 4 }}>
          <table className="audit-table">
            <thead>
              <tr><th>Hora</th><th>Actor</th><th>Acción</th><th>Tool</th><th>Riesgo</th><th>Resultado</th><th>Costo</th></tr>
            </thead>
            <tbody>
              {audit.map((r, i) => (
                <tr key={i}>
                  <td className="mono-token">{r.t}</td>
                  <td>{r.who}</td>
                  <td><span className="badge badge--slate">{r.act}</span></td>
                  <td className="mono-token">{r.tool}</td>
                  <td>{r.risk === '—' ? <span className="muted">—</span> : <RiskChip level={r.risk} />}</td>
                  <td className="muted">{r.res}</td>
                  <td className="mono-token">{r.cost}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
      )}
    </div>
  );
}

window.ScreenInicio = ScreenInicio;
window.ScreenAgente = ScreenAgente;