import React, { useState, useEffect } from "react";

function TableDoctor({ setCurrentPage, setPatientID }) {
  const [medicos, setMedicos] = useState([]);
  const [search, setSearch] = useState("");
  const [filtroAniversariante, setFiltroAniversariante] = useState(false);

  //  estados do modal
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [selectedDoctorId, setSelectedDoctorId] = useState(null);

  // Função para excluir médicos
  const deleteDoctor = async (id) => {
    const requestOptionsDelete = { method: "DELETE", redirect: "follow" };

    try {
      await fetch(
        `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
        requestOptionsDelete
      );
      setMedicos((prev) => prev.filter((m) => m.id !== id));
    } catch (error) {
      console.log("Deu problema", error);
    } finally {
      setShowDeleteModal(false);
    }
  };

  // Função para verificar se hoje é aniversário
  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()
    );
  };

  // Buscar médicos da API
  useEffect(() => {
    fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes")
      .then((response) => response.json())
      .then((result) => console.log('nada'))
      .catch((error) =>
        console.log("Erro para encontrar médicos no banco de dados", error)
      );
  }, []);

  // Filtrar médicos pelo campo de pesquisa e aniversariantes
  const medicosFiltrados = medicos.filter(
    (medico) =>
      `${medico.nome} ${medico.cpf} ${medico.email} ${medico.telefone}`
        .toLowerCase()
        .includes(search.toLowerCase()) &&
      (filtroAniversariante ? ehAniversariante(medico.data_nascimento) : true)
  );

  return (
    <>
      <div className="page-heading">
        <h3>Lista de Médicos</h3>
      </div>
      <div className="page-content">
        <section className="row">
          <div className="col-12">
            <div className="card">
              <div className="card-header d-flex justify-content-between align-items-center">
                <h4 className="card-title mb-0">Médicos Cadastrados</h4>
                <button
                  className="btn btn-primary"
                  onClick={() => setCurrentPage("form-layout")}
                >
                  <i className="bi bi-plus-circle"></i> Adicionar Médico
                </button>
              </div>

              <div className="card-body">
                <div className="d-flex gap-2 mb-3">
                  <input
                    type="text"
                    placeholder="Pesquisar médico..."
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    className="form-control"
                    style={{ maxWidth: "300px" }}
                  />

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

                <div className="table-responsive">
                  <table className="table table-striped table-hover">
                    <thead>
                      <tr>
                        <th>Nome</th>
                        <th>CPF</th>
                        <th>Email</th>
                        <th>Telefone</th>
                        <th></th>
                        <th>Ações</th>
                      </tr>
                    </thead>
                    <tbody>
                      {medicosFiltrados.length > 0 ? (
                        medicosFiltrados.map((medico) => (
                          <tr key={medico.id}>
                            <td>{medico.nome}</td>
                            <td>{medico.cpf}</td>
                            <td>{medico.email}</td>
                            <td>{medico.telefone}</td>
                            <td>
                              <span
                                className={`badge ${
                                  medico.ativo === "ativo"
                                    ? "bg-success"
                                    : "bg-danger"
                                }`}
                              >
                                {medico.ativo}
                              </span>
                            </td>

                            <td>
                              <div className="d-flex gap-2">
                                {/* Ver Detalhes */}
                                <button
                                  className="btn btn-sm"
                                  style={{
                                    backgroundColor: "#E6F2FF",
                                    color: "#004085",
                                  }}
                                  onClick={() => {
                                    setCurrentPage("details-page-paciente");
                                    setPatientID(medico.id);
                                  }}
                                >
                                  <i className="bi bi-eye me-1"></i> Ver
                                  Detalhes
                                </button>

                                {/*  Editar */}
                                <button
                                  className="btn btn-sm"
                                  style={{
                                    backgroundColor: "#FFF3CD",
                                    color: "#856404",
                                  }}
                                  onClick={() => {
                                    setCurrentPage("edit-page-paciente");
                                    setPatientID(medico.id);
                                  }}
                                >
                                  <i className="bi bi-pencil me-1"></i> Editar
                                </button>

                                
                                <button
                                  className="btn btn-sm"
                                  style={{
                                    backgroundColor: "#F8D7DA",
                                    color: "#721C24",
                                  }}
                                  onClick={() => {
                                    setSelectedDoctorId(medico.id);
                                    setShowDeleteModal(true);
                                  }}
                                >
                                  <i className="bi bi-trash me-1"></i> Excluir
                                </button>
                              </div>
                            </td>
                          </tr>
                        ))
                      ) : (
                        <tr>
                          <td colSpan="6" className="text-center">
                            Nenhum médico encontrado.
                          </td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>

      {/*  Modal de confirmação de exclusão */}
      {showDeleteModal && (
        <div
          className="modal fade show"
          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: '#b91c1c' }}>
                <h5 className="modal-title text-dark"> Confirmação de Exclusão</h5>
                <button
                  type="button"
                  className="btn-close"
                  onClick={() => setShowDeleteModal(false)}
                ></button>
              </div>
              <div className="modal-body">
                <p className="mb-0 fs-5" style={{ color: '#111' }}>
                  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;