// ═══════════════════════════════════════════════════════════════
// SCREEN · Horas · Banco de horas simples (Site AVD 12)
// Cada colab registra horas do dia divididas entre Reunião e
// Atividade. Banco de horas (extras / negativas) sai automático.
// Feriados, day off aprovado e férias contam como jornada cumprida.
// ═══════════════════════════════════════════════════════════════

const HORAS_TIPO_LABEL = {
  util:    { label: 'Dia útil',         cor: '#4A5560', bg: '#F1F3F5' },
  fds:     { label: 'Final de semana',  cor: '#7A4A00', bg: '#FFF7EB' },
  feriado: { label: 'Feriado',          cor: '#B3261E', bg: '#FDECEC' },
  dayoff:  { label: 'Day Off',          cor: '#1F4A8A', bg: '#EEF3FA' },
  ferias:  { label: 'Férias',           cor: '#005E4D', bg: '#E6F5F1' },
};

function _ymdHoje() {
  const d = new Date();
  return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
}
function _addDias(ymd, n) {
  const d = new Date(ymd + 'T00:00:00');
  d.setDate(d.getDate() + n);
  return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
}
function _fmtDia(ymd) {
  const d = new Date(ymd + 'T00:00:00');
  return d.toLocaleDateString('pt-BR', { day: '2-digit', month: 'short' }).replace('.', '');
}
function _fmtDiaSemana(ymd) {
  const d = new Date(ymd + 'T00:00:00');
  return d.toLocaleDateString('pt-BR', { weekday: 'short' }).replace('.', '');
}
function _mesAtual() {
  const d = new Date();
  return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0');
}
function _fmtMes(ym) {
  const [a, m] = ym.split('-');
  const d = new Date(Number(a), Number(m) - 1, 1);
  return d.toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' });
}

// ── Form rápido para registrar horas do dia ─────────────────────────────────
const FormHorasDia = ({ colaboradorId, dataYmd, onSalvo }) => {
  const reg = getRegistroHoraDia(colaboradorId, dataYmd);
  const tipoDia = getTipoDiaColaborador(colaboradorId, dataYmd);
  const [reuniao, setReuniao]   = useState(reg ? String(reg.reuniao)   : '');
  const [atividade, setAtividade] = useState(reg ? String(reg.atividade) : '');
  const [obs, setObs] = useState(reg ? reg.obs : '');
  const [salvo, setSalvo] = useState(false);

  // Quando o usuário troca de data/colab, recarrega os campos do dia selecionado
  useEffect(() => {
    const r = getRegistroHoraDia(colaboradorId, dataYmd);
    setReuniao(r ? String(r.reuniao) : '');
    setAtividade(r ? String(r.atividade) : '');
    setObs(r ? r.obs : '');
    setSalvo(false);
  }, [colaboradorId, dataYmd]);

  const automatico = tipoDia === 'feriado' || tipoDia === 'dayoff' || tipoDia === 'ferias';
  const tipoInfo = HORAS_TIPO_LABEL[tipoDia];

  function salvar() {
    salvarRegistroHora({
      colaboradorId,
      data: dataYmd,
      reuniao: parseFloat(reuniao) || 0,
      atividade: parseFloat(atividade) || 0,
      obs,
    });
    setSalvo(true);
    setTimeout(() => setSalvo(false), 1800);
    onSalvo && onSalvo();
  }
  function limpar() {
    removerRegistroHora(colaboradorId, dataYmd);
    setReuniao(''); setAtividade(''); setObs('');
    setSalvo(true);
    setTimeout(() => setSalvo(false), 1500);
    onSalvo && onSalvo();
  }

  if (automatico) {
    return (
      <div style={{ background: tipoInfo.bg, border: `1px solid ${tipoInfo.cor}33`, borderRadius: 12, padding: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
          <Tag tone={tipoDia === 'feriado' ? 'danger' : tipoDia === 'ferias' ? 'success' : 'info'}>{tipoInfo.label}</Tag>
          <div style={{ fontSize: 13, color: tipoInfo.cor, fontWeight: 600 }}>{_fmtDia(dataYmd)} · {_fmtDiaSemana(dataYmd)}</div>
        </div>
        <div style={{ fontSize: 14, color: 'var(--escalab-ink)' }}>
          Dia computado automaticamente como <strong>8h trabalhadas</strong>. Não precisa preencher.
        </div>
      </div>
    );
  }

  const total = (parseFloat(reuniao) || 0) + (parseFloat(atividade) || 0);
  const saldo = tipoDia === 'fds' ? total : total - HORAS_JORNADA_PADRAO;

  return (
    <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: 18 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14, flexWrap: 'wrap' }}>
        <Tag tone={tipoDia === 'fds' ? 'amber' : 'neutral'}>{tipoInfo.label}</Tag>
        <div style={{ fontSize: 14, color: 'var(--escalab-ink)', fontWeight: 600 }}>{_fmtDia(dataYmd)} · {_fmtDiaSemana(dataYmd)}</div>
        {salvo && <Tag tone="success">Salvo</Tag>}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 10 }}>
        <Field label="Reunião (h)" hint="Tempo em reuniões/calls">
          <Input value={reuniao} onChange={setReuniao} type="number" placeholder="0" suffix="h" />
        </Field>
        <Field label="Atividade (h)" hint="Trabalho focado / entregas">
          <Input value={atividade} onChange={setAtividade} type="number" placeholder="0" suffix="h" />
        </Field>
      </div>

      <Field label="Observação (opcional)">
        <Input value={obs} onChange={setObs} placeholder="Ex: dia de planejamento, projeto X..." />
      </Field>

      <div style={{ display: 'flex', gap: 14, alignItems: 'center', justifyContent: 'space-between', marginTop: 14, paddingTop: 14, borderTop: '1px dashed var(--escalab-line)', flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', gap: 18, fontSize: 13.5 }}>
          <div>
            <div style={{ fontSize: 11, color: 'var(--escalab-mute)', textTransform: 'uppercase', letterSpacing: '.08em' }}>Total do dia</div>
            <div style={{ fontWeight: 700, color: 'var(--escalab-brand-deep)', fontSize: 18 }}>{fmtHoras(total)}</div>
          </div>
          {tipoDia !== 'fds' && (
            <div>
              <div style={{ fontSize: 11, color: 'var(--escalab-mute)', textTransform: 'uppercase', letterSpacing: '.08em' }}>Saldo</div>
              <div style={{ fontWeight: 700, fontSize: 18, color: saldo > 0 ? '#00836B' : saldo < 0 ? '#B3261E' : 'var(--escalab-ink)' }}>
                {saldo > 0 ? '+' : ''}{fmtHoras(saldo)}
              </div>
            </div>
          )}
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          {reg && <Button variant="ghost" size="sm" onClick={limpar}>Limpar</Button>}
          <Button variant="primary" size="sm" icon="check" onClick={salvar}>Salvar</Button>
        </div>
      </div>
    </div>
  );
};

// ── Gráfico de barras da semana atual (seg→dom) do colab ──────────────────────
const GraficoBarrasColab = ({ colaboradorId }) => {
  const hoje = _ymdHoje();
  // calcula início da semana corrente (segunda-feira)
  const d0 = new Date(hoje + 'T00:00:00');
  const diaSem = (d0.getDay() + 6) % 7; // 0 = seg, 6 = dom
  const inicioSemana = new Date(d0); inicioSemana.setDate(d0.getDate() - diaSem);
  const dias = [];
  for (let i = 0; i < 7; i++) {
    const dd = new Date(inicioSemana); dd.setDate(inicioSemana.getDate() + i);
    dias.push(dd.toISOString().slice(0, 10));
  }
  const dados = dias.map(d => {
    const h = getHorasDia(colaboradorId, d);
    return { dia: d, reuniao: h.reuniao, atividade: h.atividade, total: h.total, tipo: h.tipo };
  });
  const jornada = (typeof getJornadaDia === 'function') ? getJornadaDia(colaboradorId) : HORAS_JORNADA_PADRAO;
  const maxH = Math.max(jornada, ...dados.map(d => d.total));

  return (
    <Card pad={18}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--escalab-ink)' }}>Esta semana</div>
          <div style={{ fontSize: 12, color: 'var(--escalab-mute)', marginTop: 2 }}>Reunião + Atividade · linha em {jornada}h = jornada deste colab.</div>
        </div>
        <div style={{ display: 'flex', gap: 10, fontSize: 11 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 10, background: '#1F4A8A', borderRadius: 2 }} /> Reunião</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 10, background: '#00967B', borderRadius: 2 }} /> Atividade</div>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 160, padding: '0 4px', position: 'relative' }}>
        {/* linha jornada */}
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 24 + (jornada / maxH) * 130, height: 1, borderTop: '1px dashed var(--escalab-line)', pointerEvents: 'none' }} />
        {dados.map(d => {
          const hReu = (d.reuniao / maxH) * 130;
          const hAtv = (d.atividade / maxH) * 130;
          const tipoInfo = HORAS_TIPO_LABEL[d.tipo];
          return (
            <div key={d.dia} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3 }}>
              <div title={`${_fmtDia(d.dia)} · ${tipoInfo.label} · ${fmtHoras(d.total)}`} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', width: '100%', maxWidth: 28, height: 130 }}>
                {d.atividade > 0 && <div style={{ height: hAtv, background: '#00967B', borderRadius: hReu > 0 ? 0 : '4px 4px 0 0' }} />}
                {d.reuniao > 0 && <div style={{ height: hReu, background: '#1F4A8A', borderRadius: '4px 4px 0 0' }} />}
                {d.total === 0 && d.tipo !== 'util' && (
                  <div style={{ height: 14, background: tipoInfo.cor, opacity: 0.35, borderRadius: 3 }} />
                )}
              </div>
              <div style={{ fontSize: 11, color: 'var(--escalab-slate)', fontWeight: 600, textAlign: 'center', lineHeight: 1.15, marginTop: 2 }}>
                {_fmtDia(d.dia).split(' ')[0]}
              </div>
            </div>
          );
        })}
      </div>
    </Card>
  );
};

// ── Gráfico por setor (barras horizontais do mês) ───────────────────────────
const GraficoSetores = ({ ym }) => {
  const dados = SETORES.map(s => {
    const h = getHorasSetorMes(s, ym);
    return { setor: s, ...h };
  }).filter(d => d.n > 0).sort((a, b) => b.total - a.total);

  const max = Math.max(1, ...dados.map(d => d.total));

  return (
    <Card pad={18}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14, flexWrap: 'wrap', gap: 8 }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--escalab-ink)' }}>Horas por setor · {_fmtMes(ym)}</div>
          <div style={{ fontSize: 12, color: 'var(--escalab-mute)', marginTop: 2 }}>Soma de reunião + atividade registrados pelos colaboradores</div>
        </div>
        <div style={{ display: 'flex', gap: 10, fontSize: 11 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 10, background: '#1F4A8A', borderRadius: 2 }} /> Reunião</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 10, background: '#00967B', borderRadius: 2 }} /> Atividade</div>
        </div>
      </div>
      {dados.length === 0 ? (
        <div style={{ padding: 24, textAlign: 'center', color: 'var(--escalab-mute)', fontSize: 13 }}>
          Ninguém registrou horas neste mês ainda.
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {dados.map(d => {
            const pctReu = (d.reuniao / max) * 100;
            const pctAtv = (d.atividade / max) * 100;
            return (
              <div key={d.setor}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--escalab-ink)' }}>{d.setor}</div>
                  <div style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>
                    <span style={{ fontWeight: 700, color: 'var(--escalab-brand-deep)' }}>{fmtHoras(d.total)}</span> · {d.comRegistro}/{d.n} colab
                  </div>
                </div>
                <div style={{ display: 'flex', width: '100%', height: 12, background: 'var(--escalab-line)', borderRadius: 999, overflow: 'hidden' }}>
                  <div style={{ width: pctReu + '%', background: '#1F4A8A' }} title={`Reunião: ${fmtHoras(d.reuniao)}`} />
                  <div style={{ width: pctAtv + '%', background: '#00967B' }} title={`Atividade: ${fmtHoras(d.atividade)}`} />
                </div>
              </div>
            );
          })}
        </div>
      )}
    </Card>
  );
};

// ── Lista de colab + banco de horas (admin/gestor) ──────────────────────────
const RankingColabs = ({ user }) => {
  const visiveis = getColaboradoresVisiveis(user).filter(c => !isDesligado(c.id));
  const dados = visiveis.map(c => ({
    ...c,
    banco: getBancoHoras(c.id),
    mes: getHorasColabMes(c.id, _mesAtual()),
  })).sort((a, b) => Math.abs(b.banco) - Math.abs(a.banco));

  return (
    <Card pad={18}>
      <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--escalab-ink)', marginBottom: 4 }}>Banco de horas por colaborador</div>
      <div style={{ fontSize: 12, color: 'var(--escalab-mute)', marginBottom: 14 }}>Saldo acumulado no ano. Verde = banco positivo (horas extras), vermelho = negativo.</div>
      <div className="table-scroll">
        <table>
          <thead>
            <tr>
              <th>Colaborador</th>
              <th>Setor</th>
              <th style={{ textAlign: 'right' }}>Horas no mês</th>
              <th style={{ textAlign: 'right' }}>Banco</th>
            </tr>
          </thead>
          <tbody>
            {dados.map(c => (
              <tr key={c.id}>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <Avatar nome={c.nome} cor={c.cor} iniciais={c.iniciais} size={26} />
                    <div style={{ fontSize: 13 }}>{c.nome}</div>
                  </div>
                </td>
                <td style={{ fontSize: 12.5, color: 'var(--escalab-slate)' }}>{c.setor}</td>
                <td style={{ textAlign: 'right', fontSize: 13, color: 'var(--escalab-ink)' }}>{fmtHoras(c.mes.total)}</td>
                <td style={{ textAlign: 'right', fontWeight: 700, fontSize: 13.5, color: c.banco > 0 ? '#00836B' : c.banco < 0 ? '#B3261E' : 'var(--escalab-mute)' }}>
                  {c.banco > 0 ? '+' : ''}{fmtHoras(c.banco)}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Card>
  );
};

// ── Card KPI customizado da aba Horas (colorido, robusto) ───────────────────
const HoraKpi = ({ label, value, sub, cor, valorCor }) => (
  <div style={{
    background: '#fff',
    border: `1px solid ${cor || 'var(--escalab-line)'}33`,
    borderLeft: `3px solid ${cor || 'var(--escalab-brand)'}`,
    borderRadius: 12,
    padding: '16px 18px',
    minHeight: 96,
    display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
  }}>
    <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)' }}>{label}</div>
    <div style={{ fontFamily: 'var(--font-sans)', fontSize: 28, fontWeight: 800, letterSpacing: '-.02em', color: valorCor || 'var(--escalab-ink)', lineHeight: 1.1, marginTop: 8 }}>{value || '·'}</div>
    {sub && <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginTop: 6 }}>{sub}</div>}
  </div>
);

// ── Tela do colaborador: registra horas + vê próprio histórico ──────────────
const VisaoColaborador = ({ user, alvoId }) => {
  const colabId = alvoId || user.id;
  const [tick, setTick] = useState(0);
  const [dataSel, setDataSel] = useState(_ymdHoje());
  const refresh = () => setTick(t => t + 1);

  // Calculados com try/catch pra não quebrar UI se localStorage estiver corrompido
  const banco = useMemo(() => { try { return getBancoHoras(colabId); } catch { return 0; } }, [colabId, tick]);
  const mes   = useMemo(() => { try { return getHorasColabMes(colabId, _mesAtual()); } catch { return { reuniao: 0, atividade: 0, total: 0, dias: 0 }; } }, [colabId, tick]);
  const jornadaMes = useMemo(() => {
    try {
      const hoje = _ymdHoje();
      const ym = _mesAtual();
      let dias = 0;
      const dIni = new Date(ym + '-01T00:00:00');
      const dHoje = new Date(hoje + 'T00:00:00');
      for (let d = new Date(dIni); d <= dHoje; d.setDate(d.getDate() + 1)) {
        const y = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
        if (getTipoDiaColaborador(colabId, y) === 'util') dias++;
      }
      return dias * HORAS_JORNADA_PADRAO;
    } catch { return 0; }
  }, [colabId, tick]);

  const saldoMes = mes.total - jornadaMes;
  const pctMes = jornadaMes > 0 ? Math.round((mes.total / jornadaMes) * 100) : 0;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 12 }}>
        <HoraKpi
          label="Esperado no mês"
          value={fmtHoras(jornadaMes)}
          sub="Jornada padrão (8h por dia útil)"
          cor="#4A5560"
        />
        <HoraKpi
          label="Lançadas no mês"
          value={fmtHoras(mes.total)}
          sub={`${pctMes}% do esperado · ${mes.dias} dia${mes.dias === 1 ? '' : 's'} registrado${mes.dias === 1 ? '' : 's'}`}
          cor="#00967B"
          valorCor="#00836B"
        />
        <HoraKpi
          label="Saldo do mês"
          value={(saldoMes > 0 ? '+' : '') + fmtHoras(saldoMes)}
          sub={saldoMes >= 0 ? 'Horas extras acumuladas' : 'Horas a compensar'}
          cor={saldoMes >= 0 ? '#1F4A8A' : '#B3261E'}
          valorCor={saldoMes > 0 ? '#1F4A8A' : saldoMes < 0 ? '#B3261E' : 'var(--escalab-ink)'}
        />
        <HoraKpi
          label="Banco no ano"
          value={(banco > 0 ? '+' : '') + fmtHoras(banco)}
          sub={banco >= 0 ? 'Saldo positivo acumulado' : 'A compensar'}
          cor={banco >= 0 ? '#6B3FA0' : '#B3261E'}
          valorCor={banco > 0 ? '#6B3FA0' : banco < 0 ? '#B3261E' : 'var(--escalab-ink)'}
        />
      </div>

      <Card pad={18}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14, flexWrap: 'wrap' }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--escalab-ink)' }}>Registrar horas</div>
          <div style={{ flex: 1 }} />
          <div style={{ display: 'flex', gap: 6 }}>
            <Button variant="outline" size="sm" icon="chev_left" onClick={() => setDataSel(_addDias(dataSel, -1))}>Anterior</Button>
            <Button variant="outline" size="sm" onClick={() => setDataSel(_ymdHoje())}>Hoje</Button>
            <Button variant="outline" size="sm" iconRight="chev_right" onClick={() => { const prox = _addDias(dataSel, 1); if (prox <= _ymdHoje()) setDataSel(prox); }} disabled={dataSel >= _ymdHoje()}>Próximo</Button>
          </div>
        </div>
        <FormHorasDia colaboradorId={colabId} dataYmd={dataSel} onSalvo={refresh} />
      </Card>

      <GraficoBarrasColab key={tick} colaboradorId={colabId} />
    </div>
  );
};

// ── Em construção (para colaboradores e gestores) ───────────────────────────
const HorasEmConstrucao = ({ user }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
    <div>
      <h2 style={{ fontSize: 22, fontWeight: 700, margin: 0, letterSpacing: '-.01em' }}>Banco de horas</h2>
      <div style={{ fontSize: 13, color: 'var(--escalab-mute)', marginTop: 4 }}>
        {user.nome.split(' ')[0]} · {new Date().toLocaleDateString('pt-BR', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' })}
      </div>
    </div>

    <Card pad={36}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 14, padding: '20px 12px' }}>
        <div style={{
          width: 68, height: 68, borderRadius: 18,
          background: 'linear-gradient(135deg, #FFF7EB 0%, #FFE9A8 100%)',
          border: '1px solid #F0CE6A',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#7A4A00',
        }}>
          <Icon name="settings" size={30} />
        </div>
        <div style={{
          display: 'inline-flex', alignItems: 'center',
          background: '#E89B3B', color: '#fff',
          borderRadius: 999, padding: '3px 11px',
          fontSize: 10.5, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase',
        }}>Em construção</div>
        <h3 style={{ margin: '4px 0 0', fontSize: 20, fontWeight: 700, color: 'var(--escalab-ink)', letterSpacing: '-.01em' }}>
          Em construção
        </h3>
        <p style={{ margin: 0, fontSize: 14, color: 'var(--escalab-slate)', maxWidth: 520, lineHeight: 1.55 }}>
          O banco de horas está temporariamente fechado para colaboradores e gestores enquanto
          finalizamos o redesenho. Em breve, será disponibilizada uma nova forma de registrar e
          visualizar as horas, mais simples no dia a dia.
        </p>
        <div style={{
          marginTop: 10, padding: '12px 16px',
          background: 'var(--escalab-paper)', border: '1px solid var(--escalab-line)',
          borderRadius: 10, fontSize: 12.5, color: 'var(--escalab-slate)', maxWidth: 520, textAlign: 'left',
        }}>
          <strong style={{ color: 'var(--escalab-ink)' }}>Enquanto isso:</strong> registre suas horas
          como já fazia fora da plataforma. Qualquer ajuste de horário ou banco fale com o
          Gente &amp; Cultura por <a href="mailto:gente.cultura@escalab.com.br" style={{ color: 'var(--escalab-brand-deep)', fontWeight: 600 }}>gente.cultura@escalab.com.br</a>.
        </div>
      </div>
    </Card>
  </div>
);

// ── Tela principal ──────────────────────────────────────────────────────────
const ScreenHoras = ({ user }) => {
  const ehAdmin = user.perfil === 'admin';
  const ehGestor = user.perfil === 'gestor';
  const [aba, setAba] = useState(ehAdmin || ehGestor ? 'visao' : 'minhas');
  const [colabSelId, setColabSelId] = useState(user.id);
  const ym = _mesAtual();

  // Colaboradores e gestores veem "em construção"; admin/GC mantem acesso.
  if (!ehAdmin) return <HorasEmConstrucao user={user} />;

  const visiveis = (ehAdmin || ehGestor) ? getColaboradoresVisiveis(user).filter(c => !isDesligado(c.id)) : [];

  const tabs = [];
  if (ehAdmin || ehGestor) tabs.push({ id: 'visao', label: 'Visão geral', icon: 'chart' });
  tabs.push({ id: 'minhas', label: 'Minhas horas', icon: 'clock' });
  if (ehAdmin || ehGestor) tabs.push({ id: 'colab', label: 'Por colaborador', icon: 'user' });

  const bancoUser = (() => { try { return getBancoHoras(user.id); } catch { return 0; } })();

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
        <div>
          <h2 style={{ fontSize: 22, fontWeight: 700, margin: 0, letterSpacing: '-.01em' }}>Banco de horas</h2>
          <div style={{ fontSize: 13, color: 'var(--escalab-mute)', marginTop: 4 }}>
            {user.nome.split(' ')[0]} · {new Date().toLocaleDateString('pt-BR', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' })}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <Tag tone={bancoUser >= 0 ? 'success' : 'danger'}>
            Banco: {bancoUser > 0 ? '+' : ''}{fmtHoras(bancoUser)}
          </Tag>
        </div>
      </div>

      <Banner tone="info">
        Registre suas horas diárias divididas entre <strong>reunião</strong> e <strong>atividade</strong>. Feriados, day off e férias contam como jornada cumprida automaticamente.
      </Banner>

      <Tabs tabs={tabs} active={aba} onChange={setAba} />

      {aba === 'visao' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 6 }}>
          <GraficoSetores ym={ym} />
          <RankingColabs user={user} />
        </div>
      )}

      {aba === 'minhas' && (
        <div style={{ marginTop: 6 }}>
          <VisaoColaborador user={user} />
        </div>
      )}

      {aba === 'colab' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 6 }}>
          <Card pad={14}>
            <Field label="Selecionar colaborador">
              <SelectInput
                value={colabSelId}
                onChange={v => setColabSelId(Number(v))}
                options={visiveis.map(c => ({ value: c.id, label: `${c.nome} · ${c.setor}` }))}
              />
            </Field>
          </Card>
          <VisaoColaborador user={user} alvoId={Number(colabSelId)} />
        </div>
      )}
    </div>
  );
};

window.ScreenHoras = ScreenHoras;