// js/components/widgets/vendas/SalesListPanel.jsx
// [Wave 26 v224.7 NUCLEAR] Sub-tabs ativas/canceladas + tabela principal + empty states
// Extraído de Vendas.jsx L528-680 (literal · zero mudança lógica)
//
// Deps runtime globals: fmt, fmtDate, Icon, StatusBadge, saleFinalTotal, saleProfit, nid, genIdUUID, toast, sb
(function(){
  'use strict';

  // [v224.73 + v224.55] vars MOVED to component body
  function SalesListPanel(props){
    const calcs = window.ZNX && window.ZNX.vendas && window.ZNX.vendas.calcs;
    const isTerminalSaleStatus = (calcs && calcs.isTerminalSaleStatus) || function(){return false;};
    const fmt = window.fmt || function(v){return 'R$ '+Number(v||0).toFixed(2);};
    const fmtDate = window.fmtDate || function(d){return String(d);};
    const Icon = window.Icon || function(){return null;};
    const StatusBadge = window.StatusBadge || function(p){return <span>{p.status}</span>;};
    const saleFinalTotal = window.saleFinalTotal || function(s){return Number(s.total||0);};
    const saleProfit = window.saleProfit || function(){return 0;};
    const genIdUUID = window.genIdUUID || function(){return 'tmp-'+Date.now();};
    const toast = window.toast || console.log;
    const sb = window.sb;

    const {
      user, scopedSales, sorted, sort, toggleSort, salesFilterTab, setSalesFilterTab,
      clients, products, isAdmin, isReadOnly, filter, setFilter,
      openView, openEdit, setConfirmDeleteSale,
      setSelected360, setMainTab,
      cancelRequests, setCancelRequests
    } = props;

    return (
      <>
        {/* Sub-tabs Ativas/Canceladas (L528-537) */}
        <div style={{display:'flex',gap:0,marginBottom:16,borderBottom:'2px solid #E5E7EB'}}>
          <button onClick={function(){setSalesFilterTab('ativas');}}
            style={{padding:'8px 20px',fontSize:14,fontWeight:600,border:'none',background:'none',cursor:'pointer',borderBottom:salesFilterTab==='ativas'?'2px solid #1B2A4A':'2px solid transparent',color:salesFilterTab==='ativas'?'#1B2A4A':'#6B7280',marginBottom:'-2px'}}>
            Vendas Ativas ({scopedSales.filter(function(s){return s.status!=='Cancelada';}).length})
          </button>
          <button onClick={function(){setSalesFilterTab('canceladas');}}
            style={{padding:'8px 20px',fontSize:14,fontWeight:600,border:'none',background:'none',cursor:'pointer',borderBottom:salesFilterTab==='canceladas'?'2px solid #DC2626':'2px solid transparent',color:salesFilterTab==='canceladas'?'#DC2626':'#6B7280',marginBottom:'-2px'}}>
            Canceladas ({scopedSales.filter(function(s){return s.status==='Cancelada';}).length})
          </button>
        </div>

        {/* Tabela principal (L539-680) */}
        <div className="card" style={{padding:0}}>
          <table>
            <thead><tr>
              {[['number','Nº'],['date','Data'],['client','Cliente'],['seller','Vendedor'],['total','Total']].map(function(col){
                const c=col[0], label=col[1];
                return (
                  <th key={c} onClick={function(){toggleSort(c);}} style={{cursor:'pointer',userSelect:'none',whiteSpace:'nowrap'}}>
                    {label} {sort.col===c?(sort.dir==='asc'?'↑':'↓'):<span style={{color:'#D1D5DB',fontSize:9}}>↕</span>}
                  </th>
                );
              })}
              {isAdmin && <th onClick={function(){toggleSort('profit');}} style={{cursor:'pointer',userSelect:'none',whiteSpace:'nowrap'}}>Lucro {sort.col==='profit'?(sort.dir==='asc'?'↑':'↓'):<span style={{color:'#D1D5DB',fontSize:9}}>↕</span>}</th>}
              <th onClick={function(){toggleSort('pgto');}} style={{cursor:'pointer',userSelect:'none',whiteSpace:'nowrap'}}>
                Pgto {sort.col==='pgto'?(sort.dir==='asc'?'↑':'↓'):<span style={{color:'#D1D5DB',fontSize:9}}>↕</span>}
              </th>
              <th>Ações</th>
            </tr></thead>
            <tbody>
              {sorted.map(function(s){
                const c = clients.find(function(x){return x.id===s.clientId;});
                const total = saleFinalTotal(s);
                const luc = saleProfit(s.items||[], products);
                return (
                  <tr key={s.id}>
                    <td className="gold">{s.number}{s.fromQuote && <span style={{fontSize:10,color:'#6B7280',marginLeft:4}}>ref. {s.fromQuote}</span>}</td>
                    <td>
                      <div>{fmtDate(s.date)}</div>
                      <div style={{fontSize:11,color:'#9CA3AF',marginTop:1}}>{new Date(s.createdAt||s.id).toLocaleTimeString('pt-BR',{hour:'2-digit',minute:'2-digit'})}</div>
                    </td>
                    <td>{(c && c.name) || s.clientName || s.client || '—'}</td>
                    <td className="dim" style={{fontSize:12}}>{s.sellerName || '—'}</td>
                    <td>
                      {/* [FEAT credit-preview 20260504-v19] subtotal riscado + liquido */}
                      {(function(){
                        const credApplied = Number(s.creditApplied || s.credit_applied || 0);
                        if(credApplied > 0){
                          const sub = total + credApplied;
                          return (
                            <div>
                              <div style={{textDecoration:'line-through',color:'#9CA3AF',fontSize:11,fontWeight:500}}>{fmt(sub)}</div>
                              <div style={{color:'#B89840',fontWeight:700}}>{fmt(total)}</div>
                              <div style={{fontSize:10,color:'#10B981',fontWeight:600}}>−{fmt(credApplied)} crédito</div>
                            </div>
                          );
                        }
                        return fmt(total);
                      })()}
                    </td>
                    {isAdmin && <td style={{color:luc>=0?'#16A34A':'#DC2626'}}>{fmt(luc)}</td>}
                    <td>
                      <StatusBadge status={s.paymentStatus}/>
                      {s.paymentMethod && <div style={{fontSize:10,color:'#6B7280',marginTop:2}}>{s.paymentMethod==='Pix'?'🔵 Pix':s.paymentMethod==='Misto'?'🔀 Misto':'💵 Dinheiro'}</div>}
                    </td>
                    <td>
                      <div style={{display:'flex',gap:4,alignItems:'center'}}>
                        <button className="btn-outline btn-sm" title="Venda 360º" onClick={function(){setSelected360(s.id); setMainTab('360');}} style={{borderColor:'#C8A951',color:'#92700A'}}>🎯</button>
                        <button className="btn-outline btn-sm" title="Visualizar venda" onClick={function(){openView(s);}}><Icon n="eye" size={12}/></button>
                        {(isAdmin||user.role==='financeiro') && salesFilterTab!=='canceladas' && !isTerminalSaleStatus(s.status) && (
                          <button className="btn-outline btn-sm" title="Editar venda" onClick={function(){openEdit(s);}}><Icon n="edit" size={12}/></button>
                        )}
                        {salesFilterTab!=='canceladas' && isAdmin && !isTerminalSaleStatus(s.status) && (
                          <button className="btn-danger btn-sm" title="Apagar venda" onClick={function(){
                            const cli = clients.find(function(x){return x.id===s.clientId;});
                            setConfirmDeleteSale({id:s.id, number:s.number, clientName:(cli && cli.name) || s.client || ''});
                          }}><Icon n="trash" size={12}/></button>
                        )}
                        {salesFilterTab!=='canceladas' && user.role==='vendedor' && s.status!=='Cancelada' && (function(){
                          const req = (cancelRequests||[]).find(function(r){return r.saleId===s.id && r.status==='pending';});
                          if(req) return <span style={{fontSize:11,color:'#EA580C',fontWeight:600}}>⏳ Aguardando</span>;
                          return (
                            <button className="btn-danger btn-sm" onClick={async function(){
                              const reason = window.prompt('Motivo do cancelamento (opcional):');
                              if(reason===null) return;
                              const client = clients.find(function(c){return c.id===s.clientId;});
                              const reqId = genIdUUID();
                              try {
                                const res = await sb.rpc('create_cancel_request_v2', {payload:{
                                  id: reqId, sale_id: s.id,
                                  seller_name: user.name, reason: reason||''
                                }});
                                if(res.error){toast('❌ Erro ao enviar solicitação: '+res.error.message); return;}
                              } catch(e){toast('❌ '+((e && e.message)||'Erro inesperado')); return;}
                              setCancelRequests(function(prev){return prev.concat([{
                                id:reqId, status:'pending', saleId:s.id, sale:s,
                                requestedBy:user.name, requestedAt:new Date().toISOString(),
                                clientName:(client && client.name) || '—',
                                saleTotal: saleFinalTotal(s),
                                items:s.items, reason:reason||''
                              }]);});
                              toast('✅ Solicitação enviada. Aguardando aprovação do admin.');
                            }}>✕ Cancelar</button>
                          );
                        })()}
                      </div>
                    </td>
                  </tr>
                );
              })}
              {/* Empty state */}
              {sorted.length===0 && (function(){
                const hasFilters = !!(filter.search||filter.dateFrom||filter.dateTo);
                const isCanceladas = salesFilterTab==='canceladas';
                return (
                  <tr><td colSpan={isAdmin?9:8} style={{textAlign:'center',padding:50}}>
                    {hasFilters ? (
                      <>
                        <div style={{fontSize:38,marginBottom:10}}>🔍</div>
                        <div style={{fontSize:15,fontWeight:600,color:'#374151',marginBottom:6}}>Nenhuma venda bate com os filtros</div>
                        <div style={{fontSize:12,color:'#6B7280',marginBottom:14}}>
                          {filter.search && <>Busca: <strong>"{filter.search}"</strong></>}
                          {filter.search && (filter.dateFrom||filter.dateTo) && ' · '}
                          {(filter.dateFrom||filter.dateTo) && <>Período: <strong>{filter.dateFrom||'início'} → {filter.dateTo||'hoje'}</strong></>}
                        </div>
                        <button onClick={function(){setFilter(function(f){return Object.assign({},f,{search:'',dateFrom:'',dateTo:''});});}}
                          style={{padding:'9px 22px',background:'#1B2A4A',color:'#fff',border:'none',borderRadius:6,fontSize:12,fontWeight:600,cursor:'pointer'}}>
                          ↻ Limpar todos os filtros
                        </button>
                      </>
                    ) : isCanceladas ? (
                      <>
                        <div style={{fontSize:38,marginBottom:10}}>✨</div>
                        <div style={{fontSize:15,fontWeight:600,color:'#15803D',marginBottom:6}}>Nenhuma venda cancelada — perfeito!</div>
                        <div style={{fontSize:12,color:'#6B7280'}}>Histórico limpo. Cancelamentos aparecem aqui caso ocorram.</div>
                      </>
                    ) : (
                      <>
                        <div style={{fontSize:38,marginBottom:10}}>💰</div>
                        <div style={{fontSize:15,fontWeight:600,color:'#374151',marginBottom:6}}>Nenhuma venda registrada ainda</div>
                        <div style={{fontSize:12,color:'#6B7280'}}>Comece criando a primeira venda.</div>
                      </>
                    )}
                  </td></tr>
                );
              })()}
            </tbody>
          </table>
        </div>
      </>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.vendas = window.ZNX.widgets.vendas || {};
  window.ZNX.widgets.vendas.SalesListPanel = SalesListPanel;
  window.SalesListPanel_v224_7_wave26 = true;
})();