// Ejecutora — Campañas y Contenido

const CampanasScreen = () => {
  const [tab, setTab] = React.useState('activas');
  const [showModal, setShowModal] = React.useState(false);

  const [campanas, setCampanas] = React.useState([
    { id: 1, nombre: 'Pack Bienvenida — Mayo', tipo: 'adquisicion', producto: 'Pack Bienvenida $37', inicio: '28 abr', fin: '7 may', diasRestantes: 6, estado: 'activa', ventas: 4, meta: 10, notas: 'Story diaria + WA a leads fríos', checks: { historia: true, consultas: true, registro: false, recordatorio: false, seguimiento: false } },
    { id: 2, nombre: 'Upsell Clientes Actuales', tipo: 'monetizacion', producto: 'Programa Completo $197', inicio: '10 may', fin: '20 may', diasRestantes: 19, estado: 'planificada', ventas: 0, meta: 5, notas: 'Solo para clientas que compraron Esencial', checks: { historia: false, consultas: false, registro: false, recordatorio: false, seguimiento: false } },
    { id: 3, nombre: 'Reactivación Inactivas', tipo: 'activacion', producto: 'Pack Reincorporación $57', inicio: '1 abr', fin: '10 abr', diasRestantes: 0, estado: 'finalizada', ventas: 3, meta: 5, notas: 'Mencioné su compra anterior específica', checks: { historia: true, consultas: true, registro: true, recordatorio: true, seguimiento: true } },
  ]);

  const [nueva, setNueva] = React.useState({ nombre: '', tipo: 'adquisicion', producto: '', inicio: '', fin: '', meta: '', notas: '' });

  // Calendario de contenido (semana)
  const [contenido, setContenido] = React.useState([
    { dia: 'Lun', objetivo: 'atraer', formato: 'Carrusel', tema: 'Las 3 señales de que no tienes sistema de ventas', listo: true },
    { dia: 'Mar', objetivo: 'atraer', formato: 'Reel', tema: 'Mi rutina de ventas de 60 minutos', listo: true },
    { dia: 'Mié', objetivo: 'convertir', formato: 'Story', tema: 'Oferta pack bienvenida + CTA directo', listo: false },
    { dia: 'Jue', objetivo: 'fidelizar', formato: 'Post', tema: 'Testimonio de clienta + resultado específico', listo: false },
    { dia: 'Vie', objetivo: 'convertir', formato: 'WA Broadcast', tema: 'Último día del pack — urgencia real', listo: false },
  ]);

  const tipos = {
    adquisicion: { label: 'Adquisición', color: EJ.cyan, bg: EJ.cyanLight, emoji: '🎯' },
    monetizacion: { label: 'Monetización', color: EJ.violet, bg: EJ.violetLight, emoji: '💰' },
    activacion: { label: 'Activación', color: EJ.pink, bg: EJ.pinkLight, emoji: '🔁' },
  };

  const estadoColors = { activa: EJ.green, planificada: EJ.cyan, finalizada: EJ.muted };
  const estadoBg = { activa: EJ.greenLight, planificada: EJ.cyanLight, finalizada: EJ.bgApp };

  const objColors = { atraer: EJ.cyan, convertir: EJ.pink, fidelizar: EJ.violet };
  const objBg = { atraer: EJ.cyanLight, convertir: EJ.pinkLight, fidelizar: EJ.violetLight };

  const guardarCampana = () => {
    if (!nueva.nombre) return;
    setCampanas(prev => [...prev, {
      ...nueva, id: Date.now(), diasRestantes: 0, estado: 'planificada',
      ventas: 0, meta: Number(nueva.meta) || 5,
      checks: { historia: false, consultas: false, registro: false, recordatorio: false, seguimiento: false }
    }]);
    setNueva({ nombre: '', tipo: 'adquisicion', producto: '', inicio: '', fin: '', meta: '', notas: '' });
    setShowModal(false);
  };

  const toggleCheck = (campId, checkKey) => {
    setCampanas(prev => prev.map(c => c.id === campId ? {
      ...c, checks: { ...c.checks, [checkKey]: !c.checks[checkKey] }
    } : c));
  };

  const campanasFiltradas = campanas.filter(c => tab === 'todas' || c.estado === tab || (tab === 'activas' && c.estado === 'activa'));

  // Modelos de contenido rápidos (selección de los 46)
  const modelos = [
    { n: '01', nombre: 'Técnico e Informativo', eng: 'Guardados', desc: 'Enseña algo de calidad, muestra expertise', color: EJ.cyan },
    { n: '03', nombre: 'Moneda Social', eng: 'Marcaciones', desc: 'Identificación: "estamos en el mismo barco"', color: EJ.violet },
    { n: '05', nombre: 'Empatía y Abrazo', eng: 'Comentarios', desc: 'Haz que la audiencia se sienta "abrazada"', color: EJ.pink },
    { n: '08', nombre: 'Dualidades', eng: 'Compartidos', desc: '"Lo que creen vs. Lo que realmente es"', color: EJ.cyan },
    { n: '15', nombre: 'Testimonios', eng: 'Marcaciones', desc: 'Prueba social: situación → solución → resultado', color: EJ.green },
    { n: '22', nombre: 'Jalón de Orejas', eng: 'Reflexión', desc: 'Motiva a través de reflexión directa', color: EJ.violet },
    { n: '29', nombre: 'Storytelling FMAE', eng: 'Conexión', desc: 'Fracaso → Miedo → Amor → Éxito', color: EJ.pink },
    { n: '45', nombre: 'Contenido Aspiracional', eng: 'Atracción', desc: 'Muestra el resultado prometido', color: EJ.cyan },
  ];

  return (
    <div style={{ padding: '28px 32px', background: EJ.bgApp, minHeight: '100%' }}>
      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
        <div>
          <h2 style={{ margin: 0, fontFamily: 'Nunito, sans-serif', fontWeight: 800, fontSize: 26, color: EJ.navy }}>Campañas y Contenido</h2>
          <p style={{ margin: '4px 0 0', fontSize: 13, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif' }}>Pilar 2 — Define el CÓMO de la venta · Rota los 3 tipos mensualmente</p>
        </div>
        <Btn variant="primary" size="sm" onClick={() => setShowModal(true)}>+ Nueva campaña</Btn>
      </div>

      {/* Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 24 }}>
        <StatCard label="Campañas activas" value={campanas.filter(c => c.estado === 'activa').length} color={EJ.green} icon="📣" />
        <StatCard label="Ventas generadas" value={campanas.reduce((s, c) => s + c.ventas, 0)} color={EJ.cyan} icon="💰" />
        <StatCard label="Próximo lanzamiento" value="10 may" color={EJ.violet} icon="🚀" />
        <StatCard label="Tipo pendiente" value="Monetiz." color={EJ.pink} icon="🔁" change="Rotar los 3 tipos" />
      </div>

      {/* Tabs campañas */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 18 }}>
        <PillTabs
          tabs={[{ id: 'activas', label: '🟢 Activas' }, { id: 'planificada', label: '🔵 Planificadas' }, { id: 'finalizada', label: '⚫ Finalizadas' }, { id: 'todas', label: 'Todas' }]}
          active={tab}
          onChange={setTab}
        />
      </div>

      {/* Tarjetas de campaña */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18, marginBottom: 28 }}>
        {campanasFiltradas.map(c => {
          const tipo = tipos[c.tipo];
          const pct = Math.round((c.ventas / c.meta) * 100);
          return (
            <Card key={c.id} style={{ borderTop: `4px solid ${tipo.color}` }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                    <Badge variant={c.tipo === 'adquisicion' ? 'cyan' : c.tipo === 'monetizacion' ? 'violet' : 'pink'}>{tipo.emoji} {tipo.label}</Badge>
                    <span style={{ background: estadoBg[c.estado], color: estadoColors[c.estado], fontSize: 10, fontWeight: 700, padding: '3px 10px', borderRadius: 50, fontFamily: 'Nunito, sans-serif' }}>
                      {c.estado.charAt(0).toUpperCase() + c.estado.slice(1)}
                    </span>
                  </div>
                  <div style={{ fontSize: 16, fontWeight: 800, color: EJ.navy, fontFamily: 'Nunito, sans-serif' }}>{c.nombre}</div>
                  <div style={{ fontSize: 12, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif', marginTop: 2 }}>📦 {c.producto}</div>
                </div>
                {c.estado === 'activa' && (
                  <div style={{ textAlign: 'right', flexShrink: 0 }}>
                    <div style={{ fontSize: 20, fontWeight: 500, color: EJ.pink, fontFamily: 'JetBrains Mono, monospace' }}>{c.diasRestantes}d</div>
                    <div style={{ fontSize: 10, color: EJ.muted, fontFamily: 'Nunito Sans, sans-serif' }}>restantes</div>
                  </div>
                )}
              </div>
              <div style={{ display: 'flex', gap: 16, marginBottom: 14 }}>
                <div style={{ fontSize: 11, color: EJ.muted, fontFamily: 'Nunito Sans, sans-serif' }}>📅 {c.inicio} → {c.fin}</div>
              </div>
              {/* Progreso ventas */}
              <div style={{ marginBottom: 14 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                  <span style={{ fontSize: 12, fontWeight: 600, color: EJ.navy, fontFamily: 'Nunito Sans, sans-serif' }}>Ventas</span>
                  <span style={{ fontSize: 12, color: EJ.muted, fontFamily: 'JetBrains Mono, monospace' }}>{c.ventas}/{c.meta}</span>
                </div>
                <div style={{ background: EJ.border, borderRadius: 50, height: 7 }}>
                  <div style={{ background: tipo.color, width: `${Math.min(pct, 100)}%`, height: 7, borderRadius: 50, transition: 'width 0.4s' }}></div>
                </div>
              </div>
              {/* Checklist diario */}
              {c.estado === 'activa' && (
                <div style={{ background: EJ.bgApp, borderRadius: 14, padding: '10px 14px' }}>
                  <div style={{ fontSize: 11, fontWeight: 700, color: EJ.navy, fontFamily: 'Nunito, sans-serif', marginBottom: 8 }}>Checklist diario</div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
                    {[
                      { key: 'historia', label: 'Historia publicada' },
                      { key: 'consultas', label: 'Consultas < 2h' },
                      { key: 'registro', label: 'Ventas registradas' },
                      { key: 'recordatorio', label: 'Recordatorio enviado' },
                      { key: 'seguimiento', label: 'Seguimiento hecho' },
                    ].map(item => (
                      <Checkbox key={item.key} checked={c.checks[item.key]} onChange={() => toggleCheck(c.id, item.key)} label={item.label} />
                    ))}
                  </div>
                </div>
              )}
              {c.notas && (
                <div style={{ marginTop: 12, fontSize: 12, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif', fontStyle: 'italic' }}>💬 {c.notas}</div>
              )}
            </Card>
          );
        })}
      </div>

      {/* Planificador de contenido semanal */}
      <Card style={{ marginBottom: 24 }}>
        <SectionHeader title="Planificador de contenido semanal" subtitle="Pilar 3 · Bloque 2 — Publicar 1 pieza diaria con objetivo claro" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
          {contenido.map((d, i) => (
            <div key={i} style={{ background: d.listo ? EJ.greenLight : EJ.bgApp, borderRadius: 16, padding: '14px 14px', border: `1.5px solid ${d.listo ? EJ.green : EJ.border}` }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                <div style={{ fontSize: 13, fontWeight: 800, color: EJ.navy, fontFamily: 'Nunito, sans-serif' }}>{d.dia}</div>
                <span
                  onClick={() => setContenido(prev => prev.map((x, j) => j === i ? {...x, listo: !x.listo} : x))}
                  style={{ cursor: 'pointer', fontSize: 16 }}
                >{d.listo ? '✅' : '○'}</span>
              </div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, background: objBg[d.objetivo], borderRadius: 50, padding: '3px 10px', marginBottom: 8 }}>
                <span style={{ fontSize: 10, fontWeight: 700, color: objColors[d.objetivo], fontFamily: 'Nunito, sans-serif', textTransform: 'uppercase', letterSpacing: '0.04em' }}>{d.objetivo}</span>
              </div>
              <div style={{ fontSize: 11, fontWeight: 600, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif', marginBottom: 6 }}>📱 {d.formato}</div>
              <div style={{ fontSize: 12, color: EJ.navy, fontFamily: 'Nunito Sans, sans-serif', lineHeight: 1.4 }}>{d.tema}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 14, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
          {[
            { obj: 'atraer', desc: 'Nuevas personas descubren tu negocio' },
            { obj: 'convertir', desc: 'Las personas compran o se acercan a comprar' },
            { obj: 'fidelizar', desc: 'Clientes existentes se quedan y comparten' },
          ].map(o => (
            <div key={o.obj} style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
              <div style={{ width: 10, height: 10, borderRadius: '50%', background: objColors[o.obj], flexShrink: 0 }}></div>
              <span style={{ fontSize: 11, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif' }}><strong style={{ color: objColors[o.obj] }}>{o.obj.charAt(0).toUpperCase() + o.obj.slice(1)}:</strong> {o.desc}</span>
            </div>
          ))}
        </div>
      </Card>

      {/* Modelos de contenido */}
      <Card>
        <SectionHeader title="Modelos de contenido — Ejecutora" subtitle="De los 46 modelos del Sistema de Contenido Ejecutora" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {modelos.map((m, i) => (
            <div key={i} style={{ background: EJ.bgApp, borderRadius: 14, padding: '14px 16px', borderTop: `3px solid ${m.color}` }}>
              <div style={{ fontSize: 10, fontWeight: 700, color: m.color, fontFamily: 'Nunito, sans-serif', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 }}>Modelo {m.n}</div>
              <div style={{ fontSize: 13, fontWeight: 800, color: EJ.navy, fontFamily: 'Nunito, sans-serif', marginBottom: 4 }}>{m.nombre}</div>
              <div style={{ fontSize: 11, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif', marginBottom: 6 }}>{m.desc}</div>
              <div style={{ fontSize: 10, background: EJ.white, color: m.color, borderRadius: 50, padding: '3px 10px', display: 'inline-block', fontWeight: 700, fontFamily: 'Nunito, sans-serif' }}>↑ {m.eng}</div>
            </div>
          ))}
        </div>
      </Card>

      {/* Modal nueva campaña */}
      <Modal open={showModal} onClose={() => setShowModal(false)} title="Nueva campaña" width={500}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Input label="Nombre de la campaña" value={nueva.nombre} onChange={e => setNueva(p => ({...p, nombre: e.target.value}))} placeholder="Pack Bienvenida — Mayo" />
          <Select label="Tipo de campaña" value={nueva.tipo} onChange={e => setNueva(p => ({...p, tipo: e.target.value}))} options={[
            { value: 'adquisicion', label: '🎯 Adquisición — atraer clientes nuevas' },
            { value: 'monetizacion', label: '💰 Monetización — más a las actuales' },
            { value: 'activacion', label: '🔁 Activación — reactivar inactivas' },
          ]} />
          <Input label="Producto protagonista" value={nueva.producto} onChange={e => setNueva(p => ({...p, producto: e.target.value}))} placeholder="Solo uno — ej. Pack Bienvenida $37" />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
            <Input label="Fecha inicio" type="date" value={nueva.inicio} onChange={e => setNueva(p => ({...p, inicio: e.target.value}))} />
            <Input label="Fecha fin" type="date" value={nueva.fin} onChange={e => setNueva(p => ({...p, fin: e.target.value}))} />
            <Input label="Meta de ventas" type="number" value={nueva.meta} onChange={e => setNueva(p => ({...p, meta: e.target.value}))} placeholder="10" />
          </div>
          <Textarea label="Notas de estrategia" value={nueva.notas} onChange={e => setNueva(p => ({...p, notas: e.target.value}))} placeholder="Oferta, palanca de urgencia, canales..." rows={3} />
          <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
            <Btn variant="ghost" size="sm" onClick={() => setShowModal(false)}>Cancelar</Btn>
            <Btn variant="primary" size="sm" onClick={guardarCampana}>Crear campaña</Btn>
          </div>
        </div>
      </Modal>
    </div>
  );
};

Object.assign(window, { CampanasScreen });