/* SISTEMA · Notificações — lista de emails enviados para comerciais e gestores */

const SistemaNotificacoes = () => {
  const [tab, setTab]             = React.useState('sales-daily');
  const [rows, setRows]           = React.useState([]);
  const [loading, setLoading]     = React.useState(true);
  const [expanded, setExpanded]   = React.useState(null);
  const [date, setDate]           = React.useState(new Date().toISOString().slice(0, 10));
  const [dest, setDest]           = React.useState([]);
  const [destOpen, setDestOpen]   = React.useState(true);
  const [destLoading, setDestLoading] = React.useState(true);
  const [destError, setDestError] = React.useState(null);
  const [gestorRows, setGestorRows]   = React.useState([]);
  const [gestorLoading, setGestorLoading] = React.useState(false);
  const [gestorExpanded, setGestorExpanded] = React.useState(null);

  const load = (d) => {
    setLoading(true);
    setExpanded(null);
    fetch(`/api/sistema/notificacoes/sales-daily?data=${d}&limit=200`, { credentials: 'include' })
      .then(r => r.ok ? r.json() : [])
      .then(data => { setRows(data); setLoading(false); })
      .catch(() => setLoading(false));
  };

  const loadGestor = (d) => {
    setGestorLoading(true);
    setGestorExpanded(null);
    fetch(`/api/sistema/notificacoes/gestores?data=${d}`, { credentials: 'include' })
      .then(r => r.ok ? r.json() : [])
      .then(data => { setGestorRows(data); setGestorLoading(false); })
      .catch(() => setGestorLoading(false));
  };

  React.useEffect(() => {
    load(date);
    loadGestor(date);
    setDestLoading(true);
    setDestError(null);
    fetch('/api/sistema/notificacoes/destinatarios', { credentials: 'include' })
      .then(r => r.ok ? r.json() : r.json().then(e => Promise.reject(e.error || `HTTP ${r.status}`)))
      .then(data => { setDest(data); setDestLoading(false); })
      .catch(e => { setDestError(String(e)); setDestLoading(false); });
  }, [date]);

  const counts = {
    total:  rows.length,
    sent:   rows.filter(r => r.status === 'sent').length,
    failed: rows.filter(r => r.status === 'failed').length,
    equip:  rows.filter(r => !r.canal || r.canal !== 'consumiveis-v2').length,
    v2:     rows.filter(r => r.canal === 'consumiveis-v2').length,
  };

  const canalBadge = (canal) => canal === 'consumiveis-v2'
    ? { label: 'Carteira V2', bg: '#ede9fe', color: '#6d28d9' }
    : { label: 'Equipamentos', bg: '#dcfce7', color: '#166534' };

  const statusBadge = (s) => s === 'sent'
    ? { label: 'Enviado', bg: '#dcfce7', color: '#166534' }
    : { label: 'Falhou', bg: '#fee2e2', color: '#991b1b' };

  const thS = {
    padding: '8px 12px', textAlign: 'left', fontSize: 10.5,
    fontFamily: 'var(--dgd-font-mono, monospace)', color: 'var(--dgd-fg-3, #94a3b8)',
    letterSpacing: '0.06em', textTransform: 'uppercase',
    background: 'var(--dgd-bg-surface, #f8fafc)',
    borderBottom: '1px solid var(--dgd-border-1, #e2e8f0)', fontWeight: 600,
  };
  const tdS = {
    padding: '10px 12px', fontSize: 12.5,
    borderBottom: '1px solid var(--dgd-border-1, #e2e8f0)', verticalAlign: 'top',
  };

  const renderAcoes = (acoes, label, color) => {
    if (!acoes || !acoes.length) return null;
    return (
      <div style={{ marginBottom: 12 }}>
        <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.07em', textTransform: 'uppercase', color, marginBottom: 6 }}>{label}</div>
        {acoes.map((a, i) => (
          <div key={i} style={{ display: 'flex', gap: 8, fontSize: 12.5, color: 'var(--dgd-fg-2, #374151)', marginBottom: 4 }}>
            <span style={{ color: '#94a3b8', fontWeight: 600, minWidth: 16 }}>{a.n || a.num || i + 1}.</span>
            <span>{a.texto || (a.titulo ? <><strong>{a.titulo}</strong>{a.detalhe ? ` — ${a.detalhe}` : ''}</> : null)}</span>
          </div>
        ))}
      </div>
    );
  };

  return (
    <div style={{ height: '100%', overflowY: 'auto' }}><div style={{ padding: '24px 28px', maxWidth: 1100, margin: '0 auto' }}>
      {/* Header */}
      <div style={{ marginBottom: 20 }}>
        <div style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono, monospace)', color: 'var(--dgd-fg-3, #94a3b8)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4 }}>SISTEMA · NOTIFICAÇÕES</div>
        <h1 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: 'var(--dgd-fg-1, #1e293b)' }}>Notificações</h1>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 4, marginBottom: 20, borderBottom: '1px solid var(--dgd-border-1, #e2e8f0)', paddingBottom: 0 }}>
        {[{ id: 'sales-daily', label: 'Sales Daily' }, { id: 'gestores', label: 'Gestores' }].map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            padding: '8px 16px', fontSize: 13, fontWeight: tab === t.id ? 600 : 400,
            color: tab === t.id ? '#3859d0' : 'var(--dgd-fg-3, #94a3b8)',
            background: 'none', border: 'none', borderBottom: tab === t.id ? '2px solid #3859d0' : '2px solid transparent',
            cursor: 'pointer', marginBottom: -1,
          }}>{t.label}</button>
        ))}
      </div>

      {/* Controls */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
        <label style={{ fontSize: 12.5, color: 'var(--dgd-fg-3, #94a3b8)' }}>Data</label>
        <input type="date" value={date} onChange={e => setDate(e.target.value)}
          style={{ fontSize: 13, padding: '5px 10px', border: '1px solid var(--dgd-border-1, #e2e8f0)', borderRadius: 6, color: 'var(--dgd-fg-1, #1e293b)', background: 'var(--dgd-bg-card, #fff)' }} />
        <button onClick={() => load(date)} style={{ fontSize: 12.5, padding: '5px 12px', background: '#f1f5f9', border: '1px solid #e2e8f0', borderRadius: 6, cursor: 'pointer', color: '#475569' }}>Actualizar</button>
      </div>

      {/* Contadores — Sales Daily */}
      {tab === 'sales-daily' && !loading && (
        <div style={{ display: 'flex', gap: 10, marginBottom: 20, flexWrap: 'wrap' }}>
          {[
            { label: 'Total', value: counts.total, color: '#1e293b' },
            { label: 'Enviados', value: counts.sent, color: '#16a34a' },
            { label: 'Falhou', value: counts.failed, color: '#dc2626' },
            { label: 'Equipamentos', value: counts.equip, color: '#059669' },
            { label: 'Carteira V2', value: counts.v2, color: '#7c3aed' },
          ].map(c => (
            <div key={c.label} style={{ background: 'var(--dgd-bg-card, #fff)', border: '1px solid var(--dgd-border-1, #e2e8f0)', borderRadius: 8, padding: '10px 16px', minWidth: 90 }}>
              <div style={{ fontSize: 20, fontWeight: 700, color: c.color }}>{c.value}</div>
              <div style={{ fontSize: 11, color: 'var(--dgd-fg-3, #94a3b8)', marginTop: 2 }}>{c.label}</div>
            </div>
          ))}
        </div>
      )}

      {/* Contadores — Gestores */}
      {tab === 'gestores' && !gestorLoading && (
        <div style={{ display: 'flex', gap: 10, marginBottom: 20, flexWrap: 'wrap' }}>
          {[
            { label: 'Briefs', value: gestorRows.length, color: '#1e293b' },
            { label: 'Email enviado', value: gestorRows.filter(r => r.email_status === 'sent').length, color: '#16a34a' },
            { label: 'Pendente', value: gestorRows.filter(r => !r.email_status).length, color: '#94a3b8' },
            { label: 'Falhou', value: gestorRows.filter(r => r.email_status === 'failed').length, color: '#dc2626' },
          ].map(c => (
            <div key={c.label} style={{ background: 'var(--dgd-bg-card, #fff)', border: '1px solid var(--dgd-border-1, #e2e8f0)', borderRadius: 8, padding: '10px 16px', minWidth: 90 }}>
              <div style={{ fontSize: 20, fontWeight: 700, color: c.color }}>{c.value}</div>
              <div style={{ fontSize: 11, color: 'var(--dgd-fg-3, #94a3b8)', marginTop: 2 }}>{c.label}</div>
            </div>
          ))}
        </div>
      )}

      {/* Destinatários */}
      <div style={{ marginBottom: 24, border: '1px solid var(--dgd-border-1, #e2e8f0)', borderRadius: 10, overflow: 'hidden' }}>
          <button onClick={() => setDestOpen(o => !o)} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', background: 'var(--dgd-bg-surface, #f8fafc)', border: 'none', cursor: 'pointer', textAlign: 'left' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.07em', textTransform: 'uppercase', color: 'var(--dgd-fg-3, #94a3b8)' }}>Destinatários configurados</span>
              {!destLoading && <span style={{ background: '#e2e8f0', color: '#475569', fontSize: 10.5, fontWeight: 600, padding: '1px 7px', borderRadius: 10 }}>{dest.length}</span>}
            </div>
            <span style={{ color: '#94a3b8', fontSize: 12 }}>{destOpen ? '▲' : '▼'}</span>
          </button>
          {destOpen && (
            <div style={{ padding: '12px 16px', background: 'var(--dgd-bg-card, #fff)' }}>
              {destLoading && <div style={{ fontSize: 12.5, color: '#94a3b8', padding: '8px 0' }}>A carregar...</div>}
              {destError && <div style={{ fontSize: 12.5, color: '#dc2626', padding: '8px 0' }}>Erro: {destError}</div>}
              {!destLoading && !destError && dest.length > 0 && (() => {
                const canalColor = { 'MIMAKI PT': '#166534', 'MIMAKI GC': '#1e40af', 'DECAL PT': '#6d28d9', 'DECAL_EX': '#92400e' };
                const canalBg   = { 'MIMAKI PT': '#dcfce7', 'MIMAKI GC': '#dbeafe', 'DECAL PT': '#ede9fe', 'DECAL_EX': '#fef3c7' };
                const emailDigest = { 'MIMAKI PT': 'Equipamentos', 'MIMAKI GC': 'Equipamentos', 'DECAL PT': 'Carteira V2', 'DECAL_EX': 'Carteira V2' };
                const thS = { padding: '7px 12px', textAlign: 'left', fontSize: 10.5, fontFamily: 'var(--dgd-font-mono, monospace)', color: '#94a3b8', letterSpacing: '0.06em', textTransform: 'uppercase', background: '#f8fafc', borderBottom: '1px solid #e2e8f0', fontWeight: 600 };
                const tdS = { padding: '9px 12px', fontSize: 12.5, borderBottom: '1px solid #f1f5f9', verticalAlign: 'middle' };
                // Expandir para uma linha por canal por pessoa
                const linhas = [];
                ['MIMAKI PT', 'MIMAKI GC', 'DECAL PT', 'DECAL_EX'].forEach(canal => {
                  dest.filter(d => d.canais && d.canais.includes(canal)).forEach(p => {
                    linhas.push({ canal, nome: p.nome, email: p.email });
                  });
                });
                return (
                  <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                    <thead>
                      <tr>
                        <th style={thS}>Canal</th>
                        <th style={thS}>Nome</th>
                        <th style={thS}>Email</th>
                        <th style={thS}>Email digest</th>
                      </tr>
                    </thead>
                    <tbody>
                      {linhas.map((l, i) => (
                        <tr key={i} style={{ background: i % 2 === 0 ? '#fff' : '#fafafa' }}>
                          <td style={tdS}>
                            <span style={{ background: canalBg[l.canal] || '#f1f5f9', color: canalColor[l.canal] || '#475569', fontSize: 10.5, fontWeight: 700, padding: '2px 8px', borderRadius: 10 }}>{l.canal}</span>
                          </td>
                          <td style={{ ...tdS, fontWeight: 600, color: '#1e293b' }}>{l.nome}</td>
                          <td style={{ ...tdS, color: '#3859d0', fontSize: 12 }}>{l.email}</td>
                          <td style={tdS}>
                            <span style={{ fontSize: 11.5, color: '#64748b' }}>{emailDigest[l.canal]}</span>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                );
              })()}
            </div>
          )}
        </div>

      {/* Tabela — Sales Daily */}
      {tab === 'sales-daily' && (loading ? (
        <div style={{ padding: 40, textAlign: 'center', color: 'var(--dgd-fg-3, #94a3b8)', fontSize: 13 }}>A carregar...</div>
      ) : rows.length === 0 ? (
        <div style={{ padding: 40, textAlign: 'center', color: 'var(--dgd-fg-3, #94a3b8)', fontSize: 13 }}>
          Sem notificações para {new Date(date + 'T12:00:00Z').toLocaleDateString('pt-PT', { day: 'numeric', month: 'long', year: 'numeric' })}.
        </div>
      ) : (
        <div style={{ background: 'var(--dgd-bg-card, #fff)', border: '1px solid var(--dgd-border-1, #e2e8f0)', borderRadius: 10, overflow: 'hidden' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr>
                <th style={thS}>Comercial</th>
                <th style={thS}>Email enviado para</th>
                <th style={thS}>Canal</th>
                <th style={thS}>Estado</th>
                <th style={thS}>Enviado às</th>
                <th style={{ ...thS, width: 36 }}></th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => {
                const canal   = canalBadge(r.canal);
                const status  = statusBadge(r.status);
                const isOpen  = expanded === i;
                const sentAt  = r.sent_at ? new Date(r.sent_at).toLocaleTimeString('pt-PT', { hour: '2-digit', minute: '2-digit' }) : '—';
                return (
                  <React.Fragment key={i}>
                    <tr style={{ background: isOpen ? 'var(--dgd-bg-surface, #f8fafc)' : undefined }}>
                      <td style={tdS}>
                        <div style={{ fontWeight: 600, color: 'var(--dgd-fg-1, #1e293b)', fontSize: 13 }}>{r.nome || r.vendedor_id}</div>
                        <div style={{ fontSize: 11, color: 'var(--dgd-fg-3, #94a3b8)', marginTop: 1 }}>{r.vendedor_id}</div>
                      </td>
                      <td style={{ ...tdS, color: '#3859d0', fontSize: 12 }}>{r.email_to || r.email_profissional || '—'}</td>
                      <td style={tdS}>
                        <span style={{ background: canal.bg, color: canal.color, fontSize: 10.5, fontWeight: 600, padding: '2px 8px', borderRadius: 10 }}>{canal.label}</span>
                      </td>
                      <td style={tdS}>
                        <span style={{ background: status.bg, color: status.color, fontSize: 10.5, fontWeight: 600, padding: '2px 8px', borderRadius: 10 }}>{status.label}</span>
                      </td>
                      <td style={{ ...tdS, color: 'var(--dgd-fg-3, #94a3b8)', fontSize: 12 }}>{sentAt}</td>
                      <td style={tdS}>
                        <button onClick={() => setExpanded(isOpen ? null : i)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#94a3b8', fontSize: 16, padding: '0 4px' }}>
                          {isOpen ? '▲' : '▼'}
                        </button>
                      </td>
                    </tr>
                    {isOpen && (
                      <tr>
                        <td colSpan={6} style={{ padding: '16px 20px 20px', background: 'var(--dgd-bg-surface, #f8fafc)', borderBottom: '1px solid var(--dgd-border-1, #e2e8f0)' }}>
                          {r.narrativa && (
                            <div style={{ marginBottom: 14, padding: '12px 16px', background: '#fff', border: '1px solid #e2e8f0', borderRadius: 8 }}>
                              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.07em', textTransform: 'uppercase', color: '#94a3b8', marginBottom: 6 }}>Narrativa motivacional</div>
                              <p style={{ margin: 0, fontSize: 13, color: '#374151', lineHeight: 1.65 }}>{r.narrativa}</p>
                            </div>
                          )}
                          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                            <div style={{ padding: '12px 16px', background: '#fff', border: '1px solid #e2e8f0', borderRadius: 8 }}>
                              {renderAcoes(r.acoes, 'Prioridades do dia', '#3859d0')}
                              {(!r.acoes || !r.acoes.length) && <div style={{ fontSize: 12, color: '#94a3b8' }}>Sem prioridades</div>}
                            </div>
                            <div style={{ padding: '12px 16px', background: '#fff', border: '1px solid #e2e8f0', borderRadius: 8 }}>
                              {renderAcoes(r.acoes_prospect, 'Prospecção', '#059669')}
                              {(!r.acoes_prospect || !r.acoes_prospect.length) && <div style={{ fontSize: 12, color: '#94a3b8' }}>Sem sugestões de prospecção</div>}
                            </div>
                          </div>
                        </td>
                      </tr>
                    )}
                  </React.Fragment>
                );
              })}
            </tbody>
          </table>
        </div>
      ))}

      {/* Tabela — Gestores */}
      {tab === 'gestores' && (gestorLoading ? (
        <div style={{ padding: 40, textAlign: 'center', color: 'var(--dgd-fg-3, #94a3b8)', fontSize: 13 }}>A carregar...</div>
      ) : gestorRows.length === 0 ? (
        <div style={{ padding: 40, textAlign: 'center', color: 'var(--dgd-fg-3, #94a3b8)', fontSize: 13 }}>
          Sem briefs de gestores para {new Date(date + 'T12:00:00Z').toLocaleDateString('pt-PT', { day: 'numeric', month: 'long', year: 'numeric' })}.
        </div>
      ) : (
        <div style={{ background: 'var(--dgd-bg-card, #fff)', border: '1px solid var(--dgd-border-1, #e2e8f0)', borderRadius: 10, overflow: 'hidden' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr>
                <th style={thS}>Gestor</th>
                <th style={thS}>Canal</th>
                <th style={thS}>Email enviado para</th>
                <th style={thS}>Estado email</th>
                <th style={thS}>Enviado às</th>
                <th style={{ ...thS, width: 36 }}></th>
              </tr>
            </thead>
            <tbody>
              {gestorRows.map((r, i) => {
                const isOpen = gestorExpanded === i;
                const isConsumiveis = r.canal === 'consumiveis' || r.canal === 'consumiveis-v2';
                const canalLabel = isConsumiveis ? 'Consumíveis' : 'Equipamentos';
                const canalStyle = isConsumiveis
                  ? { background: '#ede9fe', color: '#6d28d9' }
                  : { background: '#dcfce7', color: '#166534' };
                const emailStatus = r.email_status;
                const statusStyle = emailStatus === 'sent'
                  ? { bg: '#dcfce7', color: '#166534', label: 'Enviado' }
                  : emailStatus === 'failed'
                  ? { bg: '#fee2e2', color: '#991b1b', label: 'Falhou' }
                  : { bg: '#f1f5f9', color: '#64748b', label: 'Pendente' };
                const sentAt = r.email_at ? new Date(r.email_at).toLocaleTimeString('pt-PT', { hour: '2-digit', minute: '2-digit' }) : '—';
                const acoes = r.acoes || [];
                const porComercial = r.por_comercial || [];
                const coaching = r.coaching_agenda || [];
                return (
                  <React.Fragment key={i}>
                    <tr style={{ background: isOpen ? 'var(--dgd-bg-surface, #f8fafc)' : undefined }}>
                      <td style={tdS}>
                        <div style={{ fontWeight: 600, color: 'var(--dgd-fg-1, #1e293b)', fontSize: 13 }}>{r.nome}</div>
                      </td>
                      <td style={tdS}>
                        <span style={{ ...canalStyle, fontSize: 10.5, fontWeight: 600, padding: '2px 8px', borderRadius: 10 }}>{canalLabel}</span>
                      </td>
                      <td style={{ ...tdS, color: '#3859d0', fontSize: 12 }}>{r.email_to || r.email_profissional || '—'}</td>
                      <td style={tdS}>
                        <span style={{ background: statusStyle.bg, color: statusStyle.color, fontSize: 10.5, fontWeight: 600, padding: '2px 8px', borderRadius: 10 }}>{statusStyle.label}</span>
                      </td>
                      <td style={{ ...tdS, color: 'var(--dgd-fg-3, #94a3b8)', fontSize: 12 }}>{sentAt}</td>
                      <td style={tdS}>
                        <button onClick={() => setGestorExpanded(isOpen ? null : i)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#94a3b8', fontSize: 16, padding: '0 4px' }}>
                          {isOpen ? '▲' : '▼'}
                        </button>
                      </td>
                    </tr>
                    {isOpen && (
                      <tr>
                        <td colSpan={6} style={{ padding: '16px 20px 20px', background: 'var(--dgd-bg-surface, #f8fafc)', borderBottom: '1px solid var(--dgd-border-1, #e2e8f0)' }}>
                          {r.narrativa && (
                            <div style={{ marginBottom: 14, padding: '12px 16px', background: '#fff', border: '1px solid #e2e8f0', borderRadius: 8 }}>
                              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.07em', textTransform: 'uppercase', color: '#94a3b8', marginBottom: 6 }}>Narrativa</div>
                              <p style={{ margin: 0, fontSize: 13, color: '#374151', lineHeight: 1.65 }}>{r.narrativa}</p>
                            </div>
                          )}
                          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                            <div style={{ padding: '12px 16px', background: '#fff', border: '1px solid #e2e8f0', borderRadius: 8 }}>
                              {renderAcoes(acoes, 'Prioridades de gestão', '#3859d0')}
                              {!acoes.length && <div style={{ fontSize: 12, color: '#94a3b8' }}>Sem acções</div>}
                            </div>
                            <div style={{ padding: '12px 16px', background: '#fff', border: '1px solid #e2e8f0', borderRadius: 8 }}>
                              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.07em', textTransform: 'uppercase', color: '#7c3aed', marginBottom: 8 }}>Equipa</div>
                              {porComercial.length ? porComercial.map((p, j) => (
                                <div key={j} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12.5, color: '#374151', paddingBottom: 4, marginBottom: 4, borderBottom: '1px solid #f1f5f9' }}>
                                  <span>{p.comercial}</span>
                                  <span style={{ fontSize: 11, color: '#64748b' }}>{p.sinal || ''}</span>
                                </div>
                              )) : <div style={{ fontSize: 12, color: '#94a3b8' }}>Sem dados</div>}
                              {r.regra_do_gestor && (
                                <div style={{ marginTop: 10, padding: '8px 10px', background: '#f8fafc', borderLeft: '2px solid #94a3b8', borderRadius: '0 4px 4px 0' }}>
                                  <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', color: '#94a3b8', letterSpacing: '0.06em', marginBottom: 4 }}>Regra do gestor</div>
                                  <p style={{ margin: 0, fontSize: 12, color: '#374151', lineHeight: 1.6 }}>{r.regra_do_gestor}</p>
                                </div>
                              )}
                            </div>
                          </div>
                        </td>
                      </tr>
                    )}
                  </React.Fragment>
                );
              })}
            </tbody>
          </table>
        </div>
      ))}
    </div></div>
  );
};

window.SistemaNotificacoes = SistemaNotificacoes;