// js/components/widgets/auditoria/PeriodsTab.jsx
// [Wave W1 PLAN 2026-05-18 v223.21] Extraído de AuditoriaAdmin.jsx L334-385 (tab Períodos Contábeis).
// Props (6): periods, periodsLoading, reopenPeriod, reopening, userName, fmtDateSafe.
// Padrão: IIFE + window.ZNX.widgets.auditoria.PeriodsTab.
(function() {
  'use strict';

  function PeriodsTab({periods, periodsLoading, reopenPeriod, reopening, userName, fmtDateSafe}) {
    return (
      <div>
        <div className="card" style={{marginBottom:14,background:'#FEF9E7',borderLeft:'4px solid #B89840'}}>
          <div style={{fontSize:13,color:'#1B2A4A',lineHeight:1.6}}>
            <strong>📌 Como funciona:</strong> ao fechar o mês, sistema bloqueia EDIÇÃO/EXCLUSÃO de QUALQUER venda, pagamento, recebível, gasto ou comissão cuja data caia dentro do período fechado. Protege a DRE histórica de mudanças retroativas. Reabertura exige justificativa (logada em auditoria).
          </div>
        </div>

        <div className="card" style={{padding:0}}>
          <div style={{padding:'14px 16px',borderBottom:'1px solid #E4E7EC',fontWeight:700,color:'#2563EB'}}>📅 Períodos cadastrados ({periods.length})</div>
          {periodsLoading ? (
            <div style={{padding:30,textAlign:'center',color:'#9CA3AF'}}>⏳ Carregando...</div>
          ) : periods.length === 0 ? (
            <div style={{padding:30,textAlign:'center',color:'#9CA3AF'}}>
              <div style={{fontSize:36,marginBottom:8}}>📅</div>
              <div style={{fontWeight:600}}>Nenhum período fechado ainda</div>
              <div style={{fontSize:12,marginTop:4}}>Use o botão "📅 Fechar Mês Atual" no topo pra fechar Maio/2026</div>
            </div>
          ) : (
            <table>
              <thead><tr><th>Período</th><th>Status</th><th>Fechado em</th><th>Por</th><th>Notas / Reabertura</th><th>Ações</th></tr></thead>
              <tbody>
                {periods.map(p => {
                  const isOpen = !!p.reopened_at;
                  return (
                    <tr key={p.id}>
                      <td style={{fontWeight:600}}>{fmtDateSafe(p.start_date)} → {fmtDateSafe(p.end_date)}</td>
                      <td>
                        {isOpen ? (
                          <span style={{padding:'2px 8px',background:'#FEF3C7',color:'#92400E',borderRadius:6,fontSize:11,fontWeight:700}}>🔓 REABERTO</span>
                        ) : (
                          <span style={{padding:'2px 8px',background:'#DCFCE7',color:'#15803D',borderRadius:6,fontSize:11,fontWeight:700}}>🔒 FECHADO</span>
                        )}
                      </td>
                      <td className="dim" style={{fontSize:11}}>{fmtDateSafe(p.closed_at)}</td>
                      <td className="dim" style={{fontSize:11}}>{userName(p.closed_by)}</td>
                      <td style={{fontSize:11}}>
                        {p.notes && <div style={{color:'#374151'}}>📝 {p.notes}</div>}
                        {p.reopen_reason && <div style={{color:'#92400E',marginTop:2,fontStyle:'italic'}}>↩️ {p.reopen_reason} (por {userName(p.reopened_by)} em {fmtDateSafe(p.reopened_at)})</div>}
                      </td>
                      <td>
                        {!isOpen && (
                          <button className="btn-outline btn-sm" onClick={()=>reopenPeriod(p)} disabled={reopening===p.id||!!reopening} style={{background:'#FEF3C7',borderColor:'#B89840',color:'#92400E',opacity:reopening?0.6:1,cursor:reopening?'not-allowed':'pointer'}}>{reopening===p.id?'⏳ Reabrindo…':'↩️ Reabrir'}</button>
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
        </div>
      </div>
    );
  }

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