import React, { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import API_KEY from "../components/utils/apiKeys";
import { useAuth } from "../components/utils/AuthProvider";
import "./style/TablePaciente.css"; 
import ModalErro from "../components/utils/fetchErros/ModalErro";
import manager from "../components/utils/fetchErros/ManagerFunction";

function TablePaciente({ setCurrentPage, setPatientID, setDictInfo }) {
  const { getAuthorizationHeader, isAuthenticated } = useAuth();
  const navigate = useNavigate();

  const [pacientes, setPacientes] = useState([]);
  const [search, setSearch] = useState("");
  const [filtroConvenio, setFiltroConvenio] = useState("Todos");
  const [filtroVIP, setFiltroVIP] = useState(false);
  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 [sortKey, setSortKey] = useState(null); 
  const [sortDir, setSortDir] = useState('asc'); 

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

  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [selectedPatientId, setSelectedPatientId] = useState(null);

  const [showModalError, setShowModalError] = useState("");
  const [ErrorInfo, setErrorInfo] = useState({});

  // Funções auxiliares
  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;
  };

  const formatarData = (dataString) => {
    if (!dataString) return 'Nunca';
    const data = new Date(dataString);
    return data.toLocaleDateString('pt-BR', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  // Funções de API (mantidas do seu código original)
  const GetAnexos = async (id) => {
    var myHeaders = new Headers();
    myHeaders.append("Authorization", "Bearer <token>");
    var requestOptions = { method: "GET", headers: myHeaders, redirect: "follow" };
    
    try {
      const response = await fetch(
        `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}/anexos`,
        requestOptions
      );
      const result = await response.json();
      return result.data;
    } catch (error) {
      console.log("error", error);
      return [];
    }
  };

  const DeleteAnexo = async (patientID) => {
    const RespostaGetAnexos = await GetAnexos(patientID);
    for (let i = 0; i < RespostaGetAnexos.length; i++) {
      const idAnexo = RespostaGetAnexos[i].id;
      var myHeaders = new Headers();
      myHeaders.append("Authorization", "Bearer <token>");
      var requestOptions = { method: "DELETE", headers: myHeaders, redirect: "follow" };

      fetch(
        `https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos/${idAnexo}`,
        requestOptions
      )
        .then((response) => response.text())
        .then((result) => console.log("anexo excluido com sucesso", result))
        .catch((error) => console.log("error", error));
    }
  };

  const deletePatient = async (id) => {
    const authHeader = getAuthorizationHeader();
    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/patients?id=eq.${id}`,
        requestOptions
      );
      setPacientes((prev) => prev.filter((p) => p.id !== id));
    } catch (error) {
      console.log("Deu problema", error);
    } finally {
      setShowDeleteModal(false);
    }
  };

  const RefreshingToken = () => {
    console.log("Refreshing token...");
  };

  useEffect(() => {
    const authHeader = getAuthorizationHeader();
    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/patients", requestOptions)
      .then(response => {
        if (!response.ok) {
          return response.json().then(errorData => {
            const errorObject = {
              httpStatus: response.status,
              apiCode: errorData.code,
              message: errorData.message || response.statusText,
              details: errorData.details,
              hint: errorData.hint
            };
            throw errorObject;
          });
        }
        return response.json();
      })
      .then(result => {
        setPacientes(result);
        setShowModalError(false);
      })
      .catch(error => {
        manager(setShowModalError, RefreshingToken, setErrorInfo, error);
      });
  }, [isAuthenticated, getAuthorizationHeader]);

  // Filtragem
  const limparFiltros = () => {
    setSearch("");
    setFiltroConvenio("Todos");
    setFiltroVIP(false);
    setFiltroAniversariante(false);
    setFiltroCidade("");
    setFiltroEstado("");
    setIdadeMinima("");
    setIdadeMaxima("");
    setDataInicial("");
    setDataFinal("");
    setPaginaAtual(1);
  };

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

    const passaConvenio = filtroConvenio === "Todos" || paciente.insurance_plan === filtroConvenio;
    const passaVIP = filtroVIP ? paciente.vip === true : true;
    const passaAniversario = filtroAniversariante ? ehAniversariante(paciente.birth_date) : true;
    const passaCidade = filtroCidade ? paciente.city?.toLowerCase().includes(filtroCidade.toLowerCase()) : true;
    const passaEstado = filtroEstado ? paciente.state?.toLowerCase().includes(filtroEstado.toLowerCase()) : true;

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

    const passaDataInicial = dataInicial ? paciente.last_appointment && new Date(paciente.last_appointment) >= new Date(dataInicial) : true;
    const passaDataFinal = dataFinal ? paciente.last_appointment && new Date(paciente.last_appointment) <= new Date(dataFinal) : true;

    return passaBusca && passaConvenio && passaVIP && passaAniversario &&
      passaCidade && passaEstado && passaIdadeMinima && passaIdadeMaxima &&
      passaDataInicial && passaDataFinal;
  }) : [];

  // Ordenação
  const aplicarOrdenacao = (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 pacientesOrdenados = aplicarOrdenacao(pacientesFiltrados);

  // Paginação
  const totalPaginas = Math.ceil(pacientesFiltrados.length / itensPorPagina);
  const indiceInicial = (paginaAtual - 1) * itensPorPagina;
  const indiceFinal = indiceInicial + itensPorPagina;
  const pacientesPaginados = pacientesOrdenados.slice(indiceInicial, indiceFinal);

  const irParaPagina = (pagina) => setPaginaAtual(pagina);
  const avancarPagina = () => paginaAtual < totalPaginas && setPaginaAtual(p => p + 1);
  const voltarPagina = () => paginaAtual > 1 && setPaginaAtual(p => p - 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, filtroConvenio, filtroVIP, filtroAniversariante, filtroCidade, filtroEstado, idadeMinima, idadeMaxima, dataInicial, dataFinal, sortKey, sortDir]);

  return (
    <>
      <div className="page-heading">
        <h3>Lista de Pacientes</h3>
      </div>
      
      <div className="page-content table-paciente-container">
        <div className="table-paciente-card">
          <div className="card-header d-flex justify-content-between align-items-center">
            <h4 className="card-title mb-0">Pacientes Cadastrados</h4>
            <Link to={'cadastro'}>
              <button className="btn btn-primary">
                <i className="bi bi-plus-circle"></i> Adicionar Paciente
              </button>
            </Link>
          </div>

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

              {/* Busca */}
              <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)}
                />
              </div>

              {/* Linha de Filtros Básicos - TUDO EM UMA LINHA SÓ */}
              <div className="d-flex flex-wrap align-items-center gap-3 mb-3">
                {/* Convênio */}
                <div className="d-flex align-items-center gap-2">
                  <label className="form-label mb-0 text-muted small">Convênio:</label>
                  <select
                    className="form-select form-select-sm compact-select"
                    value={filtroConvenio}
                    onChange={(e) => setFiltroConvenio(e.target.value)}
                    style={{ minWidth: "160px" }}
                  >
                    <option value="Todos">Todos os Convênios</option>
                    <option value="Bradesco Saúde">Bradesco Saúde</option>
                    <option value="Hapvida">Hapvida</option>
                    <option value="Unimed">Unimed</option>
                  </select>
                </div>

                {/* Status VIP */}
                <div className="d-flex align-items-center gap-2">
                  <label className="form-label mb-0 text-muted small">VIP:</label>
                  <select
                    className="form-select form-select-sm compact-select"
                    value={filtroVIP ? "vip" : "todos"}
                    onChange={(e) => setFiltroVIP(e.target.value === "vip")}
                    style={{ minWidth: "120px" }}
                  >
                    <option value="todos">Todos</option>
                    <option value="vip">Apenas VIP</option>
                  </select>
                </div>

                {/* Aniversariantes */}
                <div className="d-flex align-items-center gap-2">
                  <label className="form-label mb-0 text-muted small">Aniversário:</label>
                  <select
                    className="form-select form-select-sm compact-select"
                    value={filtroAniversariante ? "hoje" : "todos"}
                    onChange={(e) => setFiltroAniversariante(e.target.value === "hoje")}
                    style={{ minWidth: "140px" }}
                  >
                    <option value="todos">Todos</option>
                    <option value="hoje">Aniversariantes</option>
                  </select>
                </div>

                {/* Separador */}
                <div className="vr d-none d-md-block" style={{ height: "30px" }} />

                {/* Ordenação */}
                <div className="d-flex align-items-center gap-2">
                  <label className="form-label mb-0 text-muted small">Ordenar por:</label>
                  <select
                    className="form-select form-select-sm compact-select sort-select"
                    value={sortKey ? `${sortKey}-${sortDir}` : ''}
                    onChange={(e) => {
                      const v = e.target.value;
                      if (!v) { setSortKey(null); setSortDir('asc'); return; }
                      const [k, d] = v.split('-');
                      setSortKey(k);
                      setSortDir(d);
                    }}
                    style={{ minWidth: "180px" }}
                  >
                    <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>

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

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

              {/* Filtros Avançados */}
              {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 form-control-sm"
                        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 form-control-sm"
                        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 form-control-sm"
                        placeholder="Ex: 18"
                        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 form-control-sm"
                        placeholder="Ex: 65"
                        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 form-control-sm"
                        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 form-control-sm"
                        value={dataFinal}
                        onChange={(e) => setDataFinal(e.target.value)}
                      />
                    </div>
                  </div>
                </div>
              )}

              {/* Contador */}
              <div className="mt-3">
                <div className="contador-pacientes">
                  {pacientesFiltrados.length} DE {pacientes.length} PACIENTES ENCONTRADOS
                </div>
              </div>
            </div>

            {/* ===== TABELA SIMPLIFICADA ===== */}
            <div className="table-responsive mt-4">
              <table className="table table-striped table-hover table-paciente-table">
                <thead>
                  <tr>
                    <th>Nome</th>
                    <th>CPF</th>
                    <th>Convênio</th>
                    <th>Email</th>
                    <th>Ações</th>
                  </tr>
                </thead>
                <tbody>
                  {pacientesPaginados.length > 0 ? (
                    pacientesPaginados.map((paciente) => (
                      <tr key={paciente.id}>
                        <td>
                          <div className="d-flex align-items-center patient-name-container">
                            {paciente.full_name}
                            <div className="d-flex patient-badges ms-2">
                              {ehAniversariante(paciente.birth_date) && (
                                <span className="badge anniversary-badge ms-1" title="Aniversariante do dia">
                                  <i className="bi bi-gift me-1"></i>
                                </span>
                              )}
                              {paciente.vip && (
                                <span className="badge vip-badge ms-1" title="Paciente VIP">
                                  VIP
                                </span>
                              )}
                            </div>
                          </div>
                        </td>
                        <td>{paciente.cpf}</td>
                        <td>
                          <span className="badge insurance-badge">
                            {paciente.insurance_plan || '-'}
                          </span>
                        </td>
                        <td>{paciente.email || 'Não informado'}</td>
                        <td>
                          <div className="d-flex gap-2">
                            <Link to={"details"}>
                              <button 
                                className="btn btn-sm btn-view"
                                onClick={() => setDictInfo(paciente)}
                              >
                                <i className="bi bi-eye me-1"></i> Ver
                              </button>
                            </Link>
                            <button 
                              className="btn btn-sm btn-edit" 
                              onClick={() => {
                                setDictInfo(paciente);
                                navigate('edit');
                              }}
                            >
                              <i className="bi bi-pencil me-1"></i> Editar
                            </button>
                            <button
                              className="btn btn-sm btn-delete"
                              onClick={() => {
                                setSelectedPatientId(paciente.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 paciente encontrado com os filtros aplicados.</p>
                          {(search || filtroConvenio !== "Todos" || filtroVIP || 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>

              {/* ===== PAGINAÇÃO ===== */}
              {pacientesFiltrados.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, pacientesFiltrados.length)} de {pacientesFiltrados.length} pacientes
                    </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>

      {/* ===== MODAL DE EXCLUSÃO ===== */}
      {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 paciente?</p>
                <p className="text-muted mt-2">Esta ação não pode ser desfeita.</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={() => deletePatient(selectedPatientId)}
                >
                  <i className="bi bi-trash me-1"></i> Excluir
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

export default TablePaciente;