import React from 'react';
import './Header.css';

const Header = ({ total }) => {
  const dataGeracao = new Date().toLocaleDateString('pt-BR');
  const totalFormatado = new Intl.NumberFormat('pt-BR', {
    maximumFractionDigits: 0,
  }).format(Number(total) || 0);

  return (
    <header className="header">
      <div className="header-content">
        <div className="header-title-row">
          <img src="/logo_capes.png" alt="CAPES" className="header-logo" />
          <h1>Ranking de Consultores CAPES</h1>
        </div>
        <p className="subtitle">
          Ranking ATUACAPES V1.0 | Dezembro 2025
        </p>
        <div className="meta">
          Gerado em {dataGeracao} | Total: {totalFormatado} consultores
        </div>

        <div className="criteria-box">
          <h3>Criterios de Pontuacao</h3>

          <div className="criteria-row">
            <div className="criteria-section bloco-a">
              <div className="section-header">
                <h4>A - Coordenacao CAPES</h4>
                <span className="max-pts">max 450</span>
              </div>
              <table className="criteria-table">
                <thead>
                  <tr><th>Cod</th><th>Base</th><th>Teto</th><th>Tempo</th><th>At</th><th>Ret</th></tr>
                </thead>
                <tbody>
                  <tr><td>CA</td><td>200</td><td>450</td><td>10/a</td><td>30</td><td>20</td></tr>
                  <tr><td>CAJ</td><td>150</td><td>370</td><td>8/a</td><td>20</td><td>15</td></tr>
                  <tr><td>CAJ_MP</td><td>120</td><td>315</td><td>6/a</td><td>15</td><td>10</td></tr>
                  <tr><td>CAM</td><td>100</td><td>280</td><td>5/a</td><td>20</td><td>10</td></tr>
                </tbody>
              </table>
            </div>

            <div className="criteria-section bloco-b">
              <div className="section-header">
                <h4>B - Consultoria</h4>
                <span className="max-pts">max 230</span>
              </div>
              <table className="criteria-table">
                <thead>
                  <tr><th>Cod</th><th>Base</th><th>Teto</th><th>Tempo</th><th>Bonus</th></tr>
                </thead>
                <tbody>
                  <tr><td>ATIVO</td><td>150</td><td>230</td><td>5/a</td><td>At+Ct+Rt</td></tr>
                  <tr><td>HIST</td><td>100</td><td>230</td><td>5/a</td><td>Ct+Rt</td></tr>
                  <tr><td>FALEC</td><td>100</td><td>230</td><td>5/a</td><td>Ct</td></tr>
                </tbody>
              </table>
              <div className="criteria-note">At=20 Ct=20 Rt=15-20 | Teto tempo: 50</div>
            </div>

            <div className="criteria-section bloco-e">
              <div className="section-header">
                <h4>E - Coord. PPG</h4>
                <span className="max-pts">V2</span>
              </div>
              <table className="criteria-table">
                <thead>
                  <tr><th>Cod</th><th>Base</th><th>Teto</th></tr>
                </thead>
                <tbody>
                  <tr><td>PPG_COORD</td><td>0</td><td>0</td></tr>
                </tbody>
              </table>
              <div className="criteria-note">Dados incompletos no V1</div>
            </div>
          </div>

          <div className="criteria-row">
            <div className="criteria-section bloco-c wide">
              <div className="section-header">
                <h4>C - Premiacoes, Avaliacoes, Inscricoes</h4>
                <span className="max-pts">max 300</span>
              </div>
              <div className="table-columns">
                <table className="criteria-table selos-table">
                  <thead>
                    <tr><th>Premiacoes</th><th>B</th><th>T</th><th>Autor</th><th>Orient</th><th>Coorient</th></tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>GP</td><td>100</td><td>300</td>
                      <td><span className="selo-legenda selo-gp">🏆</span></td>
                      <td><span className="selo-legenda selo-gp">🏆</span></td>
                      <td><span className="selo-legenda selo-gp">🏆</span></td>
                    </tr>
                    <tr>
                      <td>PREMIO</td><td>50</td><td>150</td>
                      <td><span className="selo-legenda selo-premio">🥇</span></td>
                      <td><span className="selo-legenda selo-orient-premio">🎖️</span></td>
                      <td><span className="selo-legenda selo-coorient-premio">🎖️</span></td>
                    </tr>
                    <tr>
                      <td>MENCAO</td><td>30</td><td>90</td>
                      <td><span className="selo-legenda selo-mencao">🥈</span></td>
                      <td><span className="selo-legenda selo-orient-mencao">📜</span></td>
                      <td><span className="selo-legenda selo-coorient-mencao">📜</span></td>
                    </tr>
                  </tbody>
                </table>
                <table className="criteria-table">
                  <thead>
                    <tr><th>Comissoes</th><th>Base</th><th>Teto</th></tr>
                  </thead>
                  <tbody>
                    <tr><td>COORD_GP</td><td>50</td><td>120</td></tr>
                    <tr><td>COORD</td><td>40</td><td>100</td></tr>
                    <tr><td>AVAL_GP</td><td>40</td><td>80</td></tr>
                    <tr><td>AVAL</td><td>30</td><td>60</td></tr>
                  </tbody>
                </table>
                <table className="criteria-table">
                  <thead>
                    <tr><th>Inscricoes</th><th>Base</th><th>Teto</th></tr>
                  </thead>
                  <tbody>
                    <tr><td>INSC_INST</td><td>20</td><td>50</td></tr>
                    <tr><td>INSC_AUTOR</td><td>10</td><td>20</td></tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <div className="criteria-row">
            <div className="criteria-section bloco-c selos-section">
              <div className="section-header">
                <h4>C - Orientacoes</h4>
                <span className="max-pts">selos</span>
              </div>
              <div className="table-columns">
                <table className="criteria-table compact selos-table">
                  <thead><tr><th>Orientacao</th><th>Selo</th></tr></thead>
                  <tbody>
                    <tr><td>POS_DOC</td><td><span className="selo-legenda selo-orient">🔬</span></td></tr>
                    <tr><td>TESE</td><td><span className="selo-legenda selo-orient">📚</span></td></tr>
                    <tr><td>DISS</td><td><span className="selo-legenda selo-orient">📄</span></td></tr>
                  </tbody>
                </table>
                <table className="criteria-table compact selos-table">
                  <thead><tr><th>Co-Orient</th><th>Selo</th></tr></thead>
                  <tbody>
                    <tr><td>POS_DOC</td><td><span className="selo-legenda selo-coorient">🔬</span></td></tr>
                    <tr><td>TESE</td><td><span className="selo-legenda selo-coorient">📚</span></td></tr>
                    <tr><td>DISS</td><td><span className="selo-legenda selo-coorient">📄</span></td></tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div className="criteria-section bloco-c selos-section">
              <div className="section-header">
                <h4>C - Bancas</h4>
                <span className="max-pts">selos</span>
              </div>
              <table className="criteria-table compact selos-table">
                <thead><tr><th>Membro Banca</th><th>Selo</th></tr></thead>
                <tbody>
                  <tr><td>MB_POS_DOC</td><td><span className="selo-legenda selo-banca">🔬</span></td></tr>
                  <tr><td>MB_TESE</td><td><span className="selo-legenda selo-banca">📚</span></td></tr>
                  <tr><td>MB_DISS</td><td><span className="selo-legenda selo-banca">📄</span></td></tr>
                </tbody>
              </table>
            </div>

            <div className="criteria-section bloco-d selos-section">
              <div className="section-header">
                <h4>D - Indicadores</h4>
                <span className="max-pts">selos</span>
              </div>
              <table className="criteria-table compact selos-table">
                <thead><tr><th>Codigo</th><th>B</th><th>T</th><th>Selo</th></tr></thead>
                <tbody>
                  <tr><td>BOL_BPQ</td><td>30</td><td>60</td><td><span className="selo-legenda selo-bpq">🏅</span></td></tr>
                  <tr><td>PROJ</td><td>10</td><td>30</td><td><span className="selo-legenda selo-proj">📁</span></td></tr>
                  <tr><td>EVENTO</td><td>1</td><td>5</td><td><span className="selo-legenda selo-evento">📅</span></td></tr>
                  <tr><td>PPG_COORD</td><td>-</td><td>-</td><td><span className="selo-legenda selo-coord">🎓</span></td></tr>
                  <tr><td>PRES_CAM</td><td>-</td><td>-</td><td><span className="selo-legenda selo-camara">👑</span></td></tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;
