// js/components/pages/VendaTimeline.jsx
// Venda 360º — visão unificada de 1 venda: KPIs + avisos + ações + timeline.
// Criado em 2026-05-06 (sistema 4 onda V3).
// Modelo: ClienteTimeline.jsx (Cliente 360 onda 2).
//
// Props:
//   sale: venda selecionada (objeto JSONB do array sales)
//   client: cliente da venda (lookup feito pelo caller)
//   products: array global pra calcular profit/margin
//   receivables: pra mostrar status do recebível
//   user: user logado (pra controlar role)
//   onBack: () => void — volta pra Lista
//   onEdit: (sale) => void — abre modal editar (admin/financeiro)
//   onCancel: (sale) => void — abre modal cancelar (admin)
//   onPrintPdf: (sale) => void — gera fatura PDF
//
// Deps runtime: fmt, fmtDate, saleFinalTotal, saleProfit, itemNet, isFaturada, sb
(function() {
  'use strict';
  const {useState, useEffect, useMemo} = React;

  function VendaTimeline({sale, client, products, receivables, user, allUsers, onBack, onEdit, onCancel, onPrintPdf}) {
    if (!sale) {
      return (
        <div style={{padding:40,textAlign:'center',color:'#6B7280'}}>
          Nenhuma venda selecionada. Volte pra Lista e clique no 🎯 de uma venda.
        </div>
      );
    }

    // ===== AUDIT TIMELINE (async) =====
    const [auditEvents, setAuditEvents] = useState([]);
    const [devolucoes, setDevolucoes] = useState([]);

    useEffect(() => {
      if (!sale?.id) return;
      // Audit log da venda
      sb.from('audit_log').select('*').eq('row_id', String(sale.id)).order('changed_at', {ascending:true})
        .then(({data}) => setAuditEvents(Array.isArray(data) ? data : []))
        .catch(() => setAuditEvents([]));
      // Devoluções vinculadas
      sb.from('devolucoes').select('*').eq('sale_id', sale.id).order('created_at', {ascending:false})
        .then(({data}) => setDevolucoes(Array.isArray(data) ? data : []))
        .catch(() => setDevolucoes([]));
    }, [sale?.id]);

    // ===== KPIs ===== [Wave 15 v223.40] lib factory venda-timeline-calcs.js
    const { calcKpis, findRecv, buildAvisos, buildTimeline } = (window.ZNX && window.ZNX.lib && window.ZNX.lib.vendaTimeline) || {};
    if (typeof calcKpis !== 'function') {
      console.error('[ZNX v223.40] venda-timeline-calcs.js não carregou — page broken');
    }
    const kpis = useMemo(() => calcKpis ? calcKpis(sale, products) : {}, [sale, products]);

    // ===== RECEIVABLE da venda ===== [Wave 15 v223.40]
    const recv = useMemo(() => findRecv ? findRecv(sale, receivables) : null, [sale, receivables]);

    // ===== AVISOS AUTOMÁTICOS ===== [Wave 15 v223.40]
    const avisos = useMemo(() => buildAvisos ? buildAvisos(sale, recv, kpis, user) : [], [sale, recv, kpis, user]);

    // ===== TIMELINE UNIFICADA ===== [Wave 15 v223.40]
    const timeline = useMemo(() => buildTimeline ? buildTimeline(sale, auditEvents, devolucoes, recv) : [], [auditEvents, devolucoes, recv, sale]);

    // ===== UI =====
    const status = sale.status || 'Aberto';
    const statusColor = (status === 'Cancelada' || status === 'Cancelado') ? '#DC2626'
      : (status || '').includes('Devolvida') ? '#EA580C'
      : '#16A34A';
    // [REFACTOR Onda B 2026-05-07] usa window.fmtDateTime central (lib/fmt.js)
    const fmtDateBr = (iso) => iso ? window.fmtDateTime(iso) : '—';
    const isAdmin = user?.role === 'admin';
    const canEdit = isAdmin || user?.role === 'financeiro';
    const isTerminal = ['Cancelada','Cancelado','Devolvida (total)'].includes(status);

    return (
      <div>
        {/* Header */}
        <div style={{display:'flex',alignItems:'center',gap:14,marginBottom:14}}>
          <button className="btn-outline" onClick={onBack}>← Voltar pra Lista</button>
          <div style={{flex:1}}>
            <div style={{fontSize:22,fontWeight:700,color:'#1B2A4A',display:'flex',alignItems:'center',gap:10}}>
              <span style={{color:'#2563EB'}}>{sale.number || '—'}</span>
              <span style={{padding:'3px 10px',borderRadius:6,fontSize:12,fontWeight:600,background:statusColor+'22',color:statusColor}}>
                {status}
              </span>
            </div>
            <div style={{fontSize:13,color:'#6B7280',marginTop:2}}>
              {client?.name || sale.clientName || '—'} · Vendedor: {sale.sellerName || '—'} · {fmtDateBr(sale.createdAt || sale.date)}
            </div>
          </div>
        </div>

        {/* Avisos */}
        {avisos.length > 0 && (
          <div style={{display:'flex',gap:8,flexWrap:'wrap',marginBottom:16}}>
            {avisos.map((a, i) => (
              <div key={i} style={{padding:'8px 14px',borderRadius:8,background:a.color+'18',color:a.color,fontSize:13,fontWeight:600,border:`1px solid ${a.color}44`}}>
                {a.text}
              </div>
            ))}
          </div>
        )}

        {/* KPIs [Wave 15 v223.40 extracted to VendaKPIsCards.jsx] */}
        <VendaKPIsCards sale={sale} kpis={kpis} user={user}/>

        {/* Ações rápidas */}
        <div style={{display:'flex',gap:8,flexWrap:'wrap',marginBottom:18}}>
          {onPrintPdf && <button className="btn-gold" onClick={() => onPrintPdf(sale)}>🧾 Fatura PDF</button>}
          {canEdit && !isTerminal && onEdit && <button className="btn-outline" onClick={() => onEdit(sale)}>✏️ Editar</button>}
          {isAdmin && !isTerminal && onCancel && <button className="btn-outline" style={{borderColor:'#DC2626',color:'#DC2626'}} onClick={() => onCancel(sale)}>🚫 Cancelar</button>}
        </div>

        {/* 2 colunas: Items | Timeline */}
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}}>
          {/* Items [Wave 15 v223.40 extracted to VendaItemsTable.jsx] */}
          <VendaItemsTable sale={sale} products={products}/>

          {/* Timeline [Wave 15 v223.40 extracted to VendaTimelineEvents.jsx] */}
          <VendaTimelineEvents timeline={timeline}/>
        </div>
      </div>
    );
  }

  // Namespace
  window.ZNX = window.ZNX || {};
  window.ZNX.pages = window.ZNX.pages || {};
  window.ZNX.pages.VendaTimeline = VendaTimeline;
  window.VendaTimeline = VendaTimeline;
})();