// js/components/widgets/orcamento-pipeline/PipelineKanban.jsx
// [Wave 38 v224.19 NUCLEAR EXTRACT 2026-05-24] Kanban board 6 colunas + cards
// Extract LITERAL OrcamentoPipeline L154-255 · PRIVACY: !isVendedor → mostra sellerName por card
//
// Props:
//   - data (obj) — byCol map por status
//   - clients (array) — pra lookup nome cliente
//   - isVendedor (bool) — privacy: vendedora NÃO vê sellerName badge
//   - onSelect(quoteId) — abre Orçamento 360º
//   - hoveredCol (string|null) — col atual hovered (UI ephemeral)
//   - setHoveredCol (fn) — controla hover state
//
// Deps lazy: window.fmtMoney + ZNX.lib['orcamento-pipeline'].calcs.{PIPELINE_COLUMNS, getDiasAberto, getValidityStatus}
(function(){
  'use strict';
  function PipelineKanban(props){
    const fmtMoney = window.fmtMoney;
    const calcs = window.ZNX && window.ZNX.lib && window.ZNX.lib['orcamento-pipeline'] && window.ZNX.lib['orcamento-pipeline'].calcs;
    if(typeof fmtMoney !== 'function' || !calcs){
      console.error('[PipelineKanban] deps faltando: fmtMoney='+!!fmtMoney+', calcs='+!!calcs);
      return null;
    }
    const PIPELINE_COLUMNS = calcs.PIPELINE_COLUMNS;
    const getDiasAberto = calcs.getDiasAberto;
    const getValidityStatus = calcs.getValidityStatus;
    const { data, clients, isVendedor, onSelect, hoveredCol, setHoveredCol } = props;
    return (
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat('+PIPELINE_COLUMNS.length+', minmax(0, 1fr))',
        gap: 10,
        minHeight: 400,
      }}>
        {PIPELINE_COLUMNS.map(function(col){
          const cards = data.byCol[col.id] || [];
          const colTotal = cards.reduce(function(s, q){return s + (Number(q.total) || 0);}, 0);
          return (
            <div key={col.id}
              onMouseEnter={function(){setHoveredCol(col.id);}}
              onMouseLeave={function(){setHoveredCol(null);}}
              style={Object.assign({
                background: '#FAFBFC',
                border: '1.5px solid '+col.color+'33',
                borderRadius: 12,
                padding: 10,
                display: 'flex',
                flexDirection: 'column',
                gap: 8,
                minWidth: 0,
                transition: 'all .15s',
              }, hoveredCol === col.id ? { background: col.color + '08', borderColor: col.color + '66' } : {})}>
              {/* Column header */}
              <div style={{ borderBottom: '2px solid '+col.color+'33', paddingBottom: 8, marginBottom: 4 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                  <div style={{ fontSize: 12, fontWeight: 700, color: col.color, textTransform: 'uppercase', letterSpacing: 0.5 }}>
                    {col.emoji} {col.label}
                  </div>
                  <div style={{ fontSize: 11, fontWeight: 700, color: col.color, background: col.color + '18', padding: '2px 8px', borderRadius: 10 }}>
                    {cards.length}
                  </div>
                </div>
                <div style={{ fontSize: 11, color: '#6B7280', fontVariantNumeric: 'tabular-nums' }}>
                  {fmtMoney(colTotal)}
                </div>
              </div>

              {/* Cards */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, overflowY: 'auto', maxHeight: 580 }}>
                {cards.length === 0 ? (
                  <div style={{ padding: '20px 10px', textAlign: 'center', color: '#D1D5DB', fontSize: 11 }}>
                    Vazio
                  </div>
                ) : cards.map(function(q){
                  const clientFound = clients && clients.find(function(c){return c.id === q.clientId;});
                  const cliente = (clientFound && clientFound.name) || q.clientName || '—';
                  const dias = getDiasAberto(q);
                  const validity = getValidityStatus(q);
                  const isHot = q.status === 'Aprovado' || q.status === 'Aguardando_pagamento';
                  return (
                    <div key={q.id}
                      onClick={function(){onSelect && onSelect(q.id);}}
                      style={{
                        background: '#FFFFFF',
                        border: '1px solid '+(isHot ? col.color + '88' : '#E4E7EC'),
                        borderLeft: '3px solid '+col.color,
                        borderRadius: 8,
                        padding: '8px 10px',
                        cursor: 'pointer',
                        transition: 'all .15s',
                        boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
                      }}
                      onMouseEnter={function(e){ e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,0,0,0.08)'; }}
                      onMouseLeave={function(e){ e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 1px 2px rgba(0,0,0,0.04)'; }}
                    >
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
                        <div style={{ fontSize: 12, fontWeight: 700, color: col.color, fontVariantNumeric: 'tabular-nums' }}>
                          {q.number || '—'}
                        </div>
                        <div style={{ fontSize: 10, color: '#9CA3AF', fontVariantNumeric: 'tabular-nums' }}>
                          {dias === 0 ? 'hoje' : (dias + 'd')}
                        </div>
                      </div>
                      <div style={{ fontSize: 12, fontWeight: 500, color: '#1B2A4A', marginBottom: 3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                        {cliente}
                      </div>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <div style={{ fontSize: 12, fontWeight: 700, color: '#16A34A', fontVariantNumeric: 'tabular-nums' }}>
                          {fmtMoney(q.total || 0)}
                        </div>
                        {validity && (
                          <div style={{ fontSize: 10, fontWeight: 600, color: validity.color, padding: '1px 5px', background: validity.color + '18', borderRadius: 4 }}>
                            {validity.text}
                          </div>
                        )}
                      </div>
                      {!isVendedor && q.sellerName && (
                        <div style={{ fontSize: 10, color: '#9CA3AF', marginTop: 4, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                          👤 {q.sellerName}
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets['orcamento-pipeline'] = window.ZNX.widgets['orcamento-pipeline'] || {};
  window.ZNX.widgets['orcamento-pipeline'].PipelineKanban = PipelineKanban;
  // [Wave 38 marker v224.19] confirma PipelineKanban executado
  window.PipelineKanban_v224_19_wave38 = true;
})();