// ── MÓDULO REGALOS & FIDELIZACIÓN ────────────────────

function RegalosFidelizacion() {
  const { useState } = React;
  const [subTab, setSubTab] = useState('puntos');

  // ── Clientes con puntos ──
  const clientes = lsGet('clientes', []);
  const [puntosData, setPuntosData] = useState(() => lsGet('fidelizacion_puntos', [
    { clienteId:'1', nombre:'María González', rut:'12.345.678-9', puntos:1450, nivel:'Plata', totalCompras:580000, fechaUltima:'2026-04-18' },
    { clienteId:'2', nombre:'Carlos Pérez',   rut:'9.876.543-2',  puntos:3200, nivel:'Oro',   totalCompras:1280000, fechaUltima:'2026-04-20' },
    { clienteId:'3', nombre:'Ana Flores',     rut:'15.432.100-5', puntos:780,  nivel:'Bronce', totalCompras:312000, fechaUltima:'2026-03-30' },
    { clienteId:'4', nombre:'Pedro Silva',    rut:'11.222.333-4', puntos:5800, nivel:'Diamante', totalCompras:2320000, fechaUltima:'2026-04-22' },
  ]));

  const NIVELES = [
    { nivel:'Bronce',   min:0,     max:999,   color:'#b8733a', desc:'Hasta $399.999 en compras', beneficio:'5% de descuento en próxima compra' },
    { nivel:'Plata',    min:1000,  max:2999,  color:'#b0b8c8', desc:'$400.000–$1.199.999', beneficio:'8% descuento + envío gratis' },
    { nivel:'Oro',      min:3000,  max:5999,  color:'#c9a84c', desc:'$1.200.000–$2.399.999', beneficio:'12% descuento + regalo bienvenida' },
    { nivel:'Diamante', min:6000,  max:99999, color:'#9ecfff', desc:'$2.400.000+', beneficio:'15% + acceso anticipado + regalo premium' },
  ];

  // ── Campañas ──
  const [campanas, setCampanas] = useState(() => lsGet('fidelizacion_campanas', [
    { id:'C-001', nombre:'Cumpleaños VIP', tipo:'Automática', descuento:20, activa:true, trigger:'Cumpleaños ±7 días', enviados:12 },
    { id:'C-002', nombre:'Promo Día de la Madre', tipo:'Manual', descuento:15, activa:true, trigger:'', enviados:48 },
    { id:'C-003', nombre:'Reactivación 3 meses', tipo:'Automática', descuento:10, activa:false, trigger:'Sin compra >90 días', enviados:5 },
  ]));

  // ── Regalos/Catálogo ──
  const [regalos, setRegalos] = useState(() => lsGet('fidelizacion_regalos', [
    { id:'RG-001', nombre:'Limpieza ultrasonido gratis', puntos:500, tipo:'Servicio', stock:99, activo:true },
    { id:'RG-002', nombre:'Caja de regalo premium',      puntos:800, tipo:'Producto', stock:15, activo:true },
    { id:'RG-003', nombre:'Grabado gratis',               puntos:1200, tipo:'Servicio', stock:99, activo:true },
    { id:'RG-004', nombre:'Pulsera plata regalo',         puntos:2500, tipo:'Joya', stock:3, activo:true },
    { id:'RG-005', nombre:'Descuento 20% próxima compra', puntos:1500, tipo:'Descuento', stock:99, activo:true },
  ]));

  const [modalRegalo, setModalRegalo] = useState(false);
  const [modalCanjear, setModalCanjear] = useState(null);
  const [formRegalo, setFormRegalo] = useState({nombre:'',puntos:'',tipo:'Servicio',stock:''});

  const colorNivel = n => NIVELES.find(x=>x.nivel===n)?.color || 'var(--cream-3)';
  const totalPuntosActivos = puntosData.reduce((s,p)=>s+p.puntos,0);

  function canjearRegalo(cliente, regalo) {
    if (cliente.puntos < regalo.puntos) { alert('Puntos insuficientes'); return; }
    const next = puntosData.map(p=>p.clienteId===cliente.clienteId?{...p,puntos:p.puntos-regalo.puntos}:p);
    setPuntosData(next); lsSet('fidelizacion_puntos', next);
    setModalCanjear(null);
    alert(`✓ Canje registrado: ${regalo.nombre} para ${cliente.nombre}`);
  }

  const SUBTABS = [
    {id:'puntos',   label:'💎 Puntos & Niveles'},
    {id:'campanas', label:'📣 Campañas'},
    {id:'regalos',  label:'🎁 Catálogo de Regalos'},
    {id:'config',   label:'⚙ Configuración'},
  ];

  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',overflow:'hidden'}}>
      {/* Header */}
      <div style={{padding:'12px 20px',borderBottom:'1px solid var(--border)',background:'var(--bg-card)',flexShrink:0}}>
        <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'18px',fontWeight:600,color:'var(--cream)'}}>Regalos & Fidelización</div>
        <div style={{fontSize:'10px',color:'var(--cream-3)'}}>Programa de puntos, niveles, campañas y catálogo de premios</div>
      </div>

      {/* KPIs */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:'8px',padding:'12px 20px',borderBottom:'1px solid var(--border)',flexShrink:0}}>
        {[
          {l:'Clientes activos',v:puntosData.length,c:'var(--cream)'},
          {l:'Puntos en circulación',v:totalPuntosActivos.toLocaleString('es-CL'),c:'var(--gold)'},
          {l:'Campañas activas',v:campanas.filter(c=>c.activa).length,c:'#27ae60'},
          {l:'Regalos catálogo',v:regalos.filter(r=>r.activo).length,c:'var(--cream-2)'},
        ].map(k=>(
          <div key={k.l} style={{background:'var(--bg-card)',border:'1px solid var(--border)',borderRadius:'8px',padding:'10px',textAlign:'center'}}>
            <div style={{color:k.c,fontWeight:700,fontSize:'18px'}}>{k.v}</div>
            <div style={{color:'var(--cream-3)',fontSize:'9px',marginTop:'2px'}}>{k.l}</div>
          </div>
        ))}
      </div>

      {/* Sub-tabs */}
      <div style={{display:'flex',borderBottom:'1px solid var(--border)',background:'var(--bg-card)',flexShrink:0}}>
        {SUBTABS.map(t=>(
          <button key={t.id} onClick={()=>setSubTab(t.id)}
            style={{padding:'9px 16px',background:'transparent',border:'none',borderBottom:`2px solid ${subTab===t.id?'var(--gold)':'transparent'}`,
            color:subTab===t.id?'var(--cream)':'var(--cream-3)',cursor:'pointer',fontSize:'11px',fontFamily:'Inter,sans-serif'}}>
            {t.label}
          </button>
        ))}
      </div>

      <div style={{flex:1,overflowY:'auto',padding:'16px 20px'}}>

        {/* ── PUNTOS & NIVELES ── */}
        {subTab==='puntos' && (<>
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:'8px',marginBottom:'16px'}}>
            {NIVELES.map(n=>(
              <div key={n.nivel} style={{background:'var(--bg-card)',border:`1px solid ${n.color}33`,borderRadius:'10px',padding:'12px',textAlign:'center'}}>
                <div style={{color:n.color,fontSize:'22px',marginBottom:'4px'}}>
                  {{Bronce:'🥉',Plata:'🥈',Oro:'🥇',Diamante:'💎'}[n.nivel]}
                </div>
                <div style={{color:n.color,fontWeight:700,fontSize:'13px'}}>{n.nivel}</div>
                <div style={{color:'var(--cream-3)',fontSize:'9px',margin:'4px 0'}}>{n.desc}</div>
                <div style={{color:'var(--cream-2)',fontSize:'9px',lineHeight:'1.4'}}>{n.beneficio}</div>
                <div style={{marginTop:'6px',fontSize:'10px',color:'var(--cream-3)'}}>
                  {puntosData.filter(p=>p.nivel===n.nivel).length} clientes
                </div>
              </div>
            ))}
          </div>

          <div style={{background:'var(--bg-card)',border:'1px solid var(--border)',borderRadius:'10px',overflow:'hidden'}}>
            <table style={{width:'100%',borderCollapse:'collapse'}}>
              <thead>
                <tr>{['Cliente','RUT','Puntos','Nivel','Total compras','Última compra',''].map(h=>(
                  <th key={h} style={invStyles.th}>{h}</th>
                ))}</tr>
              </thead>
              <tbody>
                {puntosData.sort((a,b)=>b.puntos-a.puntos).map(p=>(
                  <tr key={p.clienteId} style={invStyles.tr}>
                    <td style={invStyles.td}><span style={{fontWeight:500,color:'var(--cream)'}}>{p.nombre}</span></td>
                    <td style={invStyles.td}><span style={{fontFamily:'monospace',fontSize:'10px',color:'var(--cream-3)'}}>{p.rut}</span></td>
                    <td style={invStyles.td}>
                      <span style={{color:'var(--gold)',fontWeight:700,fontSize:'14px'}}>{p.puntos.toLocaleString('es-CL')}</span>
                      <span style={{fontSize:'9px',color:'var(--cream-3)',marginLeft:'3px'}}>pts</span>
                    </td>
                    <td style={invStyles.td}>
                      <span style={{fontSize:'11px',fontWeight:600,padding:'2px 8px',borderRadius:'20px',color:colorNivel(p.nivel),background:colorNivel(p.nivel)+'22'}}>
                        {{Bronce:'🥉',Plata:'🥈',Oro:'🥇',Diamante:'💎'}[p.nivel]} {p.nivel}
                      </span>
                    </td>
                    <td style={invStyles.td}><span style={{color:'var(--gold)',fontSize:'11px'}}>{clp(p.totalCompras)}</span></td>
                    <td style={invStyles.td}><span style={{fontSize:'10px',color:'var(--cream-3)'}}>{p.fechaUltima}</span></td>
                    <td style={invStyles.td}>
                      <button onClick={()=>setModalCanjear(p)} style={invStyles.btnEdit}>🎁 Canjear</button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </>)}

        {/* ── CAMPAÑAS ── */}
        {subTab==='campanas' && (<>
          <div style={{display:'flex',justifyContent:'flex-end',marginBottom:'12px'}}>
            <button style={{background:'var(--gold)',color:'var(--bg)',border:'none',borderRadius:'8px',padding:'8px 16px',fontWeight:600,fontSize:'12px',cursor:'pointer',fontFamily:'Inter,sans-serif'}}>
              + Nueva Campaña
            </button>
          </div>
          <div style={{display:'flex',flexDirection:'column',gap:'10px'}}>
            {campanas.map(c=>(
              <div key={c.id} style={{background:'var(--bg-card)',border:`1px solid ${c.activa?'rgba(201,168,76,0.3)':'var(--border)'}`,borderRadius:'10px',padding:'14px',display:'flex',alignItems:'center',gap:'14px'}}>
                <div style={{fontSize:'24px'}}>{'📣'}</div>
                <div style={{flex:1}}>
                  <div style={{fontWeight:600,color:'var(--cream)',marginBottom:'2px'}}>{c.nombre}</div>
                  <div style={{fontSize:'10px',color:'var(--cream-3)'}}>
                    {c.tipo} · {c.descuento}% descuento
                    {c.trigger&&<span> · Trigger: {c.trigger}</span>}
                  </div>
                </div>
                <div style={{textAlign:'center'}}>
                  <div style={{fontWeight:700,color:'var(--gold)',fontSize:'16px'}}>{c.enviados}</div>
                  <div style={{fontSize:'9px',color:'var(--cream-3)'}}>enviados</div>
                </div>
                <div style={{display:'flex',flexDirection:'column',gap:'5px',alignItems:'flex-end'}}>
                  <span style={{fontSize:'10px',padding:'2px 9px',borderRadius:'20px',fontWeight:600,background:c.activa?'rgba(39,174,96,0.12)':'rgba(100,100,100,0.1)',color:c.activa?'#27ae60':'var(--cream-3)'}}>
                    {c.activa?'● Activa':'○ Pausada'}
                  </span>
                  <button onClick={()=>{const next=campanas.map(x=>x.id===c.id?{...x,activa:!x.activa}:x);setCampanas(next);lsSet('fidelizacion_campanas',next);}} style={invStyles.btnEdit}>
                    {c.activa?'Pausar':'Activar'}
                  </button>
                </div>
              </div>
            ))}
          </div>
        </>)}

        {/* ── CATÁLOGO REGALOS ── */}
        {subTab==='regalos' && (<>
          <div style={{display:'flex',justifyContent:'flex-end',marginBottom:'12px'}}>
            <button onClick={()=>setModalRegalo(true)} style={{background:'var(--gold)',color:'var(--bg)',border:'none',borderRadius:'8px',padding:'8px 16px',fontWeight:600,fontSize:'12px',cursor:'pointer',fontFamily:'Inter,sans-serif'}}>
              + Agregar Premio
            </button>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'10px'}}>
            {regalos.filter(r=>r.activo).map(r=>(
              <div key={r.id} style={{background:'var(--bg-card)',border:'1px solid var(--border)',borderRadius:'10px',padding:'14px',textAlign:'center'}}>
                <div style={{fontSize:'28px',marginBottom:'6px'}}>
                  {{Servicio:'✨',Producto:'📦',Joya:'💍',Descuento:'🏷'}[r.tipo]||'🎁'}
                </div>
                <div style={{fontWeight:600,color:'var(--cream)',fontSize:'13px',marginBottom:'4px'}}>{r.nombre}</div>
                <div style={{fontSize:'10px',color:'var(--cream-3)',marginBottom:'8px'}}>{r.tipo} · Stock: {r.stock}</div>
                <div style={{color:'var(--gold)',fontWeight:700,fontSize:'18px',marginBottom:'8px'}}>
                  {r.puntos.toLocaleString('es-CL')} pts
                </div>
                <button onClick={()=>setModalCanjear({nombre:'Cliente',puntos:9999,clienteId:'test',label:true})}
                  style={{background:'var(--gold)',color:'var(--bg)',border:'none',borderRadius:'6px',padding:'6px 14px',fontWeight:600,fontSize:'11px',cursor:'pointer',fontFamily:'Inter,sans-serif',width:'100%'}}>
                  Canjear
                </button>
              </div>
            ))}
          </div>
        </>)}

        {/* ── CONFIG ── */}
        {subTab==='config' && (
          <div style={{maxWidth:'500px'}}>
            <div style={{background:'var(--bg-card)',border:'1px solid var(--border)',borderRadius:'10px',padding:'16px',marginBottom:'12px'}}>
              <div style={{color:'var(--gold)',fontWeight:600,fontSize:'13px',marginBottom:'12px'}}>⚙ Reglas de Puntos</div>
              {[
                {l:'Puntos por $1.000 compra',v:'2.5 pts'},
                {l:'Puntos extra nivel Oro',v:'+20%'},
                {l:'Puntos extra nivel Diamante',v:'+35%'},
                {l:'Validez puntos (días)',v:'365'},
                {l:'Mínimo canje',v:'500 pts'},
              ].map(r=>(
                <div key={r.l} style={{display:'flex',justifyContent:'space-between',padding:'7px 0',borderBottom:'1px solid var(--border)',fontSize:'12px'}}>
                  <span style={{color:'var(--cream-3)'}}>{r.l}</span>
                  <span style={{color:'var(--gold)',fontWeight:600}}>{r.v}</span>
                </div>
              ))}
            </div>
            <div style={{background:'var(--bg-card)',border:'1px solid var(--border)',borderRadius:'10px',padding:'16px'}}>
              <div style={{color:'var(--gold)',fontWeight:600,fontSize:'13px',marginBottom:'12px'}}>🎂 Beneficios Cumpleaños</div>
              <div style={{fontSize:'11px',color:'var(--cream-2)',lineHeight:'1.7'}}>
                • Descuento automático 20% durante el mes de cumpleaños<br/>
                • Puntos dobles en la semana del cumpleaños<br/>
                • Email automático con código de regalo 7 días antes<br/>
                • WhatsApp de felicitación el día del cumpleaños
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Modal canjear */}
      {modalCanjear && !modalCanjear.label && (
        <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.7)',zIndex:500,display:'flex',alignItems:'center',justifyContent:'center'}}>
          <div style={{background:'var(--bg-card)',border:'1px solid var(--border)',borderRadius:'14px',padding:'24px',width:'400px',boxShadow:'0 20px 60px rgba(0,0,0,0.7)'}}>
            <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'18px',fontWeight:600,color:'var(--cream)',marginBottom:'16px'}}>
              Canjear Premio — {modalCanjear.nombre}
            </div>
            <div style={{fontSize:'12px',color:'var(--cream-3)',marginBottom:'12px'}}>Puntos disponibles: <b style={{color:'var(--gold)'}}>{modalCanjear.puntos.toLocaleString('es-CL')}</b></div>
            <div style={{display:'flex',flexDirection:'column',gap:'6px'}}>
              {regalos.filter(r=>r.activo).map(r=>(
                <div key={r.id} onClick={()=>canjearRegalo(modalCanjear,r)}
                  style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'9px 12px',
                  background:modalCanjear.puntos>=r.puntos?'var(--surface)':'var(--bg)',
                  border:`1px solid ${modalCanjear.puntos>=r.puntos?'var(--border)':'rgba(100,100,100,0.15)'}`,
                  borderRadius:'7px',cursor:modalCanjear.puntos>=r.puntos?'pointer':'not-allowed',opacity:modalCanjear.puntos>=r.puntos?1:0.4}}>
                  <span style={{fontSize:'12px',color:'var(--cream)'}}>{r.nombre}</span>
                  <span style={{color:'var(--gold)',fontWeight:600,fontSize:'12px'}}>{r.puntos.toLocaleString('es-CL')} pts</span>
                </div>
              ))}
            </div>
            <button onClick={()=>setModalCanjear(null)} style={{width:'100%',marginTop:'14px',padding:'9px',background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'8px',color:'var(--cream-3)',cursor:'pointer',fontSize:'12px',fontFamily:'Inter,sans-serif'}}>Cancelar</button>
          </div>
        </div>
      )}

      {/* Modal nuevo regalo */}
      {modalRegalo && (
        <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.7)',zIndex:500,display:'flex',alignItems:'center',justifyContent:'center'}}>
          <div style={{background:'var(--bg-card)',border:'1px solid var(--border)',borderRadius:'14px',padding:'24px',width:'400px'}}>
            <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'18px',fontWeight:600,color:'var(--cream)',marginBottom:'16px',display:'flex',justifyContent:'space-between'}}>
              Nuevo Premio
              <button onClick={()=>setModalRegalo(false)} style={{background:'transparent',border:'none',color:'var(--cream-3)',fontSize:'18px',cursor:'pointer'}}>✕</button>
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:'10px'}}>
              {[{l:'Nombre',k:'nombre',ph:'Ej: Limpieza gratis'},{l:'Puntos requeridos',k:'puntos',ph:'500'},{l:'Stock disponible',k:'stock',ph:'99'}].map(f=>(
                <div key={f.k}>
                  <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>{f.l}</div>
                  <input style={{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'6px',padding:'6px 9px',color:'var(--cream)',fontSize:'12px',width:'100%',outline:'none'}}
                    placeholder={f.ph} value={formRegalo[f.k]} onChange={e=>setFormRegalo(p=>({...p,[f.k]:e.target.value}))}/>
                </div>
              ))}
              <div>
                <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Tipo</div>
                <select style={{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'6px',padding:'6px 9px',color:'var(--cream)',fontSize:'12px',width:'100%',outline:'none'}}
                  value={formRegalo.tipo} onChange={e=>setFormRegalo(p=>({...p,tipo:e.target.value}))}>
                  {['Servicio','Producto','Joya','Descuento'].map(t=><option key={t}>{t}</option>)}
                </select>
              </div>
            </div>
            <div style={{display:'flex',gap:'8px',marginTop:'16px'}}>
              <button onClick={()=>setModalRegalo(false)} style={{flex:1,padding:'9px',background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'8px',color:'var(--cream-3)',cursor:'pointer',fontSize:'12px',fontFamily:'Inter,sans-serif'}}>Cancelar</button>
              <button onClick={()=>{
                const nuevo={id:`RG-${String(regalos.length+1).padStart(3,'0')}`,nombre:formRegalo.nombre,puntos:parseInt(formRegalo.puntos)||0,tipo:formRegalo.tipo,stock:parseInt(formRegalo.stock)||99,activo:true};
                const next=[...regalos,nuevo];setRegalos(next);lsSet('fidelizacion_regalos',next);setModalRegalo(false);
              }} style={{flex:2,padding:'9px',background:'var(--gold)',color:'var(--bg)',border:'none',borderRadius:'8px',fontWeight:600,cursor:'pointer',fontSize:'12px',fontFamily:'Inter,sans-serif'}}>✦ Agregar</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { RegalosFidelizacion });