// Tidal — Configurações · backup e sistema · só admin

const Configuracoes = ({state}) => {
  const _tt = useT();
  const lang = _tt.lang;
  const toast = useToast();
  const isMobile = useMobile();
  const token = () => localStorage.getItem('genesis_token');
  const me = state.currentUser || {};
  const canManage = me.role === 'admin' || me.is_staff === true;
  const [temaAtual, setTemaAtual] = useState(() => {
    try {
      const a = JSON.parse(localStorage.getItem('genesis_appearance') || 'null');
      const th = (window.GENESIS_THEMES || []).find(x => a && x.theme === a.theme && x.accent === a.accent);
      return th ? th.key : 'clean';
    } catch (e) { return 'clean'; }
  });
  const [qrHost, setQrHost] = useState(() => {
    try {
      const cfg = JSON.parse(localStorage.getItem('genesis_cracha_qr') || '{}');
      return cfg.host || '';
    } catch (e) { return ''; }
  });
  const [pinPortalo, setPinPortalo] = useState('');
  const [pinLoading, setPinLoading] = useState(true);
  const [pinSaving, setPinSaving] = useState(false);
  const escolherTema = (tm) => {
    setTemaAtual(tm.key);
    if (window.GENESIS_applyAppearance) window.GENESIS_applyAppearance(tm.theme, tm.accent);
  };

  const [status, setStatus] = useState(null);
  const [loading, setLoading] = useState(true);
  const [creating, setCreating] = useState(false);
  const [auditLog, setAuditLog] = useState(null);
  const [loadingAudit, setLoadingAudit] = useState(true);

  const fetchStatus = async () => {
    try {
      const res = await fetch('/api/backup/status', {
        headers: {'Authorization': `Bearer ${token()}`}
      });
      if (res.ok) setStatus(await res.json());
    } catch(e) { console.error(e); }
    finally { setLoading(false); }
  };

  const fetchAudit = async () => {
    setLoadingAudit(true);
    try {
      const res = await fetch('/api/users/audit/log?limit=50', {
        headers: {'Authorization': `Bearer ${token()}`}
      });
      if (res.ok) setAuditLog(await res.json());
      else setAuditLog([]);
    } catch(e) { setAuditLog([]); }
    finally { setLoadingAudit(false); }
  };

  useEffect(() => { fetchStatus(); fetchAudit(); fetchPin(); }, []);

  useEffect(() => {
    try { localStorage.setItem('genesis_cracha_qr', JSON.stringify({ host: qrHost.trim() })); } catch(e) {}
  }, [qrHost]);

  const fetchPin = async () => {
    try {
      const r = await fetch('/api/boarding/config', { headers: { 'Authorization': `Bearer ${token()}` } });
      if (r.ok) { const d = await r.json(); setPinPortalo(d.boarding_pin || ''); }
    } catch(e) {}
    finally { setPinLoading(false); }
  };

  const salvarPin = async () => {
    if (!pinPortalo.trim()) { toast.push({icon:'x', title:'Informe o PIN'}); return; }
    setPinSaving(true);
    try {
      const r = await fetch('/api/boarding/config', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token()}` },
        body: JSON.stringify({ boarding_pin: pinPortalo.trim() })
      });
      const d = await r.json();
      if (!r.ok) throw new Error(d.error || 'Erro ao salvar');
      toast.push({icon:'check', title:'PIN do portaló atualizado'});
    } catch(e) { toast.push({icon:'x', title:e.message}); }
    finally { setPinSaving(false); }
  };

  const fmtSize = bytes => {
    if (!bytes) return '—';
    if (bytes < 1024*1024) return `${(bytes/1024).toFixed(1)} KB`;
    return `${(bytes/1024/1024).toFixed(1)} MB`;
  };

  const fmtDate = iso => {
    if (!iso) return '—';
    return new Date(iso).toLocaleString('pt-BR', {
      day:'2-digit', month:'2-digit', year:'numeric',
      hour:'2-digit', minute:'2-digit'
    });
  };

  // ─── Backup manual — gera e baixa ───
  const handleBackup = async () => {
    setCreating(true);
    toast.push({icon:'check', title:(lang==='pt'?'Gerando backup…':'Generating backup…'), body:'pode levar alguns segundos'});
    try {
      const res = await fetch('/api/backup/create?download=1', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token()}`
        },
        body: JSON.stringify({download: true})
      });

      if (!res.ok) {
        const err = await res.json();
        toast.push({icon:'x', title:(lang==='pt'?'Erro no backup':'Backup error'), body: err.error});
        return;
      }

      // Baixa o arquivo
      const blob = await res.blob();
      const cd = res.headers.get('content-disposition') || '';
      const match = cd.match(/filename="([^"]+)"/);
      const filename = match ? match[1] : `genesis_backup_${Date.now()}.zip`;

      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = filename; a.click();
      URL.revokeObjectURL(url);

      toast.push({icon:'check', title:(lang==='pt'?'Backup baixado!':'Backup downloaded!'), body: filename});
      await fetchStatus();
    } catch(e) {
      toast.push({icon:'x', title:'Erro', body: e.message});
    } finally {
      setCreating(false);
    }
  };

  // ─── Download de backup específico ───
  const downloadBackup = (filename) => {
    const url = `/api/backup/download/${filename}`;
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    // Adiciona token via fetch + blob para manter autenticação
    fetch(url, {headers:{'Authorization':`Bearer ${token()}`}})
      .then(r => r.blob())
      .then(blob => {
        const blobUrl = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = blobUrl; link.download = filename; link.click();
        URL.revokeObjectURL(blobUrl);
      })
      .catch(() => toast.push({icon:'x', title:(lang==='pt'?'Erro ao baixar':'Download error')}));
  };

  const last = status?.last_backup;
  const files = status?.files || [];

  return (
    <main style={{padding: isMobile ? '16px 16px 80px' : '30px 36px 56px', flex:1, maxWidth:800}}>

      {/* ─── Aparência (todos) ─── */}
      <section style={{background:'var(--surface)',border:'1px solid var(--line-soft)',borderTop:'3px solid var(--accent)',borderRadius:24,padding:isMobile?'22px 20px':'28px 32px',marginBottom:24}}>
        <div style={{fontFamily:'var(--fm)',fontSize:11,letterSpacing:2,textTransform:'uppercase',color:'var(--muted)',marginBottom:6}}>{lang==='pt'?'Aparência':'Appearance'}</div>
        <div style={{fontFamily:'var(--fs)',fontSize:isMobile?22:26,letterSpacing:'-0.4px',lineHeight:1.1,marginBottom:6}}>{lang==='pt'?'Escolha o ':'Choose the '}<em style={{fontStyle:'italic',color:'var(--accent)'}}>{lang==='pt'?'tema':'theme'}</em></div>
        <div style={{fontSize:13,color:'var(--muted)',marginBottom:20,lineHeight:1.5}}>{lang==='pt'?'Vale só pra você, neste aparelho. Muda na hora.':'Just for you, on this device. Changes instantly.'}</div>
        <div style={{display:'grid',gridTemplateColumns:`repeat(auto-fill, minmax(${isMobile?110:130}px, 1fr))`,gap:12}}>
          {(window.GENESIS_THEMES || []).map(tm => {
            const pal = (window.ACCENT_PALETTES || {})[tm.accent] || {};
            const dark = tm.theme === 'dark';
            const sel = temaAtual === tm.key;
            return (
              <button key={tm.key} onClick={() => escolherTema(tm)} style={{border: sel ? '2px solid var(--accent)' : '2px solid var(--line-soft)', borderRadius:14, padding:0, overflow:'hidden', cursor:'pointer', background:'transparent', textAlign:'left', color:'var(--ink)'}}>
                <div style={{height:60, background: dark ? '#1A2024' : '#FBF7F0', padding:10}}>
                  <div style={{width:'45%',height:7,borderRadius:4,background: dark ? '#ECE3D0' : '#1F2A2E',opacity:0.85,marginBottom:6}}/>
                  <div style={{display:'flex',gap:5}}>
                    <span style={{width:20,height:20,borderRadius:6,background:pal.accent}}/>
                    <span style={{width:20,height:20,borderRadius:6,background:pal.accent2}}/>
                    <span style={{width:20,height:20,borderRadius:6,background:pal.soft}}/>
                  </div>
                </div>
                <div style={{padding:'8px 10px',display:'flex',alignItems:'center',justifyContent:'space-between',background:'var(--surface)'}}>
                  <span style={{fontFamily:'var(--f)',fontSize:12.5,fontWeight:500}}>{tm.nome}</span>
                  {sel && <span style={{color:'var(--accent)',fontSize:13}}>✓</span>}
                </div>
              </button>
            );
          })}
        </div>
      </section>

      {canManage && <>
      {/* ─── QR dos crachás ─── */}
      <section style={{
        background:'var(--cream)',border:'1px solid var(--line-soft)',
        borderRadius:24,padding:'24px 28px',marginBottom:24
      }}>
        <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:14}}>
          <div style={{width:40,height:40,borderRadius:12,background:'var(--accent-soft)',display:'grid',placeItems:'center',fontSize:20}}>
            🪪
          </div>
          <div>
            <div style={{fontWeight:600,fontSize:15}}>{lang==='pt'?'Domínio público dos crachás':'Public badge domain'}</div>
            <div style={{fontSize:12,color:'var(--muted)',fontFamily:'var(--fm)',marginTop:2}}>
              usado nos QR Codes dos crachás para abrir a página pública de scan pelo celular
            </div>
          </div>
        </div>

        <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
          <input
            type="text"
            value={qrHost}
            onChange={e => setQrHost(e.target.value)}
            placeholder="ex: casa.mysocialhub.com.br"
            style={{flex:1,minWidth:220,padding:'12px 14px',borderRadius:12,border:'1px solid var(--line)',background:'#fff',fontSize:13}}
          />
          <button className="btn btn-sm" onClick={() => setQrHost('')} style={{height:42}}>
            Usar atual ({window.location.host})
          </button>
        </div>

        <div style={{marginTop:12,padding:'12px 16px',background:'var(--sky-soft)',borderRadius:12,fontSize:12.5,color:'var(--teal)',lineHeight:1.5}}>
          💡 Deixe em branco para usar o host atual (<code style={{background:'rgba(0,0,0,0.06)',padding:'1px 5px',borderRadius:3}}>{window.location.host}</code>). Para os crachás funcionarem fora da rede do navio, preencha com o domínio público (ex: <code style={{background:'rgba(0,0,0,0.06)',padding:'1px 5px',borderRadius:3}}>casa.mysocialhub.com.br</code>) e libere os caminhos <code style={{background:'rgba(0,0,0,0.06)',padding:'1px 5px',borderRadius:3}}>/gangway-scan.html</code> e <code style={{background:'rgba(0,0,0,0.06)',padding:'1px 5px',borderRadius:3}}>/api/boarding/scan-publico*</code> no Cloudflare Zero Trust.
        </div>
      </section>

      {/* ─── PIN do portaló ─── */}
      <section style={{
        background:'var(--cream)',border:'1px solid var(--line-soft)',
        borderRadius:24,padding:'24px 28px',marginBottom:24
      }}>
        <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:14}}>
          <div style={{width:40,height:40,borderRadius:12,background:'var(--accent-soft)',display:'grid',placeItems:'center',fontSize:20}}>
            🔐
          </div>
          <div>
            <div style={{fontWeight:600,fontSize:15}}>{lang==='pt'?'PIN do portaló':'Gangway PIN'}</div>
            <div style={{fontSize:12,color:'var(--muted)',fontFamily:'var(--fm)',marginTop:2}}>
              usado na página pública de scan para liberar o acesso por 12 horas
            </div>
          </div>
        </div>

        <div style={{display:'flex',gap:10,flexWrap:'wrap',alignItems:'center'}}>
          <input
            type="text"
            value={pinPortalo}
            onChange={e => setPinPortalo(e.target.value.replace(/\D/g,''))}
            placeholder={pinLoading ? 'carregando…' : 'ex: 4721'}
            maxLength={8}
            style={{flex:1,minWidth:180,padding:'12px 14px',borderRadius:12,border:'1px solid var(--line)',background:'#fff',fontSize:16,letterSpacing:4,textAlign:'center'}}
          />
          <button className="btn btn-sm" onClick={salvarPin} disabled={pinSaving || pinLoading} style={{height:42}}>
            {pinSaving ? 'Salvando…' : 'Salvar PIN'}
          </button>
        </div>

        <div style={{marginTop:12,padding:'12px 16px',background:'var(--accent-soft)',borderRadius:12,fontSize:12.5,color:'var(--accent-2)',lineHeight:1.5}}>
          ⚠️ Após validar o PIN na página <code style={{background:'rgba(0,0,0,0.06)',padding:'1px 5px',borderRadius:3}}>/gangway-scan.html</code>, o operador pode registrar embarques e desembarques por 12 horas sem precisar digitá-lo novamente.
        </div>
      </section>

      {/* ─── Backup manual ─── */}
      <section style={{
        background:'linear-gradient(135deg, var(--teal), #1A5250)',
        borderRadius:28, padding: isMobile?'24px 22px':'32px 36px',
        marginBottom:24, position:'relative', overflow:'hidden'
      }}>
        <div style={{position:'absolute',top:-40,right:-40,width:200,height:200,borderRadius:'50%',background:'rgba(255,255,255,0.06)'}}/>
        <div style={{position:'absolute',bottom:-60,right:40,width:160,height:160,borderRadius:'50%',background:'rgba(255,255,255,0.04)'}}/>

        <div style={{fontFamily:'var(--fm)',fontSize:11,letterSpacing:2,textTransform:'uppercase',color:'rgba(255,255,255,0.5)',marginBottom:8}}>
          Backup manual
        </div>
        <div style={{fontFamily:'var(--fs)',fontSize:isMobile?26:34,letterSpacing:'-0.6px',color:'white',lineHeight:1.1,marginBottom:8}}>
          Baixar <em style={{fontStyle:'italic'}}>{lang==='pt'?'cópia agora':'backup now'}</em>
        </div>
        <div style={{fontSize:13,color:'rgba(255,255,255,0.6)',marginBottom:24,lineHeight:1.5}}>
          Gera um <code style={{background:'rgba(255,255,255,0.1)',padding:'1px 6px',borderRadius:4,fontSize:11}}>.zip</code> com o banco de dados completo e todos os arquivos de upload, e baixa direto no seu computador.
        </div>

        <button onClick={handleBackup} disabled={creating} style={{
          display:'inline-flex',alignItems:'center',gap:10,
          padding:'14px 28px',borderRadius:14,border:'none',cursor:'pointer',
          background:'white',color:'var(--teal)',
          fontFamily:'var(--fs)',fontStyle:'italic',fontSize:18,
          fontWeight:600,letterSpacing:'-0.2px',
          opacity:creating?0.7:1,transition:'opacity .2s',
          boxShadow:'0 8px 24px rgba(0,0,0,0.2)'
        }}>
          {creating ? '⏳ Gerando…' : '⬇️ Baixar backup agora'}
        </button>

        {last && (
          <div style={{marginTop:20,fontSize:12,color:'rgba(255,255,255,0.45)',fontFamily:'var(--fm)'}}>
            Último backup: {fmtDate(last.last_backup)} · {fmtSize(last.size_bytes)}
          </div>
        )}
      </section>

      {/* ─── Backup automático ─── */}
      <section style={{
        background:'var(--cream)',border:'1px solid var(--line-soft)',
        borderRadius:24,padding:'24px 28px',marginBottom:24
      }}>
        <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:18}}>
          <div style={{width:40,height:40,borderRadius:12,background:'var(--sky-soft)',display:'grid',placeItems:'center',fontSize:20}}>
            📅
          </div>
          <div>
            <div style={{fontWeight:600,fontSize:15}}>{lang==='pt'?'Backup automático':'Automatic backup'}</div>
            <div style={{fontSize:12,color:'var(--muted)',fontFamily:'var(--fm)',marginTop:2}}>
              diário às 03:00 · retenção de 7 dias
            </div>
          </div>
          <div style={{marginLeft:'auto'}}>
            <div style={{
              display:'inline-flex',alignItems:'center',gap:6,
              padding:'4px 12px',borderRadius:20,
              background:'var(--leaf-soft)',
              fontFamily:'var(--fm)',fontSize:11,color:'var(--leaf)',letterSpacing:0.5
            }}>
              <span style={{width:6,height:6,borderRadius:'50%',background:'var(--leaf)',display:'inline-block'}}/>
              ATIVO
            </div>
          </div>
        </div>

        <div style={{
          display:'grid',gridTemplateColumns:isMobile?'1fr':'repeat(3,1fr)',
          gap:12,padding:'16px',background:'var(--cream-2)',borderRadius:16
        }}>
          {[
            {label:'Horário', value:'03:00', icon:'⏰'},
            {label:'Retenção', value:'7 backups', icon:'🗂️'},
            {label:'Localização', value:'/backups/', icon:'💾'},
          ].map(item=>(
            <div key={item.label} style={{textAlign:'center'}}>
              <div style={{fontSize:22,marginBottom:4}}>{item.icon}</div>
              <div style={{fontFamily:'var(--fm)',fontSize:13,fontWeight:600}}>{item.value}</div>
              <div style={{fontSize:11,color:'var(--muted)'}}>{item.label}</div>
            </div>
          ))}
        </div>

        <div style={{marginTop:14,padding:'12px 16px',background:'var(--sky-soft)',borderRadius:12,fontSize:12.5,color:'var(--teal)',lineHeight:1.5}}>
          💡 Para sincronizar com o Google Drive, configure o <strong>Hyper Backup</strong> do Synology para monitorar a pasta <code style={{background:'rgba(0,0,0,0.06)',padding:'1px 5px',borderRadius:3}}>/volume1/Crewshare/genesis/backups/</code> e enviar para o Drive uma vez por semana.
        </div>

        {/* Diagnóstico */}
        {status?.app_info && (
          <div style={{marginTop:12,padding:'12px 16px',background:'var(--cream-2)',borderRadius:12,fontSize:12,fontFamily:'var(--fm)',color:'var(--muted)',lineHeight:1.6}}>
            <div>📁 App dir: <strong style={{color:status.app_info.exists?'var(--leaf)':'var(--coral-2)'}}>{status.app_info.exists?'encontrado':'NÃO encontrado'}</strong></div>
            <div>📂 Caminho: <code>{status.app_info.path}</code></div>
            {status.app_info.exists && (
              <div>📄 Arquivos: {status.app_info.files} · {((status.app_info.size||0)/1024/1024).toFixed(1)} MB a salvar</div>
            )}
          </div>
        )}
      </section>

      {/* ─── Histórico de backups ─── */}
      <section style={{
        background:'var(--cream)',border:'1px solid var(--line-soft)',
        borderRadius:24,padding:'24px 28px'
      }}>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:18}}>
          <div>
            <div style={{fontWeight:600,fontSize:15}}>{lang==='pt'?'Backups disponíveis':'Available backups'}</div>
            <div style={{fontSize:12,color:'var(--muted)',fontFamily:'var(--fm)',marginTop:2}}>
              {files.length} arquivo{files.length!==1?'s':''} · últimos 7 dias
            </div>
          </div>
          <button onClick={fetchStatus} className="btn btn-sm">
            <Icon n="refresh" size={12}/>Atualizar
          </button>
        </div>

        {loading ? (
          <div style={{padding:40,textAlign:'center',color:'var(--muted)',fontFamily:'var(--fs)',fontStyle:'italic'}}>
            carregando…
          </div>
        ) : files.length === 0 ? (
          <div className="empty" style={{padding:40,textAlign:'center'}}>
            nenhum backup encontrado. Clique em "Baixar backup agora" para criar o primeiro.
          </div>
        ) : (
          <div>
            {files.map((f, i) => (
              <div key={f.name} style={{
                display:'flex',alignItems:'center',gap:12,
                padding:'12px 0',
                borderTop: i===0?'none':'1px solid var(--line-soft)'
              }}>
                <div style={{
                  width:38,height:38,borderRadius:10,flexShrink:0,
                  background: i===0?'var(--leaf-soft)':'var(--cream-2)',
                  display:'grid',placeItems:'center',fontSize:18
                }}>
                  {i===0?'⭐':'📦'}
                </div>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{
                    fontSize:13,fontWeight:500,fontFamily:'var(--fm)',
                    whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'
                  }}>
                    {f.name}
                    {i===0 && <span style={{marginLeft:8,fontSize:10,color:'var(--leaf)',fontFamily:'var(--fm)',background:'var(--leaf-soft)',padding:'1px 6px',borderRadius:4}}>{lang==='pt'?'mais recente':'latest'}</span>}
                  </div>
                  <div style={{fontSize:11,color:'var(--muted)',fontFamily:'var(--fm)',marginTop:2}}>
                    {fmtDate(f.date)} · {fmtSize(f.size)}
                  </div>
                </div>
                <button onClick={()=>downloadBackup(f.name)} className="btn btn-sm">
                  ⬇️ Baixar
                </button>
              </div>
            ))}
          </div>
        )}
      </section>

      {/* ─── Registro de auditoria ─── */}
      <section style={{
        background:'var(--cream)',border:'1px solid var(--line-soft)',
        borderRadius:24,padding:'24px 28px',marginTop:24
      }}>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:18}}>
          <div style={{display:'flex',alignItems:'center',gap:12}}>
            <div style={{width:40,height:40,borderRadius:12,background:'var(--sun-soft, #F5E6C8)',display:'grid',placeItems:'center',fontSize:20}}>
              📋
            </div>
            <div>
              <div style={{fontWeight:600,fontSize:15}}>{lang==='pt'?'Registro de auditoria':'Audit log'}</div>
              <div style={{fontSize:12,color:'var(--muted)',fontFamily:'var(--fm)',marginTop:2}}>
                ações sensíveis: exclusões, mudanças de classe, cabines
              </div>
            </div>
          </div>
          <button onClick={fetchAudit} className="btn btn-sm">
            <Icon n="refresh" size={12}/>Atualizar
          </button>
        </div>

        {loadingAudit ? (
          <div style={{display:'grid',gap:8}}>
            {[1,2,3].map(i=>(
              <div key={i} style={{height:48,borderRadius:12,background:'linear-gradient(90deg,var(--cream-2) 25%,var(--cream-3) 50%,var(--cream-2) 75%)',backgroundSize:'200% 100%',animation:'shimmer 1.5s infinite'}}/>
            ))}
          </div>
        ) : !auditLog || auditLog.length === 0 ? (
          <div className="empty" style={{padding:'32px 20px',textAlign:'center'}}>
            nenhuma ação registrada ainda.
          </div>
        ) : (
          <div style={{display:'grid',gap:6,maxHeight:420,overflowY:'auto'}}>
            {auditLog.map(a => {
              const acaoInfo = {
                'pessoa.excluir':     {icon:'🗑️', label:'Excluiu', color:'var(--accent)'},
                'classe.alterar':     {icon:'🎭', label:'Alterou classe', color:'var(--teal)'},
                'cabine.atribuir':    {icon:'🛏️', label:'Atribuiu cabine', color:'var(--leaf)'},
                'massa.excluir':      {icon:'🗑️', label:'Exclusão em massa', color:'var(--accent)'},
                'massa.embarcar':     {icon:'🟢', label:'Embarque em massa', color:'var(--leaf)'},
                'massa.desembarcar':  {icon:'🔴', label:'Desembarque em massa', color:'#C0392B'},
                'massa.classe':       {icon:'🎭', label:'Classe em massa', color:'var(--teal)'},
              }[a.acao] || {icon:'•', label:a.acao, color:'var(--muted)'};
              const dt = a.created_at ? new Date(a.created_at) : null;
              return (
                <div key={a.id} style={{
                  display:'flex',alignItems:'center',gap:12,padding:'11px 14px',
                  background:'var(--cream-2)',borderRadius:12
                }}>
                  <div style={{fontSize:18,flexShrink:0}}>{acaoInfo.icon}</div>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{fontSize:13,fontWeight:500}}>
                      <span style={{color:acaoInfo.color}}>{acaoInfo.label}</span>
                      {a.alvo_nome && <span> · {a.alvo_nome}</span>}
                    </div>
                    <div style={{fontSize:11,color:'var(--muted)',fontFamily:'var(--fm)',marginTop:2}}>
                      por {a.actor_pessoa || a.actor_nome || 'sistema'}
                      {a.detalhe && ` · ${a.detalhe}`}
                    </div>
                  </div>
                  <div style={{textAlign:'right',fontFamily:'var(--fm)',fontSize:10.5,color:'var(--muted)',flexShrink:0}}>
                    <div>{dt?dt.toLocaleDateString('pt-BR'):'—'}</div>
                    <div>{dt?dt.toLocaleTimeString('pt-BR',{hour:'2-digit',minute:'2-digit'}):''}</div>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </section>
      </>}
    </main>
  );
};

Object.assign(window, {Configuracoes});