// ── MÓDULO DEVOLUCIONES ───────────────────────────────

function Devoluciones({ tiendaId }) {
  const { useState } = React;

  const [devs, setDevs] = useState(() => lsGet('devoluciones', [
    { id:'DEV-001', fecha:'2026-04-18', cliente:'María González', clienteRut:'12.345.678-9',
      ventaRef:'V-2026-0390', producto:'Anillo plata 925 circón', sku:'AGANCI0011',
      precio:25000, motivo:'Talla incorrecta', tipo:'Cambio', estado:'Procesada',
      resolucion:'Cambio por talla 16', usuario:'Admin', tienda:'navarro' },
    { id:'DEV-002', fecha:'2026-04-20', cliente:'Carlos Pérez', clienteRut:'9.876.543-2',
      ventaRef:'V-2026-0401', producto:'Aros oro 18K', sku:'AGORCI0002',
      precio:85000, motivo:'Defecto fabricación', tipo:'Devolución dinero', estado:'Pendiente',
      resolucion:'', usuario:'Admin', tienda:'navarro' },
  ]));

  const [modal, setModal] = useState(false);
  const [filtro, setFiltro] = useState('todos');
  const [busqueda, setBusqueda] = useState('');
  const [form, setForm] = useState({
    cliente:'', clienteRut:'', ventaRef:'', producto:'', sku:'', precio:'',
    motivo:'', tipo:'Cambio', resolucion:'', estado:'Pendiente'
  });
  const [clienteSearch, setClienteSearch] = useState('');
  const [clienteSugs, setClienteSugs] = useState([]);

  const MOTIVOS = ['Talla incorrecta','Defecto fabricación','No era lo esperado','Regalo no gustó','Error en pedido','Alergia al material','Otro'];
  const TIPOS   = ['Cambio','Devolución dinero','Nota de crédito','Reparación garantía'];
  const ESTADOS = ['Pendiente','En revisión','Procesada','Rechazada'];

  const clientes = lsGet('clientes', []);
  function buscarCliente(q) {
    setClienteSearch(q);
    if (q.length < 2) { setClienteSugs([]); return; }
    setClienteSugs(clientes.filter(c=>(c.nombre||'').toLowerCase().includes(q.toLowerCase())||(c.rut||'').includes(q)).slice(0,5));
  }

  function guardar() {
    if (!form.cliente || !form.producto || !form.motivo) { alert('Completa los campos requeridos'); return; }
    const nueva = {
      ...form,
      id: `DEV-${String(devs.length+1).padStart(3,'0')}`,
      fecha: hoy(), precio: parseInt(form.precio)||0,
      usuario: 'Admin', tienda: tiendaId
    };
    const next = [nueva, ...devs];
    setDevs(next); lsSet('devoluciones', next);
    setModal(false);
    setForm({ cliente:'', clienteRut:'', ventaRef:'', producto:'', sku:'', precio:'', motivo:'', tipo:'Cambio', resolucion:'', estado:'Pendiente' });
  }

  const lista = devs.filter(d => {
    if (filtro !== 'todos' && d.estado.toLowerCase() !== filtro) return false;
    if (busqueda && !(`${d.cliente} ${d.producto} ${d.id} ${d.sku}`).toLowerCase().includes(busqueda.toLowerCase())) return false;
    return true;
  });

  const colorEstado = e => ({ 'Procesada':'#27ae60','Pendiente':'#f39c12','En revisión':'#2980b9','Rechazada':'#c0392b' }[e]||'#aaa');
  const bgEstado = e => ({ 'Procesada':'rgba(39,174,96,0.12)','Pendiente':'rgba(243,156,18,0.12)','En revisión':'rgba(41,128,185,0.12)','Rechazada':'rgba(192,57,43,0.12)' }[e]||'rgba(100,100,100,0.12)');

  const stats = { total:devs.length, pendientes:devs.filter(d=>d.estado==='Pendiente').length, procesadas:devs.filter(d=>d.estado==='Procesada').length, totalMonto:devs.reduce((s,d)=>s+d.precio,0) };

  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)',display:'flex',justifyContent:'space-between',alignItems:'center',flexShrink:0}}>
        <div>
          <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'18px',fontWeight:600,color:'var(--cream)'}}>Devoluciones & Cambios</div>
          <div style={{fontSize:'10px',color:'var(--cream-3)'}}>Gestión de devoluciones, cambios y garantías</div>
        </div>
        <button onClick={()=>setModal(true)} style={{background:'var(--gold)',color:'var(--bg)',border:'none',borderRadius:'8px',padding:'8px 16px',fontFamily:'Inter,sans-serif',fontWeight:600,fontSize:'12px',cursor:'pointer'}}>
          + Nueva Devolución
        </button>
      </div>

      {/* KPIs */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:'8px',padding:'12px 20px',borderBottom:'1px solid var(--border)',flexShrink:0}}>
        {[
          {l:'Total',v:stats.total,c:'var(--cream)'},
          {l:'Pendientes',v:stats.pendientes,c:'#f39c12'},
          {l:'Procesadas',v:stats.procesadas,c:'#27ae60'},
          {l:'Monto total',v:clp(stats.totalMonto),c:'var(--gold)'},
        ].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>

      {/* Filtros */}
      <div style={{display:'flex',gap:'8px',padding:'10px 20px',borderBottom:'1px solid var(--border)',flexShrink:0,alignItems:'center'}}>
        <input style={{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'6px',padding:'6px 10px',color:'var(--cream)',fontSize:'12px',flex:1,outline:'none'}}
          placeholder="Buscar por cliente, producto, SKU, ID..."
          value={busqueda} onChange={e=>setBusqueda(e.target.value)}/>
        {['todos','pendiente','en revisión','procesada','rechazada'].map(f=>(
          <button key={f} onClick={()=>setFiltro(f)}
            style={{padding:'5px 11px',borderRadius:'20px',border:`1px solid ${filtro===f?'var(--gold)':'var(--border)'}`,background:filtro===f?'var(--gold-dim)':'transparent',color:filtro===f?'var(--gold)':'var(--cream-3)',fontSize:'10px',cursor:'pointer',whiteSpace:'nowrap'}}>
            {f.charAt(0).toUpperCase()+f.slice(1)}
          </button>
        ))}
      </div>

      {/* Tabla */}
      <div style={{flex:1,overflowY:'auto',padding:'0 20px 16px'}}>
        <table style={{width:'100%',borderCollapse:'collapse',marginTop:'8px'}}>
          <thead>
            <tr>{['ID','Fecha','Cliente','Producto','Monto','Motivo','Tipo','Estado',''].map(h=>(
              <th key={h} style={invStyles.th}>{h}</th>
            ))}</tr>
          </thead>
          <tbody>
            {lista.map(d=>(
              <tr key={d.id} style={invStyles.tr}>
                <td style={invStyles.td}><span style={{fontFamily:'monospace',fontSize:'10px',color:'var(--cream-3)'}}>{d.id}</span></td>
                <td style={invStyles.td}><span style={{fontSize:'10px',color:'var(--cream-3)'}}>{d.fecha}</span></td>
                <td style={invStyles.td}>
                  <div style={{fontSize:'11px',color:'var(--cream)',fontWeight:500}}>{d.cliente}</div>
                  {d.ventaRef&&<div style={{fontSize:'9px',color:'var(--cream-3)'}}>Ref: {d.ventaRef}</div>}
                </td>
                <td style={invStyles.td}>
                  <div style={{fontSize:'11px',color:'var(--cream)'}}>{d.producto}</div>
                  <div style={{fontSize:'9px',color:'var(--cream-3)',fontFamily:'monospace'}}>{d.sku}</div>
                </td>
                <td style={invStyles.td}><span style={{color:'var(--gold)',fontWeight:600,fontSize:'11px'}}>{clp(d.precio)}</span></td>
                <td style={invStyles.td}><span style={{fontSize:'10px',color:'var(--cream-2)'}}>{d.motivo}</span></td>
                <td style={invStyles.td}><span style={{fontSize:'10px',padding:'1px 7px',borderRadius:'20px',background:'rgba(201,168,76,0.1)',color:'var(--gold)'}}>{d.tipo}</span></td>
                <td style={invStyles.td}>
                  <span style={{fontSize:'10px',fontWeight:600,padding:'2px 7px',borderRadius:'20px',background:bgEstado(d.estado),color:colorEstado(d.estado)}}>
                    {d.estado}
                  </span>
                </td>
                <td style={invStyles.td}>
                  <button onClick={()=>{
                    const ns = {Pendiente:'En revisión','En revisión':'Procesada',Procesada:'Procesada',Rechazada:'Rechazada'}[d.estado]||'Procesada';
                    const next = devs.map(x=>x.id===d.id?{...x,estado:ns}:x);
                    setDevs(next); lsSet('devoluciones',next);
                  }} style={invStyles.btnEdit}>Actualizar</button>
                </td>
              </tr>
            ))}
            {lista.length===0&&<tr><td colSpan="9" style={{...invStyles.td,textAlign:'center',color:'var(--cream-3)',padding:'30px'}}>Sin devoluciones {filtro!=='todos'?`en estado "${filtro}"`:'registradas'}</td></tr>}
          </tbody>
        </table>
      </div>

      {/* Modal nueva devolución */}
      {modal && (
        <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:'520px',maxHeight:'85vh',overflowY:'auto',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',display:'flex',justifyContent:'space-between'}}>
              Nueva Devolución / Cambio
              <button onClick={()=>setModal(false)} style={{background:'transparent',border:'none',color:'var(--cream-3)',fontSize:'18px',cursor:'pointer'}}>✕</button>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'10px'}}>
              {/* Cliente con búsqueda */}
              <div style={{gridColumn:'1/-1',position:'relative'}}>
                <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'4px'}}>Cliente *</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="Buscar cliente..."
                  value={clienteSearch||form.cliente}
                  onChange={e=>{buscarCliente(e.target.value);setForm(p=>({...p,cliente:e.target.value}));}}/>
                {clienteSugs.length>0&&(
                  <div style={{position:'absolute',top:'100%',left:0,right:0,background:'var(--bg-card)',border:'1px solid var(--border)',borderRadius:'6px',zIndex:10}}>
                    {clienteSugs.map(c=>(
                      <div key={c.id||c.nombre} onClick={()=>{setForm(p=>({...p,cliente:c.nombre,clienteRut:c.rut||''}));setClienteSearch(c.nombre);setClienteSugs([]);}}
                        style={{padding:'7px 10px',cursor:'pointer',fontSize:'11px',color:'var(--cream)',borderBottom:'1px solid var(--border)'}}>
                        {c.nombre} <span style={{color:'var(--cream-3)'}}>{c.rut}</span>
                      </div>
                    ))}
                  </div>
                )}
              </div>
              <div>
                <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'4px'}}>RUT cliente</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="12.345.678-9" value={form.clienteRut} onChange={e=>setForm(p=>({...p,clienteRut:e.target.value}))}/>
              </div>
              <div>
                <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'4px'}}>N° venta referencia</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="V-2026-XXXX" value={form.ventaRef} onChange={e=>setForm(p=>({...p,ventaRef:e.target.value}))}/>
              </div>
              <div style={{gridColumn:'1/-1'}}>
                <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'4px'}}>Producto *</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="Nombre del producto" value={form.producto} onChange={e=>setForm(p=>({...p,producto:e.target.value}))}/>
              </div>
              <div>
                <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'4px'}}>SKU</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',fontFamily:'monospace'}}
                  placeholder="AGANCI0001" value={form.sku} onChange={e=>setForm(p=>({...p,sku:e.target.value}))}/>
              </div>
              <div>
                <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'4px'}}>Monto ($)</div>
                <input type="number" style={{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'6px',padding:'6px 9px',color:'var(--cream)',fontSize:'12px',width:'100%',outline:'none'}}
                  placeholder="25000" value={form.precio} onChange={e=>setForm(p=>({...p,precio:e.target.value}))}/>
              </div>
              <div>
                <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'4px'}}>Motivo *</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={form.motivo} onChange={e=>setForm(p=>({...p,motivo:e.target.value}))}>
                  <option value="">Seleccionar motivo</option>
                  {MOTIVOS.map(m=><option key={m}>{m}</option>)}
                </select>
              </div>
              <div>
                <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'4px'}}>Tipo resolución</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={form.tipo} onChange={e=>setForm(p=>({...p,tipo:e.target.value}))}>
                  {TIPOS.map(t=><option key={t}>{t}</option>)}
                </select>
              </div>
              <div style={{gridColumn:'1/-1'}}>
                <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'4px'}}>Observaciones / Resolución</div>
                <textarea style={{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'6px',padding:'6px 9px',color:'var(--cream)',fontSize:'12px',width:'100%',outline:'none',height:'60px',resize:'vertical'}}
                  placeholder="Detalle de la resolución..." value={form.resolucion} onChange={e=>setForm(p=>({...p,resolucion:e.target.value}))}/>
              </div>
            </div>
            <div style={{display:'flex',gap:'8px',marginTop:'16px'}}>
              <button onClick={()=>setModal(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={guardar} 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'}}>✦ Registrar Devolución</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Devoluciones });