// ═══════════════════════════════════════════════════════════════
// SCREEN · Férias & Day Off · Kanban + saldo + aprovação
// ═══════════════════════════════════════════════════════════════

// ── Banco de férias ─────────────────────────────────────────────────────────

const HOJE_BF = new Date().toISOString().slice(0, 10);

const BANCO_FERIAS_MOCK = [
  { colaboradorId: 7,  periodo: '2025-2026', saldo: 30, vencimento: '2026-05-28' },
  { colaboradorId: 2,  periodo: '2025-2026', saldo: 30, vencimento: '2026-06-10' },
  { colaboradorId: 3,  periodo: '2025-2026', saldo: 30, vencimento: '2026-06-20' },
  { colaboradorId: 8,  periodo: '2025-2026', saldo: 30, vencimento: '2026-07-05' },
  { colaboradorId: 6,  periodo: '2025-2026', saldo: 30, vencimento: '2026-07-20' },
  { colaboradorId: 4,  periodo: '2025-2026', saldo: 30, vencimento: '2026-08-01' },
  { colaboradorId: 11, periodo: '2025-2026', saldo: 30, vencimento: '2026-08-10' },
  { colaboradorId: 1,  periodo: '2025-2026', saldo: 30, vencimento: '2026-09-15' },
  { colaboradorId: 5,  periodo: '2025-2026', saldo: 30, vencimento: '2026-10-01' },
  { colaboradorId: 9,  periodo: '2025-2026', saldo: 30, vencimento: '2026-10-15' },
  { colaboradorId: 14, periodo: '2025-2026', saldo: 30, vencimento: '2026-11-01' },
  { colaboradorId: 15, periodo: '2025-2026', saldo: 20, vencimento: '2026-11-15' },
  { colaboradorId: 17, periodo: '2025-2026', saldo: 30, vencimento: '2026-11-20' },
  { colaboradorId: 18, periodo: '2025-2026', saldo: 30, vencimento: '2026-12-01' },
  { colaboradorId: 22, periodo: '2025-2026', saldo: 30, vencimento: '2026-12-15' },
];

// ── Day Off ─────────────────────────────────────────────────────────────────

const DAYOFF_KEY = 'escalab_dayoff';
const DAYOFF_SALDO_KEY = 'escalab_dayoff_saldos';
const DAYOFF_SALDO_ANO = 0; // PDF Site AVD 5 · item 27: padrão é 0 · saldo cresce via aniversário ou compensatório aprovado pelo GC
// Tipos restritos de Day Off (Site AVD 6)
const DAYOFF_TIPOS = [
  { id:'aniversario',   label:'Day Off de aniversário',          emoji:'🎂', cor:'#B56500', bg:'#FFF7EB' },
  { id:'compensatorio', label:'Compensatório · horas extras',     emoji:'⏱️', cor:'#1F4A8A', bg:'#EEF3FA' },
];
// Motivos para registrar saldo compensatório
const DAYOFF_SALDO_MOTIVOS = [
  { id:'fds',           label:'Trabalho em final de semana'             },
  { id:'feriado',       label:'Trabalho em feriado'                     },
  { id:'projeto_extra', label:'Projetos atípicos com muitas horas extras' },
];
// Registros de saldo (cada um adiciona X dias depois de aprovação GC)
const DAYOFF_REGISTROS_KEY = 'escalab_dayoff_registros_saldo';
function getDayOffRegistrosSaldo() { try { return JSON.parse(localStorage.getItem(DAYOFF_REGISTROS_KEY) || '[]'); } catch { return []; } }
function salvarDayOffRegistrosSaldo(l) { try { localStorage.setItem(DAYOFF_REGISTROS_KEY, JSON.stringify(l)); } catch {} }
function addRegistroSaldoDO(r) { const l = getDayOffRegistrosSaldo(); l.unshift(r); salvarDayOffRegistrosSaldo(l); }
function updateRegistroSaldoDO(id, up) { salvarDayOffRegistrosSaldo(getDayOffRegistrosSaldo().map(r => r.id === id ? { ...r, ...up } : r)); }
// Saldo extra acumulado por registros aprovados pelo GC
function getDayOffSaldoExtra(colaboradorId) {
  return getDayOffRegistrosSaldo()
    .filter(r => r.colaboradorId === colaboradorId && r.status === 'aprovado')
    .reduce((s, r) => s + (r.dias || 0), 0);
}
// Helper Google Agenda (compartilhado entre Férias e DayOff)
// Quando o GC dispara, convida automaticamente os grupos de e-mail do Escalab
const EMAILS_GRUPOS_ESCALAB = 'associadosescalab@googlegroups.com,fixosescalab@googlegroups.com';
function gcalFromInicioFim(titulo, inicio, fim, opts = {}) {
  const t = encodeURIComponent(titulo);
  const i = inicio.replace(/-/g, '');
  const fd = new Date(fim + 'T00:00:00'); fd.setDate(fd.getDate() + 1);
  const f = fd.toISOString().slice(0, 10).replace(/-/g, '');
  const params = new URLSearchParams();
  params.set('action', 'TEMPLATE');
  params.set('text', decodeURIComponent(t));
  params.set('dates', `${i}/${f}`);
  if (opts.convidarGrupos) params.set('add', EMAILS_GRUPOS_ESCALAB);
  if (opts.descricao) params.set('details', opts.descricao);
  return `https://calendar.google.com/calendar/render?${params.toString()}`;
}

function getDayOffSaldos() { try { return JSON.parse(localStorage.getItem(DAYOFF_SALDO_KEY) || '{}'); } catch { return {}; } }
function setSaldoDayOff(colaboradorId, total) {
  const map = getDayOffSaldos();
  if (total === null) delete map[colaboradorId];
  else map[colaboradorId] = Number(total);
  localStorage.setItem(DAYOFF_SALDO_KEY, JSON.stringify(map));
}
function getSaldoTotalDayOff(colaboradorId) {
  const map = getDayOffSaldos();
  return map[colaboradorId] != null ? map[colaboradorId] : DAYOFF_SALDO_ANO;
}

const STATUS_DAYOFF = {
  pendente:  { label: 'Aguardando GC', tone: 'warn',    color: '#B56500', bg: '#FFF7EB' },
  aprovado:  { label: 'Aprovado',       tone: 'success', color: '#00836B', bg: '#E6F5F1' },
  rejeitado: { label: 'Rejeitado',      tone: 'danger',  color: '#B3261E', bg: '#FDECEC' },
};

const DAYOFF_INICIAL = [
  { id: 'DO001', colaboradorId: 15, data: '2026-05-20', obs: 'Compromisso pessoal', status: 'aprovado',  criadoEm: '2026-05-08T09:00:00', rhNome: 'Maria Paula Duarte De Oliveira', rhAprovadoEm: '2026-05-09T10:00:00', motivoRejeicao: null },
  { id: 'DO002', colaboradorId: 10, data: '2026-05-22', obs: '',                    status: 'pendente',  criadoEm: '2026-05-11T14:00:00', rhNome: null, rhAprovadoEm: null, motivoRejeicao: null },
];

function getDayOffs() {
  try {
    const raw = localStorage.getItem(DAYOFF_KEY);
    if (raw) return JSON.parse(raw);
    localStorage.setItem(DAYOFF_KEY, JSON.stringify(DAYOFF_INICIAL));
    return DAYOFF_INICIAL;
  } catch { return DAYOFF_INICIAL; }
}

function salvarDayOffs(lista) {
  try { localStorage.setItem(DAYOFF_KEY, JSON.stringify(lista)); } catch {}
}

function addDayOff(d) {
  const lista = getDayOffs();
  lista.unshift(d);
  salvarDayOffs(lista);
}

function updateDayOff(id, updates) {
  const lista = getDayOffs().map(d => d.id === id ? { ...d, ...updates } : d);
  salvarDayOffs(lista);
}

function getDayOffSaldo(colaboradorId, dayoffs) {
  const ano = new Date().getFullYear();
  const usados = (dayoffs || getDayOffs()).filter(d =>
    d.colaboradorId === colaboradorId &&
    d.status === 'aprovado' &&
    (d.data || '').startsWith(String(ano))
  ).length;
  const extra = getDayOffSaldoExtra(colaboradorId);
  const total = getSaldoTotalDayOff(colaboradorId) + extra;
  return { total, usados, disponivel: Math.max(0, total - usados), extra };
}

// ── Período aquisitivo dinâmico (a partir da data de admissão) ───────────────
// Retorna o intervalo [inicio, fim] do período aquisitivo vigente em ref (Date).
function getDataAdmissaoColab(colaboradorId) {
  try {
    const org = JSON.parse(localStorage.getItem(`escalab_dados_org_${colaboradorId}`) || '{}');
    if (org.dataContratacao) return org.dataContratacao;
    const adm = JSON.parse(localStorage.getItem(`escalab_dados_assinatura_${colaboradorId}`) || '{}');
    if (adm.dataAdmissao) return adm.dataAdmissao;
  } catch {}
  // Fallback: deriva de tempoEmpresa (meses) do colaborador para popular demonstrativo
  const c = (typeof COLABORADORES !== 'undefined') ? COLABORADORES.find(x => x.id === colaboradorId) : null;
  if (c && Number(c.tempoEmpresa) > 0) {
    const d = new Date(); d.setMonth(d.getMonth() - Number(c.tempoEmpresa));
    return d.toISOString().slice(0,10);
  }
  return null;
}
function getPeriodoAquisitivo(colaboradorId, refData) {
  const adm = getDataAdmissaoColab(colaboradorId);
  if (!adm) return null;
  const admDate = new Date(adm + 'T00:00:00');
  const ref = refData ? new Date(refData + 'T00:00:00') : new Date();
  // Quantos anos completos desde admissão?
  let anos = ref.getFullYear() - admDate.getFullYear();
  const aniv = new Date(admDate); aniv.setFullYear(admDate.getFullYear() + anos);
  if (ref < aniv) anos -= 1;
  const inicio = new Date(admDate); inicio.setFullYear(admDate.getFullYear() + anos);
  const fim = new Date(inicio); fim.setFullYear(inicio.getFullYear() + 1); fim.setDate(fim.getDate() - 1);
  const fmt = d => d.toISOString().slice(0, 10);
  return { admissao: adm, inicio: fmt(inicio), fim: fmt(fim), label: `${fmt(inicio).split('-').reverse().join('/')} → ${fmt(fim).split('-').reverse().join('/')}` };
}
function listarPeriodosAquisitivos(colaboradorId) {
  const adm = getDataAdmissaoColab(colaboradorId);
  if (!adm) return [];
  const admDate = new Date(adm + 'T00:00:00');
  const hoje = new Date();
  let anos = 0;
  const out = [];
  while (true) {
    const ini = new Date(admDate); ini.setFullYear(admDate.getFullYear() + anos);
    const fim = new Date(ini); fim.setFullYear(ini.getFullYear() + 1); fim.setDate(fim.getDate() - 1);
    if (ini > hoje) break;
    const fmt = d => d.toISOString().slice(0, 10);
    out.push({ ano: anos + 1, inicio: fmt(ini), fim: fmt(fim), label: `${fmt(ini).split('-').reverse().join('/')} → ${fmt(fim).split('-').reverse().join('/')}` });
    anos++;
    if (anos > 50) break;
  }
  return out;
}

// ── Demonstrativo de férias (histórico por período aquisitivo) ──────────────
// Soma dias de férias aprovadas que caem dentro de cada período aquisitivo.
function getDemonstrativoFerias(colaboradorId, ferias) {
  const periodos = listarPeriodosAquisitivos(colaboradorId);
  if (!periodos.length) return [];
  const aprovadas = (ferias || []).filter(f => f.colaboradorId === colaboradorId && f.status === 'aprovada');
  const hoje = new Date().toISOString().slice(0, 10);
  return periodos.map(p => {
    const gozados = aprovadas.reduce((s, f) => {
      const iniOver = f.inicio > p.inicio ? f.inicio : p.inicio;
      const fimOver = f.fim   < p.fim    ? f.fim    : p.fim;
      if (iniOver > fimOver) return s;
      const d = Math.round((new Date(fimOver + 'T00:00:00') - new Date(iniOver + 'T00:00:00')) / 86400000) + 1;
      return s + Math.max(0, d);
    }, 0);
    const direito = 30;
    const saldo = Math.max(0, direito - gozados);
    let status;
    if (p.inicio <= hoje && p.fim >= hoje) status = 'vigente';
    else if (p.fim < hoje) status = saldo === 0 ? 'concluido' : 'vencido';
    else status = 'futuro';
    return { ...p, direito, gozados, saldo, status };
  });
}
const DEMONSTRATIVO_STATUS = {
  vigente:   { label: 'Vigente',     cor: '#1F4A8A', bg: '#EEF3FA' },
  concluido: { label: 'Concluído',   cor: '#00836B', bg: '#E6F5F1' },
  vencido:   { label: 'Vencido',     cor: '#B3261E', bg: '#FDECEC' },
  futuro:    { label: 'Próximo',     cor: '#6B3FA0', bg: '#F4EEFF' },
};

// ── Saldo de férias ──────────────────────────────────────────────────────────

function getSaldoFerias(colaboradorId, ferias) {
  let banco = BANCO_FERIAS_MOCK.find(b => b.colaboradorId === colaboradorId);
  if (!banco) {
    // Fallback: deriva do período aquisitivo da admissão (30 dias padrão CLT)
    const p = typeof getPeriodoAquisitivo === 'function' ? getPeriodoAquisitivo(colaboradorId) : null;
    if (p) {
      banco = {
        colaboradorId,
        periodo: `${new Date(p.inicio).getFullYear()}-${new Date(p.fim).getFullYear()}`,
        saldo: 30,
        vencimento: p.fim,
      };
    } else {
      // Mesmo sem admissão, devolve um saldo padrão para evitar tela vazia para o gestor
      banco = { colaboradorId, periodo: '·', saldo: 30, vencimento: null };
    }
  }
  const jaUsado = (ferias || []).filter(f =>
    f.colaboradorId === colaboradorId &&
    ['aprovada', 'pendente_lider', 'pendente_rh'].includes(f.status)
  ).reduce((s, f) => s + (f.dias || 0), 0);
  const disponivel = Math.max(0, banco.saldo - jaUsado);
  return { total: banco.saldo, usado: jaUsado, disponivel, vencimento: banco.vencimento, periodo: banco.periodo };
}

function diasParaVencimento(vencimento) {
  return Math.round((new Date(vencimento + 'T00:00:00') - new Date(HOJE_BF + 'T00:00:00')) / 86400000);
}

function getUrgencia(diasRestantes) {
  if (diasRestantes <= 30) return { label: 'Urgente',  tone: 'danger', cor: '#B3261E', bg: '#FDECEC', dias: diasRestantes };
  if (diasRestantes <= 60) return { label: 'Alerta',   tone: 'warn',   cor: '#B56500', bg: '#FFF7EB', dias: diasRestantes };
  if (diasRestantes <= 90) return { label: 'Lembrete', tone: 'info',   cor: '#1F4A8A', bg: '#EEF3FA', dias: diasRestantes };
  return null;
}

// ── BancoFeriasView ──────────────────────────────────────────────────────────

const BancoFeriasView = ({ ferias }) => {
  const [filtroUrg, setFiltroUrg] = useState('todos');

  const bancoCom = BANCO_FERIAS_MOCK.map(b => {
    const colab = COLABORADORES.find(c => c.id === b.colaboradorId);
    const diasUsados = ferias.filter(f => f.colaboradorId === b.colaboradorId && f.status === 'aprovada').reduce((s, f) => s + (f.dias || 0), 0);
    const saldoLivre = Math.max(0, b.saldo - diasUsados);
    const diasRestantes = diasParaVencimento(b.vencimento);
    const urgencia = getUrgencia(diasRestantes);
    return { ...b, colab, diasUsados, saldoLivre, diasRestantes, urgencia };
  }).sort((a, b) => a.diasRestantes - b.diasRestantes);

  const filtrado = filtroUrg === 'todos' ? bancoCom
    : filtroUrg === 'urgente'  ? bancoCom.filter(b => b.urgencia?.label === 'Urgente')
    : filtroUrg === 'alerta'   ? bancoCom.filter(b => b.urgencia?.label === 'Alerta')
    : filtroUrg === 'lembrete' ? bancoCom.filter(b => b.urgencia?.label === 'Lembrete')
    : bancoCom.filter(b => !b.urgencia);

  const agrupLembretes = [
    { threshold: 30, label: '30 dias', cor: '#B3261E', items: bancoCom.filter(b => b.diasRestantes > 0 && b.diasRestantes <= 30  && b.saldoLivre > 0) },
    { threshold: 60, label: '60 dias', cor: '#B56500', items: bancoCom.filter(b => b.diasRestantes > 30 && b.diasRestantes <= 60 && b.saldoLivre > 0) },
    { threshold: 90, label: '90 dias', cor: '#1F4A8A', items: bancoCom.filter(b => b.diasRestantes > 60 && b.diasRestantes <= 90 && b.saldoLivre > 0) },
  ].filter(g => g.items.length > 0);

  return (
    <div style={{ animation: 'fadeIn .2s' }}>
      {agrupLembretes.length > 0 && (
        <div style={{ marginBottom: 20 }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 10 }}>Lembretes automáticos</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {agrupLembretes.map(g => (
              <div key={g.threshold} style={{ background: '#fff', border: `1px solid ${g.cor}44`, borderRadius: 12, padding: '12px 16px', display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <div style={{ width: 36, height: 36, borderRadius: 9, background: g.threshold <= 30 ? '#FDECEC' : g.threshold <= 60 ? '#FFF7EB' : '#EEF3FA', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <div style={{ color: g.cor }}><Icon name="bell" size={16} /></div>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 4 }}>
                    <span style={{ fontSize: 13.5, fontWeight: 600, color: g.cor }}>Faltam {g.label} para vencer</span>
                    <Tag tone={g.threshold <= 30 ? 'danger' : g.threshold <= 60 ? 'warn' : 'info'} size="xs">{g.items.length} colab.</Tag>
                  </div>
                  <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                    {g.items.map(b => (
                      <span key={b.colaboradorId} style={{ fontSize: 12, color: 'var(--escalab-slate)', background: 'var(--escalab-paper)', borderRadius: 6, padding: '2px 8px', border: '1px solid var(--escalab-line)' }}>
                        {b.colab?.nome.split(' ')[0]} ({b.saldoLivre}d)
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      <div style={{ display: 'flex', gap: 6, marginBottom: 14, flexWrap: 'wrap' }}>
        {[
          { id: 'todos',    label: 'Todos',   count: bancoCom.length },
          { id: 'urgente',  label: 'Urgente', count: bancoCom.filter(b => b.urgencia?.label === 'Urgente').length },
          { id: 'alerta',   label: 'Alerta',  count: bancoCom.filter(b => b.urgencia?.label === 'Alerta').length  },
          { id: 'lembrete', label: 'Lembrete',count: bancoCom.filter(b => b.urgencia?.label === 'Lembrete').length },
          { id: 'ok',       label: 'Em dia',  count: bancoCom.filter(b => !b.urgencia).length },
        ].map(f => (
          <button key={f.id} onClick={() => setFiltroUrg(f.id)} style={{
            border: `1px solid ${filtroUrg === f.id ? 'var(--escalab-brand)' : 'var(--escalab-line)'}`,
            background: filtroUrg === f.id ? 'var(--escalab-brand-tint)' : '#fff',
            color: filtroUrg === f.id ? 'var(--escalab-brand-deep)' : 'var(--escalab-slate)',
            borderRadius: 7, padding: '6px 12px', fontSize: 12.5, cursor: 'pointer',
            fontFamily: 'var(--font-sans)', fontWeight: filtroUrg === f.id ? 600 : 400, transition: 'all .15s',
            display: 'flex', gap: 6, alignItems: 'center',
          }}>
            {f.label}
            {f.count > 0 && <span style={{ fontSize: 11, fontWeight: 700, background: filtroUrg === f.id ? 'var(--escalab-brand)' : 'var(--escalab-line)', color: filtroUrg === f.id ? '#fff' : 'var(--escalab-mute)', borderRadius: 999, padding: '0 5px' }}>{f.count}</span>}
          </button>
        ))}
      </div>

      <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14, overflow: 'hidden' }}>
        <table>
          <thead>
            <tr>
              <th>Colaborador</th>
              <th style={{ textAlign: 'center' }}>Período</th>
              <th style={{ textAlign: 'center' }}>Saldo total</th>
              <th style={{ textAlign: 'center' }}>Dias usados</th>
              <th style={{ textAlign: 'center' }}>Saldo livre</th>
              <th>Vence em</th>
              <th style={{ textAlign: 'center' }}>Situação</th>
            </tr>
          </thead>
          <tbody>
            {filtrado.map(b => {
              const pct = ((b.saldoLivre / b.saldo) * 100);
              const cor = b.urgencia?.cor || 'var(--escalab-brand)';
              return (
                <tr key={b.colaboradorId}>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                      <div style={{ width: 30, height: 30, borderRadius: '50%', background: b.colab?.cor || '#ccc', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 11, flexShrink: 0 }}>{b.colab?.iniciais}</div>
                      <div>
                        <div style={{ fontSize: 13.5, fontWeight: 500 }}>{b.colab?.nome.split(' ').slice(0, 2).join(' ')}</div>
                        <div style={{ fontSize: 11, color: 'var(--escalab-mute)' }}>{b.colab?.cargo}</div>
                      </div>
                    </div>
                  </td>
                  <td style={{ textAlign: 'center' }}><Tag tone="neutral" size="xs">{b.periodo}</Tag></td>
                  <td style={{ textAlign: 'center', fontSize: 13.5, fontWeight: 600 }}>{b.saldo}d</td>
                  <td style={{ textAlign: 'center', fontSize: 13.5, color: 'var(--escalab-slate)' }}>{b.diasUsados}d</td>
                  <td style={{ textAlign: 'center' }}>
                    <div style={{ display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'center' }}>
                      <div style={{ width: 48, height: 5, background: 'var(--escalab-line)', borderRadius: 999, overflow: 'hidden' }}>
                        <div style={{ width: pct + '%', height: '100%', background: cor, borderRadius: 999 }} />
                      </div>
                      <span style={{ fontSize: 13, fontWeight: 700, color: cor, minWidth: 24 }}>{b.saldoLivre}d</span>
                    </div>
                  </td>
                  <td>
                    <div style={{ fontSize: 13, fontWeight: b.urgencia ? 600 : 400, color: b.urgencia ? b.urgencia.cor : 'var(--escalab-slate)' }}>
                      {b.vencimento.split('-').reverse().join('/')}
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--escalab-mute)', marginTop: 1 }}>
                      {b.diasRestantes > 0 ? `${b.diasRestantes} dias` : 'Expirado'}
                    </div>
                  </td>
                  <td style={{ textAlign: 'center' }}>
                    {b.urgencia ? <Tag tone={b.urgencia.tone} size="xs">{b.urgencia.label} · {b.urgencia.dias}d</Tag> : <Tag tone="success" size="xs">Em dia</Tag>}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};

// ── Calendário mensal ────────────────────────────────────────────────────────

const MESES = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];
const DIAS_SEMANA = ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'];

const STATUS_FERIAS = {
  pendente_lider: { label: 'Aguardando líder', tone: 'warn',    color: '#B56500', bg: '#FFF7EB' },
  pendente_rh:    { label: 'Aguardando GC',    tone: 'info',    color: '#1F4A8A', bg: '#EEF3FA' },
  aprovada:       { label: 'Aprovada',          tone: 'success', color: '#00836B', bg: '#E6F5F1' },
  rejeitada:      { label: 'Rejeitada',         tone: 'danger',  color: '#B3261E', bg: '#FDECEC' },
};

const COLUNAS_KANBAN = [
  { id: 'pendente_lider', label: 'Aguardando Líder' },
  { id: 'pendente_rh',    label: 'Aguardando GC'    },
  { id: 'aprovada',       label: 'Aprovada'          },
  { id: 'rejeitada',      label: 'Rejeitada'         },
];

function diasEntre(inicio, fim) {
  const d1 = new Date(inicio + 'T00:00:00');
  const d2 = new Date(fim   + 'T00:00:00');
  return Math.max(0, Math.round((d2 - d1) / 86400000) + 1);
}

function dataStr(isoStr) {
  if (!isoStr) return '·';
  const [y, m, d] = isoStr.slice(0, 10).split('-');
  return `${d}/${m}/${y}`;
}

function gerarIdFerias() {
  return 'FER' + Date.now().toString(36).toUpperCase();
}

// ── Calendário com seleção de datas ─────────────────────────────────────────

const CalendarioMes = ({ ferias, dayoffs, mes, ano, onPrev, onNext, selecionado, onDayClick, modoSelecao }) => {
  const primeiro = new Date(ano, mes, 1);
  const total    = new Date(ano, mes + 1, 0).getDate();
  const inicio   = primeiro.getDay();

  const celulas = [];
  for (let i = 0; i < inicio; i++) celulas.push(null);
  for (let d = 1; d <= total; d++) celulas.push(d);

  const hoje = new Date().toISOString().slice(0, 10);

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
        <button onClick={onPrev} style={{ border: '1px solid var(--escalab-line)', background: '#fff', borderRadius: 8, padding: '6px 11px', cursor: 'pointer', color: 'var(--escalab-slate)' }}>
          <Icon name="chev_left" size={14} />
        </button>
        <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--escalab-ink)', minWidth: 160, textAlign: 'center' }}>{MESES[mes]} {ano}</span>
        <button onClick={onNext} style={{ border: '1px solid var(--escalab-line)', background: '#fff', borderRadius: 8, padding: '6px 11px', cursor: 'pointer', color: 'var(--escalab-slate)' }}>
          <Icon name="chev_right" size={14} />
        </button>
      </div>

      {modoSelecao && (
        <div style={{ marginBottom: 12, padding: '8px 12px', background: 'var(--escalab-brand-tint)', borderRadius: 8, fontSize: 12.5, color: 'var(--escalab-brand-deep)' }}>
          {!selecionado?.inicio ? 'Clique para selecionar a data de início' : !selecionado?.fim ? 'Agora clique para selecionar a data de fim' : `${dataStr(selecionado.inicio)} → ${dataStr(selecionado.fim)} · ${diasEntre(selecionado.inicio, selecionado.fim)} dias`}
        </div>
      )}

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 3 }}>
        {DIAS_SEMANA.map(d => (
          <div key={d} style={{ textAlign: 'center', fontSize: 10, fontWeight: 700, letterSpacing: '.06em', color: 'var(--escalab-mute)', padding: '4px 0', textTransform: 'uppercase' }}>{d}</div>
        ))}
        {celulas.map((dia, i) => {
          if (!dia) return <div key={`e${i}`} />;
          const dataAtual = `${ano}-${String(mes + 1).padStart(2, '0')}-${String(dia).padStart(2, '0')}`;
          const isHoje = dataAtual === hoje;
          const periodos = (ferias || []).filter(f => f.inicio <= dataAtual && f.fim >= dataAtual && f.status !== 'rejeitada');
          const isDayoff = (dayoffs || []).some(d => d.data === dataAtual && d.status === 'aprovado');

          const isInRange = selecionado?.inicio && selecionado?.fim && dataAtual >= selecionado.inicio && dataAtual <= selecionado.fim;
          const isStart   = selecionado?.inicio === dataAtual;
          const isEnd     = selecionado?.fim     === dataAtual;

          const bgColor = isStart || isEnd ? 'var(--escalab-brand)' : isInRange ? 'var(--escalab-brand-tint)' : isHoje ? 'var(--escalab-brand-tint)' : '#fff';
          const textColor = isStart || isEnd ? '#fff' : isHoje ? 'var(--escalab-brand-deep)' : 'var(--escalab-slate)';

          return (
            <div key={dia}
              onClick={() => modoSelecao && onDayClick && onDayClick(dataAtual)}
              style={{
                minHeight: 50, borderRadius: 7, padding: '3px 4px',
                border: isHoje || isStart || isEnd ? `2px solid var(--escalab-brand)` : '1px solid var(--escalab-line)',
                background: bgColor,
                cursor: modoSelecao ? 'pointer' : 'default',
                transition: 'all .1s',
              }}>
              <div style={{ fontSize: 11, fontWeight: isHoje || isStart || isEnd ? 700 : 400, color: textColor, marginBottom: 2 }}>{dia}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                {periodos.slice(0, 2).map(p => {
                  const c = COLABORADORES.find(x => x.id === p.colaboradorId);
                  return (
                    <div key={p.id} title={`${c?.nome} · ${STATUS_FERIAS[p.status]?.label}`}
                      style={{ background: c?.cor, borderRadius: 3, padding: '1px 4px', opacity: p.status === 'aprovada' ? 1 : 0.55 }}>
                      <span style={{ fontSize: 9, color: '#fff', fontWeight: 700 }}>{c?.iniciais}</span>
                    </div>
                  );
                })}
                {isDayoff && <div style={{ background: '#6B3FA0', borderRadius: 3, padding: '1px 4px' }}><span style={{ fontSize: 9, color: '#fff', fontWeight: 700 }}>DO</span></div>}
                {periodos.length > 2 && <div style={{ fontSize: 9, color: 'var(--escalab-mute)' }}>+{periodos.length - 2}</div>}
              </div>
            </div>
          );
        })}
      </div>

      <div style={{ display: 'flex', gap: 12, marginTop: 14, flexWrap: 'wrap' }}>
        {Object.entries(STATUS_FERIAS).map(([k, v]) => (
          <div key={k} style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
            <Tag tone={v.tone} size="xs">{v.label}</Tag>
          </div>
        ))}
        <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
          <div style={{ width: 12, height: 12, borderRadius: 3, background: '#6B3FA0' }} />
          <span style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>Day Off</span>
        </div>
      </div>
    </div>
  );
};

// ── Widget saldo do colaborador ──────────────────────────────────────────────

const SaldoWidget = ({ user, ferias, dayoffs, onAbrirRegistroSaldo }) => {
  const saldo = getSaldoFerias(user.id, ferias);
  const saldoDO = getDayOffSaldo(user.id, dayoffs);
  const meusRegistrosSaldoDO = getDayOffRegistrosSaldo().filter(r => r.colaboradorId === user.id);
  const aguardandoRH = meusRegistrosSaldoDO.filter(r => r.status === 'pendente').length;
  const periodoAtual = getPeriodoAquisitivo(user.id);
  const periodosTodos = listarPeriodosAquisitivos(user.id);
  const demonstrativo = getDemonstrativoFerias(user.id, ferias);
  const [verPeriodos, setVerPeriodos] = useState(false);

  if (!saldo && !saldoDO) return null;

  return (
    <div style={{ display: 'flex', gap: 12, marginBottom: 22, flexWrap: 'wrap' }}>
      {saldo && (() => {
        // PDF Site AVD 5 · item 26: dias perdidos por não retirada no período aquisitivo
        const hoje = new Date().toISOString().slice(0,10);
        const periodoVencido = saldo.vencimento && saldo.vencimento < hoje;
        const diasPerdidos = periodoVencido ? Math.max(0, saldo.total - saldo.usado) : 0;
        const tituloFerias = periodoAtual
          ? `Minhas férias (Período aquisitivo ${periodoAtual.label})`
          : `Minhas férias (Período aquisitivo ${saldo.periodo || '·'})`;
        return (
        <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14, padding: '16px 20px', flex: 1, minWidth: 220 }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-brand)', marginBottom: 10 }}>{tituloFerias}</div>
          <div style={{ display: 'flex', gap: 20 }}>
            <div>
              <div style={{ fontSize: 28, fontWeight: 800, color: saldo.disponivel === 0 ? '#B3261E' : 'var(--escalab-brand)', lineHeight: 1 }}>{saldo.disponivel}</div>
              <div style={{ fontSize: 11, color: 'var(--escalab-mute)', marginTop: 2 }}>dias disponíveis</div>
            </div>
            <div style={{ borderLeft: '1px solid var(--escalab-line)', paddingLeft: 20 }}>
              <div style={{ fontSize: 13, color: 'var(--escalab-slate)' }}>{saldo.total}d total</div>
              <div style={{ fontSize: 13, color: 'var(--escalab-mute)' }}>{saldo.usado}d usados</div>
              <div style={{ fontSize: 11, color: 'var(--escalab-mute)', marginTop: 4 }}>
                Período aquisitivo: <strong style={{ color:'var(--escalab-slate)' }}>{periodoAtual ? periodoAtual.label : (saldo.periodo || '·')}</strong>
                {demonstrativo.length > 0 && (
                  <button onClick={() => setVerPeriodos(v => !v)} style={{ border:0, background:'transparent', color:'var(--escalab-brand)', cursor:'pointer', fontSize:11, marginLeft:6, fontWeight:600, textDecoration:'underline' }}>
                    {verPeriodos ? 'ocultar demonstrativo' : `ver demonstrativo (${demonstrativo.length} períodos)`}
                  </button>
                )}
              </div>
              <div style={{ fontSize: 11, color: 'var(--escalab-mute)', marginTop: 2 }}>Vence: {saldo.vencimento ? saldo.vencimento.split('-').reverse().join('/') : '·'}</div>
            </div>
          </div>
          <div style={{ marginTop: 10, height: 6, background: 'var(--escalab-line)', borderRadius: 999, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: `${(saldo.disponivel / saldo.total) * 100}%`, background: saldo.disponivel === 0 ? '#B3261E' : 'var(--escalab-brand)', borderRadius: 999, transition: 'width .4s' }} />
          </div>
          {saldo.disponivel === 0 && (
            <div style={{ marginTop: 8, fontSize: 12, color: '#B3261E', fontWeight: 600 }}>Saldo esgotado para este período</div>
          )}
          {diasPerdidos > 0 && (
            <div style={{ marginTop: 8, padding: '8px 12px', background: '#FDECEC', border: '1px solid #B3261E25', borderRadius: 8, fontSize: 11.5, color: '#B3261E', fontWeight: 600 }}>
              ⚠ {diasPerdidos} dia(s) perdidos por não retirada no período aquisitivo. O próximo período renova o saldo automaticamente para 30 dias.
            </div>
          )}
          {verPeriodos && demonstrativo.length > 0 && (
            <div style={{ marginTop: 12, background: 'var(--escalab-paper)', border: '1px solid var(--escalab-line)', borderRadius: 10, overflow: 'hidden' }}>
              <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--escalab-line)', display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="calendar" size={12} />
                <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--escalab-slate)' }}>Demonstrativo de Férias · histórico por período aquisitivo</span>
              </div>
              <div style={{ maxHeight: 240, overflowY: 'auto' }}>
                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
                  <thead>
                    <tr style={{ background: '#fff', borderBottom: '1px solid var(--escalab-line)' }}>
                      <th style={{ textAlign: 'left', padding: '7px 10px', fontWeight: 700, color: 'var(--escalab-mute)', fontSize: 10.5, letterSpacing: '.06em', textTransform: 'uppercase' }}>Ano</th>
                      <th style={{ textAlign: 'left', padding: '7px 10px', fontWeight: 700, color: 'var(--escalab-mute)', fontSize: 10.5, letterSpacing: '.06em', textTransform: 'uppercase' }}>Período aquisitivo</th>
                      <th style={{ textAlign: 'center', padding: '7px 10px', fontWeight: 700, color: 'var(--escalab-mute)', fontSize: 10.5, letterSpacing: '.06em', textTransform: 'uppercase' }}>Direito</th>
                      <th style={{ textAlign: 'center', padding: '7px 10px', fontWeight: 700, color: 'var(--escalab-mute)', fontSize: 10.5, letterSpacing: '.06em', textTransform: 'uppercase' }}>Usados</th>
                      <th style={{ textAlign: 'center', padding: '7px 10px', fontWeight: 700, color: 'var(--escalab-mute)', fontSize: 10.5, letterSpacing: '.06em', textTransform: 'uppercase' }}>Saldo</th>
                      <th style={{ textAlign: 'center', padding: '7px 10px', fontWeight: 700, color: 'var(--escalab-mute)', fontSize: 10.5, letterSpacing: '.06em', textTransform: 'uppercase' }}>Situação</th>
                    </tr>
                  </thead>
                  <tbody>
                    {demonstrativo.slice().reverse().map(d => {
                      const cfg = DEMONSTRATIVO_STATUS[d.status] || DEMONSTRATIVO_STATUS.vigente;
                      return (
                        <tr key={d.ano} style={{ borderBottom: '1px solid var(--escalab-line)', background: d.status === 'vigente' ? 'var(--escalab-brand-tint)' : '#fff' }}>
                          <td style={{ padding: '7px 10px', fontWeight: 700, color: 'var(--escalab-ink)' }}>{d.ano}º</td>
                          <td style={{ padding: '7px 10px', color: 'var(--escalab-slate)', whiteSpace: 'nowrap' }}>{d.label}</td>
                          <td style={{ padding: '7px 10px', textAlign: 'center', color: 'var(--escalab-slate)' }}>{d.direito}d</td>
                          <td style={{ padding: '7px 10px', textAlign: 'center', color: 'var(--escalab-slate)' }}>{d.gozados}d</td>
                          <td style={{ padding: '7px 10px', textAlign: 'center', fontWeight: 700, color: d.saldo === 0 ? '#00836B' : (d.status === 'vencido' ? '#B3261E' : 'var(--escalab-brand)') }}>{d.saldo}d</td>
                          <td style={{ padding: '7px 10px', textAlign: 'center' }}>
                            <span style={{ display: 'inline-block', fontSize: 10.5, fontWeight: 700, color: cfg.cor, background: cfg.bg, borderRadius: 999, padding: '2px 8px', border: `1px solid ${cfg.cor}30` }}>{cfg.label}</span>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
              <div style={{ padding: '7px 12px', background: '#fff', borderTop: '1px solid var(--escalab-line)', fontSize: 10.5, color: 'var(--escalab-mute)', lineHeight: 1.4 }}>
                Cada período aquisitivo abre 30 dias de direito conforme CLT. Saldo não gozado dentro do período fica "vencido" no encerramento.
              </div>
            </div>
          )}
        </div>
        );
      })()}

      <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14, padding: '16px 20px', flex: 1, minWidth: 200 }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: '#6B3FA0', marginBottom: 10 }}>
          Saldo de Day Off
        </div>
        <div style={{ display: 'flex', gap: 20 }}>
          <div>
            <div style={{ fontSize: 28, fontWeight: 800, color: saldoDO.disponivel === 0 ? '#B3261E' : '#6B3FA0', lineHeight: 1 }}>{saldoDO.disponivel}</div>
            <div style={{ fontSize: 11, color: 'var(--escalab-mute)', marginTop: 2 }}>restantes</div>
          </div>
          <div style={{ borderLeft: '1px solid var(--escalab-line)', paddingLeft: 20 }}>
            <div style={{ fontSize: 13, color: 'var(--escalab-slate)' }}>{saldoDO.total} no total</div>
            <div style={{ fontSize: 13, color: 'var(--escalab-mute)' }}>{saldoDO.usados} usados</div>
            {saldoDO.extra > 0 && (
              <div style={{ fontSize: 11, color: '#00836B', marginTop: 3, fontWeight: 600 }}>+{saldoDO.extra}d compensatórios aprovados</div>
            )}
          </div>
        </div>
        <div style={{ marginTop: 10, height: 6, background: 'var(--escalab-line)', borderRadius: 999, overflow: 'hidden' }}>
          <div style={{ height: '100%', width: `${(saldoDO.disponivel / Math.max(saldoDO.total, 1)) * 100}%`, background: '#6B3FA0', borderRadius: 999, transition: 'width .4s' }} />
        </div>
        {onAbrirRegistroSaldo && (
          <button onClick={onAbrirRegistroSaldo} style={{
            marginTop: 10, width: '100%', border: '1px dashed #6B3FA0', background: '#F4EEFF', color: '#4A1A7A',
            borderRadius: 9, padding: '8px 12px', cursor: 'pointer', fontSize: 12.5, fontFamily: 'var(--font-sans)', fontWeight: 700,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          }}>
            <Icon name="plus" size={13} /> Registrar saldo de Day Off
            {aguardandoRH > 0 && <span style={{ background: '#B56500', color: '#fff', borderRadius: 999, padding: '1px 7px', fontSize: 10, marginLeft: 4 }}>{aguardandoRH} aguardando GC</span>}
          </button>
        )}
      </div>
    </div>
  );
};

// ── Modal solicitar férias ───────────────────────────────────────────────────

const ModalSolicitar = ({ user, ferias, onClose, onSalvar }) => {
  const [selecionado, setSelecionado] = useState({ inicio: '', fim: '' });
  const [mes, setMes] = useState(new Date().getMonth());
  const [ano, setAno] = useState(new Date().getFullYear());
  const [tipo, setTipo] = useState('Férias anuais');
  const [obs, setObs] = useState('');
  const [erro, setErro] = useState('');
  const [faseSelecao, setFaseSelecao] = useState('inicio'); // 'inicio' | 'fim'

  const saldo = getSaldoFerias(user.id, ferias);
  const dias = selecionado.inicio && selecionado.fim ? diasEntre(selecionado.inicio, selecionado.fim) : 0;
  const temGestor = !!user.gestorNome;

  function handleDayClick(data) {
    setErro('');
    if (faseSelecao === 'inicio') {
      setSelecionado({ inicio: data, fim: '' });
      setFaseSelecao('fim');
    } else {
      if (data < selecionado.inicio) {
        setSelecionado({ inicio: data, fim: '' });
        setFaseSelecao('fim');
      } else {
        setSelecionado(s => ({ ...s, fim: data }));
        setFaseSelecao('inicio');
      }
    }
  }

  function handleSalvar() {
    setErro('');
    if (!selecionado.inicio || !selecionado.fim) { setErro('Selecione as datas de início e fim no calendário.'); return; }
    if (selecionado.fim < selecionado.inicio)    { setErro('A data de fim deve ser após o início.'); return; }
    if (dias > 30)                                { setErro('Período máximo de 30 dias por solicitação.'); return; }
    if (saldo && dias > saldo.disponivel)         { setErro(`Saldo insuficiente. Você tem ${saldo.disponivel} dias disponíveis e está solicitando ${dias} dias.`); return; }

    onSalvar({
      id: gerarIdFerias(),
      colaboradorId: user.id,
      inicio: selecionado.inicio, fim: selecionado.fim, dias, tipo, observacao: obs,
      status: temGestor ? 'pendente_lider' : 'pendente_rh',
      criadoEm: new Date().toISOString(),
      liderNome: temGestor ? user.gestorNome : null,
      liderAprovadoEm: null, rhNome: null, rhAprovadoEm: null, motivoRejeicao: null,
    });
    onClose();
  }

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(10,15,18,.55)', backdropFilter: 'blur(4px)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div onClick={e => e.stopPropagation()} style={{ background: '#fff', borderRadius: 16, width: '100%', maxWidth: 540, animation: 'popIn .22s var(--ease-out)', maxHeight: '92vh', overflow: 'auto' }}>
        <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--escalab-line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', position: 'sticky', top: 0, background: '#fff', zIndex: 1 }}>
          <div>
            <h3 style={{ margin: 0, fontSize: 17, fontWeight: 700 }}>Solicitar Férias</h3>
            <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', marginTop: 2 }}>
              {temGestor ? `${user.gestorNome.split(' ')[0]} → GC` : 'Enviado diretamente ao GC'}
            </div>
          </div>
          <button onClick={onClose} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-mute)' }}><Icon name="close" size={18} /></button>
        </div>

        <div style={{ padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Saldo */}
          {saldo && (
            <div style={{ background: saldo.disponivel === 0 ? '#FDECEC' : saldo.disponivel < 10 ? '#FFF7EB' : 'var(--escalab-brand-tint)', borderRadius: 10, padding: '12px 16px', display: 'flex', gap: 12, alignItems: 'center' }}>
              <div style={{ color: saldo.disponivel === 0 ? '#B3261E' : saldo.disponivel < 10 ? '#B56500' : 'var(--escalab-brand)' }}><Icon name="calendar" size={16} /></div>
              <div>
                <span style={{ fontSize: 13.5, fontWeight: 700, color: saldo.disponivel === 0 ? '#B3261E' : saldo.disponivel < 10 ? '#B56500' : 'var(--escalab-brand-deep)' }}>
                  {saldo.disponivel} dias disponíveis
                </span>
                <span style={{ fontSize: 12, color: 'var(--escalab-mute)', marginLeft: 8 }}>de {saldo.total} totais · {saldo.usado} usados</span>
                {dias > 0 && saldo.disponivel >= dias && (
                  <span style={{ marginLeft: 12, fontSize: 12.5, fontWeight: 600, color: 'var(--escalab-brand)' }}>→ restarão {saldo.disponivel - dias}d após esta solicitação</span>
                )}
              </div>
            </div>
          )}
          {!saldo && (
            <Banner tone="info">Seu saldo de férias não foi configurado ainda. Fale com o GC.</Banner>
          )}

          {erro && <Banner tone="danger">{erro}</Banner>}

          {/* Calendário para seleção */}
          <div style={{ background: 'var(--escalab-paper)', borderRadius: 12, padding: '16px' }}>
            <CalendarioMes
              ferias={ferias}
              dayoffs={[]}
              mes={mes} ano={ano}
              onPrev={() => { if (mes === 0) { setMes(11); setAno(a => a - 1); } else setMes(m => m - 1); }}
              onNext={() => { if (mes === 11) { setMes(0); setAno(a => a + 1); } else setMes(m => m + 1); }}
              selecionado={selecionado}
              onDayClick={handleDayClick}
              modoSelecao={true}
            />
          </div>

          {/* Campos manuais de backup */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Field label="Data de início">
              <input type="date" value={selecionado.inicio} onChange={e => { setSelecionado(s => ({ ...s, inicio: e.target.value })); setFaseSelecao('fim'); }}
                style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0 }} />
            </Field>
            <Field label="Data de fim">
              <input type="date" value={selecionado.fim} onChange={e => { setSelecionado(s => ({ ...s, fim: e.target.value })); setFaseSelecao('inicio'); }} min={selecionado.inicio}
                style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0 }} />
            </Field>
          </div>

          {dias > 0 && (
            <div style={{ background: dias > (saldo?.disponivel || 9999) ? '#FDECEC' : 'var(--escalab-brand-tint)', borderRadius: 8, padding: '10px 14px', display: 'flex', gap: 8, alignItems: 'center' }}>
              <div style={{ color: dias > (saldo?.disponivel || 9999) ? '#B3261E' : 'var(--escalab-brand)' }}><Icon name="calendar" size={15} /></div>
              <span style={{ fontSize: 13.5, fontWeight: 600, color: dias > (saldo?.disponivel || 9999) ? '#B3261E' : 'var(--escalab-brand-deep)' }}>
                {dias} dias corridos {dias > (saldo?.disponivel || 9999) ? '· excede o saldo disponível!' : ''}
              </span>
            </div>
          )}

          <Field label="Tipo de afastamento">
            <select value={tipo} onChange={e => setTipo(e.target.value)}
              style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0, background: '#fff' }}>
              <option>Férias anuais</option>
              <option>Adiantamento de férias</option>
              <option>Férias coletivas</option>
            </select>
          </Field>
          <Field label="Observações (opcional)">
            <textarea value={obs} onChange={e => setObs(e.target.value)} rows={2} placeholder="Motivo, detalhes ou informações adicionais…"
              style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0, resize: 'vertical', boxSizing: 'border-box' }} />
          </Field>
          <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
            <Button variant="outline" onClick={onClose}>Cancelar</Button>
            <Button variant="primary" onClick={handleSalvar} disabled={!selecionado.inicio || !selecionado.fim || dias === 0 || (saldo && dias > saldo.disponivel)}>
              Enviar solicitação
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

// ── Modal solicitar day off ──────────────────────────────────────────────────

// ── Modal: Registrar Saldo de DayOff (compensatório) ──────────────────────────
const ModalRegistroSaldoDayOff = ({ user, onClose, onSalvar }) => {
  const [dias, setDias]       = useState(1);
  const [motivo, setMotivo]   = useState('fds');
  const [detalhe, setDetalhe] = useState('');
  const [liderAprovou, setLiderAprovou] = useState(false);
  const [erro, setErro] = useState('');

  function salvar() {
    setErro('');
    if (!dias || dias < 1) { setErro('Informe a quantidade de dias.'); return; }
    if (!detalhe.trim() || detalhe.trim().length < 8) { setErro('Descreva brevemente o que gerou esses dias (mín. 8 caracteres).'); return; }
    addRegistroSaldoDO({
      id: 'SDO' + Date.now().toString(36).toUpperCase(),
      colaboradorId: user.id,
      dias: Number(dias),
      motivo,
      detalhe: detalhe.trim(),
      liderAprovou: !!liderAprovou,
      liderNome: liderAprovou ? user.gestorNome || null : null,
      status: 'pendente',
      criadoEm: new Date().toISOString(),
      rhNome: null,
      rhAprovadoEm: null,
      motivoRejeicao: null,
    });
    onSalvar();
    onClose();
  }

  return (
    <div onClick={onClose} className="modal-overlay" style={{ position:'fixed', inset:0, background:'rgba(10,15,18,.55)', backdropFilter:'blur(4px)', zIndex:1000, display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}>
      <div onClick={e => e.stopPropagation()} style={{ background:'#fff', borderRadius:16, width:'100%', maxWidth:480, animation:'popIn .22s var(--ease-out)', maxHeight:'92vh', overflow:'auto' }}>
        <div style={{ padding:'18px 22px', borderBottom:'1px solid var(--escalab-line)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div>
            <h3 style={{ margin:0, fontSize:17, fontWeight:700 }}>Registrar saldo de Day Off</h3>
            <div style={{ fontSize:12.5, color:'var(--escalab-mute)', marginTop:2 }}>Para horas extras / fins de semana / feriados trabalhados</div>
          </div>
          <button onClick={onClose} style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-mute)' }}><Icon name="close" size={18} /></button>
        </div>
        <div style={{ padding:'18px 22px', display:'flex', flexDirection:'column', gap:14 }}>
          {erro && <Banner tone="danger">{erro}</Banner>}
          <div style={{ background:'#FFF7EB', borderLeft:'3px solid #B56500', borderRadius:6, padding:'8px 12px', fontSize:12.5, color:'#7A4A00', lineHeight:1.5 }}>
            Esse saldo só será somado ao seu Day Off após aprovação do GC. Anexar a aprovação do líder ajuda a agilizar.
          </div>
          <Field label="Quantos dias de Day Off você acumulou? *">
            <input type="number" min={1} max={30} value={dias} onChange={e => setDias(e.target.value)}
              style={{ width:'100%', border:'1px solid var(--escalab-line)', borderRadius:8, padding:'9px 12px', fontSize:14, fontFamily:'var(--font-sans)', outline:0 }} />
          </Field>
          <Field label="Origem desses dias *">
            <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
              {DAYOFF_SALDO_MOTIVOS.map(m => (
                <label key={m.id} style={{ display:'flex', alignItems:'center', gap:8, padding:'8px 10px', border:`1px solid ${motivo === m.id ? 'var(--escalab-brand-soft)' : 'var(--escalab-line)'}`, background: motivo === m.id ? 'var(--escalab-brand-tint)' : '#fff', borderRadius:8, cursor:'pointer' }}>
                  <input type="radio" name="motivo_saldo_do" checked={motivo === m.id} onChange={() => setMotivo(m.id)} />
                  <span style={{ fontSize:13, color:'var(--escalab-ink)' }}>{m.label}</span>
                </label>
              ))}
            </div>
          </Field>
          <Field label="Conta o que aconteceu *" hint="Datas trabalhadas, projeto envolvido, horas estimadas">
            <textarea value={detalhe} onChange={e => setDetalhe(e.target.value)} rows={3} placeholder="Ex: Trabalhei nos sábados 14/06 e 21/06 cobrindo demanda urgente do projeto X · cerca de 16h extras."
              style={{ width:'100%', border:'1px solid var(--escalab-line)', borderRadius:8, padding:'9px 12px', fontSize:14, fontFamily:'var(--font-sans)', outline:0, resize:'vertical', boxSizing:'border-box' }} />
          </Field>
          <label style={{ display:'flex', alignItems:'center', gap:8, padding:'9px 11px', border:'1px solid var(--escalab-line)', borderRadius:8, cursor:'pointer', background: liderAprovou ? '#E6F5F1' : '#fff' }}>
            <input type="checkbox" checked={liderAprovou} onChange={e => setLiderAprovou(e.target.checked)} />
            <span style={{ fontSize:13, color:'var(--escalab-ink)' }}>
              Meu líder <strong>{user.gestorNome ? `(${user.gestorNome.split(' ').slice(0,2).join(' ')})` : ''}</strong> já aprovou esses dias
            </span>
          </label>
          <div style={{ display:'flex', gap:10, justifyContent:'flex-end' }}>
            <Button variant="outline" onClick={onClose}>Cancelar</Button>
            <Button variant="primary" onClick={salvar}>Enviar para o GC</Button>
          </div>
        </div>
      </div>
    </div>
  );
};

const ModalSolicitarDayOff = ({ user, dayoffs, ferias, onClose, onSalvar }) => {
  const [selecionado, setSelecionado] = useState({ inicio: '', fim: '' });
  const [faseSelecao, setFaseSelecao] = useState('inicio');
  const [tipo, setTipo] = useState('aniversario');
  const [obs, setObs] = useState('');
  const [erro, setErro] = useState('');
  const [mes, setMes] = useState(new Date().getMonth());
  const [ano, setAno] = useState(new Date().getFullYear());

  const saldoDO = getDayOffSaldo(user.id, dayoffs);

  function handleDayClick(dateStr) {
    if (faseSelecao === 'inicio') {
      setSelecionado({ inicio: dateStr, fim: '' });
      setFaseSelecao('fim');
    } else {
      if (dateStr < selecionado.inicio) {
        setSelecionado({ inicio: dateStr, fim: selecionado.inicio });
      } else {
        setSelecionado(s => ({ ...s, fim: dateStr }));
      }
      setFaseSelecao('inicio');
    }
  }

  function getDatas() {
    if (!selecionado.inicio) return [];
    const fim = selecionado.fim || selecionado.inicio;
    const datas = [];
    const cur = new Date(selecionado.inicio + 'T00:00:00');
    const end = new Date(fim + 'T00:00:00');
    while (cur <= end) {
      datas.push(cur.toISOString().slice(0, 10));
      cur.setDate(cur.getDate() + 1);
    }
    return datas;
  }

  const datas = getDatas();
  const dias = datas.length;

  function handleSalvar() {
    setErro('');
    if (!selecionado.inicio) { setErro('Selecione ao menos uma data.'); return; }
    if (saldoDO.disponivel <= 0) { setErro('Você não possui mais day offs disponíveis este ano.'); return; }
    if (dias > saldoDO.disponivel) { setErro(`Você tem apenas ${saldoDO.disponivel} day off(s) disponíveis.`); return; }
    if (!obs.trim() || obs.trim().length < 5) { setErro('Justificativa obrigatória · descreva brevemente o motivo do day off (mínimo 5 caracteres).'); return; }

    datas.forEach((d, i) => {
      onSalvar({
        id: 'DO' + Date.now().toString(36).toUpperCase() + i,
        colaboradorId: user.id,
        data: d, obs, tipo,
        status: 'pendente',
        criadoEm: new Date().toISOString(),
        rhNome: null, rhAprovadoEm: null, motivoRejeicao: null,
      });
    });
    onClose();
  }

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(10,15,18,.55)', backdropFilter: 'blur(4px)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div onClick={e => e.stopPropagation()} style={{ background: '#fff', borderRadius: 16, width: '100%', maxWidth: 500, animation: 'popIn .22s var(--ease-out)', maxHeight: '90vh', overflow: 'auto' }}>
        <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--escalab-line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'sticky', top: 0, background: '#fff', zIndex: 1 }}>
          <div>
            <h3 style={{ margin: 0, fontSize: 17, fontWeight: 700 }}>Solicitar Day Off</h3>
            <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', marginTop: 2 }}>Enviado ao GC para aprovação</div>
          </div>
          <button onClick={onClose} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-mute)' }}><Icon name="close" size={18} /></button>
        </div>
        <div style={{ padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
          {/* Saldo */}
          <div style={{ background: saldoDO.disponivel === 0 ? '#FDECEC' : '#F4EEFF', borderRadius: 10, padding: '12px 16px', display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{ color: saldoDO.disponivel === 0 ? '#B3261E' : '#6B3FA0' }}><Icon name="calendar" size={16} /></div>
            <span style={{ fontSize: 13.5, fontWeight: 600, color: saldoDO.disponivel === 0 ? '#B3261E' : '#4A1A7A' }}>
              {saldoDO.disponivel} day offs disponíveis este ano
            </span>
            <span style={{ fontSize: 12, color: 'var(--escalab-mute)', marginLeft: 4 }}>({saldoDO.usados}/{saldoDO.total} usados)</span>
          </div>

          {erro && <Banner tone="danger">{erro}</Banner>}

          {/* Tipo do Day Off (apenas aniversário ou compensatório) */}
          <Field label="Tipo do Day Off *">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }} className="mobile-col1">
              {DAYOFF_TIPOS.map(t => {
                const sel = tipo === t.id;
                return (
                  <button key={t.id} type="button" onClick={() => setTipo(t.id)} style={{
                    border: `1.5px solid ${sel ? t.cor : 'var(--escalab-line)'}`,
                    background: sel ? t.bg : '#fff',
                    color: sel ? t.cor : 'var(--escalab-slate)',
                    borderRadius: 10, padding: '10px 12px', cursor: 'pointer',
                    fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: sel ? 700 : 500,
                    display: 'flex', alignItems: 'center', gap: 7, textAlign: 'left',
                    transition: 'all .15s',
                  }}>
                    <span style={{ fontSize: 17 }}>{t.emoji}</span>
                    <span>{t.label}</span>
                  </button>
                );
              })}
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginTop: 6 }}>
              Outros motivos (folgas, eventos, compromissos) devem ser solicitados pela aba <strong>Ausências</strong>.
            </div>
          </Field>

          <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', background: 'var(--escalab-paper)', borderRadius: 8, padding: '8px 12px' }}>
            {!selecionado.inicio ? 'Clique para selecionar o início' : !selecionado.fim ? 'Clique para selecionar o fim (ou confirme 1 dia)' : `${dias} dia(s) selecionado(s)`}
          </div>

          {/* Calendário */}
          <div style={{ background: 'var(--escalab-paper)', borderRadius: 12, padding: '16px' }}>
            <CalendarioMes
              ferias={ferias || []}
              dayoffs={dayoffs}
              mes={mes} ano={ano}
              onPrev={() => { if (mes === 0) { setMes(11); setAno(a => a - 1); } else setMes(m => m - 1); }}
              onNext={() => { if (mes === 11) { setMes(0); setAno(a => a + 1); } else setMes(m => m + 1); }}
              selecionado={selecionado}
              onDayClick={handleDayClick}
              modoSelecao={true}
            />
          </div>

          {/* Campos manuais */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Field label="Data de início">
              <input type="date" value={selecionado.inicio} onChange={e => { setSelecionado(s => ({ ...s, inicio: e.target.value })); setFaseSelecao('fim'); }}
                min={new Date().toISOString().slice(0, 10)}
                style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0 }} />
            </Field>
            <Field label="Data de fim">
              <input type="date" value={selecionado.fim || selecionado.inicio} onChange={e => setSelecionado(s => ({ ...s, fim: e.target.value }))}
                min={selecionado.inicio || new Date().toISOString().slice(0, 10)}
                style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0 }} />
            </Field>
          </div>

          {dias > 0 && (
            <div style={{ background: dias > saldoDO.disponivel ? '#FDECEC' : 'var(--escalab-brand-tint)', borderRadius: 8, padding: '10px 14px', display: 'flex', gap: 8, alignItems: 'center' }}>
              <div style={{ color: dias > saldoDO.disponivel ? '#B3261E' : 'var(--escalab-brand)' }}><Icon name="calendar" size={15} /></div>
              <span style={{ fontSize: 13.5, fontWeight: 600, color: dias > saldoDO.disponivel ? '#B3261E' : 'var(--escalab-brand-deep)' }}>
                {dias} dia(s) de day off {dias > saldoDO.disponivel ? '· excede o saldo disponível!' : ''}
              </span>
            </div>
          )}

          <Field label="Justificativa" hint="Obrigatória · o GC usa para liberar o day off">
            <textarea value={obs} onChange={e => setObs(e.target.value)} rows={3} placeholder="Ex: Consulta médica, compromisso pessoal…" required
              style={{ width: '100%', border: `1px solid ${obs.trim().length < 5 && obs.length > 0 ? '#B3261E' : 'var(--escalab-line)'}`, borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0, resize: 'vertical', boxSizing: 'border-box' }} />
          </Field>

          <div style={{ fontSize: 12, color: 'var(--escalab-mute)', background: 'var(--escalab-paper)', borderLeft: '3px solid #6B3FA0', borderRadius: 6, padding: '10px 14px', lineHeight: 1.5 }}>
            <strong style={{ color: '#4A1A7A' }}>Quando posso pedir Day Off?</strong>
            <div style={{ marginTop: 4 }}>Use o Day Off para aniversário e para compensação de horas extras. Para imprevistos médicos, pessoais urgentes, eventos etc utilize a aba <strong>Ausência</strong>.</div>
          </div>

          <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
            <Button variant="outline" onClick={onClose}>Cancelar</Button>
            <Button variant="primary" onClick={handleSalvar} disabled={!selecionado.inicio || saldoDO.disponivel === 0 || dias > saldoDO.disponivel || obs.trim().length < 5}>Solicitar</Button>
          </div>
        </div>
      </div>
    </div>
  );
};

// ── Modal aprovação / rejeição ───────────────────────────────────────────────

const ModalAprovacao = ({ solicitacao, etapa, user, onClose, onAprovar, onRejeitar }) => {
  const [motivo, setMotivo] = useState('');
  const [rejeitando, setRejeitando] = useState(false);
  const colab = COLABORADORES.find(c => c.id === solicitacao.colaboradorId);

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(10,15,18,.55)', backdropFilter: 'blur(4px)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div onClick={e => e.stopPropagation()} style={{ background: '#fff', borderRadius: 16, width: '100%', maxWidth: 460, animation: 'popIn .22s var(--ease-out)' }}>
        <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--escalab-line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h3 style={{ margin: 0, fontSize: 17, fontWeight: 700 }}>Solicitação de Férias</h3>
          <button onClick={onClose} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-mute)' }}><Icon name="close" size={18} /></button>
        </div>
        <div style={{ padding: '20px 24px' }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 20, background: 'var(--escalab-paper)', borderRadius: 10, padding: '14px 16px' }}>
            <Avatar nome={colab?.nome} cor={colab?.cor} iniciais={colab?.iniciais} size={42} />
            <div>
              <div style={{ fontWeight: 600, fontSize: 14 }}>{colab?.nome}</div>
              <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)' }}>{colab?.cargo} · {colab?.setor}</div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 20 }}>
            {[
              { label: 'Período',         val: `${dataStr(solicitacao.inicio)} → ${dataStr(solicitacao.fim)} (${solicitacao.dias} dias)` },
              { label: 'Tipo',            val: solicitacao.tipo },
              { label: 'Solicitado em',   val: dataStr(solicitacao.criadoEm) },
              solicitacao.observacao && { label: 'Observação', val: solicitacao.observacao },
              etapa === 'rh' && solicitacao.liderNome && { label: 'Aprovado pelo líder', val: `${solicitacao.liderNome.split(' ')[0]} em ${dataStr(solicitacao.liderAprovadoEm)}` },
            ].filter(Boolean).map(r => (
              <div key={r.label} style={{ display: 'flex', gap: 12 }}>
                <span style={{ fontSize: 12.5, color: 'var(--escalab-mute)', minWidth: 130 }}>{r.label}</span>
                <span style={{ fontSize: 13, color: 'var(--escalab-ink)', fontWeight: 500 }}>{r.val}</span>
              </div>
            ))}
          </div>
          {rejeitando ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <Field label="Motivo da rejeição">
                <textarea value={motivo} onChange={e => setMotivo(e.target.value)} rows={3} placeholder="Informe o motivo para o colaborador…"
                  style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0, resize: 'vertical', boxSizing: 'border-box' }} />
              </Field>
              <div style={{ display: 'flex', gap: 10 }}>
                <Button variant="ghost" onClick={() => setRejeitando(false)}>Voltar</Button>
                <Button variant="danger" onClick={() => onRejeitar(solicitacao.id, motivo)} disabled={!motivo}>Confirmar rejeição</Button>
              </div>
            </div>
          ) : (
            <div style={{ display: 'flex', gap: 10 }}>
              <Button variant="outline" onClick={() => setRejeitando(true)}>Rejeitar</Button>
              <Button variant="primary" full onClick={() => onAprovar(solicitacao.id)}>
                {etapa === 'lider' ? 'Aprovar e enviar ao GC' : 'Aprovar definitivamente'}
              </Button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// ── Modal aprovação day off ──────────────────────────────────────────────────

const ModalAprovacaoDayOff = ({ dayoff, user, onClose, onAprovar, onRejeitar }) => {
  const [motivo, setMotivo] = useState('');
  const [rejeitando, setRejeitando] = useState(false);
  const colab = COLABORADORES.find(c => c.id === dayoff.colaboradorId);

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(10,15,18,.55)', backdropFilter: 'blur(4px)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div onClick={e => e.stopPropagation()} style={{ background: '#fff', borderRadius: 16, width: '100%', maxWidth: 440, animation: 'popIn .22s var(--ease-out)' }}>
        <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--escalab-line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h3 style={{ margin: 0, fontSize: 17, fontWeight: 700 }}>Solicitação de Day Off</h3>
          <button onClick={onClose} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-mute)' }}><Icon name="close" size={18} /></button>
        </div>
        <div style={{ padding: '20px 24px' }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 18, background: 'var(--escalab-paper)', borderRadius: 10, padding: '14px 16px' }}>
            <Avatar nome={colab?.nome} cor={colab?.cor} iniciais={colab?.iniciais} size={42} />
            <div>
              <div style={{ fontWeight: 600, fontSize: 14 }}>{colab?.nome}</div>
              <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)' }}>{colab?.cargo}</div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 20 }}>
            <div style={{ display: 'flex', gap: 12 }}>
              <span style={{ fontSize: 12.5, color: 'var(--escalab-mute)', minWidth: 120 }}>Data</span>
              <span style={{ fontSize: 13, fontWeight: 500 }}>{dataStr(dayoff.data)}</span>
            </div>
            {dayoff.obs && (
              <div style={{ display: 'flex', gap: 12 }}>
                <span style={{ fontSize: 12.5, color: 'var(--escalab-mute)', minWidth: 120 }}>Motivo</span>
                <span style={{ fontSize: 13 }}>{dayoff.obs}</span>
              </div>
            )}
            <div style={{ display: 'flex', gap: 12 }}>
              <span style={{ fontSize: 12.5, color: 'var(--escalab-mute)', minWidth: 120 }}>Solicitado em</span>
              <span style={{ fontSize: 13 }}>{dataStr(dayoff.criadoEm)}</span>
            </div>
          </div>
          {rejeitando ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <Field label="Motivo da rejeição">
                <textarea value={motivo} onChange={e => setMotivo(e.target.value)} rows={2} placeholder="Informe o motivo…"
                  style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0, resize: 'vertical', boxSizing: 'border-box' }} />
              </Field>
              <div style={{ display: 'flex', gap: 10 }}>
                <Button variant="ghost" onClick={() => setRejeitando(false)}>Voltar</Button>
                <Button variant="danger" onClick={() => onRejeitar(dayoff.id, motivo)} disabled={!motivo}>Rejeitar</Button>
              </div>
            </div>
          ) : (
            <div style={{ display: 'flex', gap: 10 }}>
              <Button variant="outline" onClick={() => setRejeitando(true)}>Rejeitar</Button>
              <Button variant="primary" full onClick={() => onAprovar(dayoff.id)}>Aprovar day off</Button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// ── Card de solicitação ──────────────────────────────────────────────────────

const CardSolicitacao = ({ sol, showColab = false, onAcao, user }) => {
  const colab = COLABORADORES.find(c => c.id === sol.colaboradorId);
  const st = STATUS_FERIAS[sol.status] || { label: sol.status, tone: 'neutral' };
  const podeAgenda = user?.perfil === 'admin' || user?.perfil === 'gestor';
  return (
    <Card pad={18} hover={!!onAcao} onClick={onAcao}>
      <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start', flexWrap: 'wrap' }}>
        {showColab && <Avatar nome={colab?.nome} cor={colab?.cor} iniciais={colab?.iniciais} size={36} />}
        <div style={{ flex: 1, minWidth: 200 }}>
          {showColab && <div style={{ fontWeight: 600, fontSize: 13.5, marginBottom: 4 }}>{colab?.nome}</div>}
          <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap', marginBottom: 6 }}>
            <Tag tone={st.tone} size="xs">{st.label}</Tag>
            <span style={{ fontSize: 12.5, color: 'var(--escalab-slate)' }}>{sol.tipo}</span>
          </div>
          <div style={{ fontSize: 13, color: 'var(--escalab-ink)', fontWeight: 500, marginBottom: 4 }}>
            {dataStr(sol.inicio)} → {dataStr(sol.fim)}
            <span style={{ fontSize: 12, color: 'var(--escalab-mute)', fontWeight: 400, marginLeft: 8 }}>{sol.dias} dias</span>
          </div>
          {sol.observacao && <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', fontStyle: 'italic' }}>{sol.observacao}</div>}
          {sol.status === 'rejeitada' && sol.motivoRejeicao && (
            <div style={{ marginTop: 6, background: '#FDECEC', borderRadius: 6, padding: '6px 10px', fontSize: 12.5, color: '#B3261E' }}>Motivo: {sol.motivoRejeicao}</div>
          )}
          {sol.status === 'aprovada' && (
            <>
              <div style={{ marginTop: 6, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {sol.liderNome && <Tag tone="neutral" size="xs">Líder: {sol.liderNome.split(' ')[0]}</Tag>}
                {sol.rhNome    && <Tag tone="brand"   size="xs">GC: {sol.rhNome.split(' ')[0]}</Tag>}
              </div>
              {podeAgenda && (
                <a href={gcalFromInicioFim(`[Férias] ${(colab?.nome || '').split(' ').slice(0,2).join(' ')}`, sol.inicio, sol.fim, { convidarGrupos: true })} target="_blank" rel="noopener noreferrer" onClick={e => e.stopPropagation()}
                  title="Disparar evento no Google Agenda já com associadosescalab@googlegroups.com e fixosescalab@googlegroups.com como convidados"
                  style={{ marginTop: 6, display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 12, color: '#1F4A8A', textDecoration: 'none', fontWeight: 600 }}>
                  <Icon name="calendar" size={12} /> Adicionar ao Google Agenda (convida grupos) ↗
                </a>
              )}
            </>
          )}
        </div>
        {onAcao && <div style={{ color: 'var(--escalab-brand)' }}><Icon name="chev_right" size={16} /></div>}
      </div>
    </Card>
  );
};

// ── Card day off ─────────────────────────────────────────────────────────────

const CardDayOff = ({ d, showColab = false, onAcao, user }) => {
  const colab = COLABORADORES.find(c => c.id === d.colaboradorId);
  const st = STATUS_DAYOFF[d.status] || { label: d.status, tone: 'neutral' };
  const tipoCfg = DAYOFF_TIPOS.find(t => t.id === d.tipo);
  const podeAgenda = user?.perfil === 'admin' || user?.perfil === 'gestor';
  return (
    <Card pad={16} hover={!!onAcao} onClick={onAcao}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
        {showColab && <Avatar nome={colab?.nome} cor={colab?.cor} iniciais={colab?.iniciais} size={34} />}
        <div style={{ flex: 1 }}>
          {showColab && <div style={{ fontWeight: 600, fontSize: 13.5, marginBottom: 3 }}>{colab?.nome}</div>}
          <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
            <Tag tone={st.tone} size="xs">{st.label}</Tag>
            {tipoCfg && (
              <span style={{ fontSize: 11, fontWeight: 700, background: tipoCfg.bg, color: tipoCfg.cor, borderRadius: 999, padding: '2px 8px', border: `1px solid ${tipoCfg.cor}30` }}>
                {tipoCfg.emoji} {tipoCfg.label}
              </span>
            )}
            <span style={{ fontSize: 13, fontWeight: 600, color: '#6B3FA0' }}>{dataStr(d.data)}</span>
            {d.obs && <span style={{ fontSize: 12.5, color: 'var(--escalab-mute)', fontStyle: 'italic' }}>{d.obs}</span>}
          </div>
          {d.status === 'rejeitado' && d.motivoRejeicao && (
            <div style={{ marginTop: 5, fontSize: 12.5, color: '#B3261E', background: '#FDECEC', borderRadius: 6, padding: '4px 8px' }}>Motivo: {d.motivoRejeicao}</div>
          )}
          {d.status === 'aprovado' && podeAgenda && (
            <a href={gcalFromInicioFim(`[Day Off] ${(colab?.nome || '').split(' ').slice(0,2).join(' ')}`, d.data, d.data, { convidarGrupos: true })} target="_blank" rel="noopener noreferrer" onClick={e => e.stopPropagation()}
              title="Disparar evento já com associadosescalab e fixosescalab como convidados"
              style={{ marginTop: 6, display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 12, color: '#1F4A8A', textDecoration: 'none', fontWeight: 600 }}>
              <Icon name="calendar" size={12} /> Adicionar ao Google Agenda (convida grupos) ↗
            </a>
          )}
        </div>
        {onAcao && <div style={{ color: '#6B3FA0' }}><Icon name="chev_right" size={16} /></div>}
      </div>
    </Card>
  );
};

// ── Kanban card ──────────────────────────────────────────────────────────────

const KanbanCardFerias = ({ sol, onClick }) => {
  const [hovered, setHovered] = useState(false);
  const colab = COLABORADORES.find(c => c.id === sol.colaboradorId);
  const hoje = new Date().toISOString().slice(0, 10);
  const diasAberto = Math.max(0, Math.round((new Date(hoje) - new Date((sol.criadoEm || hoje).slice(0, 10))) / 86400000));
  const st = STATUS_FERIAS[sol.status] || { label: sol.status, tone: 'neutral', color: 'var(--escalab-mute)' };

  return (
    <div onClick={onClick} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
      style={{ background: '#fff', border: `1px solid ${hovered ? '#C8CDD4' : 'var(--escalab-line)'}`, borderRadius: 12, padding: '14px 16px', cursor: onClick ? 'pointer' : 'default', boxShadow: hovered ? '0 4px 16px rgba(10,15,18,.09)' : 'none', transition: 'box-shadow .18s, border-color .18s' }}>
      <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', marginBottom: 12 }}>
        <Avatar nome={colab?.nome} cor={colab?.cor} iniciais={colab?.iniciais} size={34} />
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontWeight: 600, fontSize: 13.5, color: 'var(--escalab-ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {colab?.nome?.split(' ').slice(0, 2).join(' ') || '·'}
          </div>
          <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginTop: 1 }}>{colab?.cargo}</div>
        </div>
      </div>
      <div style={{ background: 'var(--escalab-paper)', borderRadius: 8, padding: '9px 11px', marginBottom: 10 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <div style={{ color: 'var(--escalab-brand)' }}><Icon name="calendar" size={12} /></div>
          <span style={{ fontSize: 12.5, color: 'var(--escalab-slate)', fontWeight: 500 }}>
            {dataStr(sol.inicio)} – {dataStr(sol.fim)}
          </span>
        </div>
        <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginTop: 4, paddingLeft: 18 }}>{sol.dias} dias corridos</div>
      </div>
      <div style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap', marginBottom: 10 }}>
        <Tag tone="neutral" size="xs">{sol.tipo}</Tag>
        {diasAberto > 0 && <span style={{ fontSize: 11, color: 'var(--escalab-mute)' }}>{diasAberto}d em aberto</span>}
      </div>
      {colab?.gestorNome && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, borderTop: '1px solid var(--escalab-line)', paddingTop: 10 }}>
          <div style={{ width: 20, height: 20, borderRadius: '50%', background: 'var(--escalab-brand-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--escalab-brand-deep)', flexShrink: 0 }}>
            <Icon name="user" size={11} />
          </div>
          <span style={{ fontSize: 11.5, color: 'var(--escalab-mute)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {colab.gestorNome.split(' ').slice(0, 2).join(' ')}
          </span>
        </div>
      )}
      {sol.status === 'aprovada' && (
        <a href={gcalFromInicioFim(`[Férias] ${(colab?.nome || '').split(' ').slice(0,2).join(' ')}`, sol.inicio, sol.fim, { convidarGrupos: true })}
          target="_blank" rel="noopener noreferrer" onClick={e => e.stopPropagation()}
          title="Disparar evento no Google Agenda já com associadosescalab@googlegroups.com e fixosescalab@googlegroups.com como convidados"
          style={{ marginTop: 10, display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11.5, color: '#1F4A8A', textDecoration: 'none', fontWeight: 600, borderTop: '1px solid var(--escalab-line)', paddingTop: 10, width: '100%' }}>
          <Icon name="calendar" size={12} /> Adicionar ao Google Agenda (convida grupos) ↗
        </a>
      )}
    </div>
  );
};

// ── Painel GC: aprovar registros de saldo compensatório ──────────────────────
const PainelRegistrosSaldoRH = ({ user, onRefresh }) => {
  const [registros, setRegistros] = useState(() => getDayOffRegistrosSaldo());
  const [rejeitando, setRejeitando] = useState(null);
  const [motivoRej, setMotivoRej] = useState('');

  function recarregar() { setRegistros(getDayOffRegistrosSaldo()); onRefresh?.(); }
  function aprovar(r) {
    updateRegistroSaldoDO(r.id, { status:'aprovado', rhNome:user.nome, rhAprovadoEm:new Date().toISOString() });
    recarregar();
  }
  function confirmarRejeicao() {
    if (!motivoRej.trim()) return;
    updateRegistroSaldoDO(rejeitando.id, { status:'rejeitado', rhNome:user.nome, rhAprovadoEm:new Date().toISOString(), motivoRejeicao:motivoRej.trim() });
    setRejeitando(null); setMotivoRej(''); recarregar();
  }

  const pendentes = registros.filter(r => r.status === 'pendente');
  const historico = registros.filter(r => r.status !== 'pendente').slice(0, 10);

  return (
    <Card pad={20}>
      <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:12 }}>
        <Icon name="clock" size={15} />
        <div style={{ fontSize:12, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--escalab-mute)', flex:1 }}>
          Registros de saldo (compensatório) · aprovação GC
        </div>
        {pendentes.length > 0 && <span style={{ background:'#B56500', color:'#fff', borderRadius:999, padding:'2px 8px', fontSize:11, fontWeight:700 }}>{pendentes.length} pendente(s)</span>}
      </div>
      {pendentes.length === 0 && historico.length === 0 ? (
        <div style={{ fontSize:13, color:'var(--escalab-mute)', textAlign:'center', padding:'14px 0' }}>Nenhum registro de saldo enviado ainda.</div>
      ) : (
        <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
          {pendentes.map(r => {
            const c = COLABORADORES.find(x => x.id === r.colaboradorId);
            const motCfg = DAYOFF_SALDO_MOTIVOS.find(m => m.id === r.motivo);
            return (
              <div key={r.id} style={{ border:'1px solid var(--escalab-line)', borderRadius:10, padding:'12px 14px', background:'#FFF7EB' }}>
                <div style={{ display:'flex', gap:10, alignItems:'center', marginBottom:8 }}>
                  <Avatar nome={c?.nome} cor={c?.cor} iniciais={c?.iniciais} size={30} />
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize:13.5, fontWeight:700, color:'var(--escalab-ink)' }}>{c?.nome}</div>
                    <div style={{ fontSize:11.5, color:'var(--escalab-mute)' }}>{c?.cargo} · {c?.setor}</div>
                  </div>
                  <div style={{ background:'#fff', border:'1px solid #B56500', borderRadius:8, padding:'4px 10px', fontSize:13, fontWeight:800, color:'#B56500' }}>+{r.dias}d</div>
                </div>
                <div style={{ display:'flex', flexWrap:'wrap', gap:6, marginBottom:7 }}>
                  <Tag tone="neutral" size="xs">{motCfg?.label || r.motivo}</Tag>
                  <Tag tone={r.liderAprovou ? 'success' : 'warn'} size="xs">
                    {r.liderAprovou ? `✓ Líder aprovou${r.liderNome ? ` (${r.liderNome.split(' ')[0]})` : ''}` : '⚠ Sem confirmação do líder'}
                  </Tag>
                </div>
                <div style={{ fontSize:12.5, color:'var(--escalab-slate)', background:'#fff', borderRadius:8, padding:'7px 10px', marginBottom:9, lineHeight:1.45 }}>
                  {r.detalhe}
                </div>
                <div style={{ display:'flex', gap:7, justifyContent:'flex-end' }}>
                  <button onClick={() => { setRejeitando(r); setMotivoRej(''); }} style={{ border:'1px solid #F4C7C3', background:'#fff', color:'#B3261E', borderRadius:8, padding:'7px 14px', cursor:'pointer', fontSize:12.5, fontWeight:600, fontFamily:'var(--font-sans)' }}>Rejeitar</button>
                  <button onClick={() => aprovar(r)} style={{ border:0, background:'#00836B', color:'#fff', borderRadius:8, padding:'7px 16px', cursor:'pointer', fontSize:12.5, fontWeight:700, fontFamily:'var(--font-sans)' }}>Aprovar +{r.dias}d</button>
                </div>
              </div>
            );
          })}
          {historico.length > 0 && (
            <div style={{ marginTop:6 }}>
              <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--escalab-mute)', marginBottom:6 }}>Últimas decisões</div>
              {historico.map(r => {
                const c = COLABORADORES.find(x => x.id === r.colaboradorId);
                return (
                  <div key={r.id} style={{ display:'flex', alignItems:'center', gap:8, padding:'6px 10px', borderRadius:8, fontSize:12, color:'var(--escalab-slate)' }}>
                    <Avatar nome={c?.nome} cor={c?.cor} iniciais={c?.iniciais} size={22} />
                    <span style={{ flex:1 }}>{c?.nome?.split(' ').slice(0,2).join(' ')} · {r.dias}d</span>
                    <Tag tone={r.status === 'aprovado' ? 'success' : 'danger'} size="xs">
                      {r.status === 'aprovado' ? 'Aprovado' : 'Rejeitado'}
                    </Tag>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      )}
      {rejeitando && (
        <div onClick={() => setRejeitando(null)} style={{ position:'fixed', inset:0, background:'rgba(10,15,18,.55)', backdropFilter:'blur(4px)', zIndex:1100, display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}>
          <div onClick={e => e.stopPropagation()} style={{ background:'#fff', borderRadius:14, width:'100%', maxWidth:420, padding:'18px 22px' }}>
            <div style={{ fontSize:15, fontWeight:700, marginBottom:8 }}>Rejeitar registro de saldo</div>
            <div style={{ fontSize:12.5, color:'var(--escalab-mute)', marginBottom:12 }}>{COLABORADORES.find(c => c.id === rejeitando.colaboradorId)?.nome} · +{rejeitando.dias}d</div>
            <textarea value={motivoRej} onChange={e => setMotivoRej(e.target.value)} rows={3} placeholder="Motivo da rejeição (será mostrado ao colaborador)"
              style={{ width:'100%', border:'1px solid var(--escalab-line)', borderRadius:8, padding:'9px 11px', fontSize:13.5, fontFamily:'var(--font-sans)', resize:'vertical', outline:'none', boxSizing:'border-box' }} />
            <div style={{ display:'flex', gap:8, justifyContent:'flex-end', marginTop:12 }}>
              <button onClick={() => setRejeitando(null)} style={{ border:'1px solid var(--escalab-line)', background:'#fff', borderRadius:8, padding:'7px 14px', cursor:'pointer', fontSize:13 }}>Cancelar</button>
              <button onClick={confirmarRejeicao} disabled={!motivoRej.trim()} style={{ border:0, background:motivoRej.trim() ? '#B3261E' : '#ccc', color:'#fff', borderRadius:8, padding:'7px 16px', cursor:motivoRej.trim() ? 'pointer' : 'not-allowed', fontSize:13, fontWeight:600 }}>Confirmar rejeição</button>
            </div>
          </div>
        </div>
      )}
    </Card>
  );
};

// ── Tela principal ───────────────────────────────────────────────────────────

const ScreenFerias = ({ user }) => {
  const isGerente = user.perfil === 'admin' || user.perfil === 'gestor';
  const [aba, setAba] = useState(isGerente ? 'kanban' : (user.perfil === 'colaborador' ? 'minhas_dayoff' : 'minhas'));
  const [ferias, setFerias] = useState(() => getFeriasSolicitacoes());
  const [dayoffs, setDayoffs] = useState(() => getDayOffs());
  const [mes, setMes] = useState(new Date().getMonth());
  const [ano, setAno] = useState(new Date().getFullYear());
  const [modalSolicitar, setModalSolicitar] = useState(false);
  const [modalDayOff, setModalDayOff] = useState(false);
  const [modalRegistroSaldoDO, setModalRegistroSaldoDO] = useState(false);
  const [modalAprovacao, setModalAprovacao] = useState(null);
  const [modalAprovDO, setModalAprovDO] = useState(null);
  const [sucesso, setSucesso] = useState('');
  const [saldosEdit, setSaldosEdit] = useState({});
  const [editandoSaldoId, setEditandoSaldoId] = useState(null);

  function recarregar() {
    setFerias(getFeriasSolicitacoes());
    setDayoffs(getDayOffs());
  }

  function handleSalvarReq(req) {
    addFeriasRequest(req);
    recarregar();
    setSucesso('Solicitação enviada! Aguarde a aprovação.');
    setAba('minhas');
    setTimeout(() => setSucesso(''), 4000);
  }

  function handleSalvarDayOff(d) {
    addDayOff(d);
    recarregar();
    setSucesso('Day off solicitado! Aguarde aprovação do GC.');
    setAba('dayoff');
    setTimeout(() => setSucesso(''), 4000);
  }

  function handleAprovar(id) {
    const sol = ferias.find(f => f.id === id);
    if (!sol) return;
    let updates = {};
    if (sol.status === 'pendente_lider') {
      updates = { status: 'pendente_rh', liderNome: user.nome, liderAprovadoEm: new Date().toISOString() };
      setSucesso('Aprovado! Enviado ao GC.');
    } else if (sol.status === 'pendente_rh') {
      updates = { status: 'aprovada', rhNome: user.nome, rhAprovadoEm: new Date().toISOString() };
      setSucesso('Férias aprovadas definitivamente!');
    }
    updateFeriasRequest(id, updates);
    recarregar();
    setModalAprovacao(null);
    setTimeout(() => setSucesso(''), 4000);
  }

  function handleRejeitar(id, motivo) {
    updateFeriasRequest(id, { status: 'rejeitada', motivoRejeicao: motivo });
    recarregar();
    setModalAprovacao(null);
    setSucesso('Solicitação rejeitada.');
    setTimeout(() => setSucesso(''), 4000);
  }

  function handleAprovarDO(id) {
    updateDayOff(id, { status: 'aprovado', rhNome: user.nome, rhAprovadoEm: new Date().toISOString() });
    recarregar();
    setModalAprovDO(null);
    setSucesso('Day off aprovado!');
    setTimeout(() => setSucesso(''), 4000);
  }

  function handleRejeitarDO(id, motivo) {
    updateDayOff(id, { status: 'rejeitado', motivoRejeicao: motivo });
    recarregar();
    setModalAprovDO(null);
    setSucesso('Day off rejeitado.');
    setTimeout(() => setSucesso(''), 4000);
  }

  const minhas         = ferias.filter(f => f.colaboradorId === user.id).sort((a, b) => b.criadoEm.localeCompare(a.criadoEm));
  const meusDayoffs    = dayoffs.filter(d => d.colaboradorId === user.id).sort((a, b) => b.criadoEm.localeCompare(a.criadoEm));
  const meusLiderados  = COLABORADORES.filter(c => c.gestorNome === user.nome).map(c => c.id);
  const pendentesLider = ferias.filter(f => f.status === 'pendente_lider' && meusLiderados.includes(f.colaboradorId));
  const equipeFerias   = ferias.filter(f => meusLiderados.includes(f.colaboradorId));
  const pendentesRH    = ferias.filter(f => f.status === 'pendente_rh');
  const pendentesDO    = dayoffs.filter(d => d.status === 'pendente');
  const todas          = ferias.slice().sort((a, b) => b.criadoEm.localeCompare(a.criadoEm));
  const feriasKanban   = user.perfil === 'gestor' ? equipeFerias : todas;
  const etapaModal     = modalAprovacao?.status === 'pendente_lider' ? 'lider' : 'rh';

  const tabs = [];
  if (user.perfil === 'admin') {
    tabs.push({ id: 'kanban',     label: 'Kanban',           icon: 'org' });
    tabs.push({ id: 'dayoff_rh',  label: 'Day Offs',         icon: 'calendar', count: pendentesDO.length });
    tabs.push({ id: 'banco',      label: 'Banco de Férias',  icon: 'calendar', count: BANCO_FERIAS_MOCK.filter(b => { const d = diasParaVencimento(b.vencimento); return d > 0 && d <= 90; }).length });
    tabs.push({ id: 'calendario',  label: 'Calendário',              icon: 'calendar' });
    tabs.push({ id: 'todas',       label: 'Todas',                   icon: 'users'    });
    // "Minhas Férias & Day Off" para o GC só aparece no perfil pessoal · não como aba geral.
  } else if (user.perfil === 'gestor') {
    tabs.push({ id: 'kanban',     label: 'Kanban',      icon: 'org',      count: pendentesLider.length });
    tabs.push({ id: 'calendario', label: 'Calendário',  icon: 'calendar' });
    // Unifica em uma aba só · antes Day Off duplicava com Minhas
    tabs.push({ id: 'minhas_dayoff', label: 'Minhas Férias & Day Off', icon: 'user' });
  } else {
    tabs.push({ id: 'minhas_dayoff', label: 'Minhas Férias & Day Off', icon: 'calendar' });
  }

  return (
    <div style={{ animation: 'fadeIn .22s var(--ease-out)' }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
        <div>
          <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-brand)', marginBottom: 4 }}>Gestão de Pessoas</div>
          <h2 style={{ fontSize: 22, fontWeight: 700, margin: 0 }}>Férias & Day Off</h2>
          <p style={{ fontSize: 13.5, color: 'var(--escalab-slate)', margin: '4px 0 0' }}>Solicitação de férias e DayOff</p>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button variant="primary" icon="plus" onClick={() => setModalDayOff(true)}>Solicitar Day Off</Button>
          <Button variant="primary" icon="plus" onClick={() => setModalSolicitar(true)}>Solicitar férias</Button>
        </div>
      </div>

      {sucesso && <div style={{ marginBottom: 18 }}><Banner tone="success" onClose={() => setSucesso('')}>{sucesso}</Banner></div>}

      {/* KPIs admin/gestor */}
      {isGerente && (
        <div style={{ display: 'flex', gap: 12, marginBottom: 22, flexWrap: 'wrap' }}>
          {[
            { label: 'De férias hoje',   val: ferias.filter(f => { const h = new Date().toISOString().slice(0,10); return f.status === 'aprovada' && f.inicio <= h && f.fim >= h; }).length, cor: '#00967B', bg: '#E6F5F1', icon: 'calendar' },
            { label: 'Pendentes líder',  val: user.perfil === 'gestor' ? pendentesLider.length : ferias.filter(f => f.status === 'pendente_lider').length, cor: '#B56500', bg: '#FFF7EB', icon: 'warn' },
            { label: 'Pendentes GC',     val: pendentesRH.length,  cor: '#1F4A8A', bg: '#EEF3FA', icon: 'lock' },
            { label: 'Day offs pendentes', val: pendentesDO.length, cor: '#6B3FA0', bg: '#F4EEFF', icon: 'calendar' },
            { label: 'Aprovadas (ano)',  val: ferias.filter(f => f.status === 'aprovada').length, cor: '#00836B', bg: '#E6F5F1', icon: 'check' },
          ].map(k => (
            <div key={k.label} style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '14px 20px', display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 36, height: 36, borderRadius: 9, background: k.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <div style={{ color: k.cor }}><Icon name={k.icon} size={16} /></div>
              </div>
              <div>
                <div style={{ fontSize: 22, fontWeight: 800, color: k.cor, lineHeight: 1 }}>{k.val}</div>
                <div style={{ fontSize: 11, color: 'var(--escalab-mute)', fontWeight: 500, marginTop: 3 }}>{k.label}</div>
              </div>
            </div>
          ))}
        </div>
      )}

      <Tabs tabs={tabs} active={aba} onChange={setAba} />
      <div style={{ paddingTop: 22 }}>

        {/* ── KANBAN FÉRIAS ── */}
        {aba === 'kanban' && (
          <div style={{ animation: 'fadeIn .2s' }}>
            <div style={{ overflowX: 'auto', paddingBottom: 8 }}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(230px, 1fr))', gap: 14, alignItems: 'start', minWidth: 880 }}>
                {COLUNAS_KANBAN.map(col => {
                  const st = STATUS_FERIAS[col.id];
                  const cards = feriasKanban.filter(f => f.status === col.id);
                  const podeAprovar = col.id === 'pendente_lider' || col.id === 'pendente_rh';
                  return (
                    <div key={col.id}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, padding: '0 2px' }}>
                        <div style={{ width: 9, height: 9, borderRadius: '50%', background: st?.color, flexShrink: 0 }} />
                        <span style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '.07em', textTransform: 'uppercase', color: 'var(--escalab-slate)', flex: 1 }}>{col.label}</span>
                        <span style={{ fontSize: 11, fontWeight: 600, color: st?.color, background: st?.bg, borderRadius: 999, padding: '2px 8px', flexShrink: 0 }}>{cards.length}</span>
                      </div>
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                        {cards.length === 0 ? (
                          <div style={{ border: '2px dashed var(--escalab-line)', borderRadius: 12, padding: '20px 16px', textAlign: 'center', color: 'var(--escalab-mute)', fontSize: 12.5 }}>Nenhuma solicitação</div>
                        ) : (
                          cards.map(sol => <KanbanCardFerias key={sol.id} sol={sol} onClick={podeAprovar ? () => setModalAprovacao(sol) : undefined} />)
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        )}

        {/* ── DAY OFFS RH ── */}
        {aba === 'dayoff_rh' && (
          <div style={{ animation: 'fadeIn .2s', display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {pendentesDO.length === 0 ? (
                <Banner tone="info">Nenhum day off aguardando aprovação.</Banner>
              ) : (
                pendentesDO.map(d => <CardDayOff key={d.id} d={d} showColab onAcao={() => setModalAprovDO(d)} user={user} />)
              )}
              {dayoffs.filter(d => d.status !== 'pendente').length > 0 && (
                <>
                  <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginTop: 12 }}>Histórico</div>
                  {dayoffs.filter(d => d.status !== 'pendente').map(d => <CardDayOff key={d.id} d={d} showColab user={user} />)}
                </>
              )}
            </div>

            {/* ── Editar saldos de Day Off ── */}
            {(() => {
              const saldosMap = getDayOffSaldos();

              function iniciarEdit(id) {
                const total = getSaldoTotalDayOff(id);
                setSaldosEdit(s => ({ ...s, [id]: total }));
                setEditandoSaldoId(id);
              }
              function salvarEdit(id) {
                const val = saldosEdit[id];
                if (val != null && !isNaN(val)) setSaldoDayOff(id, val);
                setEditandoSaldoId(null);
                recarregar();
              }
              function resetar(id) { setSaldoDayOff(id, null); setEditandoSaldoId(null); recarregar(); }

              return (
                <Card pad={20}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
                    <Icon name="star" size={15}/>
                    <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', flex: 1 }}>Saldo de Day Off por colaborador</div>
                    <span style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>Padrão: {DAYOFF_SALDO_ANO} dias/ano</span>
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxHeight: 360, overflowY: 'auto' }}>
                    {COLABORADORES.map(c => {
                      const saldo = getDayOffSaldo(c.id, dayoffs);
                      const temCustom = saldosMap[c.id] != null;
                      const editando = editandoSaldoId === c.id;
                      return (
                        <div key={c.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', borderRadius: 9, border: '1px solid var(--escalab-line)', background: temCustom ? '#FFF7EB' : '#fff' }}>
                          <Avatar nome={c.nome} cor={c.cor} iniciais={c.iniciais} size={28}/>
                          <div style={{ flex: 1, minWidth: 0 }}>
                            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--escalab-ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.nome.split(' ').slice(0,2).join(' ')}</div>
                            <div style={{ fontSize: 11, color: 'var(--escalab-mute)' }}>{saldo.usados}d usados · {saldo.disponivel}d disponível</div>
                          </div>
                          {editando ? (
                            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                              <input type="number" min={0} max={365} value={saldosEdit[c.id] ?? saldo.total}
                                onChange={e => setSaldosEdit(s => ({...s, [c.id]: Number(e.target.value)}))}
                                style={{ width: 60, border: '1px solid var(--escalab-brand)', borderRadius: 6, padding: '4px 8px', fontSize: 13, outline: 'none', textAlign: 'center' }}/>
                              <span style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>dias</span>
                              <button onClick={() => salvarEdit(c.id)} style={{ border: 0, borderRadius: 6, padding: '4px 10px', background: 'var(--escalab-brand)', color: '#fff', cursor: 'pointer', fontSize: 12, fontWeight: 600, fontFamily: 'var(--font-sans)' }}>Salvar</button>
                              <button onClick={() => setEditandoSaldoId(null)} style={{ border: '1px solid var(--escalab-line)', borderRadius: 6, padding: '4px 8px', background: '#fff', cursor: 'pointer', fontSize: 12, fontFamily: 'var(--font-sans)' }}>✕</button>
                            </div>
                          ) : (
                            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                              <span style={{ fontSize: 14, fontWeight: 700, color: temCustom ? '#B56500' : 'var(--escalab-ink)' }}>{saldo.total}d</span>
                              {temCustom && <span style={{ fontSize: 10, color: '#B56500', fontWeight: 600, background: '#FFF7EB', border: '1px solid #FFD6A3', borderRadius: 4, padding: '1px 5px' }}>custom</span>}
                              <button onClick={() => iniciarEdit(c.id)} style={{ border: '1px solid var(--escalab-line)', borderRadius: 6, padding: '3px 10px', background: '#fff', cursor: 'pointer', fontSize: 12, color: 'var(--escalab-slate)', fontFamily: 'var(--font-sans)' }}>Editar</button>
                              {temCustom && <button onClick={() => resetar(c.id)} style={{ border: 0, background: 'transparent', cursor: 'pointer', fontSize: 11, color: 'var(--escalab-mute)', fontFamily: 'var(--font-sans)', padding: '3px 4px' }}>Reset</button>}
                            </div>
                          )}
                        </div>
                      );
                    })}
                  </div>
                </Card>
              );
            })()}

            {/* ── Registros de saldo (compensatório) aguardando aprovação ── */}
            <PainelRegistrosSaldoRH onRefresh={recarregar} user={user} />
          </div>
        )}

        {/* ── BANCO DE FÉRIAS ── */}
        {aba === 'banco' && <BancoFeriasView ferias={ferias} />}

        {/* ── MINHAS FÉRIAS ── */}
        {/* ── MINHAS FÉRIAS & DAY OFF (colaborador unificado) ── */}
        {aba === 'minhas_dayoff' && (
          <div style={{ animation: 'fadeIn .2s', display: 'flex', flexDirection: 'column', gap: 22 }}>
            <SaldoWidget user={user} ferias={ferias} dayoffs={dayoffs} onAbrirRegistroSaldo={() => setModalRegistroSaldoDO(true)} />
            {/* Férias */}
            <div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--escalab-ink)', display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Icon name="calendar" size={15} /> Minhas Férias
                </div>
                <Button size="sm" variant="outline" icon="plus" onClick={() => setModalSolicitar(true)}>Solicitar férias</Button>
              </div>
              {minhas.length === 0 ? (
                <div style={{ textAlign: 'center', padding: '28px 24px', background: 'var(--escalab-paper)', borderRadius: 14, border: '1px dashed var(--escalab-line)' }}>
                  <div style={{ fontSize: 13.5, color: 'var(--escalab-mute)' }}>Nenhuma férias solicitada ainda.</div>
                </div>
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {minhas.map(sol => <CardSolicitacao key={sol.id} sol={sol} user={user} />)}
                </div>
              )}
            </div>
            {/* Day Off */}
            <div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--escalab-ink)', display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Icon name="star" size={15} /> Meu Day Off
                </div>
                <Button size="sm" variant="outline" icon="plus" onClick={() => setModalDayOff(true)}>Solicitar Day Off</Button>
              </div>
              {meusDayoffs.length === 0 ? (
                <div style={{ textAlign: 'center', padding: '28px 24px', background: 'var(--escalab-paper)', borderRadius: 14, border: '1px dashed var(--escalab-line)' }}>
                  <div style={{ fontSize: 13.5, color: 'var(--escalab-mute)' }}>Nenhum day off solicitado ainda.</div>
                </div>
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {meusDayoffs.map(d => <CardDayOff key={d.id} d={d} user={user} />)}
                </div>
              )}
            </div>
          </div>
        )}

        {/* ── MINHAS FÉRIAS (admin/gestor) ── */}
        {aba === 'minhas' && (
          <div style={{ animation: 'fadeIn .2s' }}>
            <SaldoWidget user={user} ferias={ferias} dayoffs={dayoffs} onAbrirRegistroSaldo={() => setModalRegistroSaldoDO(true)} />
            {minhas.length === 0 ? (
              <div style={{ textAlign: 'center', padding: '48px 24px' }}>
                <div style={{ color: 'var(--escalab-mute)', marginBottom: 12 }}><Icon name="calendar" size={36} /></div>
                <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 8 }}>Nenhuma solicitação ainda</div>
                <Button variant="primary" icon="plus" onClick={() => setModalSolicitar(true)}>Solicitar férias</Button>
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {minhas.map(sol => <CardSolicitacao key={sol.id} sol={sol} user={user} />)}
              </div>
            )}
          </div>
        )}

        {/* ── MEU DAY OFF (admin/gestor) ── */}
        {aba === 'dayoff' && (
          <div style={{ animation: 'fadeIn .2s' }}>
            <SaldoWidget user={user} ferias={ferias} dayoffs={dayoffs} onAbrirRegistroSaldo={() => setModalRegistroSaldoDO(true)} />
            {meusDayoffs.length === 0 ? (
              <div style={{ textAlign: 'center', padding: '40px 24px' }}>
                <div style={{ color: '#6B3FA0', marginBottom: 12 }}><Icon name="calendar" size={36} /></div>
                <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 8 }}>Nenhum day off solicitado</div>
                <Button variant="primary" onClick={() => setModalDayOff(true)}>Solicitar Day Off</Button>
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {meusDayoffs.map(d => <CardDayOff key={d.id} d={d} user={user} />)}
              </div>
            )}
          </div>
        )}

        {/* ── CALENDÁRIO ── */}
        {(aba === 'calendario') && (
          <div style={{ animation: 'fadeIn .2s' }}>
            <Card pad={24}>
              <CalendarioMes
                ferias={user.perfil === 'gestor' ? equipeFerias : todas}
                dayoffs={dayoffs.filter(d => d.status === 'aprovado')}
                mes={mes} ano={ano}
                onPrev={() => { if (mes === 0) { setMes(11); setAno(a => a - 1); } else setMes(m => m - 1); }}
                onNext={() => { if (mes === 11) { setMes(0); setAno(a => a + 1); } else setMes(m => m + 1); }}
              />
            </Card>
            {(() => {
              const mesStr = `${ano}-${String(mes + 1).padStart(2, '0')}`;
              const doMes = (user.perfil === 'gestor' ? equipeFerias : todas).filter(f =>
                f.inicio?.startsWith(mesStr) || f.fim?.startsWith(mesStr) || (f.inicio < mesStr + '-01' && f.fim > mesStr + '-31')
              );
              if (!doMes.length) return null;
              return (
                <div style={{ marginTop: 20 }}>
                  <div style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 12 }}>Neste mês</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                    {doMes.map(sol => <CardSolicitacao key={sol.id} sol={sol} showColab user={user} />)}
                  </div>
                </div>
              );
            })()}
          </div>
        )}

        {/* ── TODAS ── */}
        {aba === 'todas' && (
          <div style={{ animation: 'fadeIn .2s' }}>
            <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14, overflow: 'hidden' }}>
              <table>
                <thead>
                  <tr>
                    <th>Colaborador</th>
                    <th>Período</th>
                    <th>Dias</th>
                    <th>Tipo</th>
                    <th>Status</th>
                    <th>Solicitado em</th>
                  </tr>
                </thead>
                <tbody>
                  {todas.map(sol => {
                    const colab = COLABORADORES.find(c => c.id === sol.colaboradorId);
                    const st = STATUS_FERIAS[sol.status] || { label: sol.status, tone: 'neutral' };
                    return (
                      <tr key={sol.id} onClick={() => sol.status === 'pendente_rh' && setModalAprovacao(sol)} style={{ cursor: sol.status === 'pendente_rh' ? 'pointer' : 'default' }}>
                        <td>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                            <Avatar nome={colab?.nome} cor={colab?.cor} iniciais={colab?.iniciais} size={30} />
                            <div>
                              <div style={{ fontSize: 13, fontWeight: 500 }}>{colab?.nome}</div>
                              <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>{colab?.setor}</div>
                            </div>
                          </div>
                        </td>
                        <td style={{ fontSize: 13 }}>{dataStr(sol.inicio)} → {dataStr(sol.fim)}</td>
                        <td style={{ fontSize: 13 }}>{sol.dias}d</td>
                        <td style={{ fontSize: 12.5, color: 'var(--escalab-mute)' }}>{sol.tipo}</td>
                        <td><Tag tone={st.tone} size="xs">{st.label}</Tag></td>
                        <td style={{ fontSize: 12.5, color: 'var(--escalab-mute)' }}>{dataStr(sol.criadoEm)}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        )}

      </div>

      {modalSolicitar && <ModalSolicitar user={user} ferias={ferias} onClose={() => setModalSolicitar(false)} onSalvar={handleSalvarReq} />}
      {modalDayOff    && <ModalSolicitarDayOff user={user} dayoffs={dayoffs} ferias={ferias} onClose={() => setModalDayOff(false)} onSalvar={handleSalvarDayOff} />}
      {modalRegistroSaldoDO && <ModalRegistroSaldoDayOff user={user} onClose={() => setModalRegistroSaldoDO(false)} onSalvar={recarregar} />}
      {modalAprovacao && (
        <ModalAprovacao solicitacao={modalAprovacao} etapa={etapaModal} user={user} onClose={() => setModalAprovacao(null)} onAprovar={handleAprovar} onRejeitar={handleRejeitar} />
      )}
      {modalAprovDO && (
        <ModalAprovacaoDayOff dayoff={modalAprovDO} user={user} onClose={() => setModalAprovDO(null)} onAprovar={handleAprovarDO} onRejeitar={handleRejeitarDO} />
      )}
    </div>
  );
};

window.ScreenFerias = ScreenFerias;