// js/components/widgets/clientes/ClientModal.jsx
// [Wave 17 v223.43 20260521] Ficha rápida cliente — extraído de Clientes.jsx L363-445
// Props: client, sales, quotes, receivables, products, creditPanelProps, fmtEditadoPor, onClose
// Deps runtime: window.Modal, window.StatusBadge, window.fmt, window.fmtDate, window.isFaturada,
//               window.saleFinalTotal, window.nid, window.ZNX.widgets.clientes.CreditPanel
(function(){
  'use strict';

  function ClientModal(props){
    const client = props.client;
    const sales = props.sales || [];
    const quotes = props.quotes || [];
    const receivables = props.receivables || [];
    const products = props.products || [];
    const creditPanelProps = props.creditPanelProps || {};
    const fmtEditadoPor = props.fmtEditadoPor;
    const onClose = props.onClose || function(){};

    // Fail-loud guards
    const Modal = window.Modal;
    const StatusBadge = window.StatusBadge;
    const CreditPanel = window.ZNX && window.ZNX.widgets && window.ZNX.widgets.clientes && window.ZNX.widgets.clientes.CreditPanel;
    if (!Modal || !StatusBadge) {
      if (window.Sentry && typeof window.Sentry.captureMessage === 'function') {
        try { window.Sentry.captureMessage('[Wave 17 v223.43] ClientModal missing deps: Modal='+(!!Modal)+' StatusBadge='+(!!StatusBadge), 'error'); } catch(e){}
      }
      console.error('[ClientModal] Deps faltando: Modal=', !!Modal, 'StatusBadge=', !!StatusBadge);
      return null;
    }
    if (!client) return null;

    const fmt = (typeof window.fmt === 'function') ? window.fmt : function(v){ return 'R$ '+Number(v||0).toFixed(2); };
    const fmtDate = (typeof window.fmtDate === 'function') ? window.fmtDate : function(d){ return String(d||''); };
    const isFaturada = (typeof window.isFaturada === 'function') ? window.isFaturada : function(s){ return s && s.status === 'Faturada'; };
    const saleFinalTotal = (typeof window.saleFinalTotal === 'function') ? window.saleFinalTotal : function(s){ return Number(s && s.total || 0); };
    const nid = (typeof window.nid === 'function') ? window.nid : function(a,b){ return String(a) === String(b); };
    // [v224.123 NUCLEAR] estado de bloqueio (snake_case via store blob) + ação admin
    const isAdminCM = props.isAdmin || (props.creditPanelProps && props.creditPanelProps.isAdmin);
    const onToggleBlock = props.onToggleBlock;
    const isBlockedCM = (typeof window.znxIsClientBlocked === 'function') ? window.znxIsClientBlocked(client) : (client.blocked_at != null);
    const blockedReasonCM = (typeof window.znxClientBlockedReason === 'function') ? window.znxClientBlockedReason(client) : '';

    const cSales = sales.filter(function(s){ return s.clientId === client.id && isFaturada(s); });
    const totalSpent = cSales.reduce(function(s,v){ return s + saleFinalTotal(v); }, 0);
    const saldoAberto = (receivables||[]).filter(function(r){ return r.clientId === client.id && r.status === 'Pendente'; }).reduce(function(s,r){ return s + r.value; }, 0);
    const overLimit = client.creditLimit > 0 && saldoAberto > client.creditLimit;
    const sorted = cSales.slice().sort(function(a,b){ return String(b.date||'').localeCompare(String(a.date||'')); });
    const lastSale = sorted[0];
    const openQuotes = quotes.filter(function(q){ return q.clientId === client.id && (q.status === 'Rascunho' || q.status === 'Aguardando'); });
    // Produto mais comprado
    const prodMap = {};
    cSales.forEach(function(s){
      (s.items || []).forEach(function(it){
        if (it.productId && it.productId !== 0) {
          const p = products.find(function(p){ return nid(p.id, it.productId); });
          const n = (p && p.name) || ('#'+it.productId);
          prodMap[n] = (prodMap[n] || 0) + (it.qty || 1);
        }
      });
    });
    const topProd = Object.entries(prodMap).sort(function(a,b){ return b[1]-a[1]; })[0];
    const creditBalance = Number(client.creditBalance || client.credit_balance || 0);

    return (
      <Modal title={'Ficha — '+client.name} onClose={onClose} large>
        {(client.updated_by || client.updated_at) && fmtEditadoPor && (
          <div style={{fontSize:11,color:'#6B7280',marginBottom:12,padding:'6px 10px',background:'#F3F4F6',borderRadius:6,display:'flex',alignItems:'center',gap:6}}>
            <span style={{fontSize:13}}>✏️</span>
            <span>Última edição: <strong style={{color:'#374151'}}>{fmtEditadoPor(client.updated_by, client.updated_at)}</strong></span>
          </div>
        )}
        {/* [v224.123 NUCLEAR] Banner bloqueio + ação admin */}
        {isBlockedCM && (
          <div style={{background:'#FEF2F2',border:'1px solid #FCA5A5',borderRadius:10,padding:'12px 14px',marginBottom:12,display:'flex',alignItems:'center',justifyContent:'space-between',gap:12,flexWrap:'wrap'}}>
            <div>
              <div style={{fontSize:13,fontWeight:800,color:'#B91C1C'}}>🚫 CLIENTE BLOQUEADO</div>
              {blockedReasonCM && <div style={{fontSize:12,color:'#7F1D1D',marginTop:3}}>Motivo: {blockedReasonCM}</div>}
            </div>
            {isAdminCM && onToggleBlock && (
              <button className="btn-gold" style={{whiteSpace:'nowrap'}} onClick={onToggleBlock}>✅ Desbloquear</button>
            )}
          </div>
        )}
        {!isBlockedCM && isAdminCM && onToggleBlock && (
          <div style={{display:'flex',justifyContent:'flex-end',marginBottom:12}}>
            <button className="btn-outline" style={{borderColor:'#DC2626',color:'#DC2626',whiteSpace:'nowrap'}} onClick={onToggleBlock}>🚫 Bloquear cliente</button>
          </div>
        )}
        {CreditPanel && (
          <CreditPanel
            client={client}
            creditBalance={creditBalance}
            canEditCredit={creditPanelProps.canEditCredit}
            creditHistory={creditPanelProps.creditHistory}
            onAddCredit={creditPanelProps.onAddCredit}
            onRemoveCredit={creditPanelProps.onRemoveCredit}
            isAdmin={creditPanelProps.isAdmin}
            onRefundCredit={creditPanelProps.onRefundCredit}
          />
        )}
        {/* Info pessoal */}
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10,fontSize:13,marginBottom:16,background:'#F8FAFB',borderRadius:8,padding:14}}>
          <div><span className="dim">Tipo: </span><span className={'badge '+(client.type==='PJ'?'badge-blue':'badge-gray')}>{client.type}</span></div>
          <div><span className="dim">Doc: </span>{client.document||'—'}</div>
          <div><span className="dim">Segmento: </span><span style={{color:'#2563EB'}}>{client.segment||'—'}</span></div>
          <div><span className="dim">Tel: </span>{client.phone||client.whatsapp||'—'}{!client.phone&&client.whatsapp&&<span title="WhatsApp" style={{marginLeft:4,fontSize:10,color:'#16A34A'}}>(WA)</span>}</div>
          {client.whatsapp&&client.phone&&client.whatsapp!==client.phone&&<div><span className="dim">WhatsApp: </span>{client.whatsapp}</div>}
          <div><span className="dim">WhatsApp: </span>{client.whatsapp||'—'}</div>
          <div><span className="dim">Email: </span>{client.email||'—'}</div>
          {client.birthDate&&<div><span className="dim">Nascimento: </span>{new Date(client.birthDate+'T12:00:00').toLocaleDateString('pt-BR')}</div>}
          <div><span className="dim">Canal: </span>{client.channel||'—'}</div>
          <div><span className="dim">Canal Pref.: </span>{client.canalPref||'—'}</div>
          <div><span className="dim">Prazo Pgto: </span>{client.paymentTerm||'—'}</div>
          {client.creditLimit>0&&<div style={{gridColumn:'1/-1',background:overLimit?'#FEE2E2':'#F9FAFB',borderRadius:6,padding:'8px 12px',border:overLimit?'1px solid #DC262655':'none'}}>
            <span className="dim">Limite de Crédito: </span><span style={{color:'#2563EB',fontWeight:700}}>{fmt(client.creditLimit)}</span>
            <span style={{marginLeft:16}} className="dim">Saldo em aberto: </span><span style={{color:overLimit?'#DC2626':'#16A34A',fontWeight:700}}>{fmt(saldoAberto)}</span>
            {overLimit&&<span style={{marginLeft:12,color:'#DC2626',fontWeight:700,fontSize:11}}>⚠ LIMITE EXCEDIDO em {fmt(saldoAberto-client.creditLimit)}</span>}
          </div>}
          <div><span className="dim">CEP: </span>{client.cep||'—'}</div>
          <div><span className="dim">Bairro: </span>{client.neighborhood||'—'}</div>
          <div style={{gridColumn:'1/-1'}}><span className="dim">📍 Localização: </span>
            <strong style={{color:'#2563EB'}}>{[client.city,client.state].filter(Boolean).join(' — ')||'—'}</strong>
          </div>
          {client.address&&<div style={{gridColumn:'1/-1'}}><span className="dim">Endereço: </span>{client.address}</div>}
          {client.notes&&<div style={{gridColumn:'1/-1'}}><span className="dim">Obs: </span><em style={{color:'#9CA3AF'}}>{client.notes}</em></div>}
        </div>
        {/* KPIs */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12,marginBottom:16}}>
          <div className="stat-card" style={{padding:12}}><div className="stat-label">Total Gasto</div><div className="stat-value" style={{fontSize:17}}>{fmt(totalSpent)}</div></div>
          <div className="stat-card" style={{padding:12}}><div className="stat-label">Compras</div><div className="stat-value" style={{fontSize:17}}>{cSales.length}</div></div>
          <div className="stat-card" style={{padding:12}}><div className="stat-label">Ticket Médio</div><div className="stat-value" style={{fontSize:17}}>{cSales.length?fmt(totalSpent/cSales.length):'—'}</div></div>
          <div className="stat-card" style={{padding:12}}><div className="stat-label">Última Compra</div><div className="stat-value" style={{fontSize:13}}>{(lastSale&&fmtDate(lastSale.date))||'—'}</div></div>
        </div>
        {topProd&&<div style={{marginBottom:12,padding:'8px 14px',background:'#FFFBEB',border:'1px solid #2563EB33',borderRadius:8,fontSize:13}}>🥇 Produto preferido: <strong style={{color:'#2563EB'}}>{topProd[0]}</strong> <span className="dim">({topProd[1]} un.)</span></div>}
        {openQuotes.length>0&&<div className="alert-warn" style={{marginBottom:12}}>{openQuotes.length} orçamento(s) em aberto</div>}
        <div style={{fontSize:11,color:'#9CA3AF',marginBottom:8,textTransform:'uppercase',letterSpacing:1}}>Histórico de Compras</div>
        <div style={{maxHeight:260,overflowY:'auto'}}>
          <table>
            <thead><tr><th>Nº</th><th>Data</th><th>Total</th><th>Status</th></tr></thead>
            <tbody>
              {sorted.map(function(s){
                return (<tr key={s.id}><td className="gold">{s.number}</td><td>{fmtDate(s.date)}</td><td>{fmt(saleFinalTotal(s))}</td><td><StatusBadge status={s.status}/></td></tr>);
              })}
              {cSales.length===0&&<tr><td colSpan={4} style={{textAlign:'center',color:'#6B7280'}}>Nenhuma compra registrada</td></tr>}
            </tbody>
          </table>
        </div>
      </Modal>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.clientes = window.ZNX.widgets.clientes || {};
  window.ZNX.widgets.clientes.ClientModal = ClientModal;
  window.ClientModalClientes = ClientModal; // alias evita colisão
})();