// EUTPeru — Productos: Catálogo, Almacén, Movimientos
const { useState, useEffect } = React;
const G = window.C;
const { T, Modal, FInput, FSelect, Row, Btn, Table, Card, Tabs, PageHeader, StockBadge } = window;
const fmtS = window.fmtS;
const creditFactor = window.creditFactor;

const CATEGORIAS = ['cascos','proteccion auditiva','lentes','proteccion respiratoria','guantes','calzado','trabajo en alturas','seguridad vial','ropa','otros'];

// ─── EPP Icon ───────────────────────────────────────────────
function EppIcon({ size=28, pdf }) {
  const [hov, setHov] = React.useState(false);
  const hasPdf = !!pdf;
  return (
    <div
      onClick={hasPdf ? e=>{e.stopPropagation();window.open(pdf,'_blank');} : undefined}
      onMouseEnter={()=>setHov(true)} onMouseLeave={()=>setHov(false)}
      title={hasPdf ? `Ver ficha técnica: ${pdf}` : 'Sin ficha técnica'}
      style={{width:size,height:size,background:hov&&hasPdf?G.accentDark+'44':G.card2,border:`1px solid ${hasPdf?(hov?G.accent:G.accentDark):G.border}`,borderRadius:6,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,cursor:hasPdf?'pointer':'default',position:'relative',transition:'all 0.15s'}}>
      <svg width={size*0.6} height={size*0.6} viewBox="0 0 20 20" fill="none">
        <path d="M10 3L4 7h12L10 3z" fill={G.accentDark}/>
        <ellipse cx="10" cy="12" rx="5" ry="4" fill={G.accentDark} stroke={G.accent} strokeWidth="1"/>
        <circle cx="10" cy="12.5" r="2.5" fill="none" stroke={G.accent} strokeWidth="0.8"/>
      </svg>
      {hasPdf && <div style={{position:'absolute',bottom:-3,right:-3,width:10,height:10,borderRadius:'50%',background:G.accent,border:`1px solid ${G.bg}`,display:'flex',alignItems:'center',justifyContent:'center',fontSize:6,color:'#000',fontWeight:700}}>P</div>}
    </div>
  );
}

// ─── CATÁLOGO ────────────────────────────────────────────────
function Catalogo({ products, setProducts, contacts, currentUser }) {
  const [showModal,    setShowModal]    = useState(false);
  const [editing,      setEditing]      = useState(null);
  const [search,       setSearch]       = useState('');
  const [selCategory,  setSelCategory]  = useState('todos');
  const [showPrices,   setShowPrices]   = useState(null);
  const [saving,       setSaving]       = useState(false);
  const [errMsg,       setErrMsg]       = useState('');

  const isAdmin    = currentUser?.role === 'Administrador';
  const canPrices  = isAdmin || !!currentUser?.perms?.verPrecios;
  const canEdit    = isAdmin || !!currentUser?.perms?.catalogo;

  const suppliers = (contacts||[]).filter(c=>c.type==='proveedor');
  const filtered  = (products||[]).filter(p=>{
    const matchSearch = p.name.toLowerCase().includes(search.toLowerCase()) ||
      (p.brand||'').toLowerCase().includes(search.toLowerCase());
    const matchCat = selCategory === 'todos' || p.category === selCategory;
    return matchSearch && matchCat;
  });

  const blank = {name:'',brand:'',um:'UND',supplierId:'',buy:'',sell:'',stock:'',minStock:'',fichaPdf:'',category:''};
  const [form, setForm] = useState(blank);
  const sf = (k,v) => setForm(f=>({...f,[k]:v}));

  const openNew  = ()  => { setForm(blank); setEditing(null); setErrMsg(''); setShowModal(true); };
  const openEdit = (p) => {
    setForm({name:p.name,brand:p.brand||'',um:p.um,supplierId:p.supplierId||'',
             buy:p.buy,sell:p.sell,stock:p.stock,minStock:p.minStock,fichaPdf:p.fichaPdf||'',
             category:p.category||''});
    setEditing(p.id); setErrMsg(''); setShowModal(true);
  };

  const save = async () => {
    if (!form.name || !form.sell) return;
    setSaving(true); setErrMsg('');
    const body = {
      name:form.name, brand:form.brand||null, um:form.um,
      supplierId:form.supplierId?+form.supplierId:null,
      buy:+form.buy||0, sell:+form.sell,
      stock:+form.stock||0, minStock:+form.minStock||0,
      fichaPdf:form.fichaPdf||null,
      category:form.category||null,
    };
    const res = await window.api(editing?`/products/${editing}`:'/products', {
      method: editing?'PUT':'POST', body: JSON.stringify(body),
    });
    setSaving(false);
    if (!res||!res.ok) { setErrMsg('Error al guardar. Verifica los datos.'); return; }
    const saved = await res.json();
    if (editing) setProducts(ps=>ps.map(p=>p.id===editing?saved:p));
    else         setProducts(ps=>[...ps,saved]);
    setShowModal(false);
  };

  const del = async (id) => {
    const res = await window.api(`/products/${id}`,{method:'DELETE'});
    if (res&&res.ok) setProducts(ps=>ps.filter(p=>p.id!==id));
  };

  const cols = [
    {key:'img',  label:'',w:44,render:p=><EppIcon size={34} pdf={p.fichaPdf}/>},
    {key:'name', label:'Producto',render:p=>(
      <div>
        <div style={{fontSize:13,fontWeight:500,color:G.text}}>{p.name}</div>
        <div style={{fontSize:10,color:G.textSec}}>{p.brand} · {p.supplier}</div>
        {p.category && <span style={{fontSize:9,background:G.accent+'22',color:G.accent,padding:'1px 6px',borderRadius:3,marginTop:2,display:'inline-block',textTransform:'capitalize'}}>{p.category}</span>}
      </div>
    )},
    {key:'um', label:'U.M.',w:50},
    ...(canPrices ? [
      {key:'buy',  label:'P. Compra',w:100,render:p=><span style={{color:G.textSec}}>{fmtS(p.buy)}</span>},
      {key:'sell', label:'P. Venta', w:100,render:p=><span style={{color:G.accent,fontWeight:600}}>{fmtS(p.sell)}</span>},
      {key:'prices',label:'Plazos',w:80,render:p=>(
        <div style={{position:'relative'}}>
          <button onClick={e=>{e.stopPropagation();setShowPrices(showPrices===p.id?null:p.id);}} style={{background:G.card2,border:`1px solid ${G.border}`,color:G.textSec,fontSize:11,padding:'3px 8px',borderRadius:4,cursor:'pointer'}}>Ver ▾</button>
          {showPrices===p.id && (
            <div style={{position:'absolute',top:'100%',left:0,zIndex:100,background:G.card2,border:`1px solid ${G.border}`,borderRadius:6,padding:10,minWidth:160,boxShadow:'0 8px 24px #00000060'}} onClick={e=>e.stopPropagation()}>
              {[0,30,60,90,120].map(d=>(
                <div key={d} style={{display:'flex',justifyContent:'space-between',padding:'3px 0',fontSize:11}}>
                  <span style={{color:G.textSec}}>{d===0?'Contado':`${d}d`}</span>
                  <span style={{color:G.accent,fontWeight:600}}>{fmtS(p.sell*creditFactor(d))}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      )},
    ] : []),
    {key:'stock',label:'Stock',w:70,render:p=><span style={{fontWeight:700,color:p.stock<=p.minStock?G.error:p.stock<=p.minStock*1.5?G.warning:G.text}}>{p.stock}</span>},
    ...(canEdit ? [{key:'actions',label:'',w:90,render:p=>(
      <div style={{display:'flex',gap:6}}>
        <Btn sm variant="ghost"  onClick={e=>{e.stopPropagation();openEdit(p);}}>✏️</Btn>
        <Btn sm variant="danger" onClick={e=>{e.stopPropagation();del(p.id);}}>🗑️</Btn>
      </div>
    )}] : []),
  ];

  return (
    <div onClick={()=>setShowPrices(null)}>
      <PageHeader title="CATÁLOGO DE PRODUCTOS" subtitle={`${filtered.length} productos registrados`}
        action={canEdit && <Btn onClick={openNew}>+ Nuevo Producto</Btn>}/>
      <div style={{marginBottom:10,display:'flex',gap:6,flexWrap:'wrap',alignItems:'center'}}>
        {['todos',...CATEGORIAS].map(cat=>(
          <button key={cat} onClick={()=>setSelCategory(cat)} style={{
            background:selCategory===cat?G.accent:'transparent',
            border:`1px solid ${selCategory===cat?G.accent:G.border}`,
            color:selCategory===cat?'#000':G.textSec,
            padding:'4px 10px',borderRadius:12,fontSize:11,cursor:'pointer',
            fontWeight:selCategory===cat?600:400,transition:'all 0.12s',textTransform:'capitalize'
          }}>{cat==='todos'?'Todos':cat}</button>
        ))}
      </div>
      <div style={{marginBottom:14}}>
        <input value={search} onChange={e=>setSearch(e.target.value)} placeholder="Buscar por nombre o marca…"
          style={{background:G.card,border:`1px solid ${G.border}`,borderRadius:5,color:G.text,padding:'7px 12px',fontSize:13,width:280,outline:'none',fontFamily:"'Inter',sans-serif"}}/>
      </div>
      <Card noPad><Table cols={cols} rows={filtered} emptyMsg="No se encontraron productos"/></Card>

      {showModal && (
        <Modal title={editing?'Editar Producto':'Nuevo Producto'} onClose={()=>setShowModal(false)} width={600}>
          <Row><FInput label="Nombre del producto *" value={form.name} onChange={e=>sf('name',e.target.value)} placeholder="Ej: Casco MSA Tipo Sombrero"/></Row>
          <Row>
            <FInput label="Marca" value={form.brand} onChange={e=>sf('brand',e.target.value)} placeholder="Ej: 3M, MSA, Ansell"/>
            <FSelect label="Unidad de medida" value={form.um} onChange={e=>sf('um',e.target.value)} options={['UND','PAR','CJA','BOL','KIT'].map(v=>({value:v,label:v}))}/>
          </Row>
          <Row>
            <FSelect label="Categoría" value={form.category}
              onChange={e=>sf('category',e.target.value)}
              options={[{value:'',label:'Sin categoría'},...CATEGORIAS.map(c=>({value:c,label:c.charAt(0).toUpperCase()+c.slice(1)}))]}/>
            <FSelect label="Proveedor" value={form.supplierId}
              onChange={e=>sf('supplierId',e.target.value)}
              options={[{value:'',label:'Seleccionar proveedor…'},...suppliers.map(s=>({value:s.id,label:s.name}))]}/>
          </Row>
          <Row>
            <FInput label="Precio de compra (S/)" type="number" value={form.buy}      onChange={e=>sf('buy',e.target.value)}      placeholder="0.00"/>
            <FInput label="Precio de venta (S/) *" type="number" value={form.sell}    onChange={e=>sf('sell',e.target.value)}     placeholder="0.00"/>
          </Row>
          <Row>
            <FInput label="Stock inicial"  type="number" value={form.stock}    onChange={e=>sf('stock',e.target.value)}    placeholder="0"/>
            <FInput label="Stock mínimo"   type="number" value={form.minStock} onChange={e=>sf('minStock',e.target.value)} placeholder="0"/>
          </Row>
          {form.sell && (
            <div style={{background:G.bg,border:`1px solid ${G.border}`,borderRadius:6,padding:'10px 14px',marginBottom:12}}>
              <div style={{...T.sm,marginBottom:6}}>Precios por plazo de crédito:</div>
              <div style={{display:'flex',gap:16,flexWrap:'wrap'}}>
                {[0,30,60,90,120].map(d=><div key={d} style={{fontSize:11}}>
                  <span style={{color:G.textSec}}>{d===0?'Contado':`${d}d`}:</span>{' '}
                  <span style={{color:G.accent,fontWeight:600}}>{fmtS((+form.sell)*creditFactor(d))}</span>
                </div>)}
              </div>
            </div>
          )}
          <div style={{marginBottom:12}}>
            <div style={{...T.sm,marginBottom:4}}>📎 Ficha Técnica — URL</div>
            <div style={{display:'flex',alignItems:'center',gap:8}}>
              <input value={form.fichaPdf||''} onChange={e=>sf('fichaPdf',e.target.value)} placeholder="https://drive.google.com/… o /fichas/producto.pdf" style={{flex:1,background:G.bg,border:`1px solid ${G.border}`,borderRadius:5,color:G.text,padding:'7px 11px',fontSize:12,outline:'none',fontFamily:"'Inter',sans-serif"}}/>
              {form.fichaPdf && <button type="button" onClick={()=>sf('fichaPdf','')} style={{background:'none',border:'none',color:G.error,cursor:'pointer',fontSize:14,flexShrink:0}}>✕</button>}
            </div>
            <div style={{fontSize:10,color:G.textSec,marginTop:3}}>Pega un enlace de Google Drive, Dropbox u otro servicio. Debe ser un enlace directo al PDF.</div>
          </div>
          {errMsg && <div style={{color:G.error,fontSize:12,marginBottom:8}}>⚠ {errMsg}</div>}
          <div style={{display:'flex',justifyContent:'flex-end',gap:8,marginTop:6}}>
            <Btn variant="secondary" onClick={()=>setShowModal(false)}>Cancelar</Btn>
            <Btn onClick={save} disabled={saving}>{saving?'Guardando…':editing?'Guardar Cambios':'Crear Producto'}</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ─── ALMACÉN ─────────────────────────────────────────────────
function Almacen({ products, setProducts, logActivity, currentUser }) {
  const [adjustModal,  setAdjustModal]  = useState(null);
  const [adjVal,       setAdjVal]       = useState('');
  const [adjReason,    setAdjReason]    = useState('');
  const [adjError,     setAdjError]     = useState('');
  const [saving,       setSaving]       = useState(false);
  const [search,       setSearch]       = useState('');
  const [selCategory,  setSelCategory]  = useState('todos');

  const isAdmin   = currentUser?.role === 'Administrador';
  const canPrices = isAdmin || !!currentUser?.perms?.verPrecios;
  const canAdjust = isAdmin || !!currentUser?.perms?.almacen;

  const saveAdjust = async () => {
    if (!adjVal) return;
    if (!adjReason.trim()) { setAdjError('El motivo es obligatorio'); return; }
    setAdjError(''); setSaving(true);
    const res = await window.api(`/products/${adjustModal.id}/stock`, {
      method: 'PATCH',
      body: JSON.stringify({ stock: +adjVal, reason: adjReason }),
    });
    setSaving(false);
    if (!res||!res.ok) { setAdjError('Error al guardar. Intenta nuevamente.'); return; }
    const updated = await res.json();
    setProducts(ps=>ps.map(p=>p.id===adjustModal.id?updated:p));
    if (logActivity) logActivity('Ajustó stock','Almacén',
      `${adjustModal.name}: ${adjustModal.stock} → ${adjVal} (${adjReason})`);
    setAdjustModal(null); setAdjVal(''); setAdjReason('');
  };

  const cols = [
    {key:'name',label:'Producto',render:p=>(
      <div style={{display:'flex',alignItems:'center',gap:8}}>
        <EppIcon size={28} pdf={p.fichaPdf}/>
        <div>
          <div style={{fontSize:13,color:G.text,fontWeight:500}}>{p.name}</div>
          <div style={{fontSize:10,color:G.textSec}}>{p.brand}</div>
          {p.category && <span style={{fontSize:9,background:G.accent+'22',color:G.accent,padding:'1px 6px',borderRadius:3,marginTop:2,display:'inline-block',textTransform:'capitalize'}}>{p.category}</span>}
        </div>
      </div>
    )},
    {key:'stock',   label:'Stock Actual', w:110,render:p=><span style={{fontFamily:"'Barlow Condensed',sans-serif",fontSize:20,fontWeight:700,color:p.stock<=p.minStock?G.error:p.stock<=p.minStock*1.5?G.warning:G.text}}>{p.stock}</span>},
    {key:'minStock',label:'Stock Mínimo', w:110,render:p=><span style={{color:G.textSec}}>{p.minStock}</span>},
    {key:'status',  label:'Estado',       w:100,render:p=><StockBadge stock={p.stock} minStock={p.minStock}/>},
    ...(canAdjust ? [{key:'actions',label:'',w:130,render:p=>(
      <Btn sm variant="ghost" onClick={()=>{setAdjustModal(p);setAdjVal(p.stock);setAdjError('');}}>⚙ Ajustar Stock</Btn>
    )}] : []),
  ];

  const filteredProds = (products||[]).filter(p => {
    const matchSearch = (p.name||'').toLowerCase().includes(search.toLowerCase()) ||
      (p.brand||'').toLowerCase().includes(search.toLowerCase());
    const matchCat = selCategory === 'todos' || p.category === selCategory;
    return matchSearch && matchCat;
  });

  const critical = (products||[]).filter(p=>window.stockStatus(p.stock,p.minStock)==='critico').length;
  const low      = (products||[]).filter(p=>window.stockStatus(p.stock,p.minStock)==='bajo').length;
  const ok       = (products||[]).length - critical - low;

  const valorCompra = (products||[]).reduce((s,p) => s + (p.stock * (+p.buy  || 0)), 0);
  const valorVenta  = (products||[]).reduce((s,p) => s + (p.stock * (+p.sell || 0)), 0);
  const ganancia    = valorVenta - valorCompra;

  return (
    <div>
      <PageHeader title="ALMACÉN" subtitle="Control de stock e inventario"/>
      <div style={{marginBottom:18}}>
        <div style={{display:'flex',gap:12,marginBottom:10}}>
          <div style={{background:G.card,border:`1px solid ${G.border}`,borderRadius:8,padding:'12px 20px',display:'flex',gap:20}}>
            <div style={{textAlign:'center'}}><div style={{fontSize:22,fontWeight:700,color:G.error,   fontFamily:"'Barlow Condensed',sans-serif"}}>{critical}</div><div style={{fontSize:10,color:G.textSec}}>Crítico</div></div>
            <div style={{width:1,background:G.border}}/>
            <div style={{textAlign:'center'}}><div style={{fontSize:22,fontWeight:700,color:G.warning, fontFamily:"'Barlow Condensed',sans-serif"}}>{low}</div><div style={{fontSize:10,color:G.textSec}}>Bajo</div></div>
            <div style={{width:1,background:G.border}}/>
            <div style={{textAlign:'center'}}><div style={{fontSize:22,fontWeight:700,color:G.accent,  fontFamily:"'Barlow Condensed',sans-serif"}}>{ok}</div><div style={{fontSize:10,color:G.textSec}}>OK</div></div>
          </div>
        </div>
        {canPrices && (
          <div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
            {[
              {label:'Valor de Compra',    value:valorCompra, color:G.warning},
              {label:'Valor de Venta',     value:valorVenta,  color:G.accent},
              {label:'Ganancia Potencial', value:ganancia,    color:G.info},
            ].map(({label,value,color})=>(
              <div key={label} style={{background:G.card,border:`1px solid ${G.border}`,borderRadius:8,padding:'12px 20px',flex:1,minWidth:160}}>
                <div style={{fontSize:10,color:G.textSec,textTransform:'uppercase',letterSpacing:0.5,marginBottom:5}}>{label}</div>
                <div style={{fontFamily:"'Barlow Condensed',sans-serif",fontSize:22,fontWeight:700,color}}>{fmtS(value)}</div>
              </div>
            ))}
          </div>
        )}
      </div>
      <div style={{marginBottom:10,display:'flex',gap:6,flexWrap:'wrap',alignItems:'center'}}>
        {['todos',...CATEGORIAS].map(cat=>(
          <button key={cat} onClick={()=>setSelCategory(cat)} style={{
            background:selCategory===cat?G.accent:'transparent',
            border:`1px solid ${selCategory===cat?G.accent:G.border}`,
            color:selCategory===cat?'#000':G.textSec,
            padding:'4px 10px',borderRadius:12,fontSize:11,cursor:'pointer',
            fontWeight:selCategory===cat?600:400,transition:'all 0.12s',textTransform:'capitalize'
          }}>{cat==='todos'?'Todos':cat}</button>
        ))}
      </div>
      <div style={{marginBottom:14}}>
        <input value={search} onChange={e=>setSearch(e.target.value)} placeholder="Buscar por nombre o marca…"
          style={{background:G.card,border:`1px solid ${G.border}`,borderRadius:5,color:G.text,padding:'7px 12px',fontSize:13,width:280,outline:'none',fontFamily:"'Inter',sans-serif"}}/>
        {search && <span style={{marginLeft:10,fontSize:12,color:G.textSec}}>{filteredProds.length} resultado{filteredProds.length!==1?'s':''}</span>}
      </div>
      <Card noPad><Table cols={cols} rows={filteredProds} emptyMsg="No se encontraron productos"/></Card>

      {adjustModal && (
        <Modal title={`Ajustar Stock — ${adjustModal.name}`} onClose={()=>setAdjustModal(null)} width={420}>
          <div style={{background:G.bg,border:`1px solid ${G.border}`,borderRadius:6,padding:'10px 14px',marginBottom:14,fontSize:12}}>
            <span style={{color:G.textSec}}>Stock actual: </span>
            <span style={{color:G.text,fontWeight:700}}>{adjustModal.stock} {adjustModal.um}</span>
            <span style={{color:G.textSec,marginLeft:16}}>Mínimo: </span>
            <span style={{color:G.text}}>{adjustModal.minStock}</span>
          </div>
          <FInput label="Nuevo valor de stock *" type="number" value={adjVal}
            onChange={e=>setAdjVal(e.target.value)} placeholder="Ingrese la nueva cantidad"/>
          <FInput label="Motivo del ajuste *" value={adjReason}
            onChange={e=>{setAdjReason(e.target.value);setAdjError('');}}
            placeholder="Ej: Inventario físico, devolución, merma…"/>
          {adjError && <div style={{color:G.error,fontSize:11,marginBottom:8}}>⚠ {adjError}</div>}
          <div style={{display:'flex',justifyContent:'flex-end',gap:8,marginTop:8}}>
            <Btn variant="secondary" onClick={()=>setAdjustModal(null)}>Cancelar</Btn>
            <Btn onClick={saveAdjust} disabled={saving}>{saving?'Guardando…':'Guardar Ajuste'}</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ─── MOVIMIENTOS ─────────────────────────────────────────────
function Movimientos({ products, contacts, currentUser }) {
  const [tab,         setTab]         = useState('Entradas');
  const [movements,   setMovements]   = useState([]);
  const [loading,     setLoading]     = useState(true);
  const [deleteModal, setDeleteModal] = useState(null);
  const [delReason,   setDelReason]   = useState('');
  const [delSaving,   setDelSaving]   = useState(false);

  const isAdmin   = currentUser?.role === 'Administrador';
  const canDelete = isAdmin || !!currentUser?.perms?.eliminarMovimientos;

  useEffect(()=>{
    window.api('/movements').then(r=>r&&r.json()).then(data=>{
      if (Array.isArray(data)) setMovements(data);
      setLoading(false);
    }).catch(()=>setLoading(false));
  },[]);

  const filtered = movements.filter(m=>tab==='Entradas'?m.type==='entrada':m.type==='salida');

  const confirmDelete = async () => {
    if (!delReason.trim() || delSaving) return;
    setDelSaving(true);
    try {
      const res = await window.api(`/movements/${deleteModal.id}`, {
        method: 'DELETE',
        body: JSON.stringify({ reason: delReason.trim() }),
      });
      if (res && res.ok) {
        setMovements(ms => ms.filter(m => m.id !== deleteModal.id));
        setDeleteModal(null);
        setDelReason('');
      } else {
        const err = await res?.json().catch(() => ({}));
        alert(err?.error || 'Error al eliminar el movimiento');
      }
    } finally { setDelSaving(false); }
  };

  const cols = [
    {key:'date',    label:'Fecha',w:100,render:r=><span style={{fontSize:11,color:G.textSec}}>{r.date}</span>},
    {key:'partner', label:tab==='Entradas'?'Proveedor':'Cliente',render:r=><span style={{color:G.accent}}>{r.partner}</span>},
    {key:'products',label:'Productos',render:r=><span style={{fontSize:11,color:G.textSec}}>{r.products}</span>},
    {key:'qty',     label:'Cant.',w:60,render:r=><span style={{fontWeight:600}}>{r.qty}</span>},
    {key:'total',   label:'Total', w:120,render:r=><span style={{color:tab==='Entradas'?G.warning:G.accent,fontWeight:600}}>{fmtS(r.total)}</span>},
    {key:'del',     label:'',w:44,render:r=>canDelete?(
      <Btn sm variant="danger" style={{padding:'3px 7px',opacity:0.75}}
        onClick={e=>{e.stopPropagation();setDeleteModal(r);setDelReason('');}}>🗑️</Btn>
    ):null},
  ];

  return (
    <div>
      <PageHeader title="MOVIMIENTOS DE STOCK" subtitle="Historial de entradas y salidas"/>
      <Tabs tabs={['Entradas','Salidas']} active={tab} onChange={setTab}/>
      {loading
        ? <div style={{color:G.textSec,fontSize:13,padding:24}}>Cargando movimientos…</div>
        : <Card noPad><Table cols={cols} rows={filtered} emptyMsg={`Sin ${tab.toLowerCase()} registradas`}/></Card>
      }

      {deleteModal && (
        <div style={{position:'fixed',inset:0,background:'#000000d0',zIndex:1200,display:'flex',alignItems:'center',justifyContent:'center',padding:20}} onClick={()=>setDeleteModal(null)}>
          <div style={{background:G.card2,border:`1px solid ${G.border}`,borderRadius:10,width:'100%',maxWidth:460,boxShadow:'0 20px 60px #00000080',padding:'20px 24px'}} onClick={e=>e.stopPropagation()}>
            <div style={{fontFamily:"'Barlow Condensed',sans-serif",fontSize:18,fontWeight:700,color:G.error,marginBottom:4}}>ELIMINAR MOVIMIENTO</div>
            <div style={{fontSize:12,color:G.textSec,marginBottom:14}}>
              {deleteModal.type==='entrada'?'⚠️ El stock sumado por esta entrada será revertido.':'Esta salida será eliminada del historial.'}
            </div>
            <div style={{background:G.bg,border:`1px solid ${G.border}`,borderRadius:6,padding:'10px 14px',marginBottom:14,fontSize:12}}>
              <div style={{display:'flex',justifyContent:'space-between',marginBottom:4}}><span style={{color:G.textSec}}>ID</span><span style={{color:G.accent,fontWeight:600}}>#{deleteModal.id}</span></div>
              <div style={{display:'flex',justifyContent:'space-between',marginBottom:4}}><span style={{color:G.textSec}}>Tipo</span><span style={{fontWeight:600}}>{deleteModal.type}</span></div>
              <div style={{display:'flex',justifyContent:'space-between',marginBottom:4}}><span style={{color:G.textSec}}>Proveedor/Cliente</span><span>{deleteModal.partner||'—'}</span></div>
              <div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:G.textSec}}>Total</span><span style={{color:G.accent,fontWeight:700}}>{fmtS(deleteModal.total)}</span></div>
            </div>
            <div style={{marginBottom:14}}>
              <div style={{fontSize:12,color:G.text,marginBottom:6,fontWeight:500}}>Motivo de eliminación *</div>
              <textarea value={delReason} onChange={e=>setDelReason(e.target.value)} rows={3}
                placeholder="Ej: Registro duplicado, error en datos…"
                style={{width:'100%',background:G.bg,border:`1px solid ${delReason.trim()?G.accent:G.border}`,borderRadius:5,color:G.text,padding:'8px 11px',fontSize:13,resize:'vertical',outline:'none',fontFamily:"'Inter',sans-serif",boxSizing:'border-box'}}/>
              {!delReason.trim() && <div style={{fontSize:11,color:G.error,marginTop:3}}>Campo obligatorio</div>}
            </div>
            <div style={{display:'flex',justifyContent:'flex-end',gap:8}}>
              <Btn variant="secondary" onClick={()=>setDeleteModal(null)}>Cancelar</Btn>
              <Btn variant="danger" onClick={confirmDelete} disabled={!delReason.trim()||delSaving}>
                {delSaving?'Eliminando…':'🗑️ Confirmar eliminación'}
              </Btn>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Catalogo, Almacen, Movimientos });