// ── POS v3 — Inventario compartido con InventarioReal (localStorage) ──────────
// Los productos viven en localStorage['inventario_prods'] (mismo key que inventario-real.jsx)
// Las fotos viven en localStorage['inventario_fotos'] {id→dataUrl}
// El stock se descuenta EN TIEMPO REAL en localStorage al procesar cada venta

function POS({ tiendaId }) {
  const { useState, useEffect, useRef, useCallback } = React;

  const tienda = TIENDAS.find(t => t.id === tiendaId);

  // ── Estado ────────────────────────────────────────────────────────────────
  const [todosProds,  setTodosProds]  = useState([]);
  const [cargando,    setCargando]    = useState(true);
  const [origenLS,    setOrigenLS]    = useState(false); // ¿cargado de LS?
  const [busqueda,    setBusqueda]    = useState('');
  const [catFiltro,   setCatFiltro]   = useState('Todos');
  const [carrito,     setCarrito]     = useState([]);
  const [descuento,   setDescuento]   = useState(0);
  const [descTipoPOS, setDescTipoPOS] = useState('%');
  const [modal,       setModal]       = useState(false);
  const [pasoModal,   setPasoModal]   = useState('cliente');
  const [tipoOp,      setTipoOp]      = useState('iva');
  const [boletaModal, setBoletaModal] = useState(null);
  const [medioPago,   setMedioPago]   = useState('debito');
  const [clienteSel,  setClienteSel]  = useState(null);
  const [clienteBusq, setClienteBusq] = useState('');
  const [efectivo,    setEfectivo]    = useState('');
  const [folioN,      setFolioN]      = useState(() => lsGet('folio_counter', 1));
  const [clientes,    setClientes]    = useState(() => lsGet('clientes', []));
  const [ventas,      setVentas]      = useState(() => lsGet('ventas', []));
  const [nuevoCliente, setNuevoCliente] = useState({ nombre:'', rut:'', whatsapp:'', email:'' });
  const inputRef = useRef();

  // ── Cargar inventario: localStorage primero → JSON como semilla ───────────
  // Se vuelve a cargar cada vez que cambia tiendaId (podría haber cambios desde
  // InventarioReal en otra pestaña, aunque ambas pestaña comparten localStorage)
  const cargarInventario = useCallback(() => {
    const lsProds = lsGet('inventario_prods', []);
    const fotos   = lsGet('inventario_fotos', {});

    if (lsProds && lsProds.length > 0) {
      // Inyectar fotos; normalizar is_active
      const merged = lsProds.map(p => ({
        ...p,
        foto_url: fotos[p.id] || null,
        is_active: p.is_active !== false && p.estado !== 'inactivo',
      }));
      setTodosProds(merged);
      setOrigenLS(true);
      setCargando(false);
    } else {
      // Fallback: JSON estático incluido en el bundle / Vercel
      fetch('data/inventario_real.json')
        .then(r => r.json())
        .then(data => {
          // Sembrar localStorage para que futuras cargas sean rápidas
          const sinFotos = data.map(({ foto_url, ...rest }) => rest);
          lsSet('inventario_prods', sinFotos);
          setTodosProds(data);
          setOrigenLS(false);
          setCargando(false);
        })
        .catch(() => {
          setTodosProds([]);
          setCargando(false);
        });
    }
  }, []);

  useEffect(() => { cargarInventario(); }, [cargarInventario]);

  // ── Productos de esta tienda con stock ────────────────────────────────────
  const prodsTienda = todosProds.filter(p =>
    (p.tienda === tiendaId || p.tiendaId === tiendaId) &&
    p.is_active !== false && p.estado !== 'inactivo' &&
    (p.stock > 0 || p.stock == null)
  );

  const cats = ['Todos', ...[...new Set(prodsTienda.map(p => p.categoria).filter(Boolean))].sort()];

  const filtrados = prodsTienda.filter(p => {
    const q = busqueda.toLowerCase();
    return (catFiltro === 'Todos' || p.categoria === catFiltro) &&
      (!q || p.nombre?.toLowerCase().includes(q) || p.sku?.toLowerCase().includes(q) ||
       p.metal?.toLowerCase().includes(q) || p.piedra?.toLowerCase().includes(q));
  }).slice(0, 120);

  // ── Carrito ───────────────────────────────────────────────────────────────
  function agregar(prod) {
    setCarrito(prev => {
      const ex = prev.find(i => i.id === prod.id);
      if (ex) {
        if (ex.cant >= (prod.stock ?? 99)) return prev;
        return prev.map(i => i.id === prod.id ? { ...i, cant: i.cant + 1 } : i);
      }
      return [...prev, { ...prod, cant: 1, precioEdit: prod.precio }];
    });
  }
  function cambiarCant(id, d) {
    setCarrito(prev => prev.map(i => {
      if (i.id !== id) return i;
      const nc = i.cant + d;
      if (nc <= 0) return null;
      if (nc > (i.stock ?? 99)) return i;
      return { ...i, cant: nc };
    }).filter(Boolean));
  }
  function cambiarPrecio(id, val) {
    const n = parseInt(val.replace(/\D/g, '')) || 0;
    setCarrito(prev => prev.map(i => i.id === id ? { ...i, precioEdit: n } : i));
  }

  // ── Totales ───────────────────────────────────────────────────────────────
  const subtotal  = carrito.reduce((s, i) => s + i.precioEdit * i.cant, 0);
  const descMonto = descTipoPOS === '%'
    ? Math.round(subtotal * descuento / 100)
    : Math.min(descuento, subtotal);
  const total  = subtotal - descMonto;
  const { neto, iva } = desglosarIVA(total);
  const vuelto = medioPago === 'efectivo' ? Math.max(0, (parseInt(efectivo) || 0) - total) : 0;

  // ── Modal ─────────────────────────────────────────────────────────────────
  function abrirModal() {
    if (!carrito.length) return;
    setPasoModal('cliente');
    setNuevoCliente({
      nombre:   clienteSel?.nombre   || '',
      rut:      clienteSel?.rut      || '',
      whatsapp: clienteSel?.whatsapp || '',
      email:    clienteSel?.email    || '',
    });
    setModal(true);
  }

  function guardarClienteYContinuar() {
    if (nuevoCliente.nombre.trim()) {
      const existe = clientes.find(c => c.rut && c.rut === nuevoCliente.rut);
      if (!existe) {
        const nuevo = { id: 'C-' + Date.now(), ...nuevoCliente, fechaRegistro: hoy() };
        const nuevos = [nuevo, ...clientes];
        setClientes(nuevos); lsSet('clientes', nuevos);
        setClienteSel(nuevo);
      } else {
        setClienteSel(existe);
      }
    }
    setPasoModal('pago');
  }

  // ── PROCESAR VENTA ────────────────────────────────────────────────────────
  // Descuenta stock en memoria Y en localStorage (compartido con InventarioReal)
  function procesarVenta() {
    if (!carrito.length) return;

    const folio  = `B-${new Date().getFullYear()}-${String(folioN).padStart(4, '0')}`;
    const nueva  = {
      id: 'V-' + Date.now(), folio, total, neto, iva, descMonto,
      medio:    MEDIOS_PAGO.find(m => m.id === medioPago)?.label || medioPago,
      tienda:   tienda.nombre, tiendaId,
      tipoOperacion: tipoOp,
      cliente:  clienteSel?.nombre || nuevoCliente.nombre || 'Sin registro',
      fecha:    new Date().toLocaleString('es-CL'),
      fechaISO: new Date().toISOString(),
      items:    carrito.map(i => ({
        nombre: i.nombre, sku: i.sku, cant: i.cant,
        precio: i.precioEdit, subtotal: i.precioEdit * i.cant,
      })),
    };

    // 1. Guardar venta
    const nuevasVentas = [nueva, ...ventas].slice(0, 500);
    setVentas(nuevasVentas); lsSet('ventas', nuevasVentas);

    // 2. Actualizar folio
    const nuevoFolio = folioN + 1; setFolioN(nuevoFolio); lsSet('folio_counter', nuevoFolio);

    // 3. Descontar stock en memoria
    const prodsActualizados = todosProds.map(p => {
      const ci = carrito.find(i => i.id === p.id);
      return ci ? { ...p, stock: Math.max(0, (p.stock || 0) - ci.cant) } : p;
    });
    setTodosProds(prodsActualizados);

    // 4. Persistir stock en localStorage (sin foto_url para no llenar el storage)
    const lsProds = lsGet('inventario_prods', []);
    if (lsProds.length > 0) {
      const actualizados = lsProds.map(p => {
        const ci = carrito.find(i => i.id === p.id);
        return ci ? { ...p, stock: Math.max(0, (p.stock || 0) - ci.cant) } : p;
      });
      lsSet('inventario_prods', actualizados);
    }

    // 5. Limpiar y mostrar boleta
    setModal(false);
    setBoletaModal(nueva);
    setCarrito([]); setClienteSel(null); setDescuento(0); setEfectivo('');
    setClienteBusq('');
  }

  // ── Imprimir boleta térmica ───────────────────────────────────────────────
  function imprimirBoleta(b) {
    const win = window.open('', '_blank', 'width=400,height=600');
    if (!win) return;
    win.document.write(`<!DOCTYPE html><html><head><meta charset="utf-8">
    <title>Boleta ${b.folio}</title>
    <style>
      body{font-family:'Courier New',monospace;font-size:12px;width:270px;margin:0 auto;padding:8px 4px;color:#000}
      .c{text-align:center}.b{font-weight:bold}.r{text-align:right}
      .hr{border:none;border-top:1px dashed #000;margin:5px 0}
      .row{display:flex;justify-content:space-between}
    </style></head><body>
    <div class="c b" style="font-size:16px;letter-spacing:2px">NAVARRO</div>
    <div class="c" style="font-size:9px">JOYERÍA & LEGADO FAMILIAR</div>
    <div class="c" style="font-size:9px">Santa Cruz · Valle de Colchagua</div>
    <hr class="hr">
    <div class="c b">BOLETA ELECTRÓNICA</div>
    <div class="c" style="font-size:10px">${b.folio}</div>
    <div class="c" style="font-size:10px">${b.fecha}</div>
    <div style="font-size:10px">Tienda: ${b.tienda}</div>
    <div style="font-size:10px">Cliente: ${b.cliente}</div>
    <hr class="hr">
    ${b.items.map(i => `
    <div class="b" style="font-size:11px">${i.nombre}</div>
    <div class="row" style="font-size:10px">
      <span>${i.cant}x $${i.precio.toLocaleString('es-CL')}</span>
      <span class="b">$${i.subtotal.toLocaleString('es-CL')}</span>
    </div>`).join('')}
    <hr class="hr">
    ${b.descMonto > 0 ? `<div class="row"><span>Descuento</span><span>-$${b.descMonto.toLocaleString('es-CL')}</span></div>` : ''}
    <div class="row"><span>Neto</span><span>$${b.neto.toLocaleString('es-CL')}</span></div>
    <div class="row"><span>IVA 19%</span><span>$${b.iva.toLocaleString('es-CL')}</span></div>
    <div class="row b" style="font-size:14px"><span>TOTAL</span><span>$${b.total.toLocaleString('es-CL')}</span></div>
    <hr class="hr">
    <div class="row" style="font-size:10px"><span>Medio de pago</span><span>${b.medio}</span></div>
    <hr class="hr">
    <div class="c" style="font-size:9px;margin-top:8px">✦ Gracias por su preferencia ✦</div>
    <div class="c" style="font-size:9px">navarro-joyeria.cl</div>
    </body></html>`);
    win.document.close();
    setTimeout(() => win.print(), 400);
  }

  // ── Imprimir etiquetas Godex de items del carrito / boleta ────────────────
  function imprimirEtiquetasCarrito(items) {
    const prods = items.map(i => ({ sku: i.sku, nombre: i.nombre, precio: i.precio || i.precioEdit }));
    if (typeof imprimirEtiquetaGodex === 'function') {
      imprimirEtiquetaGodex(prods, {});
    } else {
      alert('Función de impresión Godex no disponible');
    }
  }

  const clientesFiltrados = clientes.filter(c => {
    const q = clienteBusq.toLowerCase();
    return q && (c.nombre.toLowerCase().includes(q) || c.rut?.includes(q));
  }).slice(0, 5);

  const S = posStyles;

  // ── Pantalla de carga ─────────────────────────────────────────────────────
  if (cargando) return (
    <div style={{ display:'flex', alignItems:'center', justifyContent:'center', height:'100%',
      flexDirection:'column', gap:'12px', color:'var(--cream-3)' }}>
      <div style={{ fontSize:'32px', animation:'pulse 1.5s infinite' }}>✦</div>
      <div>Cargando inventario…</div>
    </div>
  );

  // ── Render ────────────────────────────────────────────────────────────────
  return (
    <div style={S.wrap}>
      {/* ── Izquierda: Productos ── */}
      <div style={S.left}>

        {/* Barra de búsqueda */}
        <div style={S.searchBar}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--cream-3)" strokeWidth="2" style={{flexShrink:0}}>
            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
          </svg>
          <input ref={inputRef} style={S.searchInput} autoFocus
            placeholder={`Buscar en ${prodsTienda.length} productos (SKU, nombre, metal…)`}
            value={busqueda} onChange={e => setBusqueda(e.target.value)}/>
          {busqueda && <button onClick={() => setBusqueda('')} style={S.clearBtn}>✕</button>}
          {/* Indicador de origen de datos */}
          <span title={origenLS ? 'Inventario cargado desde localStorage (datos actualizados)' : 'Datos del archivo estático'}
            style={{fontSize:'9px',padding:'1px 5px',borderRadius:'8px',flexShrink:0,
              background: origenLS ? 'rgba(39,174,96,0.15)' : 'rgba(243,156,18,0.15)',
              color:       origenLS ? '#27ae60'              : '#f39c12',
              border:     `1px solid ${origenLS ? 'rgba(39,174,96,0.3)' : 'rgba(243,156,18,0.3)'}`}}>
            {origenLS ? '● LS' : '● JSON'}
          </span>
          <button onClick={cargarInventario} title="Recargar inventario"
            style={{background:'none',border:'none',color:'var(--cream-3)',cursor:'pointer',fontSize:'13px',padding:'2px 4px'}}>
            ↻
          </button>
        </div>

        {/* Filtro categorías */}
        <div style={S.catBar}>
          {cats.map(c => (
            <button key={c} onClick={() => setCatFiltro(c)}
              style={{...S.catChip, ...(catFiltro === c ? S.catChipActive : {})}}>
              {c}
            </button>
          ))}
        </div>

        {filtrados.length === 0 && prodsTienda.length > 0 && (
          <div style={{textAlign:'center',color:'var(--cream-3)',padding:'40px',fontSize:'13px'}}>
            Sin resultados para "{busqueda}"
          </div>
        )}
        {prodsTienda.length === 0 && (
          <div style={{textAlign:'center',color:'var(--cream-3)',padding:'40px',fontSize:'13px'}}>
            <div style={{fontSize:'32px',marginBottom:'8px'}}>📦</div>
            No hay productos con stock para {tienda.nombre}.<br/>
            <span style={{fontSize:'11px'}}>Agrega productos desde <b>Inventario</b> y asigna esta tienda.</span>
          </div>
        )}

        {/* Grilla de productos */}
        <div style={S.grid}>
          {filtrados.map(p => {
            const enCarrito = carrito.find(i => i.id === p.id);
            return (
              <button key={p.id} onClick={() => agregar(p)}
                style={{...S.prodCard, ...(enCarrito ? S.prodCardActive : {})}}>
                {p.foto_url && (
                  <img src={p.foto_url} alt="" style={{width:'100%',height:'44px',objectFit:'cover',borderRadius:'5px',marginBottom:'4px'}}
                    onError={e => e.target.style.display='none'}/>
                )}
                <div style={S.prodSku}>{p.sku}</div>
                <div style={S.prodNombre}>{p.nombre}</div>
                <div style={S.prodMetal}>{p.metal}{p.piedra && p.piedra !== 'Sin piedra' ? ' · ' + p.piedra : ''}</div>
                <div style={S.prodBottom}>
                  <span style={S.prodPrecio}>{clp(p.precio)}</span>
                  <span style={{...S.prodStock, ...(p.stock <= 1 ? S.prodStockBajo : {})}}>{p.stock} u.</span>
                </div>
                {enCarrito && <div style={S.prodBadge}>{enCarrito.cant}</div>}
              </button>
            );
          })}
        </div>
      </div>

      {/* ── Derecha: Carrito ── */}
      <div style={S.right}>
        <div style={S.cartHeader}>
          <div>
            <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'18px',fontWeight:600,color:'var(--cream)'}}>Venta</div>
            <div style={{fontSize:'10px',color:'var(--cream-3)'}}>{tienda.nombre}</div>
          </div>
          <div style={{display:'flex',gap:'5px',alignItems:'center'}}>
            {carrito.length > 0 && (
              <button onClick={() => imprimirEtiquetasCarrito(carrito.map(i=>({sku:i.sku,nombre:i.nombre,precio:i.precioEdit})))}
                title="Imprimir etiquetas Godex de los artículos en carrito"
                style={{...S.clearCartBtn, color:'var(--gold)', borderColor:'rgba(201,168,76,0.4)'}}>
                🏷 Etiq.
              </button>
            )}
            {carrito.length > 0 && <button onClick={() => setCarrito([])} style={S.clearCartBtn}>Limpiar</button>}
          </div>
        </div>

        {/* Selector de cliente */}
        <div style={{padding:'8px 12px',borderBottom:'1px solid var(--border)'}}>
          <div style={{fontSize:'10px',color:'var(--cream-3)',marginBottom:'4px'}}>Cliente</div>
          {clienteSel ? (
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
              <span style={{color:'var(--cream)',fontSize:'12px',fontWeight:500}}>{clienteSel.nombre}</span>
              <button onClick={() => { setClienteSel(null); setClienteBusq(''); }} style={S.clearBtn}>✕</button>
            </div>
          ) : (
            <div style={{position:'relative'}}>
              <input style={S.clienteInput} placeholder="Buscar cliente o dejar sin registro…"
                value={clienteBusq} onChange={e => setClienteBusq(e.target.value)}/>
              {clienteBusq.length > 0 && (
                <div style={S.clienteDropdown}>
                  <div style={S.clienteDropItem} onClick={() => { setClienteSel(null); setClienteBusq(''); }}>
                    <em style={{color:'var(--cream-3)',fontSize:'11px'}}>Sin registro</em>
                  </div>
                  {clientesFiltrados.map(c => (
                    <div key={c.id} style={S.clienteDropItem}
                      onClick={() => { setClienteSel(c); setClienteBusq(''); }}>
                      <span style={{color:'var(--cream)',fontSize:'12px'}}>{c.nombre}</span>
                      <span style={{color:'var(--cream-3)',fontSize:'10px'}}>{c.rut}</span>
                    </div>
                  ))}
                  {clientesFiltrados.length === 0 && (
                    <div style={{padding:'8px',fontSize:'11px',color:'var(--cream-3)'}}>Sin resultados</div>
                  )}
                </div>
              )}
            </div>
          )}
        </div>

        {/* Items del carrito */}
        <div style={S.cartItems}>
          {carrito.length === 0 && (
            <div style={{textAlign:'center',color:'var(--cream-3)',padding:'28px 0',fontSize:'12px'}}>
              <div style={{fontSize:'28px',marginBottom:'8px'}}>✦</div>
              Agrega productos desde el panel izquierdo
            </div>
          )}
          {carrito.map(item => (
            <div key={item.id} style={S.cartItem}>
              <div style={{flex:1,minWidth:0}}>
                <div style={{color:'var(--cream)',fontWeight:500,fontSize:'12px',
                  overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{item.nombre}</div>
                <div style={{color:'var(--cream-3)',fontSize:'10px'}}>{item.metal} · {item.sku}</div>
                <div style={{marginTop:'3px',display:'flex',alignItems:'center',gap:'4px'}}>
                  <input style={S.precioInput}
                    value={item.precioEdit.toLocaleString('es-CL')}
                    onChange={e => cambiarPrecio(item.id, e.target.value)}/>
                  <span style={{color:'var(--cream-3)',fontSize:'9px'}}>CLP</span>
                </div>
              </div>
              <div style={S.cantControls}>
                <button onClick={() => cambiarCant(item.id, -1)} style={S.cantBtn}>−</button>
                <span style={{color:'var(--cream)',fontWeight:600,minWidth:'18px',textAlign:'center',fontSize:'12px'}}>{item.cant}</span>
                <button onClick={() => cambiarCant(item.id, +1)} style={S.cantBtn}>+</button>
                <button onClick={() => setCarrito(p => p.filter(i => i.id !== item.id))}
                  style={{...S.cantBtn, color:'#c0392b', marginLeft:'3px'}}>✕</button>
              </div>
              <div style={{textAlign:'right',minWidth:'76px',color:'var(--gold)',fontWeight:600,fontSize:'12px'}}>
                {clp(item.precioEdit * item.cant)}
              </div>
            </div>
          ))}
        </div>

        {/* Descuento + Totales */}
        {carrito.length > 0 && (
          <div style={S.totalesBox}>
            <div style={{display:'flex',alignItems:'center',gap:'4px',marginBottom:'7px',flexWrap:'wrap'}}>
              <span style={{color:'var(--cream-3)',fontSize:'11px',marginRight:'2px'}}>Desc.</span>
              <button onClick={() => setDescTipoPOS('%')}
                style={{...S.descBtn,...(descTipoPOS==='%'?S.descBtnActive:{}),padding:'2px 6px',fontSize:'10px'}}>%</button>
              <button onClick={() => setDescTipoPOS('CLP')}
                style={{...S.descBtn,...(descTipoPOS==='CLP'?S.descBtnActive:{}),padding:'2px 6px',fontSize:'10px'}}>$</button>
              {descTipoPOS === '%' && [0,5,10,15,20].map(d => (
                <button key={d} onClick={() => setDescuento(d)}
                  style={{...S.descBtn,...(descuento===d?S.descBtnActive:{})}}>
                  {d}%
                </button>
              ))}
              <input type="number" min="0" max={descTipoPOS==='%'?100:subtotal}
                placeholder={descTipoPOS==='%'?'%':'$'}
                value={descuento||''}
                onChange={e => setDescuento(Math.min(descTipoPOS==='%'?100:subtotal, parseFloat(e.target.value)||0))}
                style={{width:'54px',padding:'2px 5px',background:'var(--surface)',border:'1px solid var(--border)',
                  borderRadius:'4px',color:'var(--gold)',fontSize:'11px',fontWeight:600,outline:'none',textAlign:'center'}}/>
            </div>
            {descMonto > 0 && (
              <div style={{display:'flex',justifyContent:'space-between',fontSize:'11px',marginBottom:'3px'}}>
                <span style={{color:'var(--cream-3)'}}>Descuento {descuento}{descTipoPOS}</span>
                <span style={{color:'#c0392b'}}>−{clp(descMonto)}</span>
              </div>
            )}
            <div style={{display:'flex',justifyContent:'space-between',fontSize:'11px',marginBottom:'3px'}}>
              <span style={{color:'var(--cream-3)'}}>Neto</span>
              <span style={{color:'var(--cream-2)'}}>{clp(neto)}</span>
            </div>
            <div style={{display:'flex',justifyContent:'space-between',fontSize:'11px',marginBottom:'6px'}}>
              <span style={{color:'var(--cream-3)'}}>IVA 19%</span>
              <span style={{color:'var(--cream-2)'}}>{clp(iva)}</span>
            </div>
            <div style={{display:'flex',justifyContent:'space-between',fontWeight:700,fontSize:'16px',
              paddingTop:'6px',borderTop:'1px solid var(--border)'}}>
              <span style={{color:'var(--cream)'}}>TOTAL</span>
              <span style={{color:'var(--gold)'}}>{clp(total)}</span>
            </div>
          </div>
        )}

        <button onClick={abrirModal}
          style={{...S.cobrarBtn,...(carrito.length===0?{opacity:0.4,cursor:'not-allowed'}:{})}}>
          Cobrar {carrito.length > 0 && clp(total)}
        </button>
      </div>

      {/* ── Modal: Datos Cliente + Pago ── */}
      {modal && (
        <div style={S.overlay} onClick={e => e.target === e.currentTarget && setModal(false)}>
          <div style={S.modalBox}>
            <div style={{...S.modalHeader, marginBottom:'4px'}}>
              <span style={{fontFamily:'Cormorant Garamond,serif',fontSize:'20px',fontWeight:600}}>
                {pasoModal === 'cliente' ? '👤 Datos del Cliente' : '💳 Cobro'}
              </span>
              <button onClick={() => setModal(false)} style={S.clearBtn}>✕</button>
            </div>

            {/* Indicador de pasos */}
            <div style={{display:'flex',gap:'4px',marginBottom:'14px'}}>
              {['cliente','pago'].map(p => (
                <div key={p} style={{flex:1,height:'3px',borderRadius:'2px',
                  background: pasoModal === p ? 'var(--gold)' : 'var(--border)'}}/>
              ))}
            </div>

            {/* PASO 1: Cliente */}
            {pasoModal === 'cliente' && (
              <div>
                <div style={{color:'var(--cream-3)',fontSize:'11px',marginBottom:'12px'}}>
                  Registra al cliente antes de cobrar — opcional pero recomendado
                </div>
                <div style={{position:'relative',marginBottom:'10px'}}>
                  <input style={{...S.clienteInput,width:'100%'}}
                    placeholder="Buscar cliente existente (nombre o RUT)…"
                    value={clienteBusq} onChange={e => setClienteBusq(e.target.value)}/>
                  {clienteBusq.length > 0 && (
                    <div style={S.clienteDropdown}>
                      {clientes.filter(c => {
                        const q = clienteBusq.toLowerCase();
                        return c.nombre?.toLowerCase().includes(q) || c.rut?.includes(q);
                      }).slice(0,4).map(c => (
                        <div key={c.id} style={S.clienteDropItem}
                          onClick={() => {
                            setClienteSel(c);
                            setNuevoCliente({nombre:c.nombre,rut:c.rut||'',whatsapp:c.whatsapp||'',email:c.email||''});
                            setClienteBusq('');
                          }}>
                          <div>
                            <div style={{color:'var(--cream)',fontSize:'12px',fontWeight:500}}>{c.nombre}</div>
                            <div style={{color:'var(--cream-3)',fontSize:'10px'}}>{c.rut} {c.whatsapp && '· ' + c.whatsapp}</div>
                          </div>
                          <span style={{color:'var(--gold)',fontSize:'11px'}}>Selec.</span>
                        </div>
                      ))}
                      {clientes.filter(c => {const q=clienteBusq.toLowerCase();return c.nombre?.toLowerCase().includes(q)||c.rut?.includes(q);}).length === 0 && (
                        <div style={{padding:'8px',fontSize:'11px',color:'var(--cream-3)'}}>Sin resultados — completa el formulario</div>
                      )}
                    </div>
                  )}
                </div>
                <div style={{background:'var(--surface)',borderRadius:'10px',padding:'12px',marginBottom:'12px'}}>
                  <div style={{fontSize:'10px',color:'var(--gold)',fontWeight:600,marginBottom:'8px',letterSpacing:'0.5px'}}>
                    {clienteSel ? 'CLIENTE SELECCIONADO' : 'NUEVO CLIENTE'}
                  </div>
                  <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'8px'}}>
                    {[
                      {label:'Nombre completo', key:'nombre',   ph:'Ej: María González'},
                      {label:'RUT',             key:'rut',      ph:'12.345.678-9'},
                      {label:'WhatsApp',        key:'whatsapp', ph:'+56 9 xxxx xxxx'},
                      {label:'Correo',          key:'email',    ph:'correo@mail.com'},
                    ].map(f => (
                      <div key={f.key}>
                        <div style={{fontSize:'9px',color:'var(--cream-3)',marginBottom:'3px',textTransform:'uppercase',letterSpacing:'0.4px'}}>{f.label}</div>
                        <input style={{...S.clienteInput,width:'100%',fontSize:'11px',boxSizing:'border-box'}}
                          placeholder={f.ph} value={nuevoCliente[f.key]}
                          onChange={e => setNuevoCliente(n => ({...n,[f.key]:e.target.value}))}/>
                      </div>
                    ))}
                  </div>
                </div>
                <div style={{display:'flex',gap:'8px'}}>
                  <button onClick={() => setPasoModal('pago')}
                    style={{flex:1,padding:'10px',background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'8px',color:'var(--cream-3)',cursor:'pointer',fontSize:'12px',fontFamily:'Inter,sans-serif'}}>
                    Omitir →
                  </button>
                  <button onClick={guardarClienteYContinuar}
                    style={{...S.cobrarBtn,margin:0,flex:2,fontSize:'13px'}}>
                    {nuevoCliente.nombre ? 'Guardar y Continuar →' : 'Continuar sin cliente →'}
                  </button>
                </div>
              </div>
            )}

            {/* PASO 2: Pago */}
            {pasoModal === 'pago' && (<>
              <div style={{color:'var(--cream-3)',fontSize:'11px',marginBottom:'10px'}}>
                {tienda.nombre} · {clienteSel?.nombre || nuevoCliente.nombre || 'Sin registro'}
                {clienteSel && <span style={{marginLeft:'6px',padding:'1px 6px',borderRadius:'10px',background:'rgba(39,174,96,0.12)',color:'#27ae60',fontSize:'9px'}}>✓ Guardado</span>}
              </div>

              {/* Tipo operación tributaria */}
              <div style={{marginBottom:'12px'}}>
                <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'5px',fontWeight:600}}>Tipo de operación tributaria</div>
                <div style={{display:'flex',gap:'5px'}}>
                  {[
                    {id:'iva',     label:'Afecta IVA',       color:'#27ae60', desc:'Boleta/factura + IVA 19%'},
                    {id:'exenta',  label:'Exenta/No afecta', color:'#f39c12', desc:'Sin IVA, registra separado'},
                    {id:'interna', label:'Op. Interna',      color:'var(--cream-3)', desc:'No es venta tributaria'},
                  ].map(t => (
                    <button key={t.id} onClick={() => setTipoOp(t.id)}
                      style={{flex:1,padding:'7px 5px',borderRadius:'7px',border:`1px solid ${tipoOp===t.id?t.color+'66':'var(--border)'}`,
                        background:tipoOp===t.id?t.color+'15':'var(--surface)',cursor:'pointer',fontFamily:'Inter,sans-serif',textAlign:'center'}}>
                      <div style={{fontSize:'10px',fontWeight:600,color:tipoOp===t.id?t.color:'var(--cream-3)'}}>{t.label}</div>
                      <div style={{fontSize:'8px',color:'var(--cream-3)',marginTop:'1px'}}>{t.desc}</div>
                    </button>
                  ))}
                </div>
              </div>

              {/* Medio de pago */}
              <div style={{fontSize:'12px',color:'var(--cream-3)',marginBottom:'7px'}}>Medio de pago</div>
              <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'5px',marginBottom:'14px'}}>
                {MEDIOS_PAGO.map(m => (
                  <button key={m.id} onClick={() => setMedioPago(m.id)}
                    style={{...S.medioBtn,...(medioPago===m.id?S.medioBtnActive:{})}}>
                    <span>{m.icon}</span>
                    <span style={{fontSize:'10px'}}>{m.label}</span>
                  </button>
                ))}
              </div>

              {medioPago === 'efectivo' && (
                <div style={{marginBottom:'14px'}}>
                  <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'4px'}}>Efectivo recibido</div>
                  <input style={S.clienteInput} placeholder="$0"
                    value={efectivo} onChange={e => setEfectivo(e.target.value.replace(/\D/g,''))}/>
                  {vuelto > 0 && (
                    <div style={{marginTop:'6px',padding:'8px',background:'rgba(39,174,96,0.1)',
                      borderRadius:'6px',color:'#27ae60',fontWeight:600,fontSize:'13px'}}>
                      Vuelto: {clp(vuelto)}
                    </div>
                  )}
                </div>
              )}

              {medioPago === 'mercadopago' && (
                <div style={{marginBottom:'14px',padding:'12px',background:'var(--surface)',borderRadius:'8px',textAlign:'center'}}>
                  <div style={{fontSize:'24px',marginBottom:'4px'}}>🔵</div>
                  <div style={{color:'var(--cream)',fontWeight:500,fontSize:'12px'}}>Terminal Mercado Pago</div>
                  <div style={{color:'var(--cream-3)',fontSize:'10px',marginTop:'3px'}}>
                    Acerque la tarjeta o presente QR en la terminal POS
                  </div>
                </div>
              )}

              {/* Resumen */}
              <div style={{padding:'10px',background:'var(--surface)',borderRadius:'8px',marginBottom:'14px'}}>
                {carrito.map(i => (
                  <div key={i.id} style={{display:'flex',justifyContent:'space-between',
                    fontSize:'11px',color:'var(--cream-2)',marginBottom:'3px'}}>
                    <span>{i.cant}× {i.nombre}</span>
                    <span>{clp(i.precioEdit*i.cant)}</span>
                  </div>
                ))}
                {descMonto > 0 && (
                  <div style={{display:'flex',justifyContent:'space-between',fontSize:'11px',color:'#c0392b'}}>
                    <span>Descuento</span><span>−{clp(descMonto)}</span>
                  </div>
                )}
                <div style={{display:'flex',justifyContent:'space-between',fontWeight:700,
                  fontSize:'16px',borderTop:'1px solid var(--border)',paddingTop:'7px',marginTop:'7px',color:'var(--gold)'}}>
                  <span>TOTAL</span><span>{clp(total)}</span>
                </div>
              </div>

              <div style={{display:'flex',gap:'7px'}}>
                <button onClick={() => setPasoModal('cliente')}
                  style={{padding:'10px 14px',background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'8px',color:'var(--cream-3)',cursor:'pointer',fontSize:'12px',fontFamily:'Inter,sans-serif'}}>
                  ← Cliente
                </button>
                <button onClick={procesarVenta}
                  style={{...S.cobrarBtn,flex:1,margin:0,fontSize:'14px'}}>
                  ✦ Confirmar Venta
                </button>
              </div>
            </>)}
          </div>
        </div>
      )}

      {/* ── Modal Boleta ── */}
      {boletaModal && (
        <div style={S.overlay} onClick={e => e.target === e.currentTarget && setBoletaModal(null)}>
          <div style={{...S.modalBox,maxWidth:'380px',textAlign:'center'}}>
            <div style={{fontSize:'36px',marginBottom:'8px'}}>✅</div>
            <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'22px',fontWeight:600,
              color:'var(--cream)',marginBottom:'4px'}}>Venta procesada</div>
            <div style={{color:'var(--cream-3)',fontSize:'12px',marginBottom:'14px'}}>
              {boletaModal.folio} · {boletaModal.fecha}
            </div>
            <div style={{background:'var(--surface)',borderRadius:'8px',padding:'14px',marginBottom:'14px',textAlign:'left'}}>
              <div style={{display:'flex',justifyContent:'space-between',color:'var(--gold)',fontWeight:700,fontSize:'18px',marginBottom:'4px'}}>
                <span>Total cobrado</span><span>{clp(boletaModal.total)}</span>
              </div>
              <div style={{display:'flex',justifyContent:'space-between',color:'var(--cream-3)',fontSize:'11px',marginBottom:'6px'}}>
                <span>Medio</span><span>{boletaModal.medio}</span>
              </div>
              {/* Items vendidos */}
              <div style={{borderTop:'1px solid var(--border)',paddingTop:'8px'}}>
                {boletaModal.items.map((i,idx) => (
                  <div key={idx} style={{display:'flex',justifyContent:'space-between',
                    fontSize:'11px',color:'var(--cream-2)',marginBottom:'2px'}}>
                    <span>{i.cant}× {i.nombre}</span>
                    <span>{clp(i.subtotal)}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{display:'flex',gap:'8px'}}>
              <button onClick={() => imprimirBoleta(boletaModal)}
                style={{flex:1,padding:'9px',background:'var(--surface)',border:'1px solid var(--border)',
                  borderRadius:'8px',color:'var(--cream)',cursor:'pointer',fontSize:'11px'}}>
                🖨 Boleta
              </button>
              <button onClick={() => imprimirEtiquetasCarrito(boletaModal.items)}
                style={{flex:1,padding:'9px',background:'rgba(201,168,76,0.1)',border:'1px solid rgba(201,168,76,0.4)',
                  borderRadius:'8px',color:'var(--gold)',cursor:'pointer',fontSize:'11px'}}>
                🏷 Etiquetas
              </button>
              <button onClick={() => setBoletaModal(null)}
                style={{flex:1,padding:'9px',background:'var(--gold)',border:'none',
                  borderRadius:'8px',color:'#0c0908',fontWeight:700,cursor:'pointer',fontSize:'11px'}}>
                Nueva ✦
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ── Estilos ───────────────────────────────────────────────────────────────────
const posStyles = {
  wrap:         {display:'flex',height:'100%',overflow:'hidden'},
  left:         {flex:1,display:'flex',flexDirection:'column',overflow:'hidden',borderRight:'1px solid var(--border)'},
  right:        {width:'325px',display:'flex',flexDirection:'column',overflow:'hidden'},
  searchBar:    {display:'flex',alignItems:'center',gap:'8px',padding:'10px 14px',borderBottom:'1px solid var(--border)',background:'var(--bg-card)'},
  searchInput:  {flex:1,background:'transparent',border:'none',outline:'none',color:'var(--cream)',fontSize:'12px'},
  clearBtn:     {background:'none',border:'none',color:'var(--cream-3)',cursor:'pointer',fontSize:'13px',padding:'2px 4px',lineHeight:1},
  catBar:       {display:'flex',gap:'4px',padding:'7px 10px',borderBottom:'1px solid var(--border)',overflowX:'auto',flexShrink:0,scrollbarWidth:'none'},
  catChip:      {padding:'3px 9px',borderRadius:'20px',border:'1px solid var(--border)',background:'transparent',color:'var(--cream-3)',fontSize:'10px',cursor:'pointer',whiteSpace:'nowrap'},
  catChipActive:{background:'var(--gold)',border:'1px solid var(--gold)',color:'#0c0908',fontWeight:600},
  grid:         {flex:1,overflowY:'auto',padding:'10px',display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(130px,1fr))',gap:'7px',alignContent:'start'},
  prodCard:     {background:'var(--bg-card)',border:'1px solid var(--border)',borderRadius:'9px',padding:'10px',cursor:'pointer',textAlign:'left',position:'relative',transition:'all 0.12s',fontFamily:'Inter,sans-serif'},
  prodCardActive:{border:'1px solid var(--gold)',boxShadow:'0 0 0 1px var(--gold)'},
  prodSku:      {fontSize:'9px',color:'var(--cream-3)',letterSpacing:'0.3px',marginBottom:'2px',fontFamily:'monospace'},
  prodNombre:   {fontSize:'11px',fontWeight:600,color:'var(--cream)',lineHeight:'1.3',marginBottom:'3px'},
  prodMetal:    {fontSize:'9px',color:'var(--cream-3)',marginBottom:'6px'},
  prodBottom:   {display:'flex',justifyContent:'space-between',alignItems:'center'},
  prodPrecio:   {fontSize:'11px',fontWeight:700,color:'var(--gold)'},
  prodStock:    {fontSize:'10px',color:'var(--cream-3)'},
  prodStockBajo:{color:'#c0392b'},
  prodBadge:    {position:'absolute',top:'5px',right:'5px',background:'var(--gold)',color:'#0c0908',width:'16px',height:'16px',borderRadius:'50%',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'9px',fontWeight:700},
  cartHeader:   {display:'flex',alignItems:'center',justifyContent:'space-between',padding:'10px 12px',borderBottom:'1px solid var(--border)'},
  clearCartBtn: {background:'var(--surface)',border:'1px solid var(--border)',color:'var(--cream-3)',padding:'3px 9px',borderRadius:'5px',cursor:'pointer',fontSize:'10px'},
  clienteInput: {width:'100%',background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'6px',padding:'6px 9px',color:'var(--cream)',fontSize:'11px',outline:'none'},
  clienteDropdown:{position:'absolute',top:'100%',left:0,right:0,background:'var(--bg-card)',border:'1px solid var(--border)',borderRadius:'7px',zIndex:50,overflow:'hidden',marginTop:'3px',boxShadow:'0 4px 16px rgba(0,0,0,0.5)'},
  clienteDropItem:{padding:'7px 10px',cursor:'pointer',display:'flex',justifyContent:'space-between',alignItems:'center',fontSize:'11px',borderBottom:'1px solid var(--border)'},
  cartItems:    {flex:1,overflowY:'auto',padding:'6px 10px'},
  cartItem:     {display:'flex',alignItems:'flex-start',gap:'7px',padding:'7px 0',borderBottom:'1px solid var(--border)'},
  precioInput:  {background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'4px',padding:'3px 5px',color:'var(--gold)',fontSize:'11px',fontWeight:600,width:'90px',outline:'none'},
  cantControls: {display:'flex',alignItems:'center',gap:'3px',flexShrink:0},
  cantBtn:      {background:'var(--surface-2)',border:'1px solid var(--border)',color:'var(--cream)',width:'20px',height:'20px',borderRadius:'4px',cursor:'pointer',fontSize:'13px',display:'flex',alignItems:'center',justifyContent:'center',lineHeight:1},
  totalesBox:   {padding:'10px 12px',borderTop:'1px solid var(--border)',background:'var(--bg-card)'},
  descBtn:      {padding:'2px 7px',borderRadius:'4px',border:'1px solid var(--border)',fontSize:'10px',background:'var(--surface)',color:'var(--cream-3)',cursor:'pointer'},
  descBtnActive:{background:'var(--gold-dim)',border:'1px solid var(--gold)',color:'var(--gold)'},
  cobrarBtn:    {margin:'10px 12px',padding:'13px',background:'var(--gold)',border:'none',borderRadius:'9px',color:'#0c0908',fontWeight:700,fontSize:'14px',cursor:'pointer',letterSpacing:'0.5px',fontFamily:'Cormorant Garamond,serif',transition:'all 0.15s'},
  overlay:      {position:'fixed',inset:0,background:'rgba(0,0,0,0.75)',zIndex:100,display:'flex',alignItems:'center',justifyContent:'center',backdropFilter:'blur(4px)'},
  modalBox:     {background:'var(--bg-card)',border:'1px solid var(--border)',borderRadius:'14px',padding:'22px',width:'100%',maxWidth:'440px',maxHeight:'90vh',overflowY:'auto'},
  modalHeader:  {display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'4px'},
  medioBtn:     {display:'flex',flexDirection:'column',alignItems:'center',gap:'3px',padding:'9px 5px',background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'7px',color:'var(--cream)',cursor:'pointer',fontSize:'12px',fontFamily:'Inter,sans-serif'},
  medioBtnActive:{background:'var(--gold-dim)',border:'1px solid var(--gold)',color:'var(--gold)'},
};

Object.assign(window, { POS });