// js/components/widgets/auditoria/DetailsModal.jsx
// [Wave W1 PLAN 2026-05-18 v223.21] Extraído de AuditoriaAdmin.jsx L517-590 (modal detalhes JSONB antes/depois).
// Props (5): selectedRow, onClose, userName, actionLabel, fmtDateSafe.
// Padrão: IIFE + window.ZNX.widgets.auditoria.DetailsModal.
(function() {
  'use strict';

  function DetailsModal({selectedRow, onClose, userName, actionLabel, fmtDateSafe}) {
    if (!selectedRow) return null;
    return (
      <div style={{position:'fixed',inset:0,background:'rgba(15,27,54,0.85)',zIndex:9999,display:'flex',alignItems:'center',justifyContent:'center',padding:20}}>
        <div style={{background:'#fff',borderRadius:14,maxWidth:900,width:'100%',maxHeight:'90vh',display:'flex',flexDirection:'column',overflow:'hidden'}}>
          {/* Header */}
          <div style={{background:'linear-gradient(135deg,#0F1B36,#1B2A4A)',padding:'18px 24px',display:'flex',alignItems:'center',gap:14}}>
            <div style={{flex:1}}>
              <div style={{fontSize:11,color:'#B89840',fontWeight:700,letterSpacing:2,textTransform:'uppercase'}}>Detalhes da Ação</div>
              <div style={{fontSize:18,color:'#fff',fontWeight:800,marginTop:4}}>{actionLabel(selectedRow.action)}</div>
              <div style={{fontSize:12,color:'#FEF9E7',marginTop:4,opacity:0.85}}>
                {/* [ONDA1-A 2026-05-11] regra_fmtdate_aceita_string_iso — usar fmtDateSafe (normaliza ISO timestamp). */}
                {fmtDateSafe(selectedRow.created_at)} · {new Date(selectedRow.created_at).toLocaleTimeString('pt-BR')} · por {userName(selectedRow.actor_id)} ({selectedRow.actor_role})
              </div>
            </div>
            <button onClick={onClose} style={{background:'rgba(255,255,255,0.1)',color:'#fff',border:'1.5px solid rgba(255,255,255,0.3)',borderRadius:10,width:36,height:36,fontSize:18,cursor:'pointer',fontWeight:700}}>✕</button>
          </div>

          {/* Body scrollable */}
          <div style={{padding:20,overflow:'auto',flex:1}}>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,marginBottom:14}}>
              <div style={{padding:'10px 14px',background:'#F8FAFB',borderRadius:8}}>
                <div style={{fontSize:10,color:'#9CA3AF',fontWeight:700,letterSpacing:1,textTransform:'uppercase'}}>Tipo de Alvo</div>
                <div style={{fontSize:14,fontWeight:600,color:'#1B2A4A',marginTop:2,textTransform:'capitalize'}}>{selectedRow.target_type}</div>
              </div>
              <div style={{padding:'10px 14px',background:'#F8FAFB',borderRadius:8}}>
                <div style={{fontSize:10,color:'#9CA3AF',fontWeight:700,letterSpacing:1,textTransform:'uppercase'}}>ID do Alvo</div>
                <div style={{fontSize:12,fontFamily:'monospace',color:'#1B2A4A',marginTop:2}}>{selectedRow.target_id||'—'}</div>
              </div>
            </div>

            {selectedRow.reason && (
              <div className="card" style={{marginBottom:14,background:'#FEF9E7',borderLeft:'4px solid #B89840'}}>
                <div style={{fontSize:11,color:'#92700A',fontWeight:700,textTransform:'uppercase',letterSpacing:1,marginBottom:6}}>📝 Motivo / Justificativa</div>
                <div style={{fontSize:13,color:'#1B2A4A',lineHeight:1.5}}>{selectedRow.reason}</div>
              </div>
            )}

            {selectedRow.metadata && Object.keys(selectedRow.metadata).length > 0 && (
              <div className="card" style={{marginBottom:14}}>
                <div style={{fontSize:11,color:'#7C3AED',fontWeight:700,textTransform:'uppercase',letterSpacing:1,marginBottom:6}}>📌 Metadata</div>
                <pre style={{fontSize:11,fontFamily:'monospace',background:'#F3F4F6',padding:10,borderRadius:6,overflow:'auto',margin:0,color:'#1F2937'}}>{JSON.stringify(selectedRow.metadata, null, 2)}</pre>
              </div>
            )}

            {(selectedRow.before_data || selectedRow.after_data) && (
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
                <div className="card" style={{borderLeft:'4px solid #B91C1C'}}>
                  <div style={{fontSize:11,color:'#B91C1C',fontWeight:700,textTransform:'uppercase',letterSpacing:1,marginBottom:6}}>📤 Antes</div>
                  {selectedRow.before_data ? (
                    <pre style={{fontSize:11,fontFamily:'monospace',background:'#FEE2E2',padding:10,borderRadius:6,overflow:'auto',margin:0,maxHeight:300,color:'#7F1D1D'}}>{JSON.stringify(selectedRow.before_data, null, 2)}</pre>
                  ) : <div style={{fontSize:12,color:'#9CA3AF',fontStyle:'italic'}}>Sem dado anterior (ação de criação)</div>}
                </div>
                <div className="card" style={{borderLeft:'4px solid #15803D'}}>
                  <div style={{fontSize:11,color:'#15803D',fontWeight:700,textTransform:'uppercase',letterSpacing:1,marginBottom:6}}>📥 Depois</div>
                  {selectedRow.after_data ? (
                    <pre style={{fontSize:11,fontFamily:'monospace',background:'#DCFCE7',padding:10,borderRadius:6,overflow:'auto',margin:0,maxHeight:300,color:'#14532D'}}>{JSON.stringify(selectedRow.after_data, null, 2)}</pre>
                  ) : <div style={{fontSize:12,color:'#9CA3AF',fontStyle:'italic'}}>Sem dado posterior (ação de exclusão)</div>}
                </div>
              </div>
            )}

            <div style={{marginTop:14,padding:'10px 14px',background:'#F8FAFB',borderRadius:8,fontSize:11,color:'#6B7280'}}>
              <strong>ID do log:</strong> <span style={{fontFamily:'monospace'}}>{selectedRow.id}</span>
              {selectedRow.ip_address && <> · <strong>IP:</strong> {selectedRow.ip_address}</>}
            </div>
          </div>

          {/* Footer */}
          <div style={{padding:'12px 20px',borderTop:'1px solid #E4E7EC',display:'flex',justifyContent:'flex-end',gap:10}}>
            <button onClick={onClose} className="btn-outline">Fechar</button>
          </div>
        </div>
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.auditoria = window.ZNX.widgets.auditoria || {};
  window.ZNX.widgets.auditoria.DetailsModal = DetailsModal;
})();