// js/components/widgets/auditoria/FiltersBar.jsx
// [Wave W1 PLAN 2026-05-18 v223.21] Extraído de AuditoriaAdmin.jsx L408-444 (filtros logs).
// Props (14): filterPeriod/setFilterPeriod, filterAction/setFilterAction, filterActor/setFilterActor,
//   filterTargetType/setFilterTargetType, searchText/setSearchText, uniqueActions, uniqueActors,
//   uniqueTargetTypes, actionLabel.
// Padrão: IIFE + window.ZNX.widgets.auditoria.FiltersBar.
(function() {
  'use strict';

  function FiltersBar({
    filterPeriod, setFilterPeriod,
    filterAction, setFilterAction,
    filterActor, setFilterActor,
    filterTargetType, setFilterTargetType,
    searchText, setSearchText,
    uniqueActions, uniqueActors, uniqueTargetTypes, actionLabel
  }) {
    return (
      <div style={{display:'flex',gap:10,flexWrap:'wrap',alignItems:'center',marginBottom:14,padding:14,background:'#F8FAFB',borderRadius:10}}>
        {/* Período */}
        <div style={{display:'flex',gap:6,alignItems:'center'}}>
          <span style={{fontSize:11,color:'#9CA3AF',fontWeight:700,textTransform:'uppercase',letterSpacing:1}}>Período:</span>
          {[{v:'hoje',l:'Hoje'},{v:'7d',l:'7d'},{v:'30d',l:'30d'},{v:'90d',l:'90d'},{v:'all',l:'Tudo'}].map(o => (
            <button key={o.v} onClick={()=>setFilterPeriod(o.v)}
              style={{padding:'5px 10px',borderRadius:6,border:'1.5px solid '+(filterPeriod===o.v?'#B89840':'#E4E7EC'),background:filterPeriod===o.v?'#FEF9E7':'#fff',color:filterPeriod===o.v?'#1B2A4A':'#6B7280',fontWeight:filterPeriod===o.v?700:500,fontSize:11,cursor:'pointer'}}>
              {o.l}
            </button>
          ))}
        </div>

        <select value={filterAction} onChange={e=>setFilterAction(e.target.value)} style={{padding:'6px 10px',borderRadius:6,border:'1.5px solid #E4E7EC',fontSize:12}}>
          <option value="">Toda ação ({uniqueActions.length})</option>
          {uniqueActions.map(a => <option key={a} value={a}>{actionLabel(a)}</option>)}
        </select>

        <select value={filterActor} onChange={e=>setFilterActor(e.target.value)} style={{padding:'6px 10px',borderRadius:6,border:'1.5px solid #E4E7EC',fontSize:12}}>
          <option value="">Todo actor ({uniqueActors.length})</option>
          {uniqueActors.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
        </select>

        <select value={filterTargetType} onChange={e=>setFilterTargetType(e.target.value)} style={{padding:'6px 10px',borderRadius:6,border:'1.5px solid #E4E7EC',fontSize:12}}>
          <option value="">Todo alvo</option>
          {uniqueTargetTypes.map(t => <option key={t} value={t}>{t}</option>)}
        </select>

        <input value={searchText} onChange={e=>setSearchText(e.target.value)} placeholder="Buscar (ação, alvo, motivo, nome)..."
          style={{padding:'6px 10px',borderRadius:6,border:'1.5px solid #E4E7EC',fontSize:12,flex:1,minWidth:200}}/>

        {(filterAction||filterActor||filterTargetType||searchText) && (
          <button onClick={()=>{setFilterAction('');setFilterActor('');setFilterTargetType('');setSearchText('');}}
            style={{padding:'6px 12px',borderRadius:6,border:'none',background:'#DC2626',color:'#fff',fontSize:11,fontWeight:700,cursor:'pointer'}}>
            ✕ Limpar
          </button>
        )}
      </div>
    );
  }

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