import React, { useState, useEffect } from 'react';
import DoctorList from '../components/doctors/DoctorList';
import DoctorForm from '../components/doctors/DoctorForm';

function TableDoctor({ setCurrentPage, setPatientID }) {
  const [pacientes, setPacientes] = useState([]);
  const [search, setSearch] = useState("");

  // Função para excluir médicos
  const deletePatient = 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));
  };

  const onChange = (e, id) => {
    let value = e.target.value;

    if (value === "verdetalhes") {
      setCurrentPage("details-page-paciente");
    }

    if (value === "editar") {
      setCurrentPage("edit-page-paciente");
      setPatientID(id);
    }

    if (value === "excluir") {
      console.log(`Excluir ${id}`);
      deletePatient(id);
    }
  };

  var requestOptions = {
    method: "GET",
    redirect: "follow",
  };

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

  // Filtrar médicos pelo campo de pesquisa (nome, cpf, email, telefone)
  const pacientesFiltrados = pacientes.filter((paciente) =>
    `${paciente.nome} ${paciente.cpf} ${paciente.email} ${paciente.telefone}`
      .toLowerCase()
      .includes(search.toLowerCase())
  );

  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">
              {/* Header com título e botão alinhados */}
              <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">
                {/* Barra de pesquisa abaixo do título */}
                <div className="mb-3">
                  <input
                    type="text"
                    placeholder="Pesquisar médico..."
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    className="form-control"
                  />
                </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>Opções</th>
                      </tr>
                    </thead>
                    <tbody>
                      {pacientesFiltrados.length > 0 ? (
                        pacientesFiltrados.map((paciente) => (
                          <tr key={paciente.id}>
                            <td>{paciente.nome}</td>
                            <td>{paciente.cpf}</td>
                            <td>{paciente.email}</td>
                            <td>{paciente.telefone}</td>
                            <td>
                              <span
                                className={`badge ${
                                  paciente.ativo === "ativo"
                                    ? "bg-success"
                                    : "bg-danger"
                                }`}
                              >
                                {paciente.ativo}
                              </span>
                            </td>

                            <td>
                              <select onChange={(e) => onChange(e, paciente.id)}>
                                <option value="">:</option>
                                <option value="verdetalhes">Ver detalhes</option>
                                <option value="editar">Editar</option>
                                <option value="excluir">Excluir</option>
                              </select>
                            </td>
                          </tr>
                        ))
                      ) : (
                        <tr>
                          <td colSpan="6" className="text-center">
                            Nenhum paciente encontrado.
                          </td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </>
  );
}
export default TableDoctor;