/* global React, SaoriIcons, SaoriShell */
const Ic4 = SaoriIcons;

/* ============================================================
   PANTALLA 5 — Campañas
   ============================================================ */
function ScreenCampanas({ toast }) {
  const initial = [
    { id: 'C1', title: 'Promo temporada baja',           sub: 'Descuento 20% en estancias entre semana', segment: 'Clientes nuevos · WhatsApp',     channels: ['whatsapp', 'email'],            status: 'pendiente', icon: Ic4.Tag, tone: 'peach' },
    { id: 'C2', title: 'Clientes frecuentes',             sub: 'Beneficio especial para huéspedes recurrentes', segment: 'VIP · Email + WhatsApp',     channels: ['email', 'whatsapp'],            status: 'activa',    icon: Ic4.Star, tone: 'amber' },
    { id: 'C3', title: 'Fin de semana romántico',         sub: 'Paquete con cena + vino para parejas', segment: 'Parejas 28-45 · Instagram',          channels: ['instagram', 'whatsapp'],         status: 'programada', icon: Ic4.Heart, tone: 'rose' },
    { id: 'C4', title: 'Post-estancia · solicitar reseña', sub: 'Encuesta automática al check-out',     segment: 'Reservas completadas · Email',       channels: ['email'],                         status: 'activa',    icon: Ic4.Mail, tone: 'sky' },
  ];

  const [list, setList] = React.useState(initial);
  const [selected, setSelected] = React.useState('C1');
  const sel = list.find(c => c.id === selected);

  const statusBadge = (s) => {
    if (s === 'aprobada') return <span className="badge badge--green">Aprobada</span>;
    if (s === 'activa') return <span className="badge badge--violet">En curso · demo</span>;
    if (s === 'pendiente') return <span className="badge badge--peach">Pendiente de aprobación</span>;
    if (s === 'programada') return <span className="badge badge--violet">Programada</span>;
    return <span className="badge badge--slate">{s}</span>;
  };

  const channelChip = (k) => {
    const map = { whatsapp: { I: Ic4.ChWhatsapp, c: '#16A34A' }, messenger: { I: Ic4.ChMessenger, c: '#1E81E5' }, instagram: { I: Ic4.ChInstagram, c: '#E11D74' }, email: { I: Ic4.ChEmail, c: '#475569' }, webchat: { I: Ic4.ChWebChat, c: '#7C5CF2' } };
    const cfg = map[k] || map.whatsapp;
    return <span className="row gap-6" style={{ padding: '4px 10px', borderRadius: 999, background: 'var(--surface-2)', border: '1px solid var(--border)', fontSize: 12, color: cfg.c, fontWeight: 500 }}><cfg.I size={13}/> {k.charAt(0).toUpperCase() + k.slice(1)}</span>;
  };

  const approve = () => {
    setList(prev => prev.map(c => c.id === selected ? { ...c, status: 'aprobada' } : c));
    toast('Campaña aprobada y lista para programar');
  };

  return (
    <div className="page fade-in">
      <div className="page-header__row">
        <div className="page-header">
          <h1>Campañas</h1>
          <p>Promociones, publicaciones y seguimiento</p>
        </div>
        <div className="page-header__actions">
          <button type="button" className="btn btn--ghost"><Ic4.Filter size={14}/> Filtros</button>
          <button type="button" className="btn btn--primary"><Ic4.Plus size={14}/> Nueva campaña</button>
        </div>
      </div>

      <div className="kpis" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="kpi"><div className="kpi__top"><div className="kpi__label">Campañas activas</div><div className="kpi__icon" style={{background: 'var(--mint-50)', color: 'var(--mint-600)'}}><Ic4.PlayCircle size={16}/></div></div><div className="kpi__value">12</div><div className="kpi__bottom"><div className="kpi__delta kpi__delta--up"><Ic4.ArrowUp size={12}/>3 <span className="kpi__sub">vs semana</span></div><SaoriShell.Sparkline /></div></div>
        <div className="kpi"><div className="kpi__top"><div className="kpi__label">Publicaciones pendientes</div><div className="kpi__icon" style={{background: 'var(--peach-50)', color: 'var(--peach-600)'}}><Ic4.Clock size={16}/></div></div><div className="kpi__value">7</div><div className="kpi__bottom"><div className="kpi__delta kpi__delta--flat"><Ic4.ArrowRight size={12}/>+2</div><SaoriShell.Sparkline /></div></div>
        <div className="kpi"><div className="kpi__top"><div className="kpi__label">Promociones sugeridas</div><div className="kpi__icon" style={{background: 'var(--violet-50)', color: 'var(--violet-600)'}}><Ic4.Sparkles size={16}/></div></div><div className="kpi__value">4</div><div className="kpi__bottom"><div className="kpi__delta kpi__delta--up"><Ic4.ArrowUp size={12}/>2 nuevas</div><SaoriShell.Sparkline /></div></div>
        <div className="kpi"><div className="kpi__top"><div className="kpi__label">Aprobaciones requeridas</div><div className="kpi__icon" style={{background: 'var(--rose-50)', color: 'var(--rose-600)'}}><Ic4.ShieldCheck size={16}/></div></div><div className="kpi__value">3</div><div className="kpi__bottom"><div className="kpi__delta kpi__delta--down"><Ic4.ArrowDown size={12}/>-1</div><SaoriShell.Sparkline /></div></div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 16, alignItems: 'flex-start' }}>
        <div className="card">
          <div className="card__header">
            <div className="card__title">Lista de campañas</div>
            <div className="row gap-8">
              <button type="button" className="btn btn--ghost btn--sm">Todas</button>
              <button type="button" className="btn btn--ghost btn--sm">Activas</button>
              <button type="button" className="btn btn--ghost btn--sm">Pendientes</button>
            </div>
          </div>
          <div>
            {list.map(c => (
              <div key={c.id}
                className={'campaign-row' + (selected === c.id ? ' campaign-row--active' : '')}
                onClick={() => setSelected(c.id)}>
                <div className={'icon-chip icon-chip--lg icon-chip--' + c.tone}><c.icon size={17}/></div>
                <div className="col">
                  <div className="campaign-row__title">{c.title}</div>
                  <div className="campaign-row__sub">{c.segment}</div>
                </div>
                <div className="row gap-6">
                  {c.channels.slice(0, 3).map(ch => <span key={ch} style={{ width: 22, height: 22, borderRadius: 6, background: 'var(--surface-2)', display: 'grid', placeItems: 'center', color: 'var(--text-muted)' }}>{ch === 'whatsapp' ? <Ic4.ChWhatsapp size={12}/> : ch === 'email' ? <Ic4.ChEmail size={12}/> : ch === 'instagram' ? <Ic4.ChInstagram size={12}/> : <Ic4.ChMessenger size={12}/>}</span>)}
                </div>
                {statusBadge(c.status)}
                <button type="button" className="icon-btn" style={{ width: 28, height: 28 }} onClick={e => e.stopPropagation()}><Ic4.MoreVertical size={14}/></button>
              </div>
            ))}
          </div>
        </div>

        {/* Detail */}
        <div className="card" style={{ alignSelf: 'flex-start' }}>
          <div className="card__header">
            <div className="card__title">
              <div className={'icon-chip icon-chip--lg icon-chip--' + sel.tone}><sel.icon size={17}/></div>
              <div className="col">
                <span>{sel.title}</span>
                <span className="muted text-sm" style={{ fontWeight: 400 }}>Detalle de campaña</span>
              </div>
            </div>
          </div>
          <div className="card__body" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div>
              <div className="muted text-sm fw-500" style={{ marginBottom: 8 }}>Objetivo</div>
              <div className="text-md">{sel.sub}.</div>
            </div>

            <div>
              <div className="muted text-sm fw-500" style={{ marginBottom: 8 }}>Segmento</div>
              <div className="text-md">{sel.segment}</div>
            </div>

            <div>
              <div className="muted text-sm fw-500" style={{ marginBottom: 8 }}>Canales</div>
              <div className="row gap-8" style={{ flexWrap: 'wrap' }}>{sel.channels.map(c => <span key={c}>{channelChip(c)}</span>)}</div>
            </div>

            <div>
              <div className="row row--between" style={{ marginBottom: 8 }}>
                <span className="muted text-sm fw-500">Copy sugerido por IA</span>
                <span className="badge badge--violet">IA</span>
              </div>
              <div style={{ background: 'var(--violet-50)', border: '1px solid var(--violet-100)', borderRadius: 12, padding: 14, fontSize: 13.5, lineHeight: 1.55, color: 'var(--text)' }}>
                "Aprovecha la temporada para escaparte sin gastar de más 🌿. Esta semana tenemos <b>20% off</b> en estancias entre semana en Hotel Demo. Reserva directo y disfruta desayuno incluido."
              </div>
              <div className="row gap-8" style={{ marginTop: 8 }}>
                <button type="button" className="btn btn--ghost btn--sm"><Ic4.Refresh size={13}/> Regenerar</button>
                <button type="button" className="btn btn--ghost btn--sm"><Ic4.Pencil size={13}/> Editar copy</button>
              </div>
            </div>

            <div>
              <div className="muted text-sm fw-500" style={{ marginBottom: 8 }}>Estado</div>
              <div>{statusBadge(sel.status)}</div>
            </div>

            <div className="row gap-8">
              <button type="button" className="btn btn--ghost btn--block"><Ic4.Pencil size={14}/> Editar</button>
              <button type="button" className="btn btn--violet-soft btn--block"
                onClick={approve}
                disabled={sel.status === 'aprobada' || sel.status === 'activa'}>
                <Ic4.Check size={14}/> {sel.status === 'aprobada' || sel.status === 'activa' ? 'Aprobada' : 'Aprobar'}
              </button>
              <button type="button" className="btn btn--primary btn--block"><Ic4.Calendar size={14}/> Programar</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   PANTALLA 6 — Configuración del agente
   ============================================================ */
function ScreenConfiguracion({ toast }) {
  const [allowed, setAllowed] = React.useState({
    'consultar': true, 'tarifas': true, 'cliente': true, 'lead': true, 'resumen': true, 'campana': false
  });
  const blocked = [
    { id: 'reserva', title: 'Crear reserva automáticamente', sub: 'Solo el equipo de recepción puede crear reservas finales.' },
    { id: 'pago',    title: 'Registrar pagos',                sub: 'El cobro se gestiona manualmente desde Virtualia PMS.' },
    { id: 'cancel',  title: 'Cancelar reserva',               sub: 'Las cancelaciones requieren validación humana.' },
  ];

  const [channels, setChannels] = React.useState({ whatsapp: true, messenger: true, instagram: true, email: true, webchat: false });
  const [handoff, setHandoff] = React.useState(true);
  const [tone, setTone] = React.useState('Cálido y profesional');

  const tools = [
    { id: 'consultar', icon: Ic4.Calendar, tone: 'mint',   title: 'Consultar disponibilidad', sub: 'Virtualia PMS · solo lectura' },
    { id: 'tarifas',   icon: Ic4.Tag,      tone: 'rose',   title: 'Obtener tarifas',          sub: 'Virtualia PMS · solo lectura' },
    { id: 'cliente',   icon: Ic4.UserSearch, tone: 'sky',  title: 'Buscar cliente',           sub: 'CRM · solo lectura' },
    { id: 'lead',      icon: Ic4.UserPlus, tone: 'violet', title: 'Crear lead',               sub: 'Hub · creación' },
    { id: 'resumen',   icon: Ic4.Sparkles, tone: 'violet', title: 'Resumir conversación',     sub: 'Hub · IA' },
    { id: 'campana',   icon: Ic4.Megaphone, tone: 'peach', title: 'Sugerir campaña',          sub: 'Marketing · sugerencia' },
  ];

  return (
    <div className="page fade-in">
      <div className="page-header__row">
        <div className="page-header">
          <h1>Configuración del agente</h1>
          <p>Personaliza cómo se comporta el agente comercial para Hotel Demo</p>
        </div>
        <div className="page-header__actions">
          <button type="button" className="btn btn--ghost">Restablecer</button>
          <button type="button" className="btn btn--primary" onClick={() => toast('Configuración guardada')}><Ic4.Check size={14}/> Guardar cambios</button>
        </div>
      </div>

      <div className="banner banner--violet">
        <div className="banner__icon"><Ic4.ShieldCheck size={18} /></div>
        <span>El agente puede sugerir acciones, pero <b>requiere aprobación humana</b> para ejecutar cambios sensibles como crear reservas o registrar pagos.</span>
      </div>

      <div className="section-grid-2">
        {/* Personalidad */}
        <div className="card">
          <div className="card__header"><div className="card__title"><div className="icon-chip icon-chip--violet" style={{ width: 28, height: 28 }}><Ic4.Bot size={14}/></div>Personalidad del agente</div></div>
          <div className="card__body" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="col gap-6">
              <label className="muted text-sm fw-500">Nombre del agente</label>
              <input defaultValue="Concierge — Hotel Demo" style={{ padding: '11px 14px', border: '1px solid var(--border)', borderRadius: 10, fontSize: 14, background: 'var(--surface)' }} />
            </div>
            <div className="col gap-6">
              <label className="muted text-sm fw-500">Descripción / rol</label>
              <textarea rows={3} defaultValue="Concierge digital del Hotel Demo. Atiende consultas de disponibilidad, tarifas y servicios, y prepara leads para recepción."
                style={{ padding: '11px 14px', border: '1px solid var(--border)', borderRadius: 10, fontSize: 14, background: 'var(--surface)', resize: 'vertical', fontFamily: 'inherit' }} />
            </div>
          </div>
        </div>

        {/* Tono de marca */}
        <div className="card">
          <div className="card__header"><div className="card__title"><div className="icon-chip icon-chip--rose" style={{ width: 28, height: 28 }}><Ic4.Heart size={14}/></div>Tono de marca</div></div>
          <div className="card__body" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div className="row gap-8" style={{ flexWrap: 'wrap' }}>
              {['Cálido y profesional', 'Cercano y amable', 'Formal', 'Aspiracional'].map(t => (
                <button key={t} type="button"
                  onClick={() => setTone(t)}
                  className={'btn ' + (tone === t ? 'btn--violet-soft' : 'btn--ghost') + ' btn--sm'}>
                  {t}
                </button>
              ))}
            </div>
            <div>
              <div className="muted text-sm fw-500" style={{ marginBottom: 8 }}>Frase de bienvenida</div>
              <div style={{ background: 'var(--violet-50)', borderRadius: 10, padding: '12px 14px', fontSize: 13.5, lineHeight: 1.55 }}>
                "¡Hola! 👋 Soy tu concierge digital de Hotel Demo. ¿Te gustaría revisar disponibilidad para una próxima estancia?"
              </div>
            </div>
          </div>
        </div>

        {/* Canales activos */}
        <div className="card">
          <div className="card__header"><div className="card__title"><div className="icon-chip icon-chip--mint" style={{ width: 28, height: 28 }}><Ic4.MessageCircle size={14}/></div>Canales activos</div></div>
          <div className="card__body">
            {[
              { id: 'whatsapp',  icon: Ic4.ChWhatsapp,  tone: 'green',  title: 'WhatsApp',   sub: 'No conectado · Diseñado (Meta Official API)' },
              { id: 'messenger', icon: Ic4.ChMessenger, tone: 'sky',    title: 'Messenger',  sub: 'No conectado · Próxima fase' },
              { id: 'instagram', icon: Ic4.ChInstagram, tone: 'rose',   title: 'Instagram',  sub: 'No conectado · Próxima fase' },
              { id: 'email',     icon: Ic4.ChEmail,     tone: 'slate',  title: 'Email',      sub: 'reservas@hoteldemo.mx · diseñado' },
              { id: 'webchat',   icon: Ic4.ChWebChat,   tone: 'violet', title: 'Web Chat',   sub: 'Widget · diseñado' },
            ].map(c => (
              <div key={c.id} className="tool-row">
                <div className={'icon-chip icon-chip--lg icon-chip--' + c.tone}><c.icon size={16}/></div>
                <div className="col"><span className="tool-row__title">{c.title}</span><span className="tool-row__sub">{c.sub}</span></div>
                <div className={'switch' + (channels[c.id] ? ' switch--on' : '')}
                  onClick={() => setChannels({ ...channels, [c.id]: !channels[c.id] })} />
              </div>
            ))}
          </div>
        </div>

        {/* Handoff humano */}
        <div className="card">
          <div className="card__header"><div className="card__title"><div className="icon-chip icon-chip--peach" style={{ width: 28, height: 28 }}><Ic4.Users size={14}/></div>Handoff humano</div></div>
          <div className="card__body" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div className="tool-row">
              <div className="icon-chip icon-chip--lg icon-chip--violet"><Ic4.Sparkles size={16}/></div>
              <div className="col"><span className="tool-row__title">Pasar a humano automáticamente</span><span className="tool-row__sub">Cuando se detecta intención de compra o queja</span></div>
              <div className={'switch' + (handoff ? ' switch--on' : '')} onClick={() => setHandoff(!handoff)} />
            </div>
            <div className="col gap-6">
              <label className="muted text-sm fw-500">Equipo destino</label>
              <div className="row gap-8">
                <span className="badge badge--violet"><span className="badge__dot"></span> Recepción</span>
                <span className="badge badge--green"><span className="badge__dot"></span> Reservas</span>
                <span className="badge badge--peach"><span className="badge__dot"></span> Eventos</span>
              </div>
            </div>
            <div className="col gap-6">
              <label className="muted text-sm fw-500">Horario de atención humano</label>
              <div className="row gap-8">
                <input defaultValue="07:00" style={{ width: 80, padding: '8px 12px', border: '1px solid var(--border)', borderRadius: 8, fontSize: 13 }} />
                <span className="muted">a</span>
                <input defaultValue="23:00" style={{ width: 80, padding: '8px 12px', border: '1px solid var(--border)', borderRadius: 8, fontSize: 13 }} />
                <span className="muted text-sm">Fuera de horario el agente atiende solo</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Tools */}
      <div className="section-grid-2">
        <div className="card">
          <div className="card__header">
            <div className="card__title"><div className="icon-chip icon-chip--green" style={{ width: 28, height: 28 }}><Ic4.Wrench size={14}/></div>Herramientas permitidas</div>
            <span className="badge badge--green"><Ic4.Check size={11} strokeWidth={2.6}/> {Object.values(allowed).filter(Boolean).length} de {tools.length} activas</span>
          </div>
          <div className="card__body">
            {tools.map(t => (
              <div key={t.id} className="tool-row">
                <div className={'icon-chip icon-chip--lg icon-chip--' + t.tone}><t.icon size={16}/></div>
                <div className="col"><span className="tool-row__title">{t.title}</span><span className="tool-row__sub">{t.sub}</span></div>
                <div className={'switch' + (allowed[t.id] ? ' switch--on' : '')}
                  onClick={() => setAllowed({ ...allowed, [t.id]: !allowed[t.id] })} />
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card__header">
            <div className="card__title"><div className="icon-chip icon-chip--rose" style={{ width: 28, height: 28 }}><Ic4.Lock size={14}/></div>Herramientas bloqueadas</div>
            <span className="badge badge--rose"><Ic4.Shield size={11}/> Seguridad</span>
          </div>
          <div className="card__body">
            {blocked.map(b => (
              <div key={b.id} className="tool-row">
                <div className="icon-chip icon-chip--lg icon-chip--rose"><Ic4.Lock size={16}/></div>
                <div className="col"><span className="tool-row__title">{b.title}</span><span className="tool-row__sub">{b.sub}</span></div>
                <span className="badge badge--rose">Bloqueada</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Reglas de seguridad */}
      <div className="card">
        <div className="card__header"><div className="card__title"><div className="icon-chip icon-chip--violet" style={{ width: 28, height: 28 }}><Ic4.ShieldCheck size={14}/></div>Reglas de seguridad</div></div>
        <div className="card__body" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          {[
            { t: 'Nunca crear reservas sin aprobación humana', d: 'El agente solo prepara cotizaciones y leads.', on: true },
            { t: 'Nunca registrar pagos automáticamente',       d: 'El cobro se gestiona manualmente.', on: true },
            { t: 'Pedir confirmación antes de cancelar',         d: 'Cualquier cancelación requiere validación.', on: true },
            { t: 'No compartir datos personales del huésped',    d: 'Cumplimiento de protección de datos.', on: true },
            { t: 'Detección automática de queja o reclamo',      d: 'Pasar a recepción inmediatamente.', on: true },
            { t: 'Limitar promociones a las aprobadas',          d: 'Solo enviar campañas activas en el hub.', on: true },
          ].map((r, i) => (
            <div key={i} className="row gap-12" style={{ padding: 14, borderRadius: 12, background: 'var(--surface-2)', border: '1px solid var(--border)', alignItems: 'flex-start' }}>
              <div className="status-check" style={{ marginTop: 1 }}><Ic4.Check size={12} strokeWidth={2.6}/></div>
              <div className="col"><span className="text-md fw-600">{r.t}</span><span className="muted text-sm" style={{ marginTop: 2 }}>{r.d}</span></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Empty / placeholder screens for nav items not in scope
   ============================================================ */
function ScreenPlaceholder({ title, sub, icon: Icon }) {
  return (
    <div className="page fade-in">
      <div className="page-header"><h1>{title}</h1><p>{sub}</p></div>
      <div className="card" style={{ padding: '64px 32px', textAlign: 'center' }}>
        <div className="icon-chip icon-chip--xl icon-chip--violet" style={{ margin: '0 auto 18px' }}><Icon size={24}/></div>
        <div className="fw-600" style={{ fontSize: 16, marginBottom: 6 }}>Pantalla en preparación</div>
        <div className="muted text-md" style={{ maxWidth: 420, margin: '0 auto' }}>Esta sección será detallada en la siguiente iteración del prototipo. Mientras tanto, navega entre Inicio, Agentes, Leads, Campañas, Integraciones y Configuración.</div>
      </div>
    </div>
  );
}

window.ScreenCampanas = ScreenCampanas;
window.ScreenConfiguracion = ScreenConfiguracion;
window.ScreenPlaceholder = ScreenPlaceholder;