/* global React, SaoriIcons, SaoriShell, SaoriCharts */
const IcC = SaoriIcons;
const { AreaLineChart: ALC, Donut: DonutC } = SaoriCharts;

/* ============================================================
   PANTALLA — Campañas (versión detallada)
   ============================================================ */
function ScreenCampanasDetalle({ 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: IcC.Tag,     tone: 'peach', sent: 1248, opened: 612, clicked: 187, conv: 24, start: '12 mayo', end: '30 mayo' },
    { id: 'C2', title: 'Clientes frecuentes',             sub: 'Beneficio especial para huéspedes recurrentes', segment: 'VIP · Email + WhatsApp',      channels: ['email', 'whatsapp'],         status: 'activa',      icon: IcC.Star,    tone: 'amber', sent: 384,  opened: 296, clicked: 142, conv: 38, start: '01 mayo', end: '30 jun' },
    { 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: IcC.Heart,   tone: 'rose',  sent: 0,    opened: 0,   clicked: 0,   conv: 0,  start: '20 mayo', end: '15 jun' },
    { id: 'C4', title: 'Post-estancia · solicitar reseña', sub: 'Encuesta automática al check-out',             segment: 'Reservas completadas · Email', channels: ['email'],                     status: 'activa',      icon: IcC.Mail,    tone: 'sky',   sent: 612,  opened: 487, clicked: 261, conv: 174, start: 'Continua', end: '—' },
    { id: 'C5', title: 'Recuperación de carritos',         sub: 'Cotizaciones sin confirmar > 48h',              segment: 'Leads · Cotización enviada',  channels: ['whatsapp'],                  status: 'borrador',    icon: IcC.Refresh, tone: 'violet',sent: 0,    opened: 0,   clicked: 0,   conv: 0,  start: '—',       end: '—' },
  ];

  const [list, setList] = React.useState(initial);
  const [selected, setSelected] = React.useState('C1');
  const [tab, setTab] = React.useState('overview');
  const [filter, setFilter] = React.useState('todas');
  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>;
    if (s === 'borrador')   return <span className="badge badge--slate">Borrador</span>;
    return <span className="badge badge--slate">{s}</span>;
  };

  const channelIconMap = {
    whatsapp:  { I: IcC.ChWhatsapp,  c: '#16A34A' },
    messenger: { I: IcC.ChMessenger, c: '#1E81E5' },
    instagram: { I: IcC.ChInstagram, c: '#E11D74' },
    email:     { I: IcC.ChEmail,     c: '#475569' },
    webchat:   { I: IcC.ChWebChat,   c: '#7C5CF2' },
  };

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

  const filtered = filter === 'todas' ? list : list.filter(c => c.status === filter);

  /* --- Calendar generator --- */
  const month = 'Mayo 2026';
  const daysIn = 31;
  const startOffset = 4; // 1 may = viernes (0=Mon)
  const cells = [];
  for (let i = 0; i < startOffset; i++) cells.push({ outside: true, num: 26 + i });
  for (let d = 1; d <= daysIn; d++) cells.push({ num: d });
  while (cells.length % 7 !== 0) cells.push({ outside: true, num: cells.length - daysIn - startOffset + 1 });

  const calEvents = {
    3:  [{ t: 'Promo TB · WhatsApp blast', cls: 'peach' }],
    6:  [{ t: 'Post-estancia automático',  cls: 'sky' }],
    9:  [{ t: 'VIP · Mailing', cls: 'amber' }, { t: 'Promo TB · IG Stories', cls: 'peach' }],
    12: [{ t: 'Hoy · publicaciones (3)', cls: 'violet' }],
    14: [{ t: 'Fin de semana romántico', cls: 'rose' }],
    17: [{ t: 'Promo TB · seguimiento', cls: 'peach' }],
    20: [{ t: 'Fin de semana romántico · IG', cls: 'rose' }, { t: 'VIP · WhatsApp', cls: 'amber' }],
    23: [{ t: 'Post-estancia automático', cls: 'sky' }],
    27: [{ t: 'Fin de semana romántico · email', cls: 'rose' }],
    30: [{ t: 'Promo TB · cierre', cls: 'peach' }],
  };

  /* --- Variants (A/B) --- */
  const variants = [
    { id: 'A', label: 'Variante A — emocional',  copy: '"Escápate sin gastar de más 🌿 Esta semana 20% off en estancias entre semana. Reserva directo."', delivered: 624, opens: 312, ctr: 28.4, conv: 9.6, winner: true },
    { id: 'B', label: 'Variante B — directa',    copy: '"20% off entre semana. Reserva ahora con código TBAJA20. Solo del 12 al 30 de mayo."',           delivered: 624, opens: 268, ctr: 21.8, conv: 5.4, winner: false },
  ];

  /* --- Daily performance for selected campaign --- */
  const perfData = [
    [12, 24, 36, 48, 62, 71, 88, 96, 112, 124, 138, 142, 156, 168],
  ];

  /* --- Audience donut --- */
  const audience = [
    { label: 'Edad 28-35',   value: 38, color: '#7C5CF2' },
    { label: 'Edad 36-45',   value: 28, color: '#9C82F7' },
    { label: 'Edad 18-27',   value: 18, color: '#C2B0FB' },
    { label: 'Edad 46+',     value: 16, color: '#ECE7FE' },
  ];

  return (
    <div className="page fade-in">
      <div className="page-header__row">
        <div className="page-header">
          <h1>Campañas</h1>
          <p>Promociones, publicaciones programadas y rendimiento omnicanal</p>
        </div>
        <div className="page-header__actions">
          <button type="button" className="btn btn--ghost"><IcC.Filter size={14}/> Filtros</button>
          <button type="button" className="btn btn--secondary"><IcC.Sparkles size={14}/> Sugerir con IA</button>
          <button type="button" className="btn btn--primary"><IcC.Plus size={14}/> Nueva campaña</button>
        </div>
      </div>

      <div className="banner banner--violet">
        <div className="banner__icon"><IcC.Megaphone size={18}/></div>
        <span>Módulo de <b>campañas — Próxima fase</b>. Datos de demostración. Toda promoción nace como <b>borrador</b> y requiere <b>aprobación humana</b> antes de enviarse; el Hub no publica ni aplica promociones por sí solo.</span>
      </div>

      {/* KPIs · proyección demo */}
      <div className="kpis" style={{ gridTemplateColumns: 'repeat(5, 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)' }}><IcC.PlayCircle size={16}/></div></div><div className="kpi__value">12</div><div className="kpi__bottom"><div className="kpi__delta kpi__delta--up"><IcC.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">Enviados</div><div className="kpi__icon" style={{ background: 'var(--violet-50)', color: 'var(--violet-600)' }}><IcC.Send size={16}/></div></div><div className="kpi__value">2,244</div><div className="kpi__bottom"><div className="kpi__delta kpi__delta--up"><IcC.ArrowUp size={12}/>18%</div><SaoriShell.Sparkline /></div></div>
        <div className="kpi"><div className="kpi__top"><div className="kpi__label">Tasa de apertura</div><div className="kpi__icon" style={{ background: 'var(--sky-50)', color: 'var(--sky-600)' }}><IcC.Eye size={16}/></div></div><div className="kpi__value">62%</div><div className="kpi__bottom"><div className="kpi__delta kpi__delta--up"><IcC.ArrowUp size={12}/>4 pts</div><SaoriShell.Sparkline /></div></div>
        <div className="kpi"><div className="kpi__top"><div className="kpi__label">CTR promedio</div><div className="kpi__icon" style={{ background: 'var(--rose-50)', color: 'var(--rose-600)' }}><IcC.Sparkles size={16}/></div></div><div className="kpi__value">27.3%</div><div className="kpi__bottom"><div className="kpi__delta kpi__delta--up"><IcC.ArrowUp size={12}/>2.1 pts</div><SaoriShell.Sparkline /></div></div>
        <div className="kpi"><div className="kpi__top"><div className="kpi__label">Reservas generadas</div><div className="kpi__icon" style={{ background: 'var(--amber-50)', color: 'var(--amber-600)' }}><IcC.Calendar size={16}/></div></div><div className="kpi__value">86</div><div className="kpi__bottom"><div className="kpi__delta kpi__delta--up"><IcC.ArrowUp size={12}/>24%</div><SaoriShell.Sparkline /></div></div>
      </div>

      {/* Calendar */}
      <div className="chart-card">
        <div className="chart-card__head">
          <div>
            <div className="chart-card__title">Calendario de campañas</div>
            <div className="chart-card__sub">Publicaciones programadas en todos los canales</div>
          </div>
          <div className="row gap-8">
            <button type="button" className="btn btn--ghost btn--sm"><IcC.ChevronRight size={13} style={{ transform: 'rotate(180deg)' }}/></button>
            <span className="fw-600">{month}</span>
            <button type="button" className="btn btn--ghost btn--sm"><IcC.ChevronRight size={13}/></button>
            <div className="report-tabs" style={{ marginLeft: 12 }}>
              <div className="report-tab">Día</div>
              <div className="report-tab">Semana</div>
              <div className="report-tab report-tab--active">Mes</div>
            </div>
          </div>
        </div>
        <div className="calendar">
          {['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'].map(d => <div key={d} className="calendar__weekday">{d}</div>)}
          {cells.map((c, i) => (
            <div key={i} className={'calendar__day' + (c.outside ? ' calendar__day--outside' : '') + (c.num === 12 && !c.outside ? ' calendar__day--today' : '')}>
              <span className="calendar__day-num">{c.num}</span>
              {!c.outside && (calEvents[c.num] || []).map((e, k) => (
                <div key={k} className={'calendar__post calendar__post--' + e.cls}>
                  <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'currentColor' }}/>
                  {e.t}
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, alignItems: 'flex-start' }}>
        {/* List */}
        <div className="card">
          <div className="card__header">
            <div className="card__title">Lista de campañas</div>
            <div className="report-tabs">
              {[['todas', 'Todas'], ['activa', 'Activas'], ['pendiente', 'Pendientes'], ['programada', 'Programadas']].map(([k, l]) => (
                <div key={k} className={'report-tab' + (filter === k ? ' report-tab--active' : '')} onClick={() => setFilter(k)}>{l}</div>
              ))}
            </div>
          </div>
          <div>
            {filtered.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} · {c.start}{c.end !== '—' && c.end !== '—' ? ' → ' + c.end : ''}</div>
                </div>
                <div className="row gap-6">
                  {c.channels.slice(0, 3).map(ch => {
                    const cfg = channelIconMap[ch];
                    return <span key={ch} style={{ width: 22, height: 22, borderRadius: 6, background: 'var(--surface-2)', display: 'grid', placeItems: 'center', color: cfg.c }}><cfg.I size={12}/></span>;
                  })}
                </div>
                {statusBadge(c.status)}
                <button type="button" className="icon-btn" style={{ width: 28, height: 28 }} onClick={e => e.stopPropagation()}><IcC.MoreVertical size={14}/></button>
              </div>
            ))}
          </div>
        </div>

        {/* Quick performance overview */}
        <div className="chart-card">
          <div className="chart-card__head">
            <div>
              <div className="chart-card__title">Rendimiento global</div>
              <div className="chart-card__sub">Últimos 14 días — leads generados por campañas</div>
            </div>
            <span className="badge badge--green"><IcC.ArrowUp size={11}/> +24% mes</span>
          </div>
          <ALC data={perfData} h={200} color="#6E56F7"/>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, paddingTop: 8, borderTop: '1px solid var(--border)' }}>
            {[
              { l: 'Mejor canal',    v: 'WhatsApp', s: 'CTR 31.4%', tone: 'green' },
              { l: 'Mejor segmento', v: 'VIP',       s: '4.8x ROI',  tone: 'amber' },
              { l: 'Próxima salida', v: 'Romántico', s: 'En 8 días', tone: 'rose' },
            ].map(s => (
              <div key={s.l} className="col gap-4">
                <span className="muted text-sm">{s.l}</span>
                <span className="fw-600" style={{ fontSize: 16 }}>{s.v}</span>
                <span className={'badge badge--' + s.tone} style={{ width: 'fit-content' }}>{s.s}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Selected campaign detail — full block */}
      <div className="card">
        <div className="card__header">
          <div className="card__title">
            <div className={'icon-chip icon-chip--xl icon-chip--' + sel.tone}><sel.icon size={20}/></div>
            <div className="col">
              <div className="row gap-10">
                <span style={{ fontSize: 17 }}>{sel.title}</span>
                {statusBadge(sel.status)}
              </div>
              <span className="muted text-sm" style={{ fontWeight: 400 }}>{sel.segment} · {sel.start}{sel.end !== '—' ? ' → ' + sel.end : ''}</span>
            </div>
          </div>
          <div className="row gap-8">
            <button type="button" className="btn btn--ghost btn--sm"><IcC.Refresh size={13}/> Duplicar</button>
            <button type="button" className="btn btn--ghost btn--sm"><IcC.Pencil size={13}/> Editar</button>
            {sel.status !== 'aprobada' && sel.status !== 'activa' && (
              <button type="button" className="btn btn--violet-soft btn--sm" onClick={approve}><IcC.Check size={13}/> Aprobar</button>
            )}
            <button type="button" className="btn btn--primary btn--sm"><IcC.Calendar size={13}/> Programar</button>
          </div>
        </div>

        <div style={{ padding: '0 20px', borderBottom: '1px solid var(--border)' }}>
          <div style={{ display: 'flex', gap: 18 }}>
            {[['overview', 'Resumen'], ['copy', 'Copy y creatividades'], ['audience', 'Audiencia'], ['ab', 'Pruebas A/B'], ['performance', 'Rendimiento'], ['schedule', 'Programación']].map(([k, l]) => (
              <div key={k} className={'tab' + (tab === k ? ' tab--active' : '')} onClick={() => setTab(k)}>{l}</div>
            ))}
          </div>
        </div>

        {tab === 'overview' && (
          <div className="card__body" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
            {[
              { l: 'Enviados',    v: sel.sent.toLocaleString(),    icon: IcC.Send,     tone: 'violet', sub: '100%' },
              { l: 'Aperturas',   v: sel.opened.toLocaleString(),  icon: IcC.Eye,      tone: 'sky',    sub: sel.sent ? Math.round(sel.opened / sel.sent * 100) + '%' : '—' },
              { l: 'Clicks',      v: sel.clicked.toLocaleString(), icon: IcC.Zap,      tone: 'amber',  sub: sel.sent ? Math.round(sel.clicked / sel.sent * 100) + '% CTR' : '—' },
              { l: 'Conversiones',v: sel.conv,                     icon: IcC.Heart,    tone: 'rose',   sub: sel.sent ? (sel.conv / sel.sent * 100).toFixed(1) + '% CVR' : '—' },
            ].map(m => (
              <div key={m.l} style={{ padding: 16, background: 'var(--surface-2)', borderRadius: 12, border: '1px solid var(--border)' }}>
                <div className="row row--between" style={{ marginBottom: 10 }}>
                  <div className={'icon-chip icon-chip--' + m.tone}><m.icon size={15}/></div>
                  <span className="badge badge--violet">{m.sub}</span>
                </div>
                <div className="muted text-sm">{m.l}</div>
                <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 2 }}>{m.v}</div>
              </div>
            ))}
          </div>
        )}

        {tab === 'copy' && (
          <div className="card__body" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 20 }}>
            <div className="col gap-14">
              <div>
                <div className="row row--between" style={{ marginBottom: 8 }}>
                  <span className="muted text-sm fw-500">Copy IA · WhatsApp</span>
                  <span className="badge badge--violet"><IcC.Sparkles size={11}/> IA</span>
                </div>
                <div style={{ background: 'var(--violet-50)', border: '1px solid var(--violet-100)', borderRadius: 12, padding: 14, fontSize: 13.5, lineHeight: 1.6 }}>
                  "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>
              <div>
                <div className="muted text-sm fw-500" style={{ marginBottom: 8 }}>Copy alterno · Email</div>
                <div style={{ background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 12, padding: 14, fontSize: 13.5, lineHeight: 1.6 }}>
                  Asunto: <b>Una pausa frente al mar, con 20% off</b><br/>
                  Hola, sabemos que mayo es un buen momento para escaparte. Te dejamos una promo entre semana con desayuno incluido y vista directa al mar.
                </div>
              </div>
              <div className="row gap-8">
                <button type="button" className="btn btn--ghost btn--sm"><IcC.Refresh size={13}/> Regenerar todo</button>
                <button type="button" className="btn btn--ghost btn--sm"><IcC.Pencil size={13}/> Editar manualmente</button>
                <button type="button" className="btn btn--violet-soft btn--sm"><IcC.Sparkles size={13}/> Generar variante</button>
              </div>

              <div>
                <div className="muted text-sm fw-500" style={{ marginBottom: 8 }}>Creatividades adjuntas</div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
                  {[
                    { c1: '#FED7AA', c2: '#FB923C', t: 'Vista mar' },
                    { c1: '#FBCFE8', c2: '#EC4899', t: 'Pareja deck' },
                    { c1: '#BAE6FD', c2: '#3B82F6', t: 'Alberca' },
                  ].map((p, i) => (
                    <div key={i} style={{ aspectRatio: '1.2', borderRadius: 10, background: `linear-gradient(135deg, ${p.c1}, ${p.c2})`, display: 'flex', alignItems: 'flex-end', padding: 10, color: '#fff', fontWeight: 600, fontSize: 12.5, boxShadow: 'var(--shadow-sm)' }}>
                      {p.t}
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="col gap-10">
              <div className="muted text-sm fw-500">Vista previa · WhatsApp</div>
              <div className="preview-frame">
                <div className="row gap-10">
                  <div className="icon-chip icon-chip--lg" style={{ background: '#25D366', color: '#fff' }}><IcC.ChWhatsapp size={16}/></div>
                  <div className="col">
                    <div className="fw-600 text-md">Hotel Demo</div>
                    <div className="muted text-sm">Negocio · en línea</div>
                  </div>
                </div>
                <div style={{ aspectRatio: '1.4', borderRadius: 12, background: 'linear-gradient(135deg, #FED7AA, #FB923C)', display: 'flex', alignItems: 'flex-end', padding: 12, color: '#fff', fontWeight: 600 }}>
                  Vista mar
                </div>
                <div className="preview-message">
                  Aprovecha la temporada para escaparte sin gastar de más 🌿. Esta semana <b>20% off</b> en estancias entre semana en Hotel Demo. Reserva directo y disfruta desayuno incluido 🍳.
                  <div className="preview-message__time">Hoy, 10:32</div>
                </div>
                <button type="button" className="btn btn--violet-soft btn--sm" style={{ alignSelf: 'flex-start' }}>Reservar ahora →</button>
              </div>
            </div>
          </div>
        )}

        {tab === 'audience' && (
          <div className="card__body" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20 }}>
            <div className="chart-card" style={{ boxShadow: 'none', border: '1px solid var(--border)' }}>
              <div className="chart-card__head"><div><div className="chart-card__title" style={{ fontSize: 14 }}>Distribución por edad</div></div></div>
              <div className="donut-wrap">
                <DonutC segments={audience} size={140}/>
                <div className="donut-legend">
                  {audience.map(a => (
                    <div key={a.label} className="donut-legend__row">
                      <span style={{ width: 10, height: 10, borderRadius: 3, background: a.color }}/>
                      <span className="text-sm">{a.label}</span>
                      <span className="fw-600 text-sm">{a.value}%</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="chart-card" style={{ boxShadow: 'none', border: '1px solid var(--border)' }}>
              <div className="chart-card__head"><div><div className="chart-card__title" style={{ fontSize: 14 }}>Origen</div></div></div>
              <div className="col gap-12">
                {[
                  { l: 'Reservas previas', v: 42, c: '#7C5CF2' },
                  { l: 'Web orgánico',     v: 28, c: '#22C55E' },
                  { l: 'Instagram ads',    v: 18, c: '#EC4899' },
                  { l: 'Referidos',        v: 12, c: '#EA7A2C' },
                ].map(o => (
                  <div key={o.l} className="col gap-6">
                    <div className="row row--between"><span className="text-md fw-500">{o.l}</span><span className="text-sm muted">{o.v}%</span></div>
                    <div className="progress-track"><div className="progress-fill" style={{ width: o.v + '%', background: o.c }}/></div>
                  </div>
                ))}
              </div>
            </div>

            <div className="chart-card" style={{ boxShadow: 'none', border: '1px solid var(--border)' }}>
              <div className="chart-card__head"><div><div className="chart-card__title" style={{ fontSize: 14 }}>Filtros del segmento</div></div></div>
              <div className="col gap-8">
                {[
                  { i: IcC.UserCircle, l: 'Sin reserva en últimos 60 días' },
                  { i: IcC.Globe,      l: 'Idioma: Español' },
                  { i: IcC.Calendar,   l: 'Edad entre 28 y 45 años' },
                  { i: IcC.Tag,        l: 'Etiqueta: Cliente potencial' },
                  { i: IcC.ChWhatsapp, l: 'Opt-in WhatsApp · requerido' },
                ].map((f, i) => (
                  <div key={i} className="row gap-10" style={{ padding: '10px 12px', background: 'var(--surface-2)', borderRadius: 8, border: '1px solid var(--border)' }}>
                    <f.i size={15} style={{ color: 'var(--violet-600)' }}/>
                    <span className="text-md">{f.l}</span>
                  </div>
                ))}
                <button type="button" className="btn btn--ghost btn--sm" style={{ alignSelf: 'flex-start' }}><IcC.Plus size={13}/> Añadir filtro</button>
              </div>
              <div style={{ paddingTop: 12, borderTop: '1px solid var(--border)' }}>
                <div className="muted text-sm">Tamaño del segmento</div>
                <div style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em' }}>1,248 <span className="muted" style={{ fontSize: 13, fontWeight: 500 }}>contactos</span></div>
              </div>
            </div>
          </div>
        )}

        {tab === 'ab' && (
          <div className="card__body" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {variants.map(v => (
              <div key={v.id} className={'variant-card' + (v.winner ? ' variant-card--winner' : '')}>
                <div className="variant-card__label">
                  <div className="row gap-8">
                    <span className="fw-600" style={{ fontSize: 15 }}>{v.label}</span>
                    {v.winner && <span className="variant-card__pill">★ Ganadora</span>}
                  </div>
                  <span className="muted text-sm">50% del tráfico</span>
                </div>
                <div style={{ background: 'var(--surface-2)', borderRadius: 10, padding: 12, fontSize: 13, lineHeight: 1.6 }}>{v.copy}</div>
                <div className="variant-card__stats">
                  <div><div className="variant-card__stat-label">Entregados</div><div className="variant-card__stat-value">{v.delivered}</div></div>
                  <div><div className="variant-card__stat-label">CTR</div><div className="variant-card__stat-value" style={{ color: v.winner ? '#16A34A' : 'inherit' }}>{v.ctr}%</div></div>
                  <div><div className="variant-card__stat-label">Conversión</div><div className="variant-card__stat-value" style={{ color: v.winner ? '#16A34A' : 'inherit' }}>{v.conv}%</div></div>
                </div>
              </div>
            ))}
            <div style={{ gridColumn: '1 / -1', background: 'var(--violet-50)', border: '1px solid var(--violet-100)', borderRadius: 12, padding: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
              <div className="icon-chip icon-chip--violet icon-chip--lg"><IcC.Sparkles size={16}/></div>
              <div className="col" style={{ flex: 1 }}>
                <div className="fw-600 text-md">Recomendación IA</div>
                <div className="text-md muted" style={{ marginTop: 2 }}>La variante A supera a la B con un CTR <b>+6.6 pts</b>. Sugerimos promoverla al 100% del segmento.</div>
              </div>
              <button type="button" className="btn btn--primary btn--sm" onClick={() => toast('Variante A promovida al 100%')}>Promover ganadora</button>
            </div>
          </div>
        )}

        {tab === 'performance' && (
          <div className="card__body" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16 }}>
            <div className="chart-card" style={{ boxShadow: 'none', border: '1px solid var(--border)' }}>
              <div className="chart-card__head">
                <div>
                  <div className="chart-card__title" style={{ fontSize: 14 }}>Leads y conversiones · 14 días</div>
                  <div className="chart-card__sub">Generación diaria desde el lanzamiento</div>
                </div>
                <div className="chart-legend">
                  <div className="chart-legend__item"><span className="chart-legend__swatch" style={{ background: '#6E56F7' }}/>Leads</div>
                </div>
              </div>
              <ALC data={perfData} h={220}/>
            </div>
            <div className="chart-card" style={{ boxShadow: 'none', border: '1px solid var(--border)' }}>
              <div className="chart-card__head"><div><div className="chart-card__title" style={{ fontSize: 14 }}>Por canal</div></div></div>
              <div className="col gap-12">
                {[
                  { l: 'WhatsApp',  v: 624, p: 78, c: '#22C55E', ic: IcC.ChWhatsapp },
                  { l: 'Email',     v: 412, p: 52, c: '#475569', ic: IcC.ChEmail },
                  { l: 'Instagram', v: 184, p: 28, c: '#EC4899', ic: IcC.ChInstagram },
                ].map(c => (
                  <div key={c.l} className="col gap-6">
                    <div className="row row--between">
                      <span className="row gap-8 fw-500 text-md" style={{ color: c.c }}><c.ic size={14}/> {c.l}</span>
                      <span className="text-sm fw-600">{c.v}</span>
                    </div>
                    <div className="progress-track"><div className="progress-fill" style={{ width: c.p + '%', background: c.c }}/></div>
                  </div>
                ))}
              </div>
              <div style={{ paddingTop: 10, borderTop: '1px solid var(--border)' }} className="col gap-6">
                <span className="muted text-sm">ROI estimado</span>
                <span style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>4.2x</span>
                <span className="badge badge--green" style={{ width: 'fit-content' }}><IcC.ArrowUp size={11}/> +0.8 vs anterior</span>
              </div>
            </div>
          </div>
        )}

        {tab === 'schedule' && (
          <div className="card__body" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <div className="col gap-14">
              <div className="muted text-sm fw-500">Programación de envíos</div>
              {[
                { d: '12 mayo · Vie 10:00', ch: 'whatsapp', t: 'Blast inicial · 1,248 contactos', status: 'pendiente' },
                { d: '17 mayo · Mié 11:00', ch: 'whatsapp', t: 'Seguimiento abridores no-clicks', status: 'pendiente' },
                { d: '20 mayo · Sáb 09:00', ch: 'email',    t: 'Recordatorio promo + creatividad B', status: 'pendiente' },
                { d: '30 mayo · Sáb 18:00', ch: 'whatsapp', t: 'Cierre · oferta last-minute',    status: 'pendiente' },
              ].map((s, i) => {
                const cfg = channelIconMap[s.ch];
                return (
                  <div key={i} className="row gap-12" style={{ padding: 12, border: '1px solid var(--border)', borderRadius: 10, background: 'var(--surface)' }}>
                    <div className="icon-chip icon-chip--lg" style={{ background: cfg.c + '20', color: cfg.c }}><cfg.I size={15}/></div>
                    <div className="col" style={{ flex: 1 }}>
                      <div className="fw-600 text-md">{s.t}</div>
                      <div className="muted text-sm">{s.d}</div>
                    </div>
                    <span className="badge badge--peach">Pendiente</span>
                  </div>
                );
              })}
              <button type="button" className="btn btn--ghost btn--sm" style={{ alignSelf: 'flex-start' }}><IcC.Plus size={13}/> Añadir envío</button>
            </div>
            <div className="col gap-14">
              <div className="muted text-sm fw-500">Aprobaciones</div>
              <div className="banner banner--violet">
                <div className="banner__icon"><IcC.ShieldCheck size={18}/></div>
                <span>Esta campaña requiere <b>aprobación de marketing</b> antes de su primera salida programada.</span>
              </div>
              {[
                { n: 'Ana Martínez',  r: 'Administradora',  s: 'aprobada', c: '#8B6BFF' },
                { n: 'Marta López',   r: 'Marketing',       s: 'aprobada', c: '#F472B6' },
                { n: 'Luis Méndez',   r: 'Recepción',       s: 'pendiente', c: '#34D399' },
              ].map(a => (
                <div key={a.n} className="row gap-12" style={{ padding: 12, border: '1px solid var(--border)', borderRadius: 10 }}>
                  <div className="avatar" style={{ background: a.c, width: 36, height: 36 }}>{a.n.split(' ').map(p=>p[0]).join('')}</div>
                  <div className="col" style={{ flex: 1 }}>
                    <span className="fw-600 text-md">{a.n}</span>
                    <span className="muted text-sm">{a.r}</span>
                  </div>
                  {a.s === 'aprobada' ? <span className="badge badge--green"><IcC.Check size={11} strokeWidth={2.6}/> Aprobada</span> : <span className="badge badge--peach"><IcC.Clock size={11}/> Pendiente</span>}
                </div>
              ))}
              <button type="button" className="btn btn--violet-soft btn--block" onClick={() => toast('Aprobación solicitada')}><IcC.Send size={13}/> Solicitar aprobación final</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.ScreenCampanasDetalle = ScreenCampanasDetalle;