// ── VENTA ONLINE ─────────────────────────────────────

function VentaOnline() {
  const { useState } = React;

  const [vista,    setVista]   = useState('pedidos'); // pedidos | catalogo | config
  const [pedidos,  setPedidos] = useState([
    { id:'WEB-001', fecha:'2026-04-19', cliente:'Diego Araya', email:'daraya@gmail.com',
      ciudad:'Santiago', items:[{prod:'Colgante Gota',cant:1,precio:125000}],
      total:125000, estado:'Pago confirmado', envio:'Starken', tracking:'', tienda:'navarro' },
    { id:'WEB-002', fecha:'2026-04-18', cliente:'Francisca Molina', email:'fmolina@outlook.com',
      ciudad:'Rancagua', items:[{prod:'Pulsera Parronal',cant:2,precio:45000},{prod:'Aros Uva Vendimia',cant:1,precio:42000}],
      total:132000, estado:'En preparación', envio:'Chilexpress', tracking:'CHX-392847', tienda:'rubi' },
    { id:'WEB-003', fecha:'2026-04-17', cliente:'Tomás Undurraga', email:'tundurraga@empresa.cl',
      ciudad:'Viña del Mar', items:[{prod:'Cruz Santa Cruz',cant:1,precio:890000}],
      total:890000, estado:'Entregado', envio:'Blue Express', tracking:'BEX-12983', tienda:'navarro' },
    { id:'WEB-004', fecha:'2026-04-16', cliente:'Valentina Pérez', email:'vperez@gmail.com',
      ciudad:'Concepción', items:[{prod:'Brazalete Viñas Plata',cant:1,precio:55000}],
      total:55000, estado:'Pago pendiente', envio:'Starken', tracking:'', tienda:'rubi' },
  ]);

  const [selPed, setSelPed] = useState(null);
  const [catalogo, setCatalogo] = React.useState(()=>{
    // Merge PRODUCTOS con overrides guardados en localStorage
    const savedProds = lsGet('inventario_productos_overrides', {});
    return PRODUCTOS.map(p=>{
      const override = savedProds[p.id]||savedProds[p.sku]||{};
      const merged = {...p,...override};
      const esOnline = merged.venta_online && merged.venta_online!=='No';
      return {...merged, publicado: override.publicado!==undefined ? override.publicado : esOnline, stockOnline: override.stockOnline!==undefined ? override.stockOnline : Math.max(0,(merged.stock||0)-1)};
    });
  });

  // Guardar cambios de publicado/stockOnline en localStorage
  function actualizarCatalogo(idx, cambios) {
    setCatalogo(prev=>{
      const next = prev.map((x,j)=>j===idx?{...x,...cambios}:x);
      const overrides = lsGet('inventario_productos_overrides',{});
      const p = next[idx];
      overrides[p.id||p.sku] = {...(overrides[p.id||p.sku]||{}),...cambios};
      lsSet('inventario_productos_overrides', overrides);
      return next;
    });
  }
  const [filtroEstado, setFiltroEstado] = useState('Todos');

  const ESTADOS_WEB  = ['Pago pendiente','Pago confirmado','En preparación','Despachado','Entregado','Cancelado'];
  const COURIERS     = ['Starken','Chilexpress','Blue Express','Turbus Cargo','Retiro en tienda'];

  const colorEstado = (e) => ({
    'Pago pendiente':  '#f39c12',
    'Pago confirmado': '#2980b9',
    'En preparación':  '#8e44ad',
    'Despachado':      '#16a085',
    'Entregado':       '#27ae60',
    'Cancelado':       '#c0392b',
  }[e] || 'var(--cream-3)');

  function avanzarEstado(id) {
    setPedidos(prev=>prev.map(p=>{
      if(p.id!==id) return p;
      const idx=ESTADOS_WEB.indexOf(p.estado);
      return {...p, estado:ESTADOS_WEB[Math.min(idx+1,ESTADOS_WEB.length-1)]};
    }));
  }
  function setTracking(id,val) {
    setPedidos(prev=>prev.map(p=>p.id===id?{...p,tracking:val}:p));
  }

  const pedFiltrados = pedidos.filter(p=>filtroEstado==='Todos'||p.estado===filtroEstado);
  const selPedido = pedidos.find(p=>p.id===selPed);

  const totalPendiente = pedidos.filter(p=>p.estado==='Pago pendiente').reduce((s,p)=>s+p.total,0);
  const totalMes       = pedidos.reduce((s,p)=>s+p.total,0);

  const S = webStyles;

  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',overflow:'hidden'}}>
      {/* Tabs */}
      <div style={S.tabs}>
        {[{id:'pedidos',label:'📦 Pedidos'},
          {id:'catalogo',label:'🛍 Catálogo Online'},
          {id:'config',label:'⚙ Configuración'}].map(t=>(
          <button key={t.id} onClick={()=>setVista(t.id)}
            style={{...S.tab,...(vista===t.id?S.tabAct:{})}}>
            {t.label}
          </button>
        ))}
        {/* KPIs rápidos */}
        <div style={{marginLeft:'auto',display:'flex',gap:'16px',alignItems:'center',
          paddingRight:'16px'}}>
          <div style={{textAlign:'right'}}>
            <div style={{color:'#f39c12',fontWeight:700,fontSize:'13px'}}>{clp(totalPendiente)}</div>
            <div style={{color:'var(--cream-3)',fontSize:'9px'}}>Por cobrar</div>
          </div>
          <div style={{textAlign:'right'}}>
            <div style={{color:'var(--gold)',fontWeight:700,fontSize:'13px'}}>{clp(totalMes)}</div>
            <div style={{color:'var(--cream-3)',fontSize:'9px'}}>Total mes</div>
          </div>
        </div>
      </div>

      {/* ── PEDIDOS ── */}
      {vista==='pedidos' && (
        <div style={{flex:1,display:'flex',overflow:'hidden'}}>
          {/* Lista pedidos */}
          <div style={S.pedidosLista}>
            {/* Filtro estado */}
            <div style={{padding:'8px 12px',borderBottom:'1px solid var(--border)',
              display:'flex',gap:'4px',overflowX:'auto',scrollbarWidth:'none'}}>
              {['Todos',...ESTADOS_WEB].map(e=>(
                <button key={e} onClick={()=>setFiltroEstado(e)}
                  style={{...calcStyles.chip,whiteSpace:'nowrap',flexShrink:0,
                    ...(filtroEstado===e?{...calcStyles.chipAct}:{}),
                    ...(filtroEstado!==e&&e!=='Todos'?{color:colorEstado(e),
                      borderColor:colorEstado(e)+'44'}:{})}}>
                  {e}
                </button>
              ))}
            </div>
            <div style={{flex:1,overflowY:'auto'}}>
              {pedFiltrados.map(p=>{
                const t=TIENDAS.find(x=>x.id===p.tienda);
                return (
                  <div key={p.id} onClick={()=>setSelPed(p.id===selPed?null:p.id)}
                    style={{...S.pedRow,...(selPed===p.id?S.pedRowSel:{})}}>
                    <div style={{display:'flex',justifyContent:'space-between',marginBottom:'4px'}}>
                      <div style={{display:'flex',gap:'8px',alignItems:'center'}}>
                        <span style={{fontFamily:'monospace',fontSize:'10px',
                          color:'var(--cream-3)'}}>{p.id}</span>
                        <span style={{fontSize:'10px',color:t?.color,fontWeight:600}}>{t?.sigla}</span>
                      </div>
                      <span style={{fontSize:'11px',padding:'2px 8px',borderRadius:'20px',
                        background:`${colorEstado(p.estado)}22`,color:colorEstado(p.estado),
                        fontWeight:600}}>{p.estado}</span>
                    </div>
                    <div style={{color:'var(--cream)',fontWeight:500,fontSize:'13px'}}>{p.cliente}</div>
                    <div style={{color:'var(--cream-3)',fontSize:'11px',marginBottom:'6px'}}>
                      {p.ciudad} · {p.fecha}
                    </div>
                    <div style={{display:'flex',justifyContent:'space-between'}}>
                      <span style={{color:'var(--cream-3)',fontSize:'11px'}}>
                        {p.items.length} ítem{p.items.length>1?'s':''}
                      </span>
                      <span style={{color:'var(--gold)',fontWeight:700,fontSize:'13px'}}>
                        {clp(p.total)}
                      </span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Detalle pedido */}
          <div style={{flex:1,overflowY:'auto',padding:'20px'}}>
            {!selPedido ? (
              <div style={{display:'flex',alignItems:'center',justifyContent:'center',height:'100%',
                color:'var(--cream-3)',flexDirection:'column',gap:'12px'}}>
                <div style={{fontSize:'40px'}}>📦</div>
                Selecciona un pedido para ver el detalle
              </div>
            ) : (
              <div className="fade-in">
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:'20px'}}>
                  <div>
                    <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'24px',fontWeight:600,
                      color:'var(--cream)',marginBottom:'4px'}}>{selPedido.cliente}</div>
                    <div style={{color:'var(--cream-3)',fontSize:'12px'}}>
                      {selPedido.id} · {selPedido.email} · {selPedido.ciudad}
                    </div>
                  </div>
                  <div style={{fontSize:'12px',padding:'4px 12px',borderRadius:'20px',fontWeight:600,
                    background:`${colorEstado(selPedido.estado)}22`,color:colorEstado(selPedido.estado)}}>
                    {selPedido.estado}
                  </div>
                </div>

                {/* Items */}
                <div style={{background:'var(--bg-card)',border:'1px solid var(--border)',
                  borderRadius:'12px',padding:'16px',marginBottom:'16px'}}>
                  <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'16px',fontWeight:600,
                    color:'var(--cream)',marginBottom:'12px'}}>Productos pedidos</div>
                  {selPedido.items.map((it,i)=>(
                    <div key={i} style={{display:'flex',justifyContent:'space-between',
                      padding:'8px 0',borderBottom:'1px solid var(--border)',fontSize:'13px'}}>
                      <div>
                        <span style={{color:'var(--cream)',fontWeight:500}}>{it.prod}</span>
                        <span style={{color:'var(--cream-3)',marginLeft:'8px'}}>× {it.cant}</span>
                      </div>
                      <span style={{color:'var(--gold)',fontWeight:600}}>{clp(it.precio*it.cant)}</span>
                    </div>
                  ))}
                  <div style={{display:'flex',justifyContent:'space-between',paddingTop:'10px',
                    fontWeight:700,fontSize:'16px'}}>
                    <span style={{color:'var(--cream)'}}>Total</span>
                    <span style={{color:'var(--gold)'}}>{clp(selPedido.total)}</span>
                  </div>
                </div>

                {/* Envío */}
                <div style={{background:'var(--bg-card)',border:'1px solid var(--border)',
                  borderRadius:'12px',padding:'16px',marginBottom:'16px'}}>
                  <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'16px',fontWeight:600,
                    color:'var(--cream)',marginBottom:'12px'}}>Despacho</div>
                  <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'8px',marginBottom:'12px'}}>
                    <div>
                      <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'4px'}}>Courier</div>
                      <select style={{...invStyles.select,width:'100%'}}
                        value={selPedido.envio}
                        onChange={e=>setPedidos(prev=>prev.map(p=>p.id===selPedido.id?{...p,envio:e.target.value}:p))}>
                        {COURIERS.map(c=><option key={c}>{c}</option>)}
                      </select>
                    </div>
                    <div>
                      <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'4px'}}>N° Seguimiento</div>
                      <input style={calcStyles.input} placeholder="Ej: CHX-123456"
                        value={selPedido.tracking}
                        onChange={e=>setTracking(selPedido.id,e.target.value)}/>
                    </div>
                  </div>
                  {selPedido.tracking && (
                    <div style={{background:'rgba(22,160,133,0.1)',border:'1px solid rgba(22,160,133,0.3)',
                      borderRadius:'8px',padding:'10px',fontSize:'12px',color:'#16a085'}}>
                      📦 Tracking activo: {selPedido.tracking} · {selPedido.envio}
                    </div>
                  )}
                </div>

                {/* Acciones */}
                {selPedido.estado !== 'Entregado' && selPedido.estado !== 'Cancelado' && (
                  <div style={{display:'flex',gap:'8px'}}>
                    <button onClick={()=>avanzarEstado(selPedido.id)}
                      style={{...posStyles.cobrarBtn,flex:1,margin:0,fontSize:'13px'}}>
                      → {ESTADOS_WEB[ESTADOS_WEB.indexOf(selPedido.estado)+1]}
                    </button>
                    <button onClick={()=>setPedidos(prev=>prev.map(p=>p.id===selPedido.id?{...p,estado:'Cancelado'}:p))}
                      style={{padding:'12px 16px',background:'rgba(192,57,43,0.1)',border:'1px solid rgba(192,57,43,0.3)',
                        borderRadius:'10px',color:'#c0392b',cursor:'pointer',fontSize:'13px'}}>
                      Cancelar
                    </button>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      )}

      {/* ── CATÁLOGO ── */}
      {vista==='catalogo' && (
        <div style={{flex:1,overflowY:'auto',padding:'16px'}}>
          <div style={{marginBottom:'12px',color:'var(--cream-3)',fontSize:'12px'}}>
            Gestiona qué productos están disponibles en la tienda online. Activa o desactiva la publicación y define el stock disponible para venta web.
          </div>
          <table style={{width:'100%',borderCollapse:'collapse'}}>
            <thead>
              <tr>{['SKU','Producto','Metal','Precio','Stock web','Tienda','Publicado'].map(h=>(
                <th key={h} style={invStyles.th}>{h}</th>
              ))}</tr>
            </thead>
            <tbody>
              {catalogo.map((p,i)=>(
                <tr key={p.id} style={invStyles.tr}>
                  <td style={invStyles.td}><span style={{fontFamily:'monospace',fontSize:'10px',color:'var(--cream-3)'}}>{p.sku}</span></td>
                  <td style={invStyles.td}><span style={{color:'var(--cream)',fontSize:'12px',fontWeight:500}}>{p.nombre}</span></td>
                  <td style={invStyles.td}><span style={{color:'var(--cream-3)',fontSize:'11px'}}>{p.metal}</span></td>
                  <td style={invStyles.td}><span style={{color:'var(--gold)',fontWeight:600,fontSize:'12px'}}>{clp(p.precio)}</span></td>
                  <td style={invStyles.td}>
                    <input type="number" min="0" max={p.stock}
                      style={{...calcStyles.input,width:'60px',padding:'4px 6px',fontSize:'12px',textAlign:'center'}}
                      value={p.stockOnline}
                      onChange={e=>actualizarCatalogo(i,{stockOnline:parseInt(e.target.value)||0})}/>
                  </td>
                  <td style={invStyles.td}>
                    <span style={{fontSize:'11px',color:TIENDAS.find(t=>t.id===p.tienda)?.color}}>
                      {TIENDAS.find(t=>t.id===p.tienda)?.sigla}
                    </span>
                  </td>
                  <td style={invStyles.td}>
                    <button onClick={()=>actualizarCatalogo(i,{publicado:!p.publicado})}
                      style={{padding:'4px 12px',borderRadius:'20px',border:'none',cursor:'pointer',
                        fontSize:'11px',fontWeight:600,
                        background:p.publicado?'rgba(39,174,96,0.15)':'rgba(100,100,100,0.15)',
                        color:p.publicado?'#27ae60':'var(--cream-3)'}}>
                      {p.publicado?'● Activo':'○ Inactivo'}
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* ── CONFIG ── */}
      {vista==='config' && (
        <div style={{flex:1,overflowY:'auto',padding:'24px',maxWidth:'600px'}}>
          <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'20px',fontWeight:600,
            color:'var(--cream)',marginBottom:'20px'}}>Configuración Tienda Online</div>
          {[
            {label:'URL de la tienda',         val:'navarro-joyeria.cl'},
            {label:'Email de notificaciones',  val:'ventas@navarro-joyeria.cl'},
            {label:'Pasarela de pago',         val:'Mercado Pago · Webpay'},
            {label:'Costo de envío estándar',  val:'$4.990 CLP'},
            {label:'Envío gratis desde',       val:'$80.000 CLP'},
            {label:'Tiempo de preparación',    val:'1-3 días hábiles'},
          ].map(f=>(
            <div key={f.label} style={{display:'flex',justifyContent:'space-between',
              padding:'12px 0',borderBottom:'1px solid var(--border)',fontSize:'13px'}}>
              <span style={{color:'var(--cream-3)'}}>{f.label}</span>
              <span style={{color:'var(--cream)',fontWeight:500}}>{f.val}</span>
            </div>
          ))}
          <div style={{marginTop:'20px',padding:'14px',background:'rgba(201,168,76,0.06)',
            border:'1px solid rgba(201,168,76,0.2)',borderRadius:'10px',fontSize:'12px',
            color:'var(--cream-3)',lineHeight:'1.7'}}>
            <div style={{color:'var(--gold)',fontWeight:600,marginBottom:'6px'}}>Integración Mercado Pago</div>
            <div>Las ventas web se procesan vía Mercado Pago. El dinero se acredita en 1-2 días hábiles.</div>
            <div style={{marginTop:'8px',color:'#27ae60'}}>✓ API Key configurada · ✓ Webhooks activos</div>
          </div>
        </div>
      )}
    </div>
  );
}

const webStyles = {
  tabs:{ display:'flex', borderBottom:'1px solid var(--border)', background:'var(--bg-card)',
    flexShrink:0, alignItems:'center' },
  tab:{ padding:'12px 18px', background:'transparent', border:'none',
    color:'var(--cream-3)', cursor:'pointer', fontSize:'12px', fontFamily:'Inter,sans-serif',
    borderBottom:'2px solid transparent' },
  tabAct:{ color:'var(--cream)', borderBottom:'2px solid var(--gold)' },
  pedidosLista:{ width:'320px', display:'flex', flexDirection:'column',
    borderRight:'1px solid var(--border)', overflow:'hidden', flexShrink:0 },
  pedRow:{ padding:'12px 14px', borderBottom:'1px solid var(--border)',
    cursor:'pointer', transition:'background 0.1s' },
  pedRowSel:{ background:'rgba(201,168,76,0.06)', borderLeft:'2px solid var(--gold)' },
};

Object.assign(window, { VentaOnline });