// js/components/pages/Depositos.jsx
// [DEP v138 20260509] Tela de gestão de depósitos + transferências workflow.
// Usado como aba dentro de Entradas (acessível por admin + estoquista).
// Privacy: financeiro/vendedor NÃO acessam (ALLOWED_PAGES bloqueia entradas pra eles).
(function(){
  'use strict';
  const {useState, useEffect, useMemo, useCallback} = React;

  function Depositos({user, products, allUsers}){
    // [Wave 3 KIMI 2026-05-15] Refs widgets externos + fail-loud agregado (1 bloco único)
    // Padrão: bloco único (regra_estender_bloco_refs_fail_loud)
    const NewTransferModal = window.ZNX?.widgets?.depositos?.NewTransferModal;
    const TransferDetailModal = window.ZNX?.widgets?.depositos?.TransferDetailModal;
    const DepositoInventarioPage = window.ZNX?.widgets?.depositos?.DepositoInventarioPage;
    const AjusteEstoqueModal = window.ZNX?.widgets?.depositos?.AjusteEstoqueModal;
    const MovimentacoesProdutoPage = window.ZNX?.widgets?.depositos?.MovimentacoesProdutoPage;
    const WarehousesAdminModal = window.ZNX?.widgets?.depositos?.WarehousesAdminModal;
    if (!NewTransferModal || !TransferDetailModal || !DepositoInventarioPage ||
        !AjusteEstoqueModal || !MovimentacoesProdutoPage || !WarehousesAdminModal) {
      const _msg = `[Depositos] widgets faltando: NewTransferModal=${!!NewTransferModal}, TransferDetailModal=${!!TransferDetailModal}, DepositoInventarioPage=${!!DepositoInventarioPage}, AjusteEstoqueModal=${!!AjusteEstoqueModal}, MovimentacoesProdutoPage=${!!MovimentacoesProdutoPage}, WarehousesAdminModal=${!!WarehousesAdminModal}`;
      console.error(_msg);
      window.Sentry?.captureMessage?.(_msg, 'error');
    }

    const isAdmin = user?.role === 'admin';
    const isEstoquista = user?.role === 'estoquista';
    const sb = window.sb;

    const [warehouses, setWarehouses] = useState([]);
    const [transfers, setTransfers] = useState([]);
    const [loading, setLoading] = useState(true);
    const [showNewTransfer, setShowNewTransfer] = useState(false);
    const [viewTransferId, setViewTransferId] = useState(null);  // [DEP100-O2-J] state usa ID, não objeto
    const [filterStatus, setFilterStatus] = useState('TODOS');
    const [refreshKey, setRefreshKey] = useState(0);
    // [DEP100-O1-A] drill-down inventário do depósito
    const [showInventarioWh, setShowInventarioWh] = useState(null); // warehouse_id
    // [DEP100-O2-G] ajuste manual de estoque
    const [showAjuste, setShowAjuste] = useState(null); // {warehouse_id, product_id?}
    // [DEP100-O3-H] filtro por produto na lista transferências
    // IMPORTANTE: declarado AQUI no topo (antes do early return) pra não violar regra de hooks.
    const [filterProductSearch, setFilterProductSearch] = useState('');
    // [v224.88] toggle filtro auto-transfers (Senador→Alfonso por desvio de venda) · default ON
    const [showAuto, setShowAuto] = useState(true);
    // [DEP100-O3-K] modal movimentações do produto (timeline)
    const [showMovimentacoesPid, setShowMovimentacoesPid] = useState(null); // product_id
    // [DEP100-O3-M] modal admin CRUD warehouses
    const [showAdminWarehouses, setShowAdminWarehouses] = useState(false);

    // ─── LOAD warehouses + transfers ───
    useEffect(()=>{
      let cancelled = false;
      (async ()=>{
        setLoading(true);
        try{
          const {data: ws, error: e1} = await sb.from('warehouses')
            .select('id,name,code,is_principal,manager_app_user_id,address,notes')
            .is('deleted_at', null).order('is_principal',{ascending:false});
          if(e1) throw e1;
          if(!cancelled) setWarehouses(ws||[]);

          const {data: ts, error: e2} = await sb.from('stock_transfers')
            .select('*').order('requested_at',{ascending:false}).limit(200);
          if(e2) throw e2;
          if(!cancelled) setTransfers(ts||[]);
        }catch(err){
          console.error('[Depositos] load failed:', err);
          if(typeof toast==='function') toast('Erro ao carregar depósitos: '+(err?.message||'erro'),'error');
        }
        if(!cancelled) setLoading(false);
      })();
      return ()=>{cancelled=true;};
    },[refreshKey]);

    // [DEP100-O2-I] Realtime: ouve mudanças em stock_transfers e auto-refresh
    // Estoquista do destino vê novas transferências sem F5 manual.
    useEffect(()=>{
      // [v224.74] lib hardened (lib normaliza payload pra {type, new, old}) com fallback raw
      const handleEv = (ev)=>{
        if(typeof toast==='function' && ev.type==='INSERT'){
          const t = ev.new;
          if(t && t.to_warehouse_id){
            toast('🔔 Nova transferência: '+(t.transfer_number||'?'), 'info');
          }
        }
        refresh();
      };
      const handle = window.ZNX && window.ZNX.lib && window.ZNX.lib.realtime
        ? window.ZNX.lib.realtime.subscribe('stock_transfers', handleEv)
        : (function(){
            const ch = sb.channel('depositos_realtime')
              .on('postgres_changes', {event:'*', schema:'public', table:'stock_transfers'}, (payload)=>{
                handleEv({ type: payload.eventType, new: payload.new || null });
              })
              .subscribe();
            return { _ch: ch, _fallback: true };
          })();
      return ()=>{
        try{
          if(handle && handle._fallback) sb.removeChannel(handle._ch);
          else if(handle && window.ZNX?.lib?.realtime) window.ZNX.lib.realtime.unsubscribe(handle);
        }catch(e){}
      };
    },[]);

    const refresh = useCallback(()=>setRefreshKey(k=>k+1), []);

    // [DEP100-UX3] Se inventário ativo: renderiza página inteira no lugar da lista
    // (faz scroll volta pro topo automático)
    useEffect(()=>{ if(showInventarioWh) window.scrollTo(0,0); },[showInventarioWh]);

    // ─── Stats por depósito (DEP100-O2-F: + valor R$ + abaixo mín) ───
    const warehouseStats = useMemo(()=>{
      const stats = {};
      warehouses.forEach(w=>{
        let total = 0, sku = 0, valor = 0, abaixoMin = 0;
        (products||[]).forEach(p=>{
          const bd = p.stock_breakdown || p.stockBreakdown || {};
          const q = Number(bd[w.id] || 0);
          if(q > 0){
            total += q;
            sku++;
            valor += q * Number(p.sale_price || p.salePrice || 0);
            const min = Number(p.estoque_min || p.estoqueMin || 0);
            if(min > 0 && q < min) abaixoMin++;
          }
        });
        stats[w.id] = {total, sku, valor, abaixoMin};
      });
      return stats;
    },[warehouses, products]);

    // [v224.95 N+1 fix] productsById + warehousesById O(1) lookup · template provado v224.91 Orcamentos
    const productsById = useMemo(function(){
      return Object.fromEntries((products||[]).map(p=>[p.id,p]));
    }, [products]);
    const warehousesById = useMemo(function(){
      return Object.fromEntries((warehouses||[]).map(w=>[w.id,w]));
    }, [warehouses]);

    // [DEP100-O2-J] view transfer fresh do array (não objeto stale)
    const viewTransfer = useMemo(
      ()=>viewTransferId ? transfers.find(t=>t.id===viewTransferId) : null,
      [viewTransferId, transfers]
    );

    // [DEP100-O1-A] warehouse selecionado pra inventário (lookup fresco · v224.95 usa warehousesById)
    const inventarioWh = useMemo(
      ()=>showInventarioWh ? warehousesById[showInventarioWh] : null,
      [showInventarioWh, warehousesById]
    );

    // [v224.88] helper inline · regra_validacao_helpers_runtime · usado no useMemo E no render row
    const isAutoTransfer = function(t){ return t && t.notes && String(t.notes).startsWith('[AUTO]'); };

    // [DEP100-FIX2 2026-05-09] filteredTransfers TEM que estar AQUI (antes do early return)
    // pra não violar Rules of Hooks. Causa do React error #300 que persistiu até v145.
    const filteredTransfers = useMemo(()=>{
      let out = transfers;
      // [v224.88] aplica filtro showAuto ANTES dos outros · barato e cedo
      if(!showAuto) out = out.filter(t=>!isAutoTransfer(t));
      if(filterStatus !== 'TODOS') out = out.filter(t=>t.status===filterStatus);
      const q = filterProductSearch.trim().toLowerCase();
      if(q){
        out = out.filter(t=>{
          const p = productsById[t.product_id];
          if(!p) return false;
          const blob = ((p.brand||'')+' '+(p.name||'')+' '+(p.code||'')+' '+(t.transfer_number||'')).toLowerCase();
          return blob.includes(q);
        });
      }
      return out;
    },[transfers, filterStatus, filterProductSearch, products, showAuto]);

    // [DEP100-UX3] Early return: se movimentações ativas, renderiza página inteira (TEM PRECEDÊNCIA sobre inventário)
    // ⚠️ TODOS os hooks DEVEM estar declarados ACIMA desta linha (regra_early_return_e_hooks)
    if(showMovimentacoesPid){
      return (
        <MovimentacoesProdutoPage
          product_id={showMovimentacoesPid}
          products={products}
          onClose={()=>setShowMovimentacoesPid(null)}
        />
      );
    }
    // Se inventário ativo, renderiza página inteira no lugar
    if(inventarioWh){
      return (
        <React.Fragment>
          <DepositoInventarioPage
            warehouse={inventarioWh}
            warehouses={warehouses}
            products={products}
            isAdmin={isAdmin}
            onClose={()=>setShowInventarioWh(null)}
            onAjustar={(prodId)=>{ setShowAjuste({warehouse_id: inventarioWh.id, product_id: prodId}); }}
            onMovimentacoes={(prodId)=>{ setShowMovimentacoesPid(prodId); }}
          />
          {showAjuste && (
            <AjusteEstoqueModal
              warehouse_id={showAjuste.warehouse_id}
              product_id={showAjuste.product_id}
              warehouses={warehouses}
              products={products}
              onClose={()=>setShowAjuste(null)}
              onDone={()=>{ setShowAjuste(null); refresh(); }}
            />
          )}
        </React.Fragment>
      );
    }

    // ─── Helpers ───
    const wname = (id)=>warehousesById[id]?.name||'?';
    const pname = (id)=>{
      const p = productsById[id];
      return p ? `${p.brand||''} ${p.name||''}`.trim() : '?';
    };

    const STATUS_COLORS = {
      PENDENTE_APROVACAO: {bg:'#FEF3C7', fg:'#92400E', label:'⏳ Aguarda aprovação'},
      APROVADA: {bg:'#DBEAFE', fg:'#1E40AF', label:'✓ Aprovada — aguarda envio'},
      EM_TRANSITO: {bg:'#E0E7FF', fg:'#3730A3', label:'🚚 Em trânsito'},
      RECEBIDA: {bg:'#DCFCE7', fg:'#166534', label:'✅ Recebida'},
      DIVERGENCIA: {bg:'#FEE2E2', fg:'#991B1B', label:'⚠️ Divergência — admin resolve'},
      CANCELADA: {bg:'#F3F4F6', fg:'#6B7280', label:'✕ Cancelada'}
    };

    return (
      <div style={{padding:'8px 0'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}>
          <h2 style={{fontSize:18,fontWeight:700,color:'#1B2A4A',margin:0}}>
            📦 Depósitos & Transferências
          </h2>
          {isAdmin && (
            <button onClick={()=>setShowAdminWarehouses(true)}
              style={{background:'#1B2A4A',color:'#fff',border:'none',padding:'8px 14px',borderRadius:6,fontSize:12,fontWeight:600,cursor:'pointer'}}>
              ⚙️ Gerenciar Depósitos
            </button>
          )}
        </div>

        {/* CARDS DOS DEPÓSITOS — clicáveis abrem inventário (DEP100-O1-A) */}
        <div style={{display:'grid',gridTemplateColumns:`repeat(auto-fit,minmax(280px,1fr))`,gap:12,marginBottom:18}}>
          {warehouses.map(w=>{
            const s = warehouseStats[w.id] || {total:0, sku:0, valor:0, abaixoMin:0};
            return (
              <div key={w.id}
                onClick={()=>setShowInventarioWh(w.id)}
                style={{
                  background:'#fff', border:'1px solid #E5E7EB', borderRadius:10,
                  padding:16, boxShadow:'0 1px 3px rgba(0,0,0,.04)',
                  cursor:'pointer', transition:'all .15s'
                }}
                onMouseEnter={e=>{e.currentTarget.style.boxShadow='0 4px 10px rgba(184,152,64,.15)'; e.currentTarget.style.borderColor='#B89840';}}
                onMouseLeave={e=>{e.currentTarget.style.boxShadow='0 1px 3px rgba(0,0,0,.04)'; e.currentTarget.style.borderColor='#E5E7EB';}}
              >
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:10}}>
                  <div>
                    <div style={{fontSize:16,fontWeight:700,color:'#1B2A4A'}}>
                      {w.name}{w.is_principal && <span style={{marginLeft:8,fontSize:10,background:'#B89840',color:'#fff',padding:'2px 8px',borderRadius:4,fontWeight:600}}>PRINCIPAL</span>}
                    </div>
                    <div style={{fontSize:11,color:'#6B7280',marginTop:2}}>{w.code}</div>
                  </div>
                  <div style={{fontSize:10,color:'#B89840',fontWeight:600}}>VER PLANILHA →</div>
                </div>
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,paddingTop:10,borderTop:'1px solid #F3F4F6'}}>
                  <div>
                    <div style={{fontSize:11,color:'#6B7280'}}>Total unidades</div>
                    <div style={{fontSize:20,fontWeight:700,color:'#1B2A4A'}}>{s.total.toLocaleString('pt-BR')}</div>
                  </div>
                  <div>
                    <div style={{fontSize:11,color:'#6B7280'}}>SKUs c/ estoque</div>
                    <div style={{fontSize:20,fontWeight:700,color:'#1B2A4A'}}>{s.sku.toLocaleString('pt-BR')}</div>
                  </div>
                  {/* [v224.27.2 ESTOQUISTA-PRIVACY] esconde Valor estoque pra estoquista (valor derivado de cost · financeiro) */}
                  {(typeof window !== 'undefined' && window.canSeeCost && window.canSeeCost(user)) && (
                    <div>
                      <div style={{fontSize:11,color:'#6B7280'}}>Valor estoque</div>
                      <div style={{fontSize:14,fontWeight:700,color:'#15803D'}}>R$ {s.valor.toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2})}</div>
                    </div>
                  )}
                  <div>
                    <div style={{fontSize:11,color:'#6B7280'}}>Abaixo do mínimo</div>
                    <div style={{fontSize:14,fontWeight:700,color:s.abaixoMin>0?'#B91C1C':'#6B7280'}}>{s.abaixoMin}{s.abaixoMin>0?' ⚠️':''}</div>
                  </div>
                </div>
                {isAdmin && (
                  <div style={{marginTop:10,paddingTop:8,borderTop:'1px solid #F3F4F6'}}>
                    <button onClick={e=>{e.stopPropagation(); setShowAjuste({warehouse_id:w.id});}}
                      style={{background:'#F3F4F6',color:'#374151',border:'1px solid #D1D5DB',padding:'4px 10px',borderRadius:4,fontSize:10,fontWeight:600,cursor:'pointer'}}>
                      ⚙️ Ajustar inventário
                    </button>
                  </div>
                )}
              </div>
            );
          })}
        </div>

        {/* AÇÕES */}
        <div style={{display:'flex',gap:8,marginBottom:14,flexWrap:'wrap',alignItems:'center'}}>
          <button onClick={()=>setShowNewTransfer(true)}
            style={{background:'#B89840',color:'#fff',border:'none',padding:'9px 18px',borderRadius:6,fontWeight:700,cursor:'pointer',fontSize:13}}>
            + Nova Transferência
          </button>
          <select value={filterStatus} onChange={e=>setFilterStatus(e.target.value)}
            style={{padding:'8px 12px',border:'1px solid #D1D5DB',borderRadius:6,fontSize:13}}>
            <option value="TODOS">Todos status</option>
            <option value="PENDENTE_APROVACAO">⏳ Aguarda aprovação</option>
            <option value="APROVADA">✓ Aprovada</option>
            <option value="EM_TRANSITO">🚚 Em trânsito</option>
            <option value="DIVERGENCIA">⚠️ Divergência</option>
            <option value="RECEBIDA">✅ Recebida</option>
            <option value="CANCELADA">✕ Cancelada</option>
          </select>
          {/* [DEP100-O3-H] filtro por produto/número */}
          <input type="text" value={filterProductSearch} onChange={e=>setFilterProductSearch(e.target.value)}
            placeholder="🔍 Filtrar por produto ou nº transferência..."
            style={{padding:'8px 12px',border:'1px solid #D1D5DB',borderRadius:6,fontSize:13,minWidth:240}}/>
          <button onClick={refresh} style={{padding:'8px 14px',border:'1px solid #D1D5DB',borderRadius:6,fontSize:13,background:'#fff',cursor:'pointer'}}>
            🔄 Atualizar
          </button>
          {/* [v224.88] toggle filtro auto-transfers · default ON */}
          <label title="Transferências criadas automaticamente quando venda desviou Alfonso→Senador. Pode editar qty antes de aprovar." style={{display:'flex',alignItems:'center',gap:6,fontSize:12,color:'#6B7280',cursor:'pointer',userSelect:'none'}}>
            <input type="checkbox" checked={showAuto} onChange={e=>setShowAuto(e.target.checked)} />
            🤖 Auto-sugeridas
          </label>
          <span style={{color:'#6B7280',fontSize:12,marginLeft:'auto'}}>{filteredTransfers.length} transferência{filteredTransfers.length===1?'':'s'}</span>
        </div>

        {/* TABELA TRANSFERÊNCIAS */}
        {loading ? (
          <div style={{padding:30,textAlign:'center',color:'#6B7280'}}>Carregando…</div>
        ) : filteredTransfers.length===0 ? (
          <div style={{padding:30,textAlign:'center',color:'#6B7280',background:'#FAFAF7',borderRadius:8}}>
            Nenhuma transferência {filterStatus==='TODOS'?'cadastrada':'neste status'}.
          </div>
        ) : (
          <div style={{background:'#fff',border:'1px solid #E5E7EB',borderRadius:8,overflow:'hidden'}}>
            <table style={{width:'100%',borderCollapse:'collapse',fontSize:12}}>
              <thead style={{background:'#FAFAF7'}}>
                <tr style={{textAlign:'left'}}>
                  <th style={{padding:'10px 12px',fontWeight:600,color:'#6B7280'}}>Nº</th>
                  <th style={{padding:'10px 12px',fontWeight:600,color:'#6B7280'}}>Origem → Destino</th>
                  <th style={{padding:'10px 12px',fontWeight:600,color:'#6B7280'}}>Produto</th>
                  <th style={{padding:'10px 12px',fontWeight:600,color:'#6B7280',textAlign:'right'}}>Qty</th>
                  <th style={{padding:'10px 12px',fontWeight:600,color:'#6B7280'}}>Status</th>
                  <th style={{padding:'10px 12px',fontWeight:600,color:'#6B7280'}}>Solicitada</th>
                  <th style={{padding:'10px 12px',fontWeight:600,color:'#6B7280'}}></th>
                </tr>
              </thead>
              <tbody>
                {filteredTransfers.map(t=>{
                  const sc = STATUS_COLORS[t.status] || {bg:'#F3F4F6',fg:'#6B7280',label:t.status};
                  const dt = t.requested_at ? new Date(t.requested_at).toLocaleString('pt-BR',{dateStyle:'short',timeStyle:'short'}) : '';
                  return (
                    <tr key={t.id} style={{borderTop:'1px solid #F3F4F6'}}>
                      <td style={{padding:'10px 12px',fontFamily:'monospace',fontWeight:600}}>
                        {t.transfer_number}
                        {isAutoTransfer(t) && <span title="Criada automaticamente: venda desviou Alfonso→Senador (Alfonso=0). Edite qty se preciso antes de aprovar." style={{marginLeft:6,padding:'2px 6px',background:'#FEF9E7',color:'#B89840',borderRadius:4,fontSize:9,fontWeight:700,verticalAlign:'middle'}}>🤖 AUTO</span>}
                      </td>
                      <td style={{padding:'10px 12px'}}>
                        <span style={{color:'#374151'}}>{wname(t.from_warehouse_id)}</span>
                        <span style={{color:'#9CA3AF',margin:'0 6px'}}>→</span>
                        <span style={{color:'#374151'}}>{wname(t.to_warehouse_id)}</span>
                      </td>
                      <td style={{padding:'10px 12px',color:'#374151',maxWidth:240,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{pname(t.product_id)}</td>
                      <td style={{padding:'10px 12px',textAlign:'right',fontWeight:600}}>
                        {t.quantity_received ?? t.quantity_sent ?? t.quantity_requested}
                        {t.quantity_received != null && t.quantity_sent != null && t.quantity_received < t.quantity_sent && (
                          <span style={{color:'#B91C1C',marginLeft:4,fontSize:10}}>(-{t.quantity_sent - t.quantity_received})</span>
                        )}
                      </td>
                      <td style={{padding:'10px 12px'}}>
                        <span style={{background:sc.bg,color:sc.fg,padding:'3px 8px',borderRadius:4,fontSize:11,fontWeight:600,whiteSpace:'nowrap'}}>{sc.label}</span>
                      </td>
                      <td style={{padding:'10px 12px',color:'#6B7280',fontSize:11}}>{dt}</td>
                      <td style={{padding:'10px 12px'}}>
                        <button onClick={()=>setViewTransferId(t.id)} style={{background:'transparent',border:'1px solid #D1D5DB',padding:'5px 10px',borderRadius:4,cursor:'pointer',fontSize:11,color:'#1B2A4A',fontWeight:600}}>
                          Detalhes
                        </button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}

        {showNewTransfer && (
          <NewTransferModal
            user={user}
            warehouses={warehouses}
            products={products}
            onClose={()=>setShowNewTransfer(false)}
            onCreated={()=>{setShowNewTransfer(false); refresh();}}
          />
        )}

        {viewTransfer && (
          <TransferDetailModal
            user={user}
            transfer={viewTransfer}
            warehouses={warehouses}
            allUsers={allUsers}
            products={products}
            onClose={()=>setViewTransferId(null)}
            onAction={()=>{setViewTransferId(null); refresh();}}
          />
        )}

        {/* [DEP100-UX3] Inventário virou página inteira via early-return no topo do componente */}

        {/* [DEP100-O2-G] Modal ajuste manual */}
        {showAjuste && (
          <AjusteEstoqueModal
            warehouse_id={showAjuste.warehouse_id}
            product_id={showAjuste.product_id}
            warehouses={warehouses}
            products={products}
            onClose={()=>setShowAjuste(null)}
            onDone={()=>{ setShowAjuste(null); refresh(); }}
          />
        )}

        {/* [DEP100-O3-M] Modal admin CRUD warehouses */}
        {showAdminWarehouses && (
          <WarehousesAdminModal
            warehouses={warehouses}
            onClose={()=>setShowAdminWarehouses(false)}
            onDone={()=>refresh()}
          />
        )}
      </div>
    );
  }

  // Expor pra App.jsx
  window.Depositos = Depositos;
})();