riseup-squad23/src/pages/DoctorTable.jsx

import React, { useState, useEffect } from "react";
import handleApiResponse from '../assets/utils/apiHandler';

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

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

    if (!window.confirm("Tem certeza que deseja excluir este médico?")) return;

    await fetch(
      `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
      requestOptionsDelete
    )
      .then((response) => response.text())
      // .then((mensage) => console.log(mensage))
      // .catch((error) => console.log("Deu problema", error));
      .then(handleApiResponse)
      .then((data) => {
        setPaciente(data);
        setErrorMessage("");
        setFieldErrors({});
      })
      .catch((error) => {
        setErrorMessage(error.message || "Erro desconhecido");
        setFieldErrors(error.details || {});
      });
  };

  // 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) => setMedicos(result["data"]))
      // .catch((error) =>
      //   console.log("Erro para encontrar médicos no banco de dados", error)
      // );
      .then(handleApiResponse)
      .then((data) => {
        setMedicos(result[data]);
        setErrorMessage("");
        setFieldErrors({});
      })
      .catch((error) => {
        setErrorMessage(error.message || "Erro desconhecido");
        setFieldErrors(error.details || {});
      });
  }, []);

  // 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 (
    <>
    {errorMessage && (
        <div style={{ color: "red", marginBottom: "1rem" }}>
          {errorMessage}
        </div>
    )}

    {/* Mensagens de erro específicas */}
    {Object.keys(fieldErrors).length > 0 && (
      <div style={{ color: "darkred", marginBottom: "1rem" }}>
        {Object.entries(fieldErrors).map(([campo, mensagens]) => (
          <div key={campo}>
            <strong>{campo}:</strong>
            <ul>
              {mensagens.map((msg, idx) => (
                <li key={idx}>{msg}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    )}
      <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></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">

                                <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>

                                <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={() => deleteDoctor(medico.id)}
                                >
                                  <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>
    </>
  );
}

export default TableDoctor;