import { useState, useEffect } from 'react';
import { rankingService } from '../services/api';
import './SugerirConsultores.css';

const SugerirConsultores = ({ onClose, onSelectConsultor }) => {
  const [tema, setTema] = useState('');
  const [areaAvaliacao, setAreaAvaliacao] = useState('');
  const [apenasAtivos, setApenasAtivos] = useState(true);
  const [quantidade, setQuantidade] = useState(20);
  const [areas, setAreas] = useState([]);
  const [consultores, setConsultores] = useState([]);
  const [loading, setLoading] = useState(false);
  const [loadingAreas, setLoadingAreas] = useState(true);
  const [error, setError] = useState(null);
  const [buscaRealizada, setBuscaRealizada] = useState(false);
  const [selecionados, setSelecionados] = useState([]);
  const [gerandoPdf, setGerandoPdf] = useState(false);

  useEffect(() => {
    const carregarAreas = async () => {
      try {
        const areasData = await rankingService.getAreasAvaliacao();
        setAreas(areasData.sort((a, b) => a.nome.localeCompare(b.nome)));
      } catch (err) {
        console.error('Erro ao carregar areas:', err);
      } finally {
        setLoadingAreas(false);
      }
    };
    carregarAreas();
  }, []);

  const handleBuscar = async (e) => {
    e.preventDefault();
    if (tema.trim().length < 2) return;

    try {
      setLoading(true);
      setError(null);
      const resultado = await rankingService.sugerirConsultores(
        tema.trim(),
        areaAvaliacao || null,
        apenasAtivos,
        quantidade
      );
      setConsultores(resultado.consultores || []);
      setBuscaRealizada(true);
    } catch (err) {
      console.error('Erro ao sugerir consultores:', err);
      setError('Erro ao buscar consultores. Tente novamente.');
    } finally {
      setLoading(false);
    }
  };

  const toggleSelecionado = (consultor, e) => {
    e.stopPropagation();
    setSelecionados((prev) => {
      const existe = prev.find((c) => c.id_pessoa === consultor.id_pessoa);
      if (existe) {
        return prev.filter((c) => c.id_pessoa !== consultor.id_pessoa);
      }
      return [...prev, { ...consultor, _busca_tema: tema, _busca_area: areaAvaliacao }];
    });
  };

  const handleClickConsultor = (consultor) => {
    if (onSelectConsultor) {
      onSelectConsultor(consultor.id_pessoa);
    }
    onClose();
  };

  const handleGerarPdf = async () => {
    if (selecionados.length === 0) return;

    try {
      setGerandoPdf(true);
      setError(null);

      const temasUnicos = [...new Set(selecionados.map((c) => c._busca_tema).filter(Boolean))];
      const areasUnicas = [...new Set(selecionados.map((c) => c._busca_area).filter(Boolean))];
      const temasCombinados = temasUnicos.length > 0 ? temasUnicos.join(' + ') : 'Equipe Selecionada';
      const areasCombinadas = areasUnicas.length > 0 ? areasUnicas.join(', ') : null;

      const response = await fetch('/api/v1/equipe/pdf', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          tema: temasCombinados,
          area_avaliacao: areasCombinadas,
          consultores: selecionados.map((c) => ({
            id_pessoa: c.id_pessoa,
            nome: c.nome,
            ies: c.ies,
            areas_avaliacao: c.areas_avaliacao,
            areas_conhecimento: c.areas_conhecimento,
            linhas_pesquisa: c.linhas_pesquisa,
            situacao: c.situacao,
            foi_coordenador: c.foi_coordenador,
            foi_premiado: c.foi_premiado,
            posicao_ranking: c.posicao_ranking,
            pontuacao_ranking: c.pontuacao_ranking,
            motivos_match: c.motivos_match,
          })),
        }),
      });

      if (!response.ok) {
        throw new Error('Erro ao gerar PDF');
      }

      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      const nomeArquivo = temasUnicos.length > 1
        ? `equipe_interdisciplinar_${new Date().toISOString().slice(0, 10)}.pdf`
        : `equipe_${temasCombinados.replace(/\s+/g, '_')}_${new Date().toISOString().slice(0, 10)}.pdf`;
      a.download = nomeArquivo;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      a.remove();
    } catch (err) {
      console.error('Erro ao gerar PDF:', err);
      setError('Erro ao gerar PDF da equipe. Tente novamente.');
    } finally {
      setGerandoPdf(false);
    }
  };

  const handleKeyDown = (e) => {
    if (e.key === 'Escape') {
      onClose();
    }
  };

  const isSelecionado = (id) => selecionados.some((c) => c.id_pessoa === id);

  return (
    <div className="sugerir-overlay" onClick={onClose} onKeyDown={handleKeyDown}>
      <div className="sugerir-modal" onClick={(e) => e.stopPropagation()}>
        <div className="sugerir-header">
          <div className="sugerir-header-content">
            <h2>Montar Equipe de Consultores</h2>
            <p className="sugerir-subtitle">Selecione consultores para gerar documento da equipe</p>
          </div>
          <button className="sugerir-close" onClick={onClose}>×</button>
        </div>

        <form className="sugerir-form" onSubmit={handleBuscar}>
          <div className="sugerir-field">
            <label htmlFor="tema">Tema ou Assunto</label>
            <input
              id="tema"
              type="text"
              value={tema}
              onChange={(e) => setTema(e.target.value)}
              placeholder="Ex: inteligencia artificial, biodiversidade, educacao..."
              autoFocus
            />
          </div>

          <div className="sugerir-field">
            <label htmlFor="area">Area de Avaliacao (opcional)</label>
            <select
              id="area"
              value={areaAvaliacao}
              onChange={(e) => setAreaAvaliacao(e.target.value)}
              disabled={loadingAreas}
            >
              <option value="">Todas as areas</option>
              {areas.map((area) => (
                <option key={area.nome} value={area.nome}>
                  {area.nome}
                </option>
              ))}
            </select>
          </div>

          <div className="sugerir-options">
            <label className="sugerir-checkbox">
              <input
                type="checkbox"
                checked={apenasAtivos}
                onChange={(e) => setApenasAtivos(e.target.checked)}
              />
              Apenas consultores ativos
            </label>

            <div className="sugerir-quantidade">
              <label htmlFor="quantidade">Quantidade:</label>
              <select
                id="quantidade"
                value={quantidade}
                onChange={(e) => setQuantidade(Number(e.target.value))}
              >
                <option value={10}>10</option>
                <option value={20}>20</option>
                <option value={50}>50</option>
                <option value={100}>100</option>
              </select>
            </div>
          </div>

          <button
            type="submit"
            className="sugerir-btn"
            disabled={loading || tema.trim().length < 2}
          >
            {loading ? 'Buscando...' : 'Buscar Consultores'}
          </button>
        </form>

        {error && <div className="sugerir-error">{error}</div>}

        {buscaRealizada && (
          <div className="sugerir-resultados">
            <div className="sugerir-resultados-header">
              <h3>
                {consultores.length > 0
                  ? `${consultores.length} consultores para "${tema}"`
                  : 'Nenhum consultor encontrado'}
              </h3>
              {consultores.length > 0 && (
                <span className="sugerir-hint">Selecione os consultores para a equipe</span>
              )}
            </div>

            {consultores.length > 0 && (
              <div className="sugerir-lista">
                {consultores.map((c, index) => (
                  <div
                    key={c.id_pessoa}
                    className={`sugerir-item ${isSelecionado(c.id_pessoa) ? 'selecionado' : ''}`}
                    onClick={(e) => toggleSelecionado(c, e)}
                  >
                    <div className="sugerir-item-header">
                      <label className="sugerir-checkbox-item" onClick={(e) => e.stopPropagation()}>
                        <input
                          type="checkbox"
                          checked={isSelecionado(c.id_pessoa)}
                          onChange={(e) => toggleSelecionado(c, e)}
                        />
                      </label>
                      <span className="sugerir-rank">#{index + 1}</span>
                      <span className="sugerir-nome">
                        {c.nome}
                        {import.meta.env.VITE_HOST_ATUACAPES && c.id_pessoa && (
                          <a
                            href={`${import.meta.env.VITE_HOST_ATUACAPES}/perfil/${c.id_pessoa}`}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="link-atuacapes"
                            onClick={(e) => e.stopPropagation()}
                            title="Ver perfil no ATUACAPES"
                          >
                            ↗
                          </a>
                        )}
                      </span>
                      <div className="sugerir-badges">
                        {c.foi_coordenador && <span className="badge coordenador" title="Foi coordenador">CA</span>}
                        {c.foi_premiado && <span className="badge premiado" title="Foi premiado">P</span>}
                        {c.situacao && c.situacao.toLowerCase().includes('atividade') ? (
                          <span className="badge ativo">Ativo</span>
                        ) : (
                          <span className="badge inativo">Inativo</span>
                        )}
                      </div>
                      <button
                        className="btn-ver-ranking"
                        onClick={(e) => {
                          e.stopPropagation();
                          handleClickConsultor(c);
                        }}
                        title="Ver no ranking"
                      >
                        →
                      </button>
                    </div>

                    <div className="sugerir-item-stats">
                      {c.posicao_ranking && (
                        <span className="stat-ranking" title="Posicao no ranking geral">
                          <span className="stat-icon">📊</span>
                          #{c.posicao_ranking.toLocaleString()} no ranking
                        </span>
                      )}
                      {c.pontuacao_ranking > 0 && (
                        <span className="stat-pontuacao" title="Pontuacao no ranking">
                          {c.pontuacao_ranking.toFixed(0)} pts
                        </span>
                      )}
                      {c.ies && <span className="sugerir-ies">{c.ies}</span>}
                    </div>

                    {c.motivos_match && c.motivos_match.length > 0 && (
                      <div className="sugerir-motivos">
                        <span className="motivos-label">Por que este consultor:</span>
                        <div className="motivos-lista">
                          {c.motivos_match.map((motivo, idx) => (
                            <span key={idx} className="tag motivo">{motivo}</span>
                          ))}
                        </div>
                      </div>
                    )}

                    <div className="sugerir-item-details">
                      {c.areas_avaliacao.length > 0 && (
                        <div className="sugerir-areas">
                          {c.areas_avaliacao.slice(0, 3).map((area) => (
                            <span key={area} className="tag area">{area}</span>
                          ))}
                          {c.areas_avaliacao.length > 3 && (
                            <span className="tag more">+{c.areas_avaliacao.length - 3}</span>
                          )}
                        </div>
                      )}
                    </div>
                    {c.linhas_pesquisa.length > 0 && (
                      <div className="sugerir-pesquisa">
                        {c.linhas_pesquisa.slice(0, 2).map((linha) => (
                          <span key={linha} className="tag pesquisa" title={linha}>
                            {linha.length > 50 ? linha.substring(0, 50) + '...' : linha}
                          </span>
                        ))}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

        {selecionados.length > 0 && (
          <div className="equipe-flutuante">
            <div className="equipe-info">
              <div className="equipe-header-row">
                <span className="equipe-count">{selecionados.length} selecionado{selecionados.length > 1 ? 's' : ''}</span>
                {(() => {
                  const temas = [...new Set(selecionados.map((c) => c._busca_tema).filter(Boolean))];
                  return temas.length > 1 && (
                    <span className="equipe-interdisciplinar">Interdisciplinar</span>
                  );
                })()}
              </div>
              <div className="equipe-temas">
                {(() => {
                  const temas = [...new Set(selecionados.map((c) => c._busca_tema).filter(Boolean))];
                  return temas.map((t) => (
                    <span key={t} className="equipe-tema">{t}</span>
                  ));
                })()}
              </div>
              <div className="equipe-nomes">
                {selecionados.slice(0, 5).map((c) => (
                  <span key={c.id_pessoa} className="equipe-nome">{c.nome.split(' ')[0]}</span>
                ))}
                {selecionados.length > 5 && (
                  <span className="equipe-nome">+{selecionados.length - 5}</span>
                )}
              </div>
            </div>
            <div className="equipe-acoes">
              <button className="btn-limpar" onClick={() => setSelecionados([])}>
                Limpar
              </button>
              <button
                className="btn-gerar-pdf"
                onClick={handleGerarPdf}
                disabled={gerandoPdf}
              >
                {gerandoPdf ? 'Gerando...' : 'Gerar PDF da Equipe'}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default SugerirConsultores;
