import React, { useState, useEffect } from "react";
import API_KEY from "../components/utils/apiKeys";
import { useAuth } from "../components/utils/AuthProvider";
import { Link } from "react-router-dom";
import "./style/TableDoctor.css";

function TableDoctor({setDictInfo}) {
  const { getAuthorizationHeader, isAuthenticated } = useAuth();

  const [medicos, setMedicos] = useState([]);
  const [search, setSearch] = useState("");
  const [filtroEspecialidade, setFiltroEspecialidade] = useState("Todos");
  const [filtroAniversariante, setFiltroAniversariante] = useState(false);

  const [showFiltrosAvancados, setShowFiltrosAvancados] = useState(false);
  const [filtroCidade, setFiltroCidade] = useState("");
  const [filtroEstado, setFiltroEstado] = useState("");
  const [idadeMinima, setIdadeMinima] = useState("");
  const [idadeMaxima, setIdadeMaxima] = useState("");
  const [dataInicial, setDataInicial] = useState("");
  const [dataFinal, setDataFinal] = useState("");


  const [paginaAtual, setPaginaAtual] = useState(1);
  const [itensPorPagina, setItensPorPagina] = useState(10);

  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [selectedDoctorId, setSelectedDoctorId] = useState(null);

  const [sortKey, setSortKey] = useState(null); 
  const [sortDir, setSortDir] = useState('asc'); 

  const limparFiltros = () => {
    setSearch("");
    setFiltroEspecialidade("Todos");
    setFiltroAniversariante(false);
    setShowFiltrosAvancados(false);
    setFiltroCidade("");
    setFiltroEstado("");
    setIdadeMinima("");
    setIdadeMaxima("");
    setDataInicial("");
    setDataFinal("");
    setPaginaAtual(1);
  };

  const deleteDoctor = async (id) => {
    const authHeader = getAuthorizationHeader()
    console.log(id, 'teu id')

    var myHeaders = new Headers();
    myHeaders.append('apikey', API_KEY);
    myHeaders.append("Authorization", authHeader)

    var requestOptions = { method: "DELETE", redirect: "follow", headers: myHeaders };

    try {
      const result = await fetch(
        `https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${id}`,
        requestOptions
      );
      setMedicos((prev) => prev.filter((p) => p.id !== id));
      console.log(result)
    } catch (error) {
      console.log("Deu problema", error);
    } finally {
      setShowDeleteModal(false);
    }
  };

  const ehAniversariante = (dataNascimento) => {
    if (!dataNascimento) return false;
    const hoje = new Date();
    const nascimento = new Date(dataNascimento);

    return (
      hoje.getDate() === nascimento.getDate() &&
      hoje.getMonth() === nascimento.getMonth()
    );
  };

  const calcularIdade = (dataNascimento) => {
    if (!dataNascimento) return 0;
    const hoje = new Date();
    const nascimento = new Date(dataNascimento);
    let idade = hoje.getFullYear() - nascimento.getFullYear();
    const mes = hoje.getMonth() - nascimento.getMonth();

    if (mes < 0 || (mes === 0 && hoje.getDate() < nascimento.getDate())) {
      idade--;
    }
    return idade;
  };

  useEffect(() => {
    const authHeader = getAuthorizationHeader()
    console.log(authHeader, 'aqui autorização')

    var myHeaders = new Headers();
    myHeaders.append("apikey", API_KEY);
    myHeaders.append("Authorization", `${authHeader}`);
    var requestOptions = {
      method: 'GET',
      headers: myHeaders,
      redirect: 'follow'
    };

    fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions)
      .then(response => response.json())
      .then(result => setMedicos(result))
      .catch(error => console.log('error', error));
  }, [isAuthenticated, getAuthorizationHeader]);

  const medicosFiltrados = Array.isArray(medicos) ? medicos.filter((medico) => {
    const buscaNome = medico.full_name?.toLowerCase().includes(search.toLowerCase());
    const buscaCPF = medico.cpf?.toLowerCase().includes(search.toLowerCase());
    const buscaEmail = medico.email?.toLowerCase().includes(search.toLowerCase());
    const passaBusca = search === "" || buscaNome || buscaCPF || buscaEmail;

    const passaEspecialidade = filtroEspecialidade === "Todos" || medico.specialty === filtroEspecialidade;

    const passaAniversario = filtroAniversariante
      ? ehAniversariante(medico.birth_date)
      : true;

    const passaCidade = filtroCidade ?
      medico.city?.toLowerCase().includes(filtroCidade.toLowerCase()) : true;

    const passaEstado = filtroEstado ?
      medico.state?.toLowerCase().includes(filtroEstado.toLowerCase()) : true;

    const idade = calcularIdade(medico.birth_date);
    const passaIdadeMinima = idadeMinima ? idade >= parseInt(idadeMinima) : true;
    const passaIdadeMaxima = idadeMaxima ? idade <= parseInt(idadeMaxima) : true;

    const passaDataInicial = dataInicial ?
      medico.created_at && new Date(medico.created_at) >= new Date(dataInicial) : true;

    const passaDataFinal = dataFinal ?
      medico.created_at && new Date(medico.created_at) <= new Date(dataFinal) : true;

    const resultado = passaBusca && passaEspecialidade && passaAniversario &&
      passaCidade && passaEstado && passaIdadeMinima && passaIdadeMaxima &&
      passaDataInicial && passaDataFinal;

    return resultado;
  }) : [];

  const applySorting = (arr) => {
    if (!Array.isArray(arr) || !sortKey) return arr;
    const copy = [...arr];
    if (sortKey === 'nome') {
      copy.sort((a, b) => (a.full_name || '').localeCompare((b.full_name || ''), undefined, { sensitivity: 'base' }));
    } else if (sortKey === 'idade') {
      copy.sort((a, b) => calcularIdade(a.birth_date) - calcularIdade(b.birth_date));
    }
    if (sortDir === 'desc') copy.reverse();
    return copy;
  };

  const medicosOrdenados = applySorting(medicosFiltrados);

  const totalPaginas = Math.ceil(medicosFiltrados.length / itensPorPagina);
  const indiceInicial = (paginaAtual - 1) * itensPorPagina;
  const indiceFinal = indiceInicial + itensPorPagina;
  const medicosPaginados = medicosOrdenados.slice(indiceInicial, indiceFinal);

 
  const irParaPagina = (pagina) => {
    setPaginaAtual(pagina);
  };

  const avancarPagina = () => {
    if (paginaAtual < totalPaginas) {
      setPaginaAtual(paginaAtual + 1);
    }
  };

  const voltarPagina = () => {
    if (paginaAtual > 1) {
      setPaginaAtual(paginaAtual - 1);
    }
  };

 
  const gerarNumerosPaginas = () => {
    const paginas = [];
    const paginasParaMostrar = 5;
    
    let inicio = Math.max(1, paginaAtual - Math.floor(paginasParaMostrar / 2));
    let fim = Math.min(totalPaginas, inicio + paginasParaMostrar - 1);
    
    inicio = Math.max(1, fim - paginasParaMostrar + 1);
    
    for (let i = inicio; i <= fim; i++) {
      paginas.push(i);
    }
    
    return paginas;
  };

  useEffect(() => {
    setPaginaAtual(1);
  }, [search, filtroEspecialidade, filtroAniversariante, filtroCidade, filtroEstado, idadeMinima, idadeMaxima, dataInicial, dataFinal, sortKey, sortDir]);

  return (
    <>
      <div className="page-heading">
        <h3>Lista de Médicos</h3>
      </div>
      <div className="page-content table-doctor-container">
        <section className="row">
          <div className="col-12">
            <div className="card table-doctor-card">
              <div className="card-header">
                <h4 className="card-title mb-0">Médicos Cadastrados</h4>
                <Link to={'cadastro'}>
                  <button className="btn btn-primary">
                    <i className="bi bi-plus-circle"></i> Adicionar Médico
                  </button>
                </Link>
              </div>

              <div className="card-body">
                <div className="card p-3 mb-3 table-doctor-filters">
                  <h5 className="mb-3">
                    <i className="bi bi-funnel-fill me-2 text-primary"></i>{" "}
                    Filtros
                  </h5>

                  <div className="mb-3">
                    <input
                      type="text"
                      className="form-control"
                      placeholder="Buscar por nome, CPF ou email..."
                      value={search}
                      onChange={(e) => setSearch(e.target.value)}
                    />
                    <small className="text-muted">
                      Digite o nome completo, CPF ou email
                    </small>
                  </div>

                  <div className="filtros-basicos">
                    <select
                      className="form-select filter-especialidade"
                      value={filtroEspecialidade}
                      onChange={(e) => setFiltroEspecialidade(e.target.value)}
                    >
                      <option value="Todos">Todas as Especialidades</option>
                      <option value="Clínica Geral">Clínica médica (clínico geral)</option>
                      <option value="Pediatria">Pediatria</option>
                      <option value="Ginecologia">Ginecologia e obstetrícia</option>
                      <option value="Cardiologia">Cardiologia</option>
                      <option value="Ortopedia">Ortopedia e traumatologia</option>
                      <option value="Oftalmologia">Oftalmologia</option>
                      <option value="Otorrinolaringologia">Otorrinolaringologia</option>
                      <option value="Dermatologia">Dermatologia</option>
                      <option value="Neurologia">Neurologia</option>
                      <option value="Psiquiatria">Psiquiatria</option>
                      <option value="Endocrinologia">Endocrinologia</option>
                      <option value="Gastroenterologia">Gastroenterologia</option>
                      <option value="Urologia">Urologia</option>
                    </select>

                    <div className="filter-buttons-container">
                      <button
                        className={`btn filter-btn ${filtroAniversariante
                          ? "btn-primary"
                          : "btn-outline-primary"
                          }`}
                        onClick={() => setFiltroAniversariante(!filtroAniversariante)}
                      >
                        <i className="bi bi-calendar me-1"></i> Aniversariantes
                      </button>
                    </div>


                    <div className="vr mx-2 d-none d-md-block" />
                    <div className="d-flex align-items-center gap-2">
                      <span className="text-muted small">Ordenar por:</span>
                      {(() => {
                        const sortValue = sortKey ? `${sortKey}-${sortDir}` : '';
                        return (
                          <select
                            className="form-select compact-select sort-select w-auto"
                            value={sortValue}
                            onChange={(e) => {
                              const v = e.target.value;
                              if (!v) { setSortKey(null); setSortDir('asc'); return; }
                              const [k, d] = v.split('-');
                              setSortKey(k);
                              setSortDir(d);
                            }}
                          >
                            <option value="">Sem ordenação</option>
                            <option value="nome-asc">Nome (A-Z)</option>
                            <option value="nome-desc">Nome (Z-A)</option>
                            <option value="idade-asc">Idade (crescente)</option>
                            <option value="idade-desc">Idade (decrescente)</option>
                          </select>
                        );
                      })()}
                    </div>
                  </div>

                  <div className="d-flex justify-content-between align-items-center mt-3">
                    <button
                      className="btn btn-link p-0 text-decoration-none"
                      onClick={() => setShowFiltrosAvancados(!showFiltrosAvancados)}
                    >
                      <i className={`bi bi-chevron-${showFiltrosAvancados ? 'up' : 'down'} me-1`}></i>
                      Filtros Avançados
                    </button>

                    <button
                      className="btn btn-outline-secondary btn-sm"
                      onClick={limparFiltros}
                    >
                      <i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
                    </button>
                  </div>

                  {showFiltrosAvancados && (
                    <div className="mt-3 p-3 border rounded advanced-filters">
                      <h6 className="mb-3">Filtros Avançados</h6>

                      <div className="row g-3">
                        <div className="col-md-6">
                          <label className="form-label fw-bold">Cidade</label>
                          <input
                            type="text"
                            className="form-control"
                            placeholder="Digite a cidade..."
                            value={filtroCidade}
                            onChange={(e) => setFiltroCidade(e.target.value)}
                          />
                        </div>
                        <div className="col-md-6">
                          <label className="form-label fw-bold">Estado</label>
                          <input
                            type="text"
                            className="form-control"
                            placeholder="Ex: Minas Gerais"
                            value={filtroEstado}
                            onChange={(e) => setFiltroEstado(e.target.value)}
                          />
                        </div>

                        <div className="col-md-6">
                          <label className="form-label fw-bold">Idade mínima</label>
                          <input
                            type="number"
                            className="form-control"
                            placeholder="Ex: 25"
                            value={idadeMinima}
                            onChange={(e) => setIdadeMinima(e.target.value)}
                            min="0"
                            max="150"
                          />
                        </div>
                        <div className="col-md-6">
                          <label className="form-label fw-bold">Idade máxima</label>
                          <input
                            type="number"
                            className="form-control"
                            placeholder="Ex: 70"
                            value={idadeMaxima}
                            onChange={(e) => setIdadeMaxima(e.target.value)}
                            min="0"
                            max="150"
                          />
                        </div>

                        <div className="col-md-6">
                          <label className="form-label fw-bold">Data inicial</label>
                          <input
                            type="date"
                            className="form-control"
                            value={dataInicial}
                            onChange={(e) => setDataInicial(e.target.value)}
                          />
                        </div>
                        <div className="col-md-6">
                          <label className="form-label fw-bold">Data final</label>
                          <input
                            type="date"
                            className="form-control"
                            value={dataFinal}
                            onChange={(e) => setDataFinal(e.target.value)}
                          />
                        </div>
                      </div>
                    </div>
                  )}

                  <div className="mt-3">
                    <div className="contador-medicos">
                      {medicosFiltrados.length} DE {medicos.length} MÉDICOS ENCONTRADOS
                    </div>
                  </div>
                </div>

                <div className="table-responsive">
                  <table className="table table-striped table-hover table-doctor-table">
                    <thead>
                      <tr>
                        <th>Nome</th>
                        <th>CPF</th>
                        <th>Especialidade</th>
                        <th>Email</th>
                        <th>Ações</th>
                      </tr>
                    </thead>
                    <tbody>
                      {medicosPaginados.length > 0 ? (
                        medicosPaginados.map((medico) => (
                          <tr key={medico.id}>
                            <td>
                              <div className="d-flex align-items-center">
                                {medico.full_name}
                                {ehAniversariante(medico.birth_date) && (
                                  <span className="badge anniversary-badge ms-2" title="Aniversariante do dia">
                                    <i className="bi bi-gift"></i>
                                  </span>
                                )}
                              </div>
                            </td>
                            <td>{medico.cpf}</td>
                            <td>
                              <span className="badge specialty-badge">
                                {medico.specialty || 'Não informado'}
                              </span>
                            </td>
                            <td>{medico.email || 'Não informado'}</td>
                            <td>
                              <div className="d-flex gap-2">
                                <Link to={`details/${medico.id}`}>
                                  <button className="btn btn-sm btn-view" onClick={() => setDictInfo({...medico})}>
                                    <i className="bi bi-eye me-1"></i> Ver Detalhes
                                  </button>
                                </Link>

                                <Link to={`edit/${medico.id}`}>
                                  <button className="btn btn-sm btn-edit" onClick={() => setDictInfo({...medico})}>
                                    <i className="bi bi-pencil me-1"></i> Editar
                                  </button>
                                </Link>

                                <button
                                  className="btn btn-sm btn-delete"
                                  onClick={() => {
                                    setSelectedDoctorId(medico.id);
                                    setShowDeleteModal(true);
                                  }}
                                >
                                  <i className="bi bi-trash me-1"></i> Excluir
                                </button>
                              </div>
                            </td>
                          </tr>
                        ))
                      ) : (
                        <tr>
                          <td colSpan="5" className="text-center py-4">
                            <div className="text-muted">
                              <i className="bi bi-search display-4"></i>
                              <p className="mt-2">Nenhum médico encontrado com os filtros aplicados.</p>
                              {(search || filtroEspecialidade !== "Todos" || filtroAniversariante ||
                                filtroCidade || filtroEstado || idadeMinima || idadeMaxima || dataInicial || dataFinal) && (
                                <button className="btn btn-outline-primary btn-sm mt-2" onClick={limparFiltros}>
                                  Limpar filtros
                                </button>
                              )}
                            </div>
                          </td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                  
                  {medicosFiltrados.length > 0 && (
                    <div className="d-flex justify-content-between align-items-center mt-3">
                      <div className="d-flex align-items-center">
                        <span className="me-2 text-muted">Itens por página:</span>
                        <select 
                          className="form-select form-select-sm w-auto"
                          value={itensPorPagina}
                          onChange={(e) => {
                            setItensPorPagina(Number(e.target.value));
                            setPaginaAtual(1);
                          }}
                        >
                          <option value={5}>5</option>
                          <option value={10}>10</option>
                          <option value={25}>25</option>
                          <option value={50}>50</option>
                        </select>
                      </div>
                      
                      <div className="d-flex align-items-center">
                        <span className="me-3 text-muted">
                          Página {paginaAtual} de {totalPaginas} • 
                          Mostrando {indiceInicial + 1}-{Math.min(indiceFinal, medicosFiltrados.length)} de {medicosFiltrados.length} médicos
                        </span>
                        
                        <nav>
                          <ul className="pagination pagination-sm mb-0">
                            <li className={`page-item ${paginaAtual === 1 ? 'disabled' : ''}`}>
                              <button className="page-link" onClick={voltarPagina}>
                                <i className="bi bi-chevron-left"></i>
                              </button>
                            </li>
                            
                            {gerarNumerosPaginas().map(pagina => (
                              <li key={pagina} className={`page-item ${pagina === paginaAtual ? 'active' : ''}`}>
                                <button className="page-link" onClick={() => irParaPagina(pagina)}>
                                  {pagina}
                                </button>
                              </li>
                            ))}
                            
                            <li className={`page-item ${paginaAtual === totalPaginas ? 'disabled' : ''}`}>
                              <button className="page-link" onClick={avancarPagina}>
                                <i className="bi bi-chevron-right"></i>
                              </button>
                            </li>
                          </ul>
                        </nav>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>

      {showDeleteModal && (
        <div
          className="modal fade show delete-modal"
          style={{
            display: "block",
            backgroundColor: "rgba(0, 0, 0, 0.5)",
          }}
          tabIndex="-1"
          onClick={(e) =>
            e.target.classList.contains("modal") && setShowDeleteModal(false)
          }
        >
          <div className="modal-dialog modal-dialog-centered">
            <div className="modal-content">
              <div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
                <h5 className="modal-title">
                  Confirmação de Exclusão
                </h5>
              </div>

              <div className="modal-body">
                <p className="mb-0 fs-5">
                  Tem certeza que deseja excluir este médico?
                </p>
              </div>

              <div className="modal-footer">
                <button
                  type="button"
                  className="btn btn-primary"
                  onClick={() => setShowDeleteModal(false)}
                >
                  Cancelar
                </button>

                <button
                  type="button"
                  className="btn btn-danger"
                  onClick={() => deleteDoctor(selectedDoctorId)}
                >
                  <i className="bi bi-trash me-1"></i> Excluir
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

export default TableDoctor;