// ═══════════════════════════════════════════════════════════════
// SCREEN · Avisos Gerais · criação GC + e-mail automático
// ═══════════════════════════════════════════════════════════════

const AVISOS_KEY  = 'escalab_avisos';
const LIDOS_KEY   = id => `escalab_avisos_lidos_${id}`;

const AVISOS_SEED = [
  { id:'AV001', titulo:'Confraternização Junina · 14/06 às 18h',
    corpo:'Pessoal, estamos organizando nossa festa junina anual! Dia 14/06 (sex) às 18h no escritório. Tragam um prato típico (lista no Drive). Quem puder ajudar na decoração, fala com a Paula (G&C).',
    prioridade:'normal', audiencia:'todos', destinatarios:[], criadoEm:'2026-06-05T10:30:00', autor:'Paula Cardoso Ferreira' },
  { id:'AV002', titulo:'Abertura do ciclo AVD 2026 · preencher até 30/06',
    corpo:'O ciclo de Avaliação de Desempenho 2026 está aberto! Cada colaborador deve realizar a auto-avaliação e os gestores devem avaliar suas equipes até 30/06. Tutorial e link no AVD da plataforma.',
    prioridade:'importante', audiencia:'todos', destinatarios:[], criadoEm:'2026-06-02T09:00:00', autor:'Ana Carolina Lima Santos' },
  { id:'AV003', titulo:'Manutenção do servidor · sábado 08/06 de 8h às 12h',
    corpo:'A plataforma ficará fora do ar no sábado 08/06 das 8h às 12h para atualização de infraestrutura. Não será necessário fazer nada de sua parte. Voltamos no mesmo dia à tarde.',
    prioridade:'normal', audiencia:'todos', destinatarios:[], criadoEm:'2026-06-04T14:00:00', autor:'Marcus Ferreira Neto' },
  { id:'AV004', titulo:'URGENTE · Atualização da política de senhas',
    corpo:'Por orientação de segurança, todos devem trocar a senha do e-mail @escalab.com.br até 12/06. A nova política exige: mínimo 12 caracteres, 1 maiúscula, 1 número e 1 símbolo. Dúvidas: gente.cultura@escalab.com.br',
    prioridade:'urgente', audiencia:'fixos', destinatarios:[], criadoEm:'2026-06-06T08:00:00', autor:'Ana Carolina Lima Santos' },
  { id:'AV005', titulo:'Lembrete · Registrar horas até a quinta-feira',
    corpo:'Lembrando que o registro semanal de horas deve ser feito até quinta-feira. A não-conformidade impacta o relatório do banco de horas e o pagamento de extras.',
    prioridade:'importante', audiencia:'gestores', destinatarios:[], criadoEm:'2026-06-03T16:00:00', autor:'Leticia Fernandes Souza' },
  { id:'AV006', titulo:'PCO 2026 · pesquisa de clima abre dia 15/06',
    corpo:'Em duas semanas começa a PCO 2026 (Pesquisa de Clima Organizacional). Sua opinião direciona as ações do GC no próximo semestre. Fica atento!',
    prioridade:'normal', audiencia:'todos', destinatarios:[], criadoEm:'2026-06-01T11:00:00', autor:'Paula Cardoso Ferreira' },
];

function getAvisos() {
  try {
    const raw = localStorage.getItem(AVISOS_KEY);
    if (raw) return JSON.parse(raw);
    localStorage.setItem(AVISOS_KEY, JSON.stringify(AVISOS_SEED));
    return AVISOS_SEED;
  } catch { return AVISOS_SEED; }
}
function _getAvisos_unused() { try { return JSON.parse(localStorage.getItem(AVISOS_KEY) || '[]'); } catch { return []; } }
function salvarAvisos(l) { try { localStorage.setItem(AVISOS_KEY, JSON.stringify(l)); } catch {} }
function addAviso(a) { const l = getAvisos(); l.unshift(a); salvarAvisos(l); }
function deletarAviso(id) { salvarAvisos(getAvisos().filter(a => a.id !== id)); }
function marcarLido(userId, avisoId) {
  try {
    const l = JSON.parse(localStorage.getItem(LIDOS_KEY(userId)) || '[]');
    if (!l.includes(avisoId)) { l.push(avisoId); localStorage.setItem(LIDOS_KEY(userId), JSON.stringify(l)); }
  } catch {}
}
function getQuemAbriu(avisoId) {
  return COLABORADORES.filter(c => {
    try {
      const l = JSON.parse(localStorage.getItem(LIDOS_KEY(c.id)) || '[]');
      return l.includes(avisoId);
    } catch { return false; }
  });
}

const PRIORIDADES = [
  { id:'normal', label:'Normal', cor:'#1F4A8A', bg:'#EEF3FA' },
  { id:'importante', label:'Importante', cor:'#B56500', bg:'#FFF7EB' },
  { id:'urgente', label:'Urgente', cor:'#B3261E', bg:'#FDECEC' },
];
const AUDIENCIAS = [
  { id:'todos',        label:'Todos'                  },
  { id:'fixos',        label:'Apenas Fixos'           },
  { id:'gestores',     label:'Apenas Gestores'        },
  { id:'associados',   label:'Apenas Associados'      },
  { id:'especificos',  label:'Pessoas específicas'    },
];

// Gera link mailto para enviar o aviso por e-mail
function gerarMailto(aviso) {
  let colabs = COLABORADORES;
  if (aviso.audiencia === 'especificos' && aviso.destinatarios?.length) {
    colabs = COLABORADORES.filter(c => aviso.destinatarios.includes(c.id));
  } else if (aviso.audiencia === 'fixos') {
    colabs = COLABORADORES.filter(c => ['admin','gestor','colaborador','financeiro'].includes(c.perfil) && !['associado','vb','redes'].some(s => c.setor?.toLowerCase().includes(s)));
  } else if (aviso.audiencia === 'gestores') {
    colabs = COLABORADORES.filter(c => c.perfil === 'gestor' || c.perfil === 'admin');
  } else if (aviso.audiencia === 'associados') {
    colabs = COLABORADORES.filter(c => c.nivel === 'liderado' && c.setor?.toLowerCase().includes('assoc'));
  }
  const dest = colabs.map(c => c.email).join(',');
  // Usa helper Escalab · assinatura padrão Hostinger + reply-to gente.cultura@escalab.com.br
  return mailtoEscalab({
    to: dest,
    subject: `[Escalab] ${aviso.titulo}`,
    corpo: escalabEmailEnvelope(`Olá,\n\n${aviso.corpo}`),
    replyTo: ESCALAB_EMAIL_RH,
  });
}

// ── Calendário de pesquisas/eventos ───────────────────────────────────────────
const CAL_KEY = 'escalab_avisos_calendario';
function getEventosCal() { try { return JSON.parse(localStorage.getItem(CAL_KEY) || '[]'); } catch { return []; } }
function salvarEventosCal(l) { try { localStorage.setItem(CAL_KEY, JSON.stringify(l)); } catch {} }
function addEventoCal(e) { const l = getEventosCal(); l.push(e); salvarEventosCal(l); }
function delEventoCal(id) { salvarEventosCal(getEventosCal().filter(e => e.id !== id)); }
// prazos automáticos vindos das pesquisas ativas
function getPrazosPesquisasCal() {
  try {
    return JSON.parse(localStorage.getItem('escalab_outras_pesquisas') || '[]')
      .filter(p => p.status === 'ativa' && p.prazo)
      .map(p => ({ id: 'ps_' + p.id, data: p.prazo, titulo: 'Prazo: ' + p.titulo, tipo: 'pesquisa', auto: true }));
  } catch { return []; }
}
// datas importantes (treinamentos etc.) já registradas pela intranet
function getDatasImportantesCal() {
  try {
    return JSON.parse(localStorage.getItem('escalab_datas_importantes') || '[]')
      .filter(d => d.data)
      .map(d => ({ id: 'di_' + (d.id || (d.data + d.titulo)), data: d.data, titulo: d.titulo, tipo: d.tipo || 'evento', auto: true }));
  } catch { return []; }
}
// férias aprovadas → vira evento de calendário (uma entrada por dia início, marcando o período)
function getFeriasCal() {
  try {
    const lista = (typeof getFeriasSolicitacoes === 'function' ? getFeriasSolicitacoes() : []) || [];
    return lista.filter(f => f.status === 'aprovado_rh' || f.status === 'aprovado').map(f => {
      const colab = (typeof COLABORADORES !== 'undefined' ? COLABORADORES : []).find(c => c.id === f.colaboradorId);
      const nomeCurto = colab ? colab.nome.split(' ').slice(0,2).join(' ') : 'Colaborador';
      const periodo = f.inicio === f.fim ? f.inicio.split('-').reverse().slice(0,2).join('/') : `${f.inicio.split('-').reverse().slice(0,2).join('/')}–${f.fim.split('-').reverse().slice(0,2).join('/')}`;
      return { id: 'fer_' + f.id, data: f.inicio, titulo: `Férias · ${nomeCurto} (${periodo})`, tipo: 'ferias', auto: true };
    });
  } catch { return []; }
}
const TIPO_CORES_CAL = { pesquisa: '#6B3FA0', treinamento: '#1F4A8A', manual: '#00836B', evento: '#B56500', ferias: '#00967B', rh: '#005E4D' };
const TIPO_LABEL_CAL = { pesquisa: 'Pesquisa', treinamento: 'Treinamento', manual: 'Evento', evento: 'Evento', ferias: 'Férias', rh: 'GC' };

const CalendarioAvisos = ({ isAdmin }) => {
  const hoje = new Date(); hoje.setHours(0, 0, 0, 0);
  const [ref, setRef] = useState(() => new Date(hoje.getFullYear(), hoje.getMonth(), 1));
  const [eventos, setEventos] = useState(() => getEventosCal());
  const [showAdd, setShowAdd] = useState(false);
  const [nv, setNv] = useState({ data: '', titulo: '', descricao: '' });
  function reload() { setEventos(getEventosCal()); }

  const todos = [
    ...eventos.map(e => ({ ...e, tipo: e.tipo || 'manual' })),
    ...getPrazosPesquisasCal(),
    ...getDatasImportantesCal(),
    ...getFeriasCal(),
  ];
  const porDia = {};
  todos.forEach(e => { if (!e.data) return; (porDia[e.data] = porDia[e.data] || []).push(e); });

  const ano = ref.getFullYear(), mes = ref.getMonth();
  const primeiroDiaSemana = new Date(ano, mes, 1).getDay();
  const diasNoMes = new Date(ano, mes + 1, 0).getDate();
  const MESES = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
  const WD = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
  const ymd = d => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
  const hojeStr = ymd(hoje);

  const cells = [];
  for (let i = 0; i < primeiroDiaSemana; i++) cells.push(null);
  for (let d = 1; d <= diasNoMes; d++) cells.push(new Date(ano, mes, d));

  const futuros = todos.filter(e => e.data && new Date(e.data + 'T00:00:00') >= hoje).sort((a, b) => a.data.localeCompare(b.data)).slice(0, 12);

  function salvarEvento() {
    if (!nv.data || !nv.titulo.trim()) return;
    addEventoCal({ id: 'EV' + Date.now(), data: nv.data, titulo: nv.titulo.trim(), descricao: nv.descricao, tipo: 'manual', criadoEm: new Date().toISOString() });
    setNv({ data: '', titulo: '', descricao: '' }); setShowAdd(false); reload();
  }

  const inp = { border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 'none', width: '100%', boxSizing: 'border-box' };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14, padding: '16px 18px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <button onClick={() => setRef(new Date(ano, mes - 1, 1))} style={{ border: '1px solid var(--escalab-line)', background: '#fff', borderRadius: 8, padding: '6px 10px', cursor: 'pointer', color: 'var(--escalab-slate)' }}><Icon name="chev_left" size={14} /></button>
          <div style={{ flex: 1, textAlign: 'center', fontSize: 15, fontWeight: 700 }}>{MESES[mes]} {ano}</div>
          <button onClick={() => setRef(new Date(ano, mes + 1, 1))} style={{ border: '1px solid var(--escalab-line)', background: '#fff', borderRadius: 8, padding: '6px 10px', cursor: 'pointer', color: 'var(--escalab-slate)' }}><Icon name="chev_right" size={14} /></button>
          {isAdmin && <button onClick={() => setShowAdd(s => !s)} style={{ border: 0, borderRadius: 8, padding: '7px 14px', background: 'var(--escalab-brand)', color: '#fff', cursor: 'pointer', fontSize: 12.5, fontWeight: 600, fontFamily: 'var(--font-sans)', display: 'flex', gap: 5, alignItems: 'center' }}><Icon name="plus" size={13} /> Evento</button>}
        </div>

        {isAdmin && showAdd && (
          <div style={{ background: 'var(--escalab-paper)', border: '1px solid var(--escalab-line)', borderRadius: 10, padding: '14px', marginBottom: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '150px 1fr', gap: 10 }}>
              <input type="date" value={nv.data} onChange={e => setNv(n => ({ ...n, data: e.target.value }))} style={inp} />
              <input value={nv.titulo} onChange={e => setNv(n => ({ ...n, titulo: e.target.value }))} placeholder="Título do evento / lembrete" style={inp} />
            </div>
            <input value={nv.descricao} onChange={e => setNv(n => ({ ...n, descricao: e.target.value }))} placeholder="Descrição (opcional)" style={inp} />
            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
              <button onClick={() => { setShowAdd(false); setNv({ data: '', titulo: '', descricao: '' }); }} style={{ padding: '8px 16px', border: '1px solid var(--escalab-line)', borderRadius: 8, background: '#fff', cursor: 'pointer', fontSize: 13, fontFamily: 'var(--font-sans)' }}>Cancelar</button>
              <button onClick={salvarEvento} style={{ padding: '8px 16px', border: 0, borderRadius: 8, background: 'var(--escalab-brand)', color: '#fff', cursor: 'pointer', fontWeight: 600, fontSize: 13, fontFamily: 'var(--font-sans)' }}>Salvar evento</button>
            </div>
          </div>
        )}

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 4 }}>
          {WD.map(w => <div key={w} style={{ textAlign: 'center', fontSize: 11, fontWeight: 700, color: 'var(--escalab-mute)', padding: '4px 0' }}>{w}</div>)}
          {cells.map((d, i) => {
            if (!d) return <div key={'e' + i} />;
            const key = ymd(d);
            const evs = porDia[key] || [];
            const isHoje = key === hojeStr;
            return (
              <div key={key} title={evs.map(e => e.titulo).join('\n')} style={{ minHeight: 58, border: `1px solid ${isHoje ? 'var(--escalab-brand)' : 'var(--escalab-line)'}`, borderRadius: 8, padding: '4px 5px', background: isHoje ? 'var(--escalab-brand-tint)' : '#fff', display: 'flex', flexDirection: 'column', gap: 2 }}>
                <div style={{ fontSize: 11.5, fontWeight: isHoje ? 800 : 600, color: isHoje ? 'var(--escalab-brand-deep)' : 'var(--escalab-slate)' }}>{d.getDate()}</div>
                {evs.slice(0, 2).map((e, j) => (
                  <div key={j} style={{ fontSize: 9.5, lineHeight: 1.25, background: (TIPO_CORES_CAL[e.tipo] || '#4A5560') + '18', color: TIPO_CORES_CAL[e.tipo] || '#4A5560', borderRadius: 4, padding: '1px 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontWeight: 600 }}>{e.titulo}</div>
                ))}
                {evs.length > 2 && <div style={{ fontSize: 9, color: 'var(--escalab-mute)' }}>+{evs.length - 2}</div>}
              </div>
            );
          })}
        </div>
      </div>

      <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14, padding: '16px 18px' }}>
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 12 }}>Próximos prazos e eventos</div>
        {futuros.length === 0 ? (
          <div style={{ fontSize: 13.5, color: 'var(--escalab-mute)', padding: '12px 0' }}>Nenhum prazo ou evento futuro. Prazos de pesquisas ativas aparecem aqui automaticamente.</div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {futuros.map(e => {
              const cor = TIPO_CORES_CAL[e.tipo] || '#4A5560';
              const dBR = e.data.split('-').reverse().join('/');
              return (
                <div key={e.id} style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '10px 12px', border: '1px solid var(--escalab-line)', borderLeft: `4px solid ${cor}`, borderRadius: 10 }}>
                  <div style={{ textAlign: 'center', minWidth: 44 }}>
                    <div style={{ fontSize: 11, color: 'var(--escalab-mute)' }}>{dBR.slice(0, 5)}</div>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--escalab-ink)' }}>{e.titulo}</div>
                    {e.descricao && <div style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>{e.descricao}</div>}
                  </div>
                  <span style={{ fontSize: 11, fontWeight: 600, color: cor, background: cor + '15', borderRadius: 5, padding: '2px 8px' }}>{TIPO_LABEL_CAL[e.tipo] || 'Evento'}</span>
                  {isAdmin && !e.auto && <button onClick={() => { delEventoCal(e.id); reload(); }} style={{ border: '1px solid #F4C7C3', borderRadius: 7, background: '#FDECEC', color: '#B3261E', cursor: 'pointer', padding: '5px 8px', fontSize: 11, fontFamily: 'var(--font-sans)' }}><Icon name="close" size={12} /></button>}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
};

// ── FormAviso (criação) ───────────────────────────────────────────────────────
const FormAviso = ({ onSalvar, onCancelar }) => {
  const [f, setF] = useState({ titulo:'', corpo:'', prioridade:'normal', audiencia:'todos', destinatarios:[] });
  const [buscaPessoa, setBuscaPessoa] = useState('');
  const set = (k,v) => setF(p=>({...p,[k]:v}));
  const inp = { border:'1px solid var(--escalab-line)', borderRadius:8, padding:'9px 12px', fontSize:14, fontFamily:'var(--font-sans)', outline:'none', width:'100%', boxSizing:'border-box' };

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

  function toggleDestinatario(id) {
    setF(p => ({
      ...p,
      destinatarios: p.destinatarios.includes(id)
        ? p.destinatarios.filter(x => x !== id)
        : [...p.destinatarios, id]
    }));
  }

  function salvar() {
    if (!f.titulo.trim()) return;
    const novo = { id:'AV'+Date.now(), ...f, criadoEm:new Date().toISOString() };
    addAviso(novo);
    onSalvar(novo);
  }

  return (
    <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:14, padding:'20px 22px', marginBottom:20 }}>
      <div style={{ fontSize:14, fontWeight:700, marginBottom:16 }}>Novo aviso</div>
      <div style={{ display:'flex', flexDirection:'column', gap:13 }}>
        <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-slate)' }}>Título *</span>
          <input value={f.titulo} onChange={e=>set('titulo',e.target.value)} style={inp} placeholder="Título do aviso"/>
        </label>
        <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-slate)' }}>Mensagem *</span>
          <textarea value={f.corpo} onChange={e=>set('corpo',e.target.value)} rows={4} style={{...inp,resize:'vertical'}} placeholder="Conteúdo do aviso..."/>
        </label>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
          <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
            <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-slate)' }}>Prioridade</span>
            <select value={f.prioridade} onChange={e=>set('prioridade',e.target.value)} style={inp}>
              {PRIORIDADES.map(p=><option key={p.id} value={p.id}>{p.label}</option>)}
            </select>
          </label>
          <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
            <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-slate)' }}>Audiência</span>
            <select value={f.audiencia} onChange={e=>set('audiencia',e.target.value)} style={inp}>
              {AUDIENCIAS.map(a=><option key={a.id} value={a.id}>{a.label}</option>)}
            </select>
          </label>
        </div>

        {/* Seleção de pessoas específicas */}
        {f.audiencia === 'especificos' && (
          <div style={{ border:'1px solid var(--escalab-line)', borderRadius:10, overflow:'hidden' }}>
            <div style={{ padding:'10px 12px', background:'var(--escalab-paper)', borderBottom:'1px solid var(--escalab-line)', display:'flex', gap:8, alignItems:'center' }}>
              <Icon name="search" size={13}/>
              <input value={buscaPessoa} onChange={e=>setBuscaPessoa(e.target.value)} placeholder="Buscar colaborador..." style={{ border:0, outline:0, fontSize:13, fontFamily:'var(--font-sans)', background:'transparent', flex:1 }}/>
              {f.destinatarios.length > 0 && <span style={{ fontSize:11.5, color:'var(--escalab-brand)', fontWeight:600 }}>{f.destinatarios.length} selecionado{f.destinatarios.length>1?'s':''}</span>}
            </div>
            <div style={{ maxHeight:200, overflowY:'auto' }}>
              {colabsFiltrados.map(c => {
                const sel = f.destinatarios.includes(c.id);
                return (
                  <div key={c.id} onClick={()=>toggleDestinatario(c.id)} style={{ display:'flex', gap:10, alignItems:'center', padding:'8px 12px', cursor:'pointer', background:sel?'var(--escalab-brand-tint)':'#fff', borderBottom:'1px solid var(--escalab-line)' }}>
                    <div style={{ width:18, height:18, borderRadius:4, border:`2px solid ${sel?'var(--escalab-brand)':'var(--escalab-line)'}`, background:sel?'var(--escalab-brand)':'#fff', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                      {sel && <Icon name="check" size={11}/>}
                    </div>
                    <div style={{ width:26, height:26, borderRadius:'50%', background:c.cor||'#00967B', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:10, flexShrink:0 }}>{c.iniciais}</div>
                    <div style={{ flex:1, minWidth:0 }}>
                      <div style={{ fontSize:13, fontWeight:sel?600:400, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{c.nome}</div>
                      <div style={{ fontSize:11, color:'var(--escalab-mute)' }}>{c.setor}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}
        <div style={{ display:'flex', gap:8, justifyContent:'flex-end' }}>
          <button onClick={onCancelar} style={{ padding:'9px 18px', border:'1px solid var(--escalab-line)', borderRadius:8, background:'#fff', cursor:'pointer', fontSize:13, fontFamily:'var(--font-sans)' }}>Cancelar</button>
          <a href={f.titulo&&f.corpo?gerarMailto({titulo:f.titulo,corpo:f.corpo}):'#'} onClick={e=>{if(!f.titulo||!f.corpo)e.preventDefault()}} style={{ display:'flex', alignItems:'center', gap:6, padding:'9px 16px', border:'1px solid var(--escalab-brand-soft)', borderRadius:8, background:'var(--escalab-brand-tint)', color:'var(--escalab-brand-deep)', cursor:'pointer', fontSize:13, fontFamily:'var(--font-sans)', fontWeight:600, textDecoration:'none' }}>
            <Icon name="send" size={13}/> Publicar + Enviar e-mail
          </a>
          <button onClick={salvar} style={{ padding:'9px 18px', border:0, borderRadius:8, background:'var(--escalab-brand)', color:'#fff', cursor:'pointer', fontWeight:600, fontSize:13, fontFamily:'var(--font-sans)' }}>Publicar sem e-mail</button>
        </div>
      </div>
    </div>
  );
};

// ── CardAviso ─────────────────────────────────────────────────────────────────
const CardAviso = ({ aviso, isAdmin, user, onDeletar }) => {
  const pri = PRIORIDADES.find(p=>p.id===aviso.prioridade)||PRIORIDADES[0];
  const aud = AUDIENCIAS.find(a=>a.id===aviso.audiencia)||AUDIENCIAS[0];
  const dataBR = aviso.criadoEm ? new Date(aviso.criadoEm).toLocaleDateString('pt-BR',{day:'2-digit',month:'short',year:'numeric'}) : '';

  useEffect(() => {
    if (!isAdmin && user?.id) marcarLido(user.id, aviso.id);
  }, [aviso.id]);

  const abriram = isAdmin ? getQuemAbriu(aviso.id) : [];

  return (
    <div style={{ background:'#fff', border:`1px solid ${pri.cor}30`, borderLeft:`4px solid ${pri.cor}`, borderRadius:12, padding:'16px 18px' }}>
      <div style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
        <div style={{ flex:1 }}>
          <div style={{ display:'flex', gap:8, alignItems:'center', marginBottom:6, flexWrap:'wrap' }}>
            <span style={{ fontSize:15, fontWeight:700, color:'var(--escalab-ink)' }}>{aviso.titulo}</span>
            <span style={{ fontSize:11, fontWeight:600, background:pri.bg, color:pri.cor, borderRadius:5, padding:'2px 8px' }}>{pri.label}</span>
            {isAdmin && <span style={{ fontSize:11, color:'var(--escalab-mute)', background:'var(--escalab-paper)', borderRadius:5, padding:'2px 8px' }}>{aud.label}</span>}
          </div>
          {aviso.corpo && <div style={{ fontSize:13.5, color:'var(--escalab-slate)', lineHeight:1.6, marginBottom:8, whiteSpace:'pre-line' }}>{aviso.corpo}</div>}
          <div style={{ display:'flex', gap:12, alignItems:'center', flexWrap:'wrap' }}>
            <span style={{ fontSize:11.5, color:'var(--escalab-mute)' }}>{dataBR}</span>
            {isAdmin && abriram.length > 0 && (
              <span style={{ fontSize:11.5, color:'var(--escalab-brand)', display:'flex', alignItems:'center', gap:4 }}>
                <Icon name="eye" size={12}/> {abriram.length} {abriram.length === 1 ? 'pessoa abriu' : 'pessoas abriram'} o e-mail
              </span>
            )}
          </div>
        </div>
        {isAdmin && (
          <div style={{ display:'flex', gap:6, flexShrink:0 }}>
            <a href={gerarMailto(aviso)} style={{ display:'flex', alignItems:'center', gap:5, padding:'5px 10px', border:'1px solid var(--escalab-brand-soft)', borderRadius:7, background:'var(--escalab-brand-tint)', color:'var(--escalab-brand-deep)', fontSize:12, fontFamily:'var(--font-sans)', fontWeight:600, textDecoration:'none' }}>
              <Icon name="send" size={12}/> Reenviar
            </a>
            <button onClick={()=>onDeletar(aviso.id)} style={{ padding:'5px 10px', border:'1px solid #F4C7C3', borderRadius:7, background:'#FDECEC', color:'#B3261E', cursor:'pointer', fontSize:12, fontFamily:'var(--font-sans)' }}>Excluir</button>
          </div>
        )}
      </div>
    </div>
  );
};

// ── Screen ───────────────────────────────────────────────────────────────────
// ── Editor de Novidades (popup automático para colab/gestor) ────────────────
// Pedido pela Maria: GC edita lista; cada novidade tem título, texto, foto,
// data e CAMPOS PERSONALIZADOS (text/textarea/link/date/number).

const ModalNovidadeEditor = ({ novidade, onClose, onSalvar }) => {
  const [draft, setDraft] = useState(() => novidade || {
    id: gerarIdNovidade(),
    titulo: '',
    texto: '',
    fotoBase64: '',
    data: new Date().toISOString().slice(0, 10),
    camposExtra: [],
    publico: ['gestor', 'colaborador'],
    ativa: true,
    criadoEm: new Date().toISOString().slice(0, 10),
  });

  function set(k, v) { setDraft(d => ({ ...d, [k]: v })); }
  function togglePublico(p) {
    setDraft(d => {
      const tem = (d.publico || []).includes(p);
      return { ...d, publico: tem ? d.publico.filter(x => x !== p) : [...(d.publico || []), p] };
    });
  }
  function handleFoto(e) {
    const file = e.target.files[0]; if (!file) return;
    if (file.size > 3 * 1024 * 1024) { alert('Imagem deve ter no máximo 3MB.'); return; }
    const r = new FileReader();
    r.onload = ev => set('fotoBase64', ev.target.result);
    r.readAsDataURL(file);
  }
  function addCampoExtra() {
    const novoCampo = { id: 'c' + Date.now().toString(36), label: '', tipo: 'text', valor: '' };
    setDraft(d => ({ ...d, camposExtra: [...(d.camposExtra || []), novoCampo] }));
  }
  function setCampoExtra(id, patch) {
    setDraft(d => ({ ...d, camposExtra: (d.camposExtra || []).map(c => c.id === id ? { ...c, ...patch } : c) }));
  }
  function rmCampoExtra(id) {
    setDraft(d => ({ ...d, camposExtra: (d.camposExtra || []).filter(c => c.id !== id) }));
  }

  const valido = draft.titulo.trim().length > 0;

  return (
    <Modal open onClose={onClose} title={novidade ? 'Editar novidade' : 'Nova novidade'} width={720}
      footer={<>
        <Button variant="ghost" onClick={onClose}>Cancelar</Button>
        <Button variant="primary" onClick={() => onSalvar(draft)} disabled={!valido}>Salvar</Button>
      </>}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Banner tone="info">A novidade aparece como popup automático para quem ainda não viu, no perfil selecionado em "Público alvo". Use "Reapresentar" depois pra forçar reaparecer pra todo mundo.</Banner>

        <Field label="Título *">
          <Input value={draft.titulo} onChange={v => set('titulo', v)} placeholder="Ex: Novo benefício de auxílio creche" />
        </Field>

        <Field label="Texto (corpo da novidade)">
          <textarea value={draft.texto} onChange={e => set('texto', e.target.value)} rows={4}
            placeholder="Escreva o conteúdo principal aqui. Quebras de linha são preservadas."
            style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '10px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0, resize: 'vertical', boxSizing: 'border-box' }} />
        </Field>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }} className="mobile-col1">
          <Field label="Data da novidade">
            <Input type="date" value={draft.data} onChange={v => set('data', v)} />
          </Field>
          <Field label="Foto (até 3MB)">
            {draft.fotoBase64 ? (
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '6px 10px' }}>
                <img src={draft.fotoBase64} alt="" style={{ width: 40, height: 40, objectFit: 'cover', borderRadius: 6 }} />
                <span style={{ flex: 1, fontSize: 12.5, color: 'var(--escalab-slate)' }}>Imagem anexada</span>
                <button onClick={() => set('fotoBase64', '')} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-mute)' }}><Icon name="close" size={14} /></button>
              </div>
            ) : (
              <label style={{ display: 'flex', alignItems: 'center', gap: 8, border: '1px dashed var(--escalab-line)', borderRadius: 8, padding: '10px 12px', cursor: 'pointer', color: 'var(--escalab-mute)', fontSize: 13 }}>
                <Icon name="upload" size={14} /> Anexar imagem
                <input type="file" accept="image/*" style={{ display: 'none' }} onChange={handleFoto} />
              </label>
            )}
          </Field>
        </div>

        <Field label="Público alvo">
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {[
              { id: 'colaborador', label: 'Colaboradores' },
              { id: 'gestor',      label: 'Gestores'      },
              { id: 'financeiro',  label: 'Financeiro'    },
              { id: 'admin',       label: 'GC (admin)'    },
            ].map(p => {
              const on = (draft.publico || []).includes(p.id);
              return (
                <button key={p.id} onClick={() => togglePublico(p.id)} style={{
                  border: `1px solid ${on ? 'var(--escalab-brand)' : 'var(--escalab-line)'}`,
                  background: on ? 'var(--escalab-brand-tint)' : '#fff',
                  color: on ? 'var(--escalab-brand-deep)' : 'var(--escalab-slate)',
                  borderRadius: 999, padding: '7px 14px', cursor: 'pointer',
                  fontSize: 13, fontFamily: 'var(--font-sans)', fontWeight: on ? 700 : 500,
                }}>{p.label}</button>
              );
            })}
          </div>
        </Field>

        {/* Campos personalizados */}
        <div style={{ borderTop: '1px solid var(--escalab-line)', paddingTop: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--escalab-ink)' }}>Campos personalizados</div>
              <div style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>Adicione blocos extras (link, dados, números) que aparecem abaixo do texto.</div>
            </div>
            <Button variant="outline" size="sm" icon="plus" onClick={addCampoExtra}>Adicionar campo</Button>
          </div>
          {(draft.camposExtra || []).length === 0 ? (
            <div style={{ fontSize: 13, color: 'var(--escalab-mute)', textAlign: 'center', padding: '14px 0', fontStyle: 'italic' }}>Nenhum campo extra.</div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {(draft.camposExtra || []).map(c => (
                <div key={c.id} style={{ display: 'grid', gridTemplateColumns: '1fr 160px 1fr 28px', gap: 8, alignItems: 'center', border: '1px solid var(--escalab-line)', borderRadius: 10, padding: '8px 10px' }} className="mobile-col1">
                  <Input value={c.label} onChange={v => setCampoExtra(c.id, { label: v })} placeholder="Rótulo (ex: Link)" />
                  <SelectInput value={c.tipo} onChange={v => setCampoExtra(c.id, { tipo: v })} options={NOVIDADE_TIPOS_CAMPO.map(t => ({ value: t.id, label: t.label }))} />
                  {c.tipo === 'textarea' ? (
                    <textarea value={c.valor} onChange={e => setCampoExtra(c.id, { valor: e.target.value })} rows={2}
                      style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '8px 10px', fontSize: 13.5, fontFamily: 'var(--font-sans)', outline: 0, resize: 'vertical', boxSizing: 'border-box' }} />
                  ) : (
                    <Input type={c.tipo === 'date' ? 'date' : c.tipo === 'number' ? 'number' : 'text'} value={c.valor} onChange={v => setCampoExtra(c.id, { valor: v })} placeholder={c.tipo === 'link' ? 'https://…' : ''} />
                  )}
                  <button onClick={() => rmCampoExtra(c.id)} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-mute)' }} title="Remover"><Icon name="close" size={14} /></button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </Modal>
  );
};

const PainelNovidades = () => {
  const [lista, setLista] = useState(() => getNovidades());
  const [editor, setEditor] = useState(null);
  const [msg, setMsg] = useState('');

  function refresh() { setLista(getNovidades()); }
  function salvar(n) {
    salvarNovidade(n);
    refresh();
    setEditor(null);
    setMsg(editor?.novidade ? 'Novidade atualizada.' : 'Novidade criada e publicada.');
  }
  function remover(id) {
    if (!confirm('Excluir esta novidade? Quem ainda não viu não verá mais.')) return;
    removerNovidade(id);
    refresh();
    setMsg('Novidade removida.');
  }
  function toggleAtiva(n) {
    salvarNovidade({ ...n, ativa: !n.ativa });
    refresh();
    setMsg(n.ativa ? 'Novidade desativada (não aparece mais).' : 'Novidade reativada.');
  }
  function reapresentar(n) {
    if (!confirm(`Reapresentar "${n.titulo}" para todos os usuários? Quem já viu vai ver de novo.`)) return;
    resetarNovidadesVistas(n.id);
    setMsg('Pronto: todos verão essa novidade na próxima sessão.');
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, animation: 'fadeIn .2s' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10, flexWrap: 'wrap' }}>
        <div>
          <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--escalab-ink)' }}>Popup de Novidades</div>
          <div style={{ fontSize: 13, color: 'var(--escalab-slate)', maxWidth: 620 }}>
            Crie cartões de novidade que aparecem como popup automático quando colab/gestor entra na plataforma. Cada pessoa vê uma vez (use "Reapresentar" pra reabrir pra todos).
          </div>
        </div>
        <Button variant="primary" icon="plus" onClick={() => setEditor({ novidade: null })}>Nova novidade</Button>
      </div>

      {msg && <Banner tone="success" onClose={() => setMsg('')}>{msg}</Banner>}

      {lista.length === 0 ? (
        <div style={{ border: '1px dashed var(--escalab-line)', borderRadius: 12, padding: '32px 20px', textAlign: 'center', color: 'var(--escalab-mute)', fontSize: 13.5 }}>
          Nenhuma novidade cadastrada. Crie a primeira para que apareça no popup.
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {lista.map(n => {
            const pubLabels = (n.publico || []).map(p => ({ admin: 'GC', gestor: 'Gestor', colaborador: 'Colab', financeiro: 'Financeiro' }[p] || p)).join(' · ');
            const dataFmt = n.data ? new Date(n.data + 'T12:00:00').toLocaleDateString('pt-BR', { day: '2-digit', month: 'short' }) : '·';
            return (
              <div key={n.id} style={{
                display: 'grid', gridTemplateColumns: '60px 1fr auto', gap: 14,
                background: '#fff', border: '1px solid var(--escalab-line)',
                borderLeft: `4px solid ${n.ativa ? 'var(--escalab-brand)' : 'var(--escalab-line)'}`,
                borderRadius: 12, padding: 14, alignItems: 'center',
              }} className="mobile-col1">
                {n.fotoBase64 ? (
                  <img src={n.fotoBase64} alt="" style={{ width: 60, height: 60, borderRadius: 10, objectFit: 'cover' }} />
                ) : (
                  <div style={{ width: 60, height: 60, borderRadius: 10, background: 'var(--escalab-brand-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--escalab-brand)' }}>
                    <Icon name="bell" size={22} />
                  </div>
                )}
                <div style={{ minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 4 }}>
                    <div style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--escalab-ink)' }}>{n.titulo || '· sem título ·'}</div>
                    <Tag tone={n.ativa ? 'success' : 'neutral'}>{n.ativa ? 'Ativa' : 'Inativa'}</Tag>
                    {(n.camposExtra || []).length > 0 && <Tag tone="neutral">{n.camposExtra.length} campo{n.camposExtra.length > 1 ? 's' : ''} extra{n.camposExtra.length > 1 ? 's' : ''}</Tag>}
                  </div>
                  <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', marginBottom: 2 }}>{dataFmt} · público: {pubLabels || '·'}</div>
                  <div style={{ fontSize: 13, color: 'var(--escalab-slate)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{(n.texto || '').slice(0, 120)}{(n.texto || '').length > 120 ? '…' : ''}</div>
                </div>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
                  <Button variant="outline" size="sm" onClick={() => toggleAtiva(n)}>{n.ativa ? 'Desativar' : 'Ativar'}</Button>
                  <Button variant="outline" size="sm" onClick={() => reapresentar(n)}>Reapresentar</Button>
                  <Button variant="outline" size="sm" onClick={() => setEditor({ novidade: n })}>Editar</Button>
                  <Button variant="ghost"   size="sm" onClick={() => remover(n.id)} style={{ color: '#B3261E' }}>Excluir</Button>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {editor && <ModalNovidadeEditor novidade={editor.novidade} onClose={() => setEditor(null)} onSalvar={salvar} />}
    </div>
  );
};

const ScreenAvisos = ({ user }) => {
  const isAdmin = user.perfil === 'admin';
  const isGestor = user.perfil === 'gestor';
  const [avisos, setAvisos] = useState(getAvisos);
  const [showForm, setShowForm] = useState(false);
  // Admin e gestor veem abas; colaborador vai direto para "Para Colaboradores"
  const [aba, setAba] = useState(isAdmin || isGestor ? 'geral' : 'colaboradores');

  function reload() { setAvisos(getAvisos()); }
  function handleDeletar(id) { deletarAviso(id); reload(); }

  const AUDIENCIAS_COLAB = ['todos', 'fixos', 'associados', 'especificos'];
  const listaGeral = avisos.filter(a => !AUDIENCIAS_COLAB.includes(a.audiencia) || a.audiencia === 'todos');
  const listaColab = avisos.filter(a => AUDIENCIAS_COLAB.includes(a.audiencia));
  const lista = aba === 'colaboradores' ? listaColab : avisos;

  return (
    <div className="fade-in" style={{ maxWidth:800 }}>
      <div style={{ display:'flex', alignItems:'flex-start', gap:12, marginBottom:18, flexWrap:'wrap' }}>
        <div style={{ flex:1 }}>
          <h2 style={{ margin:0, fontSize:22, fontWeight:800 }}>Avisos</h2>
          <p style={{ margin:'4px 0 0', fontSize:13.5, color:'var(--escalab-mute)' }}>Comunicados publicados pela equipe de Gente & Cultura</p>
        </div>
        {isAdmin && !showForm && aba !== 'calendario' && aba !== 'novidades' && (
          <button onClick={()=>setShowForm(true)} style={{ padding:'9px 18px', border:0, borderRadius:8, background:'var(--escalab-brand)', color:'#fff', cursor:'pointer', fontWeight:600, fontSize:13, fontFamily:'var(--font-sans)' }}>+ Novo aviso</button>
        )}
      </div>

      {/* Abas */}
      <div style={{ display:'flex', gap:0, marginBottom:20, borderBottom:'1px solid var(--escalab-line)', overflowX:'auto' }} className="tabs-scroll">
        {((isAdmin
          ? [{ id:'geral', label:'Geral' }, { id:'colaboradores', label:'Para Colaboradores' }, { id:'calendario', label:'Calendário' }, { id:'novidades', label:'Novidades (Popup)' }]
          : isGestor
          ? [{ id:'geral', label:'Geral' }, { id:'colaboradores', label:'Para Colaboradores' }, { id:'calendario', label:'Calendário' }]
          : [{ id:'colaboradores', label:'Avisos' }, { id:'calendario', label:'Calendário' }]
        )).map(t => (
          <button key={t.id} onClick={() => { setAba(t.id); setShowForm(false); }} style={{
            border:0, background:'transparent', cursor:'pointer', padding:'9px 18px', fontSize:13,
            fontFamily:'var(--font-sans)', fontWeight: aba === t.id ? 700 : 400,
            color: aba === t.id ? 'var(--escalab-brand)' : 'var(--escalab-mute)',
            borderBottom: `2px solid ${aba === t.id ? 'var(--escalab-brand)' : 'transparent'}`,
            marginBottom: -1,
          }}>{t.label}</button>
        ))}
      </div>

      {aba === 'novidades' && isAdmin ? (
        <PainelNovidades />
      ) : aba === 'calendario' ? (
        <CalendarioAvisos isAdmin={isAdmin} />
      ) : (
        <>
          {showForm && <FormAviso onSalvar={()=>{reload();setShowForm(false);}} onCancelar={()=>setShowForm(false)}/>}
          {lista.length === 0
            ? <div style={{ textAlign:'center', padding:'60px', color:'var(--escalab-mute)', fontSize:14, background:'#fff', borderRadius:16, border:'1px solid var(--escalab-line)' }}>
                {aba === 'colaboradores' ? 'Nenhum aviso para colaboradores publicado ainda.' : 'Nenhum aviso publicado ainda.'}
              </div>
            : <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
                {lista.map(a=><CardAviso key={a.id} aviso={a} isAdmin={isAdmin} user={user} onDeletar={handleDeletar}/>)}
              </div>
          }
        </>
      )}
    </div>
  );
};

window.ScreenAvisos = ScreenAvisos;