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

function TablePaciente({ setCurrentPage, setPatientID }) {
  const [pacientes, setPacientes] = useState([]);
  const [search, setSearch] = useState("");
  const [filtroConvenio, setFiltroConvenio] = useState("Todos");
  const [filtroVIP, setFiltroVIP] = useState(false);
  const [filtroAniversariante, setFiltroAniversariante] = useState(false);


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

 

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

  // Função para verificar se hoje é aniversário do paciente
  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 pacientesFiltrados = pacientes.filter((paciente) => {
    const texto = `${paciente.nome}`.toLowerCase();

    const passaBusca = texto.includes(search.toLowerCase());
    const passaVIP = filtroVIP ? paciente.vip === true : true;
    const passaConvenio =
      filtroConvenio === "Todos" || paciente.convenio === filtroConvenio;
    const passaAniversario = filtroAniversariante
      ? ehAniversariante(paciente.data_nascimento)
      : true;

    return passaBusca && passaVIP && passaConvenio && passaAniversario;
  });

  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">
              <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">
                <div className="card p-3 mb-3">
                  <h5 className="mb-3">
                    <i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
                  </h5>

                  <div
                    className="d-flex flex-nowrap align-items-center gap-2"
                    style={{ overflowX: "auto", paddingBottom: "6px" }}
                  >
                    <input
                      type="text"
                      className="form-control"
                      placeholder="Buscar por nome..."
                      value={search}
                      onChange={(e) => setSearch(e.target.value)}
                      style={{
                        minWidth: 250,
                        maxWidth: 300,
                        width: 260,
                        flex: "0 0 auto",
                      }}
                    />

                    <select
                      className="form-select"
                      value={filtroConvenio}
                      onChange={(e) => setFiltroConvenio(e.target.value)}
                      style={{
                        minWidth: 200,
                        width: 180,
                        flex: "0 0 auto",
                      }}
                    >
                      <option>Todos os Convênios</option>
                      <option>Bradesco Saúde</option>
                      <option>Hapvida</option>
                      <option>Unimed</option>
                    </select>

                    <button
                      className={`btn ${filtroVIP ? "btn-primary" : "btn-outline-primary"
                        }`}
                      onClick={() => setFiltroVIP(!filtroVIP)}
                      style={{ flex: "0 0 auto", whiteSpace: "nowrap" }}
                    >
                      <i className="bi bi-award me-1"></i> VIP
                    </button>

                    <button
                      className={`btn ${filtroAniversariante
                        ? "btn-primary"
                        : "btn-outline-primary"
                        }`}
                      onClick={() =>
                        setFiltroAniversariante(!filtroAniversariante)
                      }
                      style={{ flex: "0 0 auto", whiteSpace: "nowrap" }}
                    >
                      <i className="bi bi-calendar me-1"></i> Aniversariantes
                    </button>
                  </div>
                </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>
                      </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>
                              <div className="d-flex gap-2">

                                <button
                                  className="btn btn-sm"
                                  style={{
                                    backgroundColor: "#E6F2FF",
                                    color: "#004085",
                                  }}
                                  onClick={() => {
                                    setCurrentPage("details-page-paciente");
                                    setPatientID(paciente.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(paciente.id);
                                  }}
                                >
                                  <i className="bi bi-pencil me-1"></i> Editar
                                </button>

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

export default TablePaciente;