// ── VITRINAS v3 — 8 Vitrinas con Repisas Izq/Der ────────

function Vitrinas({ tiendaId }) {
  const { useState, useEffect } = React;
  const tienda = TIENDAS.find(t => t.id === tiendaId);
  const [productos,   setProductos]  = useState([]);
  const [cargando,    setCargando]   = useState(true);
  const [asig,        setAsig]       = useState(() => lsGet('vitrinas3_' + tiendaId, {}));
  const [dragging,    setDrag]       = useState(null);
  const [dragOver,    setDOver]      = useState(null);
  const [busqueda,    setBusq]       = useState('');
  const [vitrSelId,   setVitrSel]    = useState(null);
  const [editando,    setEditando]   = useState(null); // { vitrId, campo }
  const [editVal,     setEditVal]    = useState('');

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

  // ── 8 Vitrinas por defecto (editables) ──────────────────
  const [vitrinas, setVitrinas] = useState(() => {
    const saved = lsGet('vitrinas3_def_' + tiendaId, null);
    if (saved) return saved;
    return [
      { id:'V1', num:1, nombre:'Vitrina 1', fantasia:'ENTRADA PRINCIPAL',   pos:'Frontal izquierda',   repisas:5, columnas:2 },
      { id:'V2', num:2, nombre:'Vitrina 2', fantasia:'COLECCIÓN PLATA',     pos:'Frontal centro-izq',  repisas:5, columnas:2 },
      { id:'V3', num:3, nombre:'Vitrina 3', fantasia:'COLECCIÓN ORO',       pos:'Frontal centro-der',  repisas:5, columnas:2 },
      { id:'V4', num:4, nombre:'Vitrina 4', fantasia:'LAPISLÁZULI',         pos:'Frontal derecha',     repisas:5, columnas:2 },
      { id:'V5', num:5, nombre:'Vitrina 5', fantasia:'JOYERÍA ARTESANAL',   pos:'Lateral izquierda',   repisas:5, columnas:2 },
      { id:'V6', num:6, nombre:'Vitrina 6', fantasia:'PIEDRAS PRECIOSAS',   pos:'Lateral derecha',     repisas:5, columnas:2 },
      { id:'V7', num:7, nombre:'Vitrina 7', fantasia:'ARGOLLAS Y ALIANZAS', pos:'Fondo local izq',     repisas:5, columnas:2 },
      { id:'V8', num:8, nombre:'Vitrina 8', fantasia:'ORO 18K PREMIUM',     pos:'Fondo local der',     repisas:5, columnas:2 },
    ];
  });

  function saveVitrinas(next) { setVitrinas(next); lsSet('vitrinas3_def_' + tiendaId, next); }
  function saveAsig(next) { setAsig(next); lsSet('vitrinas3_' + tiendaId, next); }

  function agregarVitrina() {
    const num = Math.max(...vitrinas.map(v => v.num), 0) + 1;
    const next = [...vitrinas, { id:`V${num}`, num, nombre:`Vitrina ${num}`, fantasia:`NUEVA VITRINA`, pos:'Sin asignar', repisas:5, columnas:2 }];
    saveVitrinas(next);
  }

  function eliminarVitrina(id) {
    if (!window.confirm('¿Eliminar esta vitrina? Los productos quedarán sin asignar.')) return;
    const next = vitrinas.filter(v => v.id !== id);
    // Clean assignments
    const nextAsig = { ...asig };
    Object.keys(nextAsig).forEach(k => { if (k.startsWith(id+'_')) delete nextAsig[k]; });
    saveVitrinas(next);
    saveAsig(nextAsig);
    if (vitrSelId === id) setVitrSel(next[0]?.id || null);
  }

  const prodsTienda = productos.filter(p => p.tienda === tiendaId && p.is_active);
  const asignados   = new Set(Object.values(asig).flat());
  const sinAsignar  = prodsTienda.filter(p => {
    const q = busqueda.toLowerCase();
    return !asignados.has(p.id) && (!q || p.nombre?.toLowerCase().includes(q) || p.sku?.toLowerCase().includes(q));
  });

  function onDragStart(e, prodId, fromKey) { setDrag({ prodId, fromKey }); e.dataTransfer.effectAllowed = 'move'; }
  function onDrop(e, toKey) {
    e.preventDefault(); if (!dragging) return;
    const { prodId, fromKey } = dragging;
    const next = { ...asig };
    if (fromKey) next[fromKey] = (next[fromKey]||[]).filter(id => id !== prodId);
    if (!next[toKey]) next[toKey] = [];
    if (!next[toKey].includes(prodId)) next[toKey] = [...next[toKey], prodId];
    saveAsig(next); setDrag(null); setDOver(null);
  }
  function onDropBanco(e) {
    e.preventDefault(); if (!dragging?.fromKey) return;
    const { prodId, fromKey } = dragging;
    const next = { ...asig }; next[fromKey] = (next[fromKey]||[]).filter(id => id !== prodId);
    saveAsig(next); setDrag(null); setDOver(null);
  }
  function quitar(key, prodId) { const next = { ...asig }; next[key] = (next[key]||[]).filter(id => id !== prodId); saveAsig(next); }
  function prod(id) { return prodsTienda.find(p => p.id === id); }

  function startEdit(vitrId, campo, val) { setEditando({ vitrId, campo }); setEditVal(val); }
  function commitEdit() {
    if (!editando) return;
    const next = vitrinas.map(v => v.id === editando.vitrId ? { ...v, [editando.campo]: editVal } : v);
    saveVitrinas(next); setEditando(null);
  }

  const vitrSel = vitrinas.find(v => v.id === vitrSelId) || vitrinas[0];

  if (cargando) return (
    <div style={{ display:'flex', alignItems:'center', justifyContent:'center', height:'100%', color:'var(--cream-3)' }}>
      Cargando inventario…
    </div>
  );

  // Contar piezas en vitrina seleccionada
  function contarVitrina(v) {
    let c = 0;
    for (let s = 0; s < v.repisas; s++) {
      c += (asig[`${v.id}_L${s}`]||[]).length + (asig[`${v.id}_R${s}`]||[]).length;
    }
    return c;
  }

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

      {/* ── Banco de productos ── */}
      <div style={vit3Styles.banco}
        onDragOver={e => { e.preventDefault(); setDOver('banco'); }}
        onDrop={onDropBanco}>
        <div style={{ padding:'10px 11px', borderBottom:'1px solid var(--border)' }}>
          <div style={{ fontFamily:'Cormorant Garamond,serif', fontSize:'14px', fontWeight:600, color:'var(--cream)', marginBottom:'7px' }}>Sin asignar</div>
          <input style={{ ...inv2Styles.searchInput, width:'100%' }} placeholder="Buscar…" value={busqueda} onChange={e => setBusq(e.target.value)} />
        </div>
        <div style={{ flex:1, overflowY:'auto', padding:'6px' }}>
          {sinAsignar.length === 0 && (
            <div style={{ textAlign:'center', color:'var(--cream-3)', padding:'20px', fontSize:'11px' }}>
              {busqueda ? 'Sin resultados' : '✦ Todos asignados'}
            </div>
          )}
          {sinAsignar.slice(0, 80).map(p => (
            <div key={p.id} draggable onDragStart={e => onDragStart(e, p.id, null)}
              style={{ ...vit3Styles.prodChip, cursor:'grab' }}>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ color:'var(--cream)', fontSize:'10px', fontWeight:500, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{p.nombre}</div>
                <div style={{ color:'var(--cream-3)', fontSize:'9px' }}>{p.sku} · {p.metal}</div>
              </div>
              <div style={{ color:'var(--gold)', fontSize:'10px', fontWeight:600, flexShrink:0, marginLeft:'4px' }}>{clp(p.precio)}</div>
            </div>
          ))}
          {sinAsignar.length > 80 && (
            <div style={{ textAlign:'center', color:'var(--cream-3)', fontSize:'10px', padding:'8px' }}>+{sinAsignar.length - 80} más</div>
          )}
        </div>
        <div style={{ padding:'5px 10px', borderTop:'1px solid var(--border)', fontSize:'9px', color:'var(--cream-3)', textAlign:'center' }}>
          Suelta aquí para quitar
        </div>
      </div>

      {/* ── Lista vitrinas ── */}
      <div style={vit3Styles.vitrinaList}>
        <div style={{ padding:'10px 11px', borderBottom:'1px solid var(--border)' }}>
          <div style={{ fontFamily:'Cormorant Garamond,serif', fontSize:'14px', fontWeight:600, color:'var(--cream)', marginBottom:'6px' }}>Vitrinas</div>
          <button onClick={agregarVitrina} style={{ ...inv2Styles.btnGold, width:'100%', fontSize:'10px' }}>+ Agregar vitrina</button>
        </div>
        <div style={{ flex:1, overflowY:'auto', padding:'6px' }}>
          {vitrinas.map(v => {
            const piezas = contarVitrina(v);
            const activa = vitrSel?.id === v.id;
            return (
              <div key={v.id} onClick={() => setVitrSel(v.id)}
                style={{ ...vit3Styles.vitrBtn, ...(activa ? vit3Styles.vitrBtnAct : {}) }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ color:activa?'var(--gold)':'var(--cream)', fontSize:'11px', fontWeight:600 }}>
                      V{v.num} — {v.nombre}
                    </div>
                    <div style={{ color:'var(--cream-3)', fontSize:'9px', marginTop:'1px', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{v.fantasia}</div>
                  </div>
                  <div style={{ textAlign:'right', flexShrink:0, display:'flex', flexDirection:'column', alignItems:'flex-end', gap:'2px' }}>
                    <div style={{ color:'var(--gold)', fontSize:'11px', fontWeight:700 }}>{piezas}</div>
                    <button onClick={e=>{e.stopPropagation();eliminarVitrina(v.id);}}
                      style={{ background:'none', border:'none', color:'var(--cream-3)', cursor:'pointer', fontSize:'9px', padding:'0', lineHeight:1 }}>🗑</button>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        <div style={{ padding:'6px', borderTop:'1px solid var(--border)', fontSize:'9px', color:'var(--cream-3)', textAlign:'center' }}>
          {Object.values(asig).flat().length} asig. · {prodsTienda.length} total
        </div>
      </div>

      {/* ── Vitrina seleccionada ── */}
      <div style={{ flex:1, overflowY:'auto', padding:'14px' }}>
        {vitrSel && (
          <div>
            {/* Cabecera vitrina — editable */}
            <div style={{ ...vit3Styles.vitrHeader, marginBottom:'14px' }}>
              <div style={{ fontFamily:'Cormorant Garamond,serif', fontSize:'11px', fontWeight:700, color:'var(--cream)', letterSpacing:'1px', textAlign:'center', padding:'8px', borderBottom:'3px solid var(--surface)', background:'#0c0908' }}>
                VITRINA {vitrSel.num} —&nbsp;
                {editando?.vitrId === vitrSel.id && editando.campo === 'fantasia' ? (
                  <input autoFocus value={editVal} onChange={e => setEditVal(e.target.value)}
                    onBlur={commitEdit} onKeyDown={e => e.key==='Enter' && commitEdit()}
                    style={{ background:'transparent', border:'none', color:'var(--cream)', fontSize:'11px', fontFamily:'inherit', fontWeight:700, letterSpacing:'1px', outline:'1px solid var(--gold)', width:'160px' }} />
                ) : (
                  <span onClick={() => startEdit(vitrSel.id, 'fantasia', vitrSel.fantasia)}
                    style={{ cursor:'pointer', borderBottom:'1px dashed var(--cream-3)' }} title="Click para editar">
                    {vitrSel.fantasia}
                  </span>
                )}
              </div>

              {/* Repisas izquierda / derecha */}
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', border:'3px solid #0c0908', borderTop:'none' }}>
                {/* Izquierda */}
                <div style={{ borderRight:'2px solid #0c0908' }}>
                  {Array.from({ length: vitrSel.repisas }).map((_, si) => {
                    const keyL = `${vitrSel.id}_L${si}`;
                    const items = asig[keyL] || [];
                    return (
                      <div key={si} style={{ borderBottom: si < vitrSel.repisas-1 ? '2px solid #0c0908' : 'none' }}>
                        <div style={{ padding:'4px 8px', background:'var(--surface)', fontSize:'9px', color:'var(--cream-3)', fontWeight:600, letterSpacing:'0.3px', textAlign:'center', borderBottom:'1px solid var(--border)' }}>
                          REPISA IZQUIERDA {si + 1}
                        </div>
                        <div onDragOver={e => { e.preventDefault(); setDOver(keyL); }}
                          onDrop={e => onDrop(e, keyL)} onDragLeave={() => setDOver(null)}
                          style={{ ...vit3Styles.dropZone, ...(dragOver === keyL ? vit3Styles.dropZoneAct : {}), minHeight:'44px', padding:'5px' }}>
                          {items.length === 0 && <span style={{ color:'var(--cream-3)', fontSize:'9px', margin:'auto' }}>Arrastra aquí</span>}
                          {items.map(id => {
                            const p = prod(id); if (!p) return null;
                            return (
                              <div key={id} draggable onDragStart={e => onDragStart(e, id, keyL)}
                                style={vit3Styles.prodTag}>
                                <span style={{ fontSize:'9px', color:'var(--cream)', fontWeight:500, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', flex:1 }}>{p.nombre?.slice(0,20)}</span>
                                <span style={{ color:'var(--gold)', fontSize:'9px', flexShrink:0 }}>{clp(p.precio)}</span>
                                <button onClick={() => quitar(keyL, id)} style={{ background:'none', border:'none', color:'var(--cream-3)', cursor:'pointer', fontSize:'9px', padding:'0 0 0 2px', lineHeight:1 }}>✕</button>
                              </div>
                            );
                          })}
                        </div>
                      </div>
                    );
                  })}
                </div>

                {/* Derecha */}
                <div>
                  {Array.from({ length: vitrSel.repisas }).map((_, si) => {
                    const keyR = `${vitrSel.id}_R${si}`;
                    const items = asig[keyR] || [];
                    return (
                      <div key={si} style={{ borderBottom: si < vitrSel.repisas-1 ? '2px solid #0c0908' : 'none' }}>
                        <div style={{ padding:'4px 8px', background:'var(--surface)', fontSize:'9px', color:'var(--cream-3)', fontWeight:600, letterSpacing:'0.3px', textAlign:'center', borderBottom:'1px solid var(--border)' }}>
                          REPISA DERECHA {si + 1}
                        </div>
                        <div onDragOver={e => { e.preventDefault(); setDOver(keyR); }}
                          onDrop={e => onDrop(e, keyR)} onDragLeave={() => setDOver(null)}
                          style={{ ...vit3Styles.dropZone, ...(dragOver === keyR ? vit3Styles.dropZoneAct : {}), minHeight:'44px', padding:'5px' }}>
                          {items.length === 0 && <span style={{ color:'var(--cream-3)', fontSize:'9px', margin:'auto' }}>Arrastra aquí</span>}
                          {items.map(id => {
                            const p = prod(id); if (!p) return null;
                            return (
                              <div key={id} draggable onDragStart={e => onDragStart(e, id, keyR)}
                                style={vit3Styles.prodTag}>
                                <span style={{ fontSize:'9px', color:'var(--cream)', fontWeight:500, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', flex:1 }}>{p.nombre?.slice(0,20)}</span>
                                <span style={{ color:'var(--gold)', fontSize:'9px', flexShrink:0 }}>{clp(p.precio)}</span>
                                <button onClick={() => quitar(keyR, id)} style={{ background:'none', border:'none', color:'var(--cream-3)', cursor:'pointer', fontSize:'9px', padding:'0 0 0 2px', lineHeight:1 }}>✕</button>
                              </div>
                            );
                          })}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>

            {/* Controles edición */}
            <div style={{ display:'flex', gap:'6px', flexWrap:'wrap', marginBottom:'10px' }}>
              <div style={{ fontSize:'10px', color:'var(--cream-3)', alignSelf:'center' }}>Editar vitrina:</div>
              {[
                { campo:'nombre', label:'Nombre', val:vitrSel.nombre },
                { campo:'fantasia', label:'Fantasía', val:vitrSel.fantasia },
                { campo:'pos', label:'Posición', val:vitrSel.pos },
              ].map(({ campo, label, val }) => (
                <button key={campo} onClick={() => startEdit(vitrSel.id, campo, val)}
                  style={{ ...invStyles.btnEdit, fontSize:'10px' }}>
                  ✏ {label}: <em style={{ color:'var(--cream-2)' }}>{val}</em>
                </button>
              ))}
              {editando?.vitrId === vitrSel.id && editando.campo !== 'fantasia' && (
                <div style={{ display:'flex', gap:'4px', alignItems:'center' }}>
                  <input autoFocus value={editVal} onChange={e => setEditVal(e.target.value)}
                    onKeyDown={e => e.key==='Enter' && commitEdit()}
                    style={{ ...calcStyles2.input, padding:'4px 8px', width:'160px', fontSize:'11px' }} />
                  <button onClick={commitEdit} style={{ ...inv2Styles.btnGold, padding:'4px 8px' }}>OK</button>
                  <button onClick={() => setEditando(null)} style={{ ...invStyles.btnEdit }}>✕</button>
                </div>
              )}
              <select value={vitrSel.repisas}
                onChange={e => saveVitrinas(vitrinas.map(v => v.id===vitrSel.id ? {...v, repisas:parseInt(e.target.value)} : v))}
                style={{ ...invStyles.select, fontSize:'10px', padding:'4px 8px' }}>
                {[3,4,5,6,7,8].map(n => <option key={n} value={n}>{n} repisas</option>)}
              </select>
            </div>

            <div style={{ fontSize:'10px', color:'var(--cream-3)', marginBottom:'4px' }}>
              ✦ Arrastra productos desde el panel izquierdo · Suelta en banco para quitar · Click en nombre para editar
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

const vit3Styles = {
  banco: { width:'200px', display:'flex', flexDirection:'column', borderRight:'1px solid var(--border)', overflow:'hidden', background:'var(--bg-sidebar)', flexShrink:0 },
  vitrinaList: { width:'175px', display:'flex', flexDirection:'column', borderRight:'1px solid var(--border)', overflow:'hidden', background:'var(--bg-sidebar)', flexShrink:0 },
  vitrBtn: { padding:'8px 9px', marginBottom:'3px', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'6px', cursor:'pointer', transition:'all 0.1s' },
  vitrBtnAct: { border:'1px solid var(--gold)', background:'var(--gold-dim)' },
  vitrHeader: { border:'3px solid #0c0908', borderRadius:'2px', overflow:'hidden' },
  prodChip: { display:'flex', alignItems:'center', gap:'5px', padding:'5px 6px', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'5px', marginBottom:'4px', userSelect:'none' },
  prodTag: { display:'flex', alignItems:'center', gap:'3px', padding:'3px 5px', background:'var(--surface-2)', border:'1px solid var(--border)', borderRadius:'4px', cursor:'grab', maxWidth:'100%', userSelect:'none', marginBottom:'2px' },
  dropZone: { border:'1px dashed var(--border)', borderRadius:'4px', display:'flex', flexWrap:'wrap', gap:'2px', alignItems:'flex-start', transition:'all 0.15s' },
  dropZoneAct: { border:'1px dashed var(--gold)', background:'rgba(201,168,76,0.06)' },
};

Object.assign(window, { Vitrinas });