import React, { useState, useEffect } from 'react';
import PatientList from '../components/patients/PatientList';
import PatientForm from '../components/patients/PatientForm';

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


  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; // agora retorna corretamente
  } 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;

    console.log('anexos',RespostaGetAnexos)


      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));
    
    }

  }




  // Função para excluir paciente
  const deletePatient = async (id) => {

    DeleteAnexo(id)




    const requestOptionsDelete = { method: "DELETE", redirect: "follow" };

    if (!window.confirm("Tem certeza que deseja excluir este paciente?")) 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')
      setPatientID(id);
    } 
      if(value === 'editar'){
      setCurrentPage('edit-page-paciente')
      setPatientID(id);
      }    
      if (value === "excluir") {
         deletePatient(id);
      console.log(`Excluir ${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 pacientes no banco de dados", error)
      );
  }, []);

  // Filtrar pacientes 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 Pacientes</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">Pacientes Cadastrados</h4>
                <button
                  className="btn btn-primary"
                 onClick={() => setCurrentPage("form-layout")}
                >
                  <i className="bi bi-plus-circle"></i> Adicionar Paciente
                </button>
              </div>

              <div className="card-body">
                {/* Barra de pesquisa abaixo do título */}
                <div className="mb-3">
                  <input
                    type="text"
                    placeholder="Pesquisar paciente..."
                    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 TablePaciente;