// ═══════════════════════════════════════════════════════════════
// SCREEN · Ausências · solicitação, aprovação, escala presencial
// ═══════════════════════════════════════════════════════════════

const CLT_MOTIVOS = [
  'Licença maternidade',
  'Licença paternidade',
  'Licença gala (casamento)',
  'Licença luto',
  'Licença médica',
  'Afastamento por indisposição sem atestado (até 2 dias)',
  'Acompanhamento médico de dependentes/familiares',
  'Flexibilização para cuidado de familiar doente',
  'Folga por atuação como mesário(a)',
  'Doação de sangue',
  'Alistamento eleitoral',
  'Exame preventivo de câncer',
  'Ausência para consultas, exames e procedimentos médicos',
  'Ausência para treinamentos da Justiça Eleitoral (mesários)',
  'Home office temporário por questões de saúde ou cuidado familiar',
  'Participação em evento',
  'Outro',
];

const AUSENCIA_KEY = 'escalab_ausencias';
const CALENDARIO_EMAILS = 'associadosescalab@googlegroups.com,fixosescalab@googlegroups.com';

const STATUS_AUS = {
  pendente:  { label: 'Aguardando GC', color: '#B56500', bg: '#FFF7EB', border: '#FFD6A3' },
  aprovado:  { label: 'Aprovado',      color: '#00836B', bg: '#E6F5F1', border: '#A3D9CE' },
  rejeitado: { label: 'Rejeitado',     color: '#B3261E', bg: '#FDECEC', border: '#F4C7C3' },
};

const AUSENCIA_SEED = [
  { id:'A001', colaboradorId:15, colaboradorNome:'Lucas Henrique Costa',   dataInicio:'2026-05-20', dataFim:'2026-05-20', motivo:'Licença médica',            obs:'Consulta especialista', atestado:true,  status:'aprovado', justificada:true,  criadoEm:'2026-05-10T09:00:00', rhNome:'Paula Cardoso Ferreira', rhAprovadoEm:'2026-05-11T10:00:00', motivoRejeicao:null },
  { id:'A002', colaboradorId:22, colaboradorNome:'Juliana Silva Martins',  dataInicio:'2026-05-21', dataFim:'2026-05-22', motivo:'Licença gala (casamento)', obs:'',                      atestado:false, status:'pendente', justificada:true,  criadoEm:'2026-05-12T14:00:00', rhNome:null, rhAprovadoEm:null, motivoRejeicao:null },
  { id:'A003', colaboradorId:18, colaboradorNome:'Vanessa Cristina Alves', dataInicio:'2026-05-19', dataFim:'2026-05-19', motivo:'Falta não justificada',     obs:'Ausência sem aviso',    atestado:false, status:'aprovado', justificada:false, criadoEm:'2026-05-19T17:00:00', rhNome:'Paula Cardoso Ferreira', rhAprovadoEm:'2026-05-19T17:00:00', motivoRejeicao:null },
  { id:'A004', colaboradorId:27, colaboradorNome:'Julia Braga Pereira',    dataInicio:'2026-05-23', dataFim:'2026-05-23', motivo:'Participação em evento',    obs:'Workshop externo de PMO', atestado:false, status:'pendente', justificada:true,  criadoEm:'2026-05-14T10:00:00', rhNome:null, rhAprovadoEm:null, motivoRejeicao:null },
];

function getAusencias() {
  try {
    const raw = localStorage.getItem(AUSENCIA_KEY);
    if (raw) return JSON.parse(raw);
    localStorage.setItem(AUSENCIA_KEY, JSON.stringify(AUSENCIA_SEED));
    return AUSENCIA_SEED;
  } catch { return AUSENCIA_SEED; }
}
function salvarAusencias(lista) { try { localStorage.setItem(AUSENCIA_KEY, JSON.stringify(lista)); } catch {} }
function addAusencia(a) { const l = getAusencias(); l.unshift(a); salvarAusencias(l); }
function updateAusencia(id, up) { salvarAusencias(getAusencias().map(a => a.id === id ? { ...a, ...up } : a)); }
function gerarIdAus() { return 'A' + Date.now().toString().slice(-7); }
function fmtData(iso) { if (!iso) return ''; const [y,m,d] = iso.split('-'); return `${d}/${m}/${y}`; }
function diasEntre(ini, fim) { return Math.max(1, Math.round((new Date(fim) - new Date(ini)) / 86400000) + 1); }
function gcalUrl(aus) {
  const title = encodeURIComponent(`[${aus.motivo}] ${aus.colaboradorNome}`);
  const ini = aus.dataInicio.replace(/-/g, '');
  const fd = new Date(aus.dataFim); fd.setDate(fd.getDate() + 1);
  const fim = fd.toISOString().slice(0, 10).replace(/-/g, '');
  return `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${title}&dates=${ini}/${fim}&add=${encodeURIComponent(CALENDARIO_EMAILS)}&sf=true`;
}

// ── Overrides manuais da escala ───────────────────────────────────────────────
const ESCALA_KEY = 'escalab_escala_overrides';
function getEscalaOverrides() { try { return JSON.parse(localStorage.getItem(ESCALA_KEY) || '[]'); } catch { return []; } }
function salvarEscalaOverrides(list) { try { localStorage.setItem(ESCALA_KEY, JSON.stringify(list)); } catch {} }
function setEscalaOverride(data, colaboradorId, ausente) {
  const list = getEscalaOverrides().filter(o => !(o.data === data && o.colaboradorId === colaboradorId));
  if (ausente !== null) list.push({ data, colaboradorId, ausente });
  salvarEscalaOverrides(list);
}
function getEfetivosDia(iso, ausencias, overrides) {
  const aprovadas = ausencias.filter(a => a.status === 'aprovado');
  const formaisIds = new Set(aprovadas.filter(a => a.dataInicio <= iso && a.dataFim >= iso).map(a => a.colaboradorId));
  overrides.filter(o => o.data === iso).forEach(o => { o.ausente ? formaisIds.add(o.colaboradorId) : formaisIds.delete(o.colaboradorId); });
  return formaisIds;
}

// ── FormAusencia (colaborador) ────────────────────────────────────────────────
const FormAusencia = ({ user, onSalvar, onCancel }) => {
  const [f, setF] = useState({ dataInicio:'', dataFim:'', motivo:'', motivoOutro:'', obs:'', atestado:false, atestadoNome:'', atestadoData:null });
  const [err, setErr] = useState('');
  const set = (k, v) => setF(p => ({ ...p, [k]: v }));
  const inp = { border:'1px solid var(--escalab-line)', borderRadius:8, padding:'9px 12px', fontSize:14, fontFamily:'var(--font-sans)', outline:'none', width:'100%', boxSizing:'border-box' };

  function handleArquivoAtestado(e) {
    const file = e.target.files?.[0];
    if (!file) return;
    if (file.size > 3 * 1024 * 1024) { setErr('Arquivo muito grande (máx 3MB).'); return; }
    const reader = new FileReader();
    reader.onload = () => {
      setF(p => ({ ...p, atestado:true, atestadoNome:file.name, atestadoData:reader.result }));
      setErr('');
    };
    reader.readAsDataURL(file);
  }

  function submit(e) {
    e.preventDefault();
    if (!f.dataInicio || !f.motivo) { setErr('Preencha a data e o motivo.'); return; }
    if (f.motivo === 'Outro' && !f.motivoOutro.trim()) { setErr('Descreva qual outro motivo.'); return; }
    if (f.dataFim && f.dataFim < f.dataInicio) { setErr('Data fim anterior à data início.'); return; }
    const colab = COLABORADORES.find(c => c.id === user.id);
    const motivoFinal = f.motivo === 'Outro' ? `Outro: ${f.motivoOutro.trim()}` : f.motivo;
    addAusencia({ id:gerarIdAus(), colaboradorId:user.id, colaboradorNome:colab?.nome||user.nome, dataInicio:f.dataInicio, dataFim:f.dataFim||f.dataInicio, motivo:motivoFinal, obs:f.obs, atestado:f.atestado, atestadoNome:f.atestadoNome||null, atestadoData:f.atestadoData||null, status:'pendente', justificada:true, criadoEm:new Date().toISOString(), rhNome:null, rhAprovadoEm:null, motivoRejeicao:null });
    onSalvar();
  }
  return (
    <form onSubmit={submit} style={{ display:'flex', flexDirection:'column', gap:14 }}>
      <div style={{ fontSize:12, color:'var(--escalab-mute)', background:'var(--escalab-paper)', borderLeft:'3px solid var(--escalab-brand)', borderRadius:6, padding:'10px 14px', lineHeight:1.5 }}>
        <strong style={{ color:'var(--escalab-brand-deep)' }}>Quando posso pedir uma Ausência?</strong>
        <div style={{ marginTop:4 }}>Use a Ausência para faltas com motivo previsto em lei (licença médica, gala, luto, etc.) ou imprevistos justificáveis. Para folgas previsíveis ou compromissos pessoais escolha <strong>Day Off</strong>. Sempre que possível, anexe o atestado abaixo.</div>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
        <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-slate)' }}>Data início *</span>
          <input type="date" value={f.dataInicio} onChange={e => set('dataInicio', e.target.value)} style={inp} required />
        </label>
        <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-slate)' }}>Data fim (opcional)</span>
          <input type="date" value={f.dataFim} min={f.dataInicio} onChange={e => set('dataFim', e.target.value)} style={inp} />
        </label>
      </div>
      <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
        <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-slate)' }}>Motivo *</span>
        <select value={f.motivo} onChange={e => set('motivo', e.target.value)} style={inp} required>
          <option value="">Selecione o motivo</option>
          {CLT_MOTIVOS.map(m => <option key={m} value={m}>{m}</option>)}
        </select>
      </label>
      {f.motivo === 'Outro' && (
        <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-slate)' }}>Qual outro? *</span>
          <input type="text" value={f.motivoOutro} onChange={e => set('motivoOutro', e.target.value)} placeholder="Descreva o motivo" style={inp} required />
        </label>
      )}
      <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
        <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-slate)' }}>Observações</span>
        <textarea value={f.obs} onChange={e => set('obs', e.target.value)} rows={2} style={{ ...inp, resize:'vertical' }} placeholder="Detalhes adicionais..." />
      </label>

      <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
        <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-slate)' }}>Atestado / documento comprobatório</span>
        {f.atestadoData ? (
          <div style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 12px', border:'1px solid var(--escalab-brand-soft)', borderRadius:8, background:'var(--escalab-brand-tint)' }}>
            <Icon name="file" size={15} />
            <span style={{ flex:1, fontSize:13, color:'var(--escalab-brand-deep)', fontWeight:600, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{f.atestadoNome}</span>
            <button type="button" onClick={() => setF(p => ({ ...p, atestado:false, atestadoNome:'', atestadoData:null }))} style={{ border:0, background:'transparent', cursor:'pointer', color:'#B3261E', padding:2 }}>
              <Icon name="close" size={14} />
            </button>
          </div>
        ) : (
          <label style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:6, padding:'18px', border:'1.5px dashed var(--escalab-line)', borderRadius:8, cursor:'pointer', color:'var(--escalab-mute)', fontSize:13, background:'#fff' }}>
            <Icon name="upload" size={18} />
            <span>Clique para anexar (PDF ou imagem, máx 3MB)</span>
            <input type="file" accept="image/*,.pdf" onChange={handleArquivoAtestado} style={{ display:'none' }} />
          </label>
        )}
        <label style={{ display:'flex', alignItems:'center', gap:8, cursor:'pointer', marginTop:6 }}>
          <input type="checkbox" checked={f.atestado && !f.atestadoData} onChange={e => set('atestado', e.target.checked || !!f.atestadoData)} disabled={!!f.atestadoData} />
          <span style={{ fontSize:12.5, color:'var(--escalab-slate)' }}>Tenho atestado mas vou apresentar fisicamente</span>
        </label>
      </div>

      {err && <div style={{ fontSize:13, color:'#B3261E', background:'#FDECEC', borderRadius:8, padding:'8px 12px' }}>{err}</div>}
      <div style={{ display:'flex', gap:10, justifyContent:'flex-end' }}>
        <button type="button" onClick={onCancel} style={{ padding:'9px 18px', border:'1px solid var(--escalab-line)', borderRadius:8, background:'#fff', cursor:'pointer', fontSize:13 }}>Cancelar</button>
        <button type="submit" style={{ padding:'9px 22px', border:0, borderRadius:8, background:'var(--escalab-brand)', color:'#fff', cursor:'pointer', fontWeight:600, fontSize:13 }}>Solicitar</button>
      </div>
    </form>
  );
};

// ── FormFaltaRH (admin) ───────────────────────────────────────────────────────
const FormFaltaRH = ({ user, onSalvar, onCancel }) => {
  const [f, setF] = useState({ colaboradorId:'', data:'', obs:'' });
  const [err, setErr] = useState('');
  const set = (k, v) => setF(p => ({ ...p, [k]: v }));
  const inp = { border:'1px solid var(--escalab-line)', borderRadius:8, padding:'9px 12px', fontSize:14, fontFamily:'var(--font-sans)', outline:'none', width:'100%', boxSizing:'border-box' };

  function submit(e) {
    e.preventDefault();
    if (!f.colaboradorId || !f.data) { setErr('Selecione o colaborador e a data.'); return; }
    const colab = COLABORADORES.find(c => c.id === Number(f.colaboradorId));
    addAusencia({ id:gerarIdAus(), colaboradorId:Number(f.colaboradorId), colaboradorNome:colab?.nome||'', dataInicio:f.data, dataFim:f.data, motivo:'Falta não justificada', obs:f.obs, atestado:false, status:'aprovado', justificada:false, criadoEm:new Date().toISOString(), rhNome:user.nome, rhAprovadoEm:new Date().toISOString(), motivoRejeicao:null });
    onSalvar();
  }
  return (
    <form onSubmit={submit} style={{ display:'flex', flexDirection:'column', gap:14 }}>
      <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
        <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-slate)' }}>Colaborador *</span>
        <select value={f.colaboradorId} onChange={e => set('colaboradorId', e.target.value)} style={inp} required>
          <option value="">Selecione...</option>
          {COLABORADORES.map(c => <option key={c.id} value={c.id}>{c.nome}</option>)}
        </select>
      </label>
      <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
        <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-slate)' }}>Data da falta *</span>
        <input type="date" value={f.data} onChange={e => set('data', e.target.value)} style={inp} required />
      </label>
      <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
        <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-slate)' }}>Observações</span>
        <textarea value={f.obs} onChange={e => set('obs', e.target.value)} rows={2} style={{ ...inp, resize:'vertical' }} placeholder="Contexto adicional..." />
      </label>
      {err && <div style={{ fontSize:13, color:'#B3261E' }}>{err}</div>}
      <div style={{ display:'flex', gap:10, justifyContent:'flex-end' }}>
        <button type="button" onClick={onCancel} style={{ padding:'9px 18px', border:'1px solid var(--escalab-line)', borderRadius:8, background:'#fff', cursor:'pointer', fontSize:13 }}>Cancelar</button>
        <button type="submit" style={{ padding:'9px 22px', border:0, borderRadius:8, background:'#B3261E', color:'#fff', cursor:'pointer', fontWeight:600, fontSize:13 }}>Registrar falta</button>
      </div>
    </form>
  );
};

// ── CardAusencia ──────────────────────────────────────────────────────────────
const CardAusencia = ({ aus, isAdmin, onAprovar, onRejeitar }) => {
  const st = STATUS_AUS[aus.status] || STATUS_AUS.pendente;
  const dias = diasEntre(aus.dataInicio, aus.dataFim);
  return (
    <div style={{ border:'1px solid var(--escalab-line)', borderRadius:12, padding:'14px 18px', background:'#fff', display:'flex', flexDirection:'column', gap:10 }}>
      <div style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
        <div style={{ flex:1 }}>
          {isAdmin && <div style={{ fontSize:11.5, fontWeight:700, color:'var(--escalab-brand-deep)', marginBottom:2 }}>{aus.colaboradorNome}</div>}
          <div style={{ fontSize:14, fontWeight:600, color:'var(--escalab-ink)' }}>{aus.motivo}</div>
          <div style={{ fontSize:12.5, color:'var(--escalab-mute)', marginTop:2 }}>
            {fmtData(aus.dataInicio)}{aus.dataFim !== aus.dataInicio ? ` → ${fmtData(aus.dataFim)}` : ''} · {dias} dia{dias > 1 ? 's' : ''}
          </div>
        </div>
        <div style={{ background:st.bg, color:st.color, border:`1px solid ${st.border}`, borderRadius:6, padding:'3px 9px', fontSize:11, fontWeight:600, flexShrink:0, whiteSpace:'nowrap' }}>{st.label}</div>
      </div>
      {aus.obs && <div style={{ fontSize:12.5, color:'var(--escalab-slate)', background:'var(--escalab-paper)', borderRadius:8, padding:'7px 10px' }}>{aus.obs}</div>}
      {aus.atestadoData ? (
        <a href={aus.atestadoData} download={aus.atestadoNome || 'atestado'} style={{ fontSize:11.5, color:'var(--escalab-brand-deep)', display:'inline-flex', alignItems:'center', gap:5, textDecoration:'none', fontWeight:600 }}>
          <Icon name="file" size={13} /> {aus.atestadoNome || 'Atestado anexado'}
          <span style={{ fontSize:10.5, color:'var(--escalab-mute)', fontWeight:500, marginLeft:4 }}>· baixar</span>
        </a>
      ) : aus.atestado && (
        <div style={{ fontSize:11.5, color:'var(--escalab-brand-deep)', display:'flex', alignItems:'center', gap:4 }}><Icon name="file" size={13} /> Atestado apresentado fisicamente</div>
      )}
      {!aus.justificada && <div style={{ fontSize:11.5, color:'#B3261E', fontWeight:600 }}>Falta não justificada · registrada pelo GC</div>}
      {aus.motivoRejeicao && <div style={{ fontSize:12, color:'#B3261E' }}>Motivo: {aus.motivoRejeicao}</div>}
      {isAdmin && aus.status === 'pendente' && (
        <div style={{ display:'flex', gap:8 }}>
          <button onClick={() => onAprovar(aus)} style={{ flex:1, padding:'8px', border:'1px solid #A3D9CE', borderRadius:8, background:'#E6F5F1', color:'#00836B', cursor:'pointer', fontWeight:600, fontSize:13 }}>Aprovar</button>
          <button onClick={() => onRejeitar(aus)} style={{ flex:1, padding:'8px', border:'1px solid #F4C7C3', borderRadius:8, background:'#FDECEC', color:'#B3261E', cursor:'pointer', fontWeight:600, fontSize:13 }}>Rejeitar</button>
        </div>
      )}
      {isAdmin && aus.status === 'aprovado' && (
        <a href={gcalUrl(aus)} target="_blank" rel="noopener noreferrer" style={{ display:'flex', alignItems:'center', gap:6, fontSize:12.5, color:'var(--escalab-brand)', textDecoration:'none', fontWeight:600 }}>
          <Icon name="calendar" size={13} /> Criar evento no Google Agenda
        </a>
      )}
    </div>
  );
};

// ── ModalRejeitar ─────────────────────────────────────────────────────────────
const ModalRejeitar = ({ aus, onConfirmar, onFechar }) => {
  const [motivo, setMotivo] = useState('');
  return (
    <div onClick={onFechar} style={{ position:'fixed', inset:0, background:'rgba(10,15,18,.45)', backdropFilter:'blur(4px)', zIndex:200, display:'flex', alignItems:'center', justifyContent:'center', padding:16 }}>
      <div onClick={e => e.stopPropagation()} style={{ background:'#fff', borderRadius:16, padding:24, width:'100%', maxWidth:440, boxShadow:'0 8px 32px rgba(0,0,0,.14)' }}>
        <div style={{ fontSize:15, fontWeight:700, marginBottom:4 }}>Rejeitar ausência</div>
        <div style={{ fontSize:13, color:'var(--escalab-mute)', marginBottom:16 }}>{aus.colaboradorNome} · {aus.motivo}</div>
        <textarea value={motivo} onChange={e => setMotivo(e.target.value)} rows={3} placeholder="Informe o motivo da rejeição..." style={{ width:'100%', border:'1px solid var(--escalab-line)', borderRadius:8, padding:'9px 12px', fontSize:14, fontFamily:'var(--font-sans)', outline:'none', resize:'vertical', boxSizing:'border-box' }} />
        <div style={{ display:'flex', gap:10, justifyContent:'flex-end', marginTop:16 }}>
          <button onClick={onFechar} style={{ padding:'9px 18px', border:'1px solid var(--escalab-line)', borderRadius:8, background:'#fff', cursor:'pointer', fontSize:13 }}>Cancelar</button>
          <button onClick={() => onConfirmar(motivo)} style={{ padding:'9px 18px', border:0, borderRadius:8, background:'#B3261E', color:'#fff', cursor:'pointer', fontWeight:600, fontSize:13 }}>Confirmar</button>
        </div>
      </div>
    </div>
  );
};

// ── EscalaPresencial (leitura) ────────────────────────────────────────────────
const EscalaPresencial = ({ ausencias, overrides = [], offsetSemana = 0 }) => {
  const hoje = new Date();
  const dias_nomes = ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'];
  const seg = new Date(hoje); seg.setDate(hoje.getDate() - ((hoje.getDay() + 6) % 7) + offsetSemana * 7);
  const dias = Array.from({ length:5 }, (_, i) => { const d = new Date(seg); d.setDate(seg.getDate() + i); return d; });
  const hojeIso = hoje.toISOString().slice(0, 10);

  return (
    <div style={{ display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:10 }}>
      {dias.map(d => {
        const iso = d.toISOString().slice(0, 10);
        const ausentesIds = getEfetivosDia(iso, ausencias, overrides);
        const ausentesColabs = COLABORADORES.filter(c => ausentesIds.has(c.id));
        const nPresentes = COLABORADORES.length - ausentesColabs.length;
        const ehHoje = iso === hojeIso;
        return (
          <div key={iso} style={{ border:`1px solid ${ehHoje ? 'var(--escalab-brand-soft)' : 'var(--escalab-line)'}`, borderRadius:12, background:ehHoje ? 'var(--escalab-brand-tint)' : '#fff', padding:'12px 10px' }}>
            <div style={{ fontSize:11, fontWeight:700, textTransform:'uppercase', color:ehHoje ? 'var(--escalab-brand)' : 'var(--escalab-mute)', marginBottom:2 }}>{dias_nomes[d.getDay()]}</div>
            <div style={{ fontSize:14, fontWeight:600, color:'var(--escalab-ink)', marginBottom:8 }}>{d.getDate()}/{d.getMonth() + 1}</div>
            <div style={{ fontSize:11.5, color:'var(--escalab-brand-deep)', fontWeight:600, marginBottom:ausentesColabs.length ? 6 : 0 }}>{nPresentes} presente{nPresentes !== 1 ? 's' : ''}</div>
            {ausentesColabs.length > 0 && (
              <div>
                <div style={{ fontSize:10.5, color:'#B3261E', fontWeight:600, marginBottom:3 }}>{ausentesColabs.length} ausente{ausentesColabs.length !== 1 ? 's' : ''}:</div>
                {ausentesColabs.slice(0, 3).map(c => <div key={c.id} style={{ fontSize:10.5, color:'#B3261E', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>• {c.nome.split(' ')[0]}</div>)}
                {ausentesColabs.length > 3 && <div style={{ fontSize:10.5, color:'var(--escalab-mute)' }}>+{ausentesColabs.length - 3} mais</div>}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
};

// ── EscalaEditora (admin) ─────────────────────────────────────────────────────
const EscalaEditora = ({ ausencias, overrides, onOverride }) => {
  const [offset, setOffset]   = useState(0);
  const [diaAberto, setDiaAberto] = useState(null);
  const [busca, setBusca]     = useState('');
  const hoje = new Date();
  const dias_nomes = ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'];
  const seg = new Date(hoje); seg.setDate(hoje.getDate() - ((hoje.getDay() + 6) % 7) + offset * 7);
  const dias = Array.from({ length:5 }, (_, i) => { const d = new Date(seg); d.setDate(seg.getDate() + i); return d; });
  const aprovadas = ausencias.filter(a => a.status === 'aprovado');

  function statusColabDia(iso, colaboradorId) {
    const formal = aprovadas.some(a => a.colaboradorId === colaboradorId && a.dataInicio <= iso && a.dataFim >= iso);
    const ov = overrides.find(o => o.data === iso && o.colaboradorId === colaboradorId);
    if (ov) return ov.ausente ? 'ausente_manual' : 'presente_manual';
    return formal ? 'ausente_formal' : 'presente';
  }

  function toggleColab(iso, colaboradorId) {
    const st = statusColabDia(iso, colaboradorId);
    if (st === 'presente') onOverride(iso, colaboradorId, true);
    else if (st === 'ausente_manual') onOverride(iso, colaboradorId, null);
    else if (st === 'ausente_formal') onOverride(iso, colaboradorId, false);
    else if (st === 'presente_manual') onOverride(iso, colaboradorId, null);
  }

  const colabsFiltrados = busca ? COLABORADORES.filter(c => c.nome.toLowerCase().includes(busca.toLowerCase())) : COLABORADORES;

  const fmtSemana = () => {
    const fim = new Date(seg); fim.setDate(seg.getDate() + 4);
    return `${seg.getDate()}/${seg.getMonth()+1} – ${fim.getDate()}/${fim.getMonth()+1}`;
  };

  return (
    <div>
      {/* Navegação de semana */}
      <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:16 }}>
        <button onClick={() => setOffset(o => o-1)} style={{ border:'1px solid var(--escalab-line)', borderRadius:8, padding:'6px 12px', background:'#fff', cursor:'pointer' }}><Icon name="chev_left" size={14}/></button>
        <span style={{ fontSize:13.5, fontWeight:600, flex:1, textAlign:'center' }}>{fmtSemana()}</span>
        <button onClick={() => setOffset(o => o+1)} style={{ border:'1px solid var(--escalab-line)', borderRadius:8, padding:'6px 12px', background:'#fff', cursor:'pointer' }}><Icon name="chev_right" size={14}/></button>
        {offset !== 0 && <button onClick={() => setOffset(0)} style={{ border:'1px solid var(--escalab-brand-soft)', borderRadius:8, padding:'6px 12px', background:'var(--escalab-brand-tint)', color:'var(--escalab-brand)', cursor:'pointer', fontSize:12, fontWeight:600 }}>Hoje</button>}
      </div>

      {/* Resumo visual */}
      <EscalaPresencial ausencias={ausencias} overrides={overrides} offsetSemana={offset} />

      {/* Seleção de dia para editar */}
      <div style={{ marginTop:18, marginBottom:10, display:'flex', gap:8, flexWrap:'wrap' }}>
        {dias.map(d => {
          const iso = d.toISOString().slice(0,10);
          const nAus = getEfetivosDia(iso, ausencias, overrides).size;
          return (
            <button key={iso} onClick={() => setDiaAberto(diaAberto === iso ? null : iso)} style={{ padding:'7px 14px', border:`1px solid ${diaAberto===iso ? 'var(--escalab-brand)' : 'var(--escalab-line)'}`, borderRadius:8, background:diaAberto===iso ? 'var(--escalab-brand-tint)' : '#fff', cursor:'pointer', fontSize:12.5, fontWeight:diaAberto===iso ? 700 : 400, color:diaAberto===iso ? 'var(--escalab-brand)' : 'var(--escalab-slate)' }}>
              {dias_nomes[d.getDay()]} {d.getDate()}/{d.getMonth()+1} {nAus > 0 && <span style={{ color:'#B3261E', fontWeight:700 }}>({nAus})</span>}
            </button>
          );
        })}
      </div>

      {/* Editor do dia */}
      {diaAberto && (() => {
        const overridesDia = overrides.filter(o => o.data === diaAberto);
        return (
          <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:14, padding:'16px 18px' }}>
            <div style={{ display:'flex', gap:10, alignItems:'center', marginBottom:14 }}>
              <span style={{ fontSize:13.5, fontWeight:700, flex:1 }}>Editando {diaAberto.split('-').reverse().join('/')}</span>
              <div style={{ display:'flex', alignItems:'center', gap:7, border:'1px solid var(--escalab-line)', borderRadius:8, padding:'5px 10px', background:'var(--escalab-paper)' }}>
                <Icon name="search" size={13}/>
                <input value={busca} onChange={e => setBusca(e.target.value)} placeholder="Buscar colaborador…" style={{ border:0, outline:0, fontSize:13, background:'transparent', fontFamily:'var(--font-sans)', width:160 }}/>
              </div>
            </div>
            <div style={{ display:'flex', gap:6, fontSize:11, color:'var(--escalab-mute)', marginBottom:12, flexWrap:'wrap' }}>
              <span style={{ background:'#E6F5F1', border:'1px solid #A3D9CE', borderRadius:5, padding:'2px 8px', color:'#00836B' }}>Verde = presente</span>
              <span style={{ background:'#FDECEC', border:'1px solid #F4C7C3', borderRadius:5, padding:'2px 8px', color:'#B3261E' }}>Vermelho = ausente</span>
              <span style={{ background:'#FFF7EB', border:'1px solid #FFD6A3', borderRadius:5, padding:'2px 8px', color:'#B56500' }}>Amarelo = ausência formal (clique p/ exceção)</span>
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:6, maxHeight:320, overflowY:'auto' }}>
              {colabsFiltrados.map(c => {
                const st = statusColabDia(diaAberto, c.id);
                const bgMap = { presente:'#E6F5F1', ausente_manual:'#FDECEC', ausente_formal:'#FFF7EB', presente_manual:'#E6F5F1' };
                const clrMap = { presente:'#00836B', ausente_manual:'#B3261E', ausente_formal:'#B56500', presente_manual:'#00836B' };
                const labelMap = { presente:'Presente', ausente_manual:'Ausente (manual)', ausente_formal:'Ausência formal', presente_manual:'Presente (exceção)' };
                return (
                  <div key={c.id} onClick={() => toggleColab(diaAberto, c.id)} style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 12px', borderRadius:9, background:bgMap[st], border:`1px solid ${bgMap[st]}`, cursor:'pointer', transition:'all .15s' }}>
                    <Avatar nome={c.nome} cor={c.cor} iniciais={c.iniciais} size={26}/>
                    <div style={{ flex:1 }}>
                      <div style={{ fontSize:13, fontWeight:600, color:'var(--escalab-ink)' }}>{c.nome}</div>
                      <div style={{ fontSize:11, color:'var(--escalab-mute)' }}>{c.setor}</div>
                    </div>
                    <span style={{ fontSize:11, fontWeight:700, color:clrMap[st], whiteSpace:'nowrap' }}>{labelMap[st]}</span>
                    {(st==='ausente_formal') && <span style={{ fontSize:10, color:'#B56500' }}>(clique p/ excluir da escala)</span>}
                  </div>
                );
              })}
            </div>
            {overridesDia.length > 0 && (
              <button onClick={() => { overridesDia.forEach(o => onOverride(o.data, o.colaboradorId, null)); }} style={{ marginTop:12, fontSize:12, color:'var(--escalab-mute)', border:'1px solid var(--escalab-line)', borderRadius:7, padding:'5px 12px', background:'#fff', cursor:'pointer' }}>
                Limpar todas as alterações manuais deste dia ({overridesDia.length})
              </button>
            )}
          </div>
        );
      })()}
    </div>
  );
};

// ── ScreenAusencia ────────────────────────────────────────────────────────────
const ScreenAusencia = ({ user }) => {
  const isAdmin = user.perfil === 'admin';
  const [ausencias,  setAusencias]  = useState(getAusencias);
  const [overrides,  setOverrides]  = useState(getEscalaOverrides);
  const [aba, setAba]               = useState(isAdmin ? 'todas' : 'minhas');
  const [showForm,   setShowForm]   = useState(false);
  const [showFalta,  setShowFalta]  = useState(false);
  const [rejeitando, setRejeitando] = useState(null);

  function reload() { setAusencias(getAusencias()); setOverrides(getEscalaOverrides()); }

  function handleAprovar(aus) {
    updateAusencia(aus.id, { status:'aprovado', rhNome:user.nome, rhAprovadoEm:new Date().toISOString() });
    reload();
  }
  function handleRejeitar(aus) { setRejeitando(aus); }
  function confirmarRejeicao(motivo) {
    updateAusencia(rejeitando.id, { status:'rejeitado', rhNome:user.nome, rhAprovadoEm:new Date().toISOString(), motivoRejeicao:motivo });
    reload(); setRejeitando(null);
  }
  function handleOverride(data, colaboradorId, ausente) {
    setEscalaOverride(data, colaboradorId, ausente);
    setOverrides(getEscalaOverrides());
  }

  const minhas    = ausencias.filter(a => a.colaboradorId === user.id);
  const pendentes = ausencias.filter(a => a.status === 'pendente');
  const lista     = aba === 'minhas' ? minhas : ausencias;

  const tabStyle = id => ({
    padding:'8px 18px', border:0, cursor:'pointer', fontFamily:'var(--font-sans)', fontSize:13,
    fontWeight:aba === id ? 700 : 400, background:'transparent',
    color:aba === id ? 'var(--escalab-brand)' : 'var(--escalab-mute)',
    borderBottom:`2px solid ${aba === id ? 'var(--escalab-brand)' : 'transparent'}`, transition:'all .15s',
  });

  return (
    <div className="fade-in" style={{ maxWidth:960 }}>
      {/* Header */}
      <div style={{ display:'flex', alignItems:'flex-start', gap:12, marginBottom:22, flexWrap:'wrap' }}>
        <div style={{ flex:1 }}>
          <h2 style={{ margin:0, fontSize:22, fontWeight:800 }}>Ausências</h2>
          <p style={{ margin:'4px 0 0', fontSize:13.5, color:'var(--escalab-mute)' }}>Afastamentos por questões médicas, eventos, falta na escala, falta no trabalho home office</p>
        </div>
        <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
          {!isAdmin && !showForm && aba !== 'escala' && (
            <button onClick={() => { setShowForm(true); setShowFalta(false); }} style={{ padding:'9px 18px', border:0, borderRadius:8, background:'var(--escalab-brand)', color:'#fff', cursor:'pointer', fontWeight:600, fontSize:13 }}>
              + Solicitar ausência
            </button>
          )}
          {isAdmin && aba !== 'escala' && (
            <button onClick={() => { setShowFalta(v => !v); setShowForm(false); }} style={{ padding:'9px 18px', border:'1px solid #F4C7C3', borderRadius:8, background:showFalta ? '#FDECEC' : '#fff', color:'#B3261E', cursor:'pointer', fontWeight:600, fontSize:13 }}>
              + Registrar falta
            </button>
          )}
        </div>
      </div>

      {/* Formulário colaborador */}
      {showForm && aba !== 'escala' && (
        <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:14, padding:'20px 22px', marginBottom:22 }}>
          <div style={{ fontSize:14, fontWeight:700, marginBottom:16 }}>Nova solicitação de ausência</div>
          <FormAusencia user={user} onSalvar={() => { reload(); setShowForm(false); setAba('minhas'); }} onCancel={() => setShowForm(false)} />
        </div>
      )}

      {/* Formulário RH */}
      {showFalta && aba !== 'escala' && (
        <div style={{ background:'#fff', border:'1px solid #F4C7C3', borderRadius:14, padding:'20px 22px', marginBottom:22 }}>
          <div style={{ fontSize:14, fontWeight:700, color:'#B3261E', marginBottom:16 }}>Registrar falta não justificada</div>
          <FormFaltaRH user={user} onSalvar={() => { reload(); setShowFalta(false); }} onCancel={() => setShowFalta(false)} />
        </div>
      )}

      {/* Tabs */}
      <div style={{ display:'flex', borderBottom:'1px solid var(--escalab-line)', marginBottom:20 }}>
        {isAdmin && (
          <button style={tabStyle('todas')} onClick={() => setAba('todas')}>
            Todas {pendentes.length > 0 && <span style={{ marginLeft:5, background:'#B56500', color:'#fff', borderRadius:999, padding:'1px 7px', fontSize:10, fontWeight:700 }}>{pendentes.length}</span>}
          </button>
        )}
        <button style={tabStyle('minhas')} onClick={() => setAba('minhas')}>{isAdmin ? 'Minha conta' : 'Minhas ausências'}</button>
        {isAdmin && (
          <button style={tabStyle('escala')} onClick={() => setAba('escala')}>
            Escala presencial {overrides.length > 0 && <span style={{ marginLeft:5, background:'var(--escalab-brand)', color:'#fff', borderRadius:999, padding:'1px 7px', fontSize:10, fontWeight:700 }}>{overrides.length}</span>}
          </button>
        )}
      </div>

      {/* Conteúdo por aba */}
      {aba !== 'escala' && (
        lista.length === 0
          ? <div style={{ textAlign:'center', padding:'48px 0', color:'var(--escalab-mute)', fontSize:14 }}>Nenhuma ausência registrada.</div>
          : <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
              {lista.map(aus => <CardAusencia key={aus.id} aus={aus} isAdmin={isAdmin} onAprovar={handleAprovar} onRejeitar={handleRejeitar} />)}
            </div>
      )}

      {/* Escala: edição para admin, leitura para demais */}
      {aba === 'escala' && (
        <div>
          {isAdmin
            ? <EscalaEditora ausencias={ausencias} overrides={overrides} onOverride={handleOverride} />
            : (
              <div>
                <div style={{ fontSize:12.5, color:'var(--escalab-mute)', marginBottom:14 }}>Semana atual · ausências aprovadas removidas automaticamente</div>
                <EscalaPresencial ausencias={ausencias} overrides={overrides} />
              </div>
            )
          }
        </div>
      )}

      {/* Escala rápida só para GC (admin) · colab/gestor veem no Intranet */}
      {isAdmin && aba !== 'escala' && ausencias.length > 0 && (
        <div style={{ marginTop:32 }}>
          <div style={{ fontSize:14, fontWeight:700, marginBottom:10 }}>Escala da semana</div>
          <EscalaPresencial ausencias={ausencias} overrides={overrides} />
        </div>
      )}

      {rejeitando && <ModalRejeitar aus={rejeitando} onConfirmar={confirmarRejeicao} onFechar={() => setRejeitando(null)} />}
    </div>
  );
};

window.ScreenAusencia = ScreenAusencia;
window.getAusencias   = getAusencias;