// ── CREACIÓN DE PROMOCIONES con IA ───────────────────

function Promociones() {
  const { useState, useEffect } = React;

  const [productos,   setProductos]  = useState([]);
  const [selProds,    setSelProds]   = useState([]);
  const [buscando,    setBuscando]   = useState(false);
  const [resultado,   setResultado]  = useState(null);
  const [error,       setError]      = useState('');
  const [busqueda,    setBusqueda]   = useState('');
  const [tipoPromo,   setTipoPromo]  = useState('temporada');
  const [canal,       setCanal]      = useState('redes');
  const [historial,   setHistorial]  = useState(() => lsGet('promociones_hist', []));
  const [viendoHist,  setViendoHist] = useState(null);
  const [copiado,     setCopiado]    = useState('');

  useEffect(() => {
    fetch('data/inventario_real.json').then(r => r.json()).then(setProductos).catch(() => {});
  }, []);

  const filtrados = productos.filter(p => {
    const q = busqueda.toLowerCase();
    return p.is_active && (!q || p.nombre?.toLowerCase().includes(q) || p.metal?.toLowerCase().includes(q) || p.categoria?.toLowerCase().includes(q));
  }).slice(0, 80);

  function toggleProd(p) {
    setSelProds(prev => prev.find(x => x.id === p.id) ? prev.filter(x => x.id !== p.id) : [...prev, p].slice(0, 10));
  }

  async function generarPromocion() {
    if (!selProds.length) return;
    setBuscando(true); setError(''); setResultado(null);
    const resumen = selProds.map(p => `- ${p.nombre} (${p.metal}, $${(p.precio||0).toLocaleString('es-CL')})`).join('\n');
    const tiposLabel = { temporada:'Temporada / Fecha especial', liquidacion:'Liquidación / Stock', fidelidad:'Fidelización clientes', lanzamiento:'Lanzamiento producto', combo:'Combo / Pack', descuento:'Descuento directo' };
    const canalesLabel = { redes:'Redes Sociales (Instagram/Facebook)', whatsapp:'WhatsApp / Mensajería', local:'Publicidad en el local (TV/pantalla)', vitrina:'Vitrina y punto de venta', email:'Email marketing', impreso:'Material impreso' };
    try {
      const prompt = `Eres un experto en marketing de joyería de lujo para Chile. Analiza estos productos y crea una promoción poderosa.

PRODUCTOS:
${resumen}

TIPO DE PROMOCIÓN: ${tiposLabel[tipoPromo]}
CANAL: ${canalesLabel[canal]}
CONTEXTO: Navarro Joyería Fina, Santa Cruz, Valle de Colchagua. Joyería artesanal de alta gama.

Responde SOLO con este JSON (sin texto extra):
{
  "nombre_promo": "Nombre creativo de la promoción",
  "concepto": "1-2 oraciones describiendo el concepto creativo",
  "descuento_sugerido": "Ej: 15% OFF o 2x1 o Regalo incluido",
  "vigencia_sugerida": "Ej: Válido hasta 30 de junio 2026",
  "frases_anuncio": ["Frase corta 1 (máx 8 palabras)", "Frase 2", "Frase 3", "Frase 4", "Frase 5"],
  "speech_venta": "Script completo de 4-6 oraciones para que el vendedor hable con el cliente en el local",
  "caption_redes": "Caption completo para Instagram/Facebook con emojis y hashtags relevantes Chile joyería",
  "mensaje_whatsapp": "Mensaje corto y directo para WhatsApp (máx 3 líneas)",
  "ideas_visuales": ["Idea visual 1 para la imagen del anuncio", "Idea visual 2", "Idea visual 3"],
  "llamado_accion": "CTA principal (ej: ¡Solo este fin de semana!)",
  "precio_con_promo": "Descripción del precio/beneficio final para el cliente"
}`;
      const resp = await window.claude.complete(prompt);
      const match = resp.match(/\{[\s\S]*\}/);
      if (match) {
        const data = JSON.parse(match[0]);
        setResultado(data);
        const entrada = { id: Date.now(), fecha: hoy(), productos: selProds.map(p => p.nombre), tipoPromo, canal, ...data };
        const nuevo = [entrada, ...historial].slice(0, 15);
        setHistorial(nuevo); lsSet('promociones_hist', nuevo);
      } else { setError('No se pudo parsear la respuesta. Intenta de nuevo.'); }
    } catch(e) { setError('Error al generar. Verifica conexión.'); }
    setBuscando(false);
  }

  function copiar(texto, key) {
    navigator.clipboard.writeText(texto).catch(() => {});
    setCopiado(key); setTimeout(() => setCopiado(''), 2000);
  }

  const TIPOS_PROMO = [
    { id:'temporada', label:'🗓 Temporada', desc:'Navidad, 14 Feb, Día Madre…' },
    { id:'liquidacion', label:'🏷 Liquidación', desc:'Rotar stock parado' },
    { id:'fidelidad', label:'💛 Fidelización', desc:'Clientes frecuentes' },
    { id:'lanzamiento', label:'✨ Lanzamiento', desc:'Producto nuevo' },
    { id:'combo', label:'🎁 Combo/Pack', desc:'Vender más unidades' },
    { id:'descuento', label:'% Descuento', desc:'Oferta directa' },
  ];
  const CANALES = [
    { id:'redes', label:'📱 Redes' }, { id:'whatsapp', label:'💬 WhatsApp' },
    { id:'local', label:'📺 TV local' }, { id:'vitrina', label:'🪟 Vitrina' },
    { id:'email', label:'📧 Email' }, { id:'impreso', label:'🖨 Impreso' },
  ];

  const S = promoStyles;
  const activo = viendoHist || resultado;

  return (
    <div style={{ display:'flex', height:'100%', overflow:'hidden' }}>

      {/* ── Col izquierda: configurar ── */}
      <div style={S.leftCol}>
        <div style={{ fontFamily:'Cormorant Garamond,serif', fontSize:'20px', fontWeight:600, color:'var(--cream)', marginBottom:'4px' }}>
          Creación de Promociones
        </div>
        <div style={{ color:'var(--cream-3)', fontSize:'11px', marginBottom:'18px' }}>
          Selecciona productos → IA genera todo el material
        </div>

        {/* Tipo promo */}
        <div style={S.grupo}>
          <div style={S.label}>Tipo de Promoción</div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'5px' }}>
            {TIPOS_PROMO.map(t => (
              <button key={t.id} onClick={() => setTipoPromo(t.id)}
                style={{ ...S.optCard, ...(tipoPromo===t.id ? S.optCardAct : {}) }}>
                <div style={{ fontSize:'11px', fontWeight:600, color:'var(--cream)' }}>{t.label}</div>
                <div style={{ fontSize:'9px', color:'var(--cream-3)', marginTop:'1px' }}>{t.desc}</div>
              </button>
            ))}
          </div>
        </div>

        {/* Canal */}
        <div style={S.grupo}>
          <div style={S.label}>Canal principal</div>
          <div style={{ display:'flex', flexWrap:'wrap', gap:'4px' }}>
            {CANALES.map(c => (
              <button key={c.id} onClick={() => setCanal(c.id)}
                style={{ ...calcStyles2.chip, ...(canal===c.id ? calcStyles2.chipAct : {}), fontSize:'10px' }}>
                {c.label}
              </button>
            ))}
          </div>
        </div>

        {/* Buscar productos */}
        <div style={S.grupo}>
          <div style={S.label}>Productos a promocionar ({selProds.length}/10)</div>
          <input style={{ ...calcStyles2.input, marginBottom:'8px' }}
            placeholder="Buscar producto…" value={busqueda}
            onChange={e => setBusqueda(e.target.value)} />
          <div style={{ maxHeight:'220px', overflowY:'auto', display:'flex', flexDirection:'column', gap:'3px' }}>
            {filtrados.map(p => {
              const sel = selProds.find(x => x.id === p.id);
              return (
                <div key={p.id} onClick={() => toggleProd(p)}
                  style={{ ...S.prodRow, ...(sel ? S.prodRowSel : {}) }}>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ color:'var(--cream)', fontSize:'11px', fontWeight:500, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{p.nombre}</div>
                    <div style={{ color:'var(--cream-3)', fontSize:'9px' }}>{p.metal} · {clp(p.precio)}</div>
                  </div>
                  <div style={{ color: sel?'var(--gold)':'var(--border)', fontSize:'14px', flexShrink:0 }}>{sel ? '✓' : '+'}</div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Seleccionados */}
        {selProds.length > 0 && (
          <div style={{ ...S.grupo, background:'var(--surface)', borderRadius:'8px', padding:'10px' }}>
            <div style={S.label}>Seleccionados</div>
            {selProds.map(p => (
              <div key={p.id} style={{ display:'flex', justifyContent:'space-between', fontSize:'10px', padding:'2px 0' }}>
                <span style={{ color:'var(--cream-2)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', flex:1 }}>{p.nombre}</span>
                <button onClick={() => toggleProd(p)} style={{ background:'none', border:'none', color:'var(--cream-3)', cursor:'pointer', fontSize:'10px', padding:'0 0 0 6px' }}>✕</button>
              </div>
            ))}
          </div>
        )}

        <button onClick={generarPromocion} disabled={buscando || !selProds.length}
          style={{ ...posStyles.cobrarBtn, width:'100%', marginTop:'8px', opacity: (!selProds.length||buscando)?0.5:1 }}>
          {buscando ? '⏳ Generando promoción…' : '✦ Generar con IA'}
        </button>

        {error && <div style={{ marginTop:'8px', color:'#e74c3c', fontSize:'11px', textAlign:'center' }}>{error}</div>}

        {/* Historial */}
        {historial.length > 0 && (
          <div style={{ marginTop:'16px' }}>
            <div style={S.label}>Historial</div>
            {historial.slice(0,6).map(h => (
              <div key={h.id} onClick={() => { setViendoHist(h); setResultado(null); }}
                style={{ ...S.prodRow, cursor:'pointer', marginBottom:'3px' }}>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ color:'var(--cream)', fontSize:'10px', fontWeight:600, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{h.nombre_promo}</div>
                  <div style={{ color:'var(--cream-3)', fontSize:'9px' }}>{h.fecha} · {h.productos?.slice(0,2).join(', ')}</div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* ── Col derecha: resultado ── */}
      <div style={S.rightCol}>
        {!activo && !buscando && (
          <div style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', height:'100%', gap:'12px', color:'var(--cream-3)' }}>
            <div style={{ fontSize:'44px', opacity:0.3 }}>🎯</div>
            <div style={{ fontSize:'14px', textAlign:'center', maxWidth:'280px', lineHeight:'1.7' }}>
              Selecciona productos y configura tu promoción.<br/>
              <span style={{ fontSize:'11px' }}>La IA analizará tus productos y generará todo el material publicitario.</span>
            </div>
          </div>
        )}
        {buscando && (
          <div style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', height:'100%', gap:'16px' }}>
            <div style={{ fontSize:'36px', animation:'pulse 1.5s infinite' }}>✦</div>
            <div style={{ color:'var(--cream)', fontSize:'13px' }}>Analizando productos y creando promoción…</div>
            <div style={{ color:'var(--cream-3)', fontSize:'11px', textAlign:'center' }}>
              La IA está generando frases, speech de venta,<br/>captions para redes e ideas creativas.
            </div>
          </div>
        )}
        {activo && !buscando && (
          <div style={{ overflowY:'auto', height:'100%', padding:'20px' }} className="fade-in">
            {/* Header */}
            <div style={{ background:'linear-gradient(135deg,var(--surface),var(--bg-card))', border:'1px solid var(--border)', borderRadius:'14px', padding:'18px', marginBottom:'14px', borderTop:'2px solid var(--gold)' }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
                <div>
                  <div style={{ fontFamily:'Cormorant Garamond,serif', fontSize:'22px', fontWeight:600, color:'var(--cream)' }}>{activo.nombre_promo}</div>
                  <div style={{ color:'var(--cream-3)', fontSize:'11px', marginTop:'4px', lineHeight:'1.7' }}>{activo.concepto}</div>
                </div>
                <div style={{ textAlign:'right', flexShrink:0, marginLeft:'12px' }}>
                  <div style={{ color:'var(--gold)', fontWeight:700, fontSize:'14px' }}>{activo.descuento_sugerido}</div>
                  <div style={{ color:'var(--cream-3)', fontSize:'10px', marginTop:'2px' }}>{activo.vigencia_sugerida}</div>
                </div>
              </div>
              <div style={{ marginTop:'10px', padding:'8px 12px', background:'rgba(201,168,76,0.08)', borderRadius:'8px', fontSize:'12px', color:'var(--gold)', fontWeight:600 }}>
                📣 {activo.llamado_accion}
              </div>
            </div>

            {/* Grid de recursos */}
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'10px', marginBottom:'10px' }}>

              {/* Frases */}
              <div style={S.card}>
                <div style={S.cardTitle}>💬 Frases para el anuncio</div>
                {(activo.frases_anuncio||[]).map((f,i) => (
                  <div key={i} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'6px 0', borderBottom:'1px solid var(--border)' }}>
                    <span style={{ color:'var(--cream)', fontSize:'12px', fontWeight: i===0?600:400 }}>"{f}"</span>
                    <button onClick={() => copiar(f, `frase${i}`)}
                      style={{ background:'none', border:'none', color:copiado===`frase${i}`?'var(--gold)':'var(--cream-3)', cursor:'pointer', fontSize:'12px' }}>
                      {copiado===`frase${i}` ? '✓' : '⧉'}
                    </button>
                  </div>
                ))}
              </div>

              {/* Ideas visuales */}
              <div style={S.card}>
                <div style={S.cardTitle}>🎨 Ideas para imagen/video</div>
                {(activo.ideas_visuales||[]).map((v,i) => (
                  <div key={i} style={{ padding:'6px 0', borderBottom:'1px solid var(--border)', fontSize:'11px', color:'var(--cream-2)', lineHeight:'1.5' }}>
                    <span style={{ color:'var(--gold)', marginRight:'5px' }}>#{i+1}</span>{v}
                  </div>
                ))}
                <div style={{ marginTop:'8px', fontSize:'10px', color:'var(--cream-3)' }}>
                  → Úsalas en el módulo AV Publicitaria
                </div>
              </div>
            </div>

            {/* Speech de venta */}
            <div style={{ ...S.card, marginBottom:'10px' }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:'8px' }}>
                <div style={S.cardTitle}>🎤 Speech de venta (para vendedor/a)</div>
                <button onClick={() => copiar(activo.speech_venta, 'speech')}
                  style={{ ...invStyles.btnEdit, fontSize:'10px' }}>
                  {copiado==='speech' ? '✓ Copiado' : '⧉ Copiar'}
                </button>
              </div>
              <div style={{ background:'var(--surface)', borderRadius:'8px', padding:'14px', fontSize:'12px', color:'var(--cream-2)', lineHeight:'1.8', fontStyle:'italic' }}>
                "{activo.speech_venta}"
              </div>
            </div>

            {/* Captions / mensajes */}
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'10px' }}>
              <div style={S.card}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:'8px' }}>
                  <div style={S.cardTitle}>📱 Caption Redes Sociales</div>
                  <button onClick={() => copiar(activo.caption_redes, 'caption')}
                    style={{ ...invStyles.btnEdit, fontSize:'10px' }}>
                    {copiado==='caption' ? '✓' : '⧉'}
                  </button>
                </div>
                <div style={{ fontSize:'11px', color:'var(--cream-2)', lineHeight:'1.7', whiteSpace:'pre-line' }}>
                  {activo.caption_redes}
                </div>
              </div>

              <div style={S.card}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:'8px' }}>
                  <div style={S.cardTitle}>💬 Mensaje WhatsApp</div>
                  <button onClick={() => copiar(activo.mensaje_whatsapp, 'wa')}
                    style={{ ...invStyles.btnEdit, fontSize:'10px' }}>
                    {copiado==='wa' ? '✓' : '⧉'}
                  </button>
                </div>
                <div style={{ background:'#1a3a2a', borderRadius:'8px', padding:'12px', fontSize:'11px', color:'#e8f8e0', lineHeight:'1.7', whiteSpace:'pre-line' }}>
                  {activo.mensaje_whatsapp}
                </div>
                {activo.precio_con_promo && (
                  <div style={{ marginTop:'8px', padding:'8px', background:'var(--gold-dim)', borderRadius:'6px', fontSize:'11px', color:'var(--gold)' }}>
                    💰 {activo.precio_con_promo}
                  </div>
                )}
              </div>
            </div>

            <div style={{ marginTop:'12px', display:'flex', gap:'8px' }}>
              <button onClick={() => { setResultado(null); setViendoHist(null); }}
                style={{ ...invStyles.btnEdit, flex:1, textAlign:'center', padding:'9px' }}>
                ← Nueva promoción
              </button>
              <button onClick={() => {
                const todo = [activo.nombre_promo, activo.concepto, '', 'FRASES:', ...(activo.frases_anuncio||[]).map(f=>`• "${f}"`), '', 'SPEECH VENTA:', activo.speech_venta, '', 'CAPTION REDES:', activo.caption_redes, '', 'WHATSAPP:', activo.mensaje_whatsapp].join('\n');
                copiar(todo, 'todo');
              }}
                style={{ ...posStyles.cobrarBtn, margin:0, flex:1, fontSize:'12px' }}>
                {copiado==='todo' ? '✓ Todo copiado' : '⧉ Copiar todo'}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

const promoStyles = {
  leftCol: { width:'310px', flexShrink:0, overflowY:'auto', padding:'18px', borderRight:'1px solid var(--border)', display:'flex', flexDirection:'column', gap:'2px' },
  rightCol: { flex:1, overflow:'hidden', display:'flex', flexDirection:'column' },
  grupo: { marginBottom:'14px' },
  label: { fontSize:'10px', color:'var(--cream-3)', fontWeight:600, letterSpacing:'0.5px', textTransform:'uppercase', marginBottom:'6px' },
  optCard: { background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'8px', padding:'8px 10px', cursor:'pointer', textAlign:'left', fontFamily:'Inter,sans-serif', transition:'all 0.15s' },
  optCardAct: { border:'1px solid var(--gold)', background:'var(--gold-dim)' },
  prodRow: { display:'flex', alignItems:'center', gap:'6px', padding:'6px 8px', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'6px', cursor:'pointer' },
  prodRowSel: { border:'1px solid var(--gold)', background:'var(--gold-dim)' },
  card: { background:'var(--bg-card)', border:'1px solid var(--border)', borderRadius:'10px', padding:'14px' },
  cardTitle: { fontFamily:'Cormorant Garamond,serif', fontSize:'14px', fontWeight:600, color:'var(--cream)', marginBottom:'10px', paddingBottom:'6px', borderBottom:'1px solid var(--border)' },
};

Object.assign(window, { Promociones });