import React from 'react'
import "./style.css"
import CardConsultaPaciente from './CardConsultaPaciente'
import { useNavigate } from 'react-router-dom'
import { useEffect, useState, useMemo } from 'react'
import API_KEY from '../components/utils/apiKeys'
import { useAuth } from '../components/utils/AuthProvider'
import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient'
import { GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor'

import { UserInfos } from '../components/utils/Functions-Endpoints/General'
import dayjs from 'dayjs'
import TabelaAgendamentoDia from "../components/AgendarConsulta/TabelaAgendamentoDia"

const ConsultasPaciente = ({ setDictInfo }) => {
    const { getAuthorizationHeader } = useAuth()
    const [agendamentosOrganizados, setAgendamentosOrganizados] = useState({})
    const [listaTodasConsultas, setListaTodasConsultas] = useState([])
    const [patientID, setPatientID] = useState("")
    const [showDeleteModal, setShowDeleteModal] = useState(false)
    const [selectedID, setSelectedId] = useState("")
    let authHeader = getAuthorizationHeader()

    const [motivoCancelamento, setMotivoCancelamento] = useState("")

    const [consultas, setConsultas] = useState([])
   
    const [consultasOrganizadas, setConsultasOrganizadas] = useState({})
    const [filaDeEspera, setFilaDeEspera] = useState([])
    const [viewFila, setViewFila] = useState(false)

     const [listaConsultasID, setListaConsultaID] = useState([])
    const [coresConsultas,setCoresConsultas] = useState([])

    const [showConfirmModal, setShowConfirmModal] = useState(false)


    useEffect(() => {

        console.log(listaConsultasID, coresConsultas, "ojwhdofigewfey7few0fr74r")

    }, [coresConsultas, listaConsultasID])

    useMemo(() => {
        let conjuntoConsultas = {}
        let filaEspera = []

        const fetchInfosConsultas = async (consulta) => {
            //console.log(doctor, "PACIENTE TRAZIDO PELO ")

           //let consultaMelhorada = {...consulta, paciente_nome:paciente[0].full_name, medico_nome:doctor[0].full_name } 

            //console.log(consultaMelhorada,"ID DO MEDICO")

            for(let i = 0; listaTodasConsultas.length > i; i++){

            let consulta = listaTodasConsultas[i]

              let doctor = await GetDoctorByID(consulta.doctor_id, authHeader)
            let paciente = await GetPatientByID(consulta.patient_id, authHeader)

            consulta = {...consulta, medico_nome:doctor[0]?.full_name, paciente_nome:paciente[0]?.full_name}

        


            if(consulta.status === "requested"){
                
                filaEspera.push(consulta)
            
            }else{
                
                let data = consulta.scheduled_at.split("T")[0]
                let chavesConsultas = Object.keys(conjuntoConsultas)
                  
               if(chavesConsultas.includes(data)){
                let lista = conjuntoConsultas[data]
                
                lista.push(consulta)

                conjuntoConsultas = {...conjuntoConsultas, [data]:lista}
               }else{
                conjuntoConsultas = {...conjuntoConsultas, [data]:[consulta]   }
               }
            }
        }
    

        setConsultasOrganizadas(conjuntoConsultas)
        setFilaDeEspera(filaEspera)
        
        }

        console.log("so muda")
        if(!listaTodasConsultas.length) return     

        console.log(filaEspera, "fila de espera")
        fetchInfosConsultas();
    
    }, [listaTodasConsultas])
   

    useEffect(() => {
        let userInfos = UserInfos(authHeader)

        const fetchConsultas = async () => {
            try {
                const myHeaders = new Headers();
                myHeaders.append("Authorization", authHeader);
                myHeaders.append("apikey", API_KEY)

                const requestOptions = {
                    method: 'GET',
                    headers: myHeaders,
                    redirect: 'follow'
                };

                const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?patient_id=eq.${"6e7f8829-0574-42df-9290-8dbb70f75ada"}`, requestOptions);
                const result = await response.json();
                setListaTodasConsultas(result);
            } catch (error) {
                console.log('error', error);
            }
        };

        fetchConsultas();
    }, []);

    const navigate = useNavigate()

    
const confirmConsulta = (selectedPatientId) => {
     var myHeaders = new Headers();
            myHeaders.append("Content-Type", "application/json");
            myHeaders.append('apikey', API_KEY)
            myHeaders.append("authorization", authHeader)
    
    
            var raw = JSON.stringify({ "status":"confirmed"      
            });
    
    
            var requestOptions = {
            method: 'PATCH',
            headers: myHeaders,
            body: raw,
            redirect: 'follow'
            };
    
            fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedPatientId}`, requestOptions)
            .then(response => {if(response.status !== 200)(console.log(response))})
            .then(result => console.log(result))
            .catch(error => console.log('error', error));

}

    const deleteConsulta = async (ID) => {
        try {
            const myHeaders = new Headers();
            myHeaders.append("Content-Type", "application/json");
            myHeaders.append('apikey', API_KEY);
            myHeaders.append("authorization", authHeader);

            const raw = JSON.stringify({ "status": "cancelled", "cancellation_reason":motivoCancelamento });

            const requestOptions = {
                method: 'PATCH',
                headers: myHeaders,
                body: raw,
                redirect: 'follow'
            };

            const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${ID}`, requestOptions);

            if (!response.ok) {
                const errorText = await response.text();
                throw new Error(`Falha ao cancelar consulta: ${response.status} - ${errorText}`);
            }
            setConsultas(prevConsultas => prevConsultas.filter(consulta => consulta.id !== ID));

            console.log("Consulta cancelada com sucesso!");
            alert("Consulta cancelada com sucesso!");

        } catch (error) {
            console.error('Erro ao cancelar a consulta:', error);
            alert('Erro ao cancelar a consulta. Veja o console.');
        }
    }

    return (
        <div>
            <h1> Gerencie suas consultas</h1>

            <div className='form-container'>
                <button className="btn btn-primary" onClick={() => { navigate("criar") }}>
                    <i className="bi bi-plus-circle"></i> Adicionar Consulta
                </button>
                {!viewFila ?
                <button onClick={() => setViewFila(true)}> Fila de espera</button>
                :
                <button onClick={() => setViewFila(false)}>Consultas </button>
                }

                <h2>Seus próximos atendimentos</h2>
                {viewFila ? 
           <div className="fila-container">
            <div className="fila-header">
            <input
                type="text"
                placeholder="Pesquisar na fila de espera..."
                className="busca-fila-espera"
                //value={searchTerm}
                //onChange={(e) => setSearchTerm(e.target.value)}
            />
            <h2 className="fila-titulo">Fila de Espera</h2>
            </div>
            <table className="fila-tabela">
            <thead>
                <tr>
                <th>Nome do Paciente</th> {/* Ajustado o cabeçalho */}
                <th>CPF</th> {/* Ajustado o cabeçalho */}
                <th>Médico Solicitado</th> {/* Ajustado o cabeçalho */}
                <th>Data da Solicitação</th> {/* Ajustado o cabeçalho */}
                <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                {filaDeEspera.map((item, index) => (
                <tr key={index}>
                    <td> <p>{item?.paciente_nome} </p>  </td>
                    <td><p>{item?.paciente_cpf} </p></td>
                    <td><p>{item?.medico_nome} </p></td>
                    <td>{dayjs(item?.created_at).format('DD/MM/YYYY HH:mm')}</td> 
                    <td> <div className="d-flex gap-2">
                    
                        <button className="btn btn-sm btn-edit"
                        onClick={() => {
                        console.log(item, 'item')
                        navigate(`${2}/edit`) 
                       
                        }}
                        >
                        <i className="bi bi-pencil me-1"></i> Editar
                        </button>
                    

                    <button
                        className="btn btn-sm btn-delete"
                        onClick={() => {
                        setSelectedId(item.id)
                        setShowDeleteModal(true);
                        }}
                    >
                        <i className="bi bi-trash me-1"></i> Excluir
                    </button>
                    </div></td>
                </tr>
                ))}
            </tbody>
            </table>
        </div>   
            :

               <TabelaAgendamentoDia agendamentos={consultasOrganizadas} listaConsultasID={[]} setDictInfo={setDictInfo} 
               selectedID={selectedID} setSelectedId={setSelectedId} setShowDeleteModal={setShowDeleteModal}
               coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID}
               listaConsultasID={listaConsultasID} setShowConfirmModal={setShowConfirmModal}

               />
            } 
             
                 {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 bg-danger bg-opacity-25">
                <h5 className="modal-title text-danger">
                  Confirmação de Cancelamento
                </h5>
                <button
                  type="button"
                  className="btn-close"
                  onClick={() => setShowDeleteModal(false)}
                ></button>
              </div>

              <div className="modal-body">
                <p className="mb-0 fs-5">
                 Qual o motivo do cancelamento?               
                </p>
                <div className='campo-de-input'> 
                  
                  <textarea  className='input-modal' value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)} />
                </div>
              </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={() => {
                    
                    deleteConsulta(selectedID)
                    setShowDeleteModal(false)
                  let lista_cores = coresConsultas
        
                  let lista = listaConsultasID

                lista.push(selectedID)
                lista_cores.push("cancelled")

                setCoresConsultas(lista_cores)

                setListaConsultaID(lista)

                console.log("lista", lista)
                  
                  }}  
                  
                >
                  <i className="bi bi-trash me-1"></i> Excluir
                </button>
              </div>
            </div>
          </div>
        </div>)}

        {showConfirmModal &&(
        <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 bg-success">
                <h5 className="modal-title">
                  Confirmação de edição
                </h5>
               
              </div>

              <div className="modal-body">
                <p className="mb-0 fs-5">
                  Tem certeza que deseja retirar o cancelamento ? 
                </p>
              </div>

              <div className="modal-footer">
              
                <button
                  type="button"
                  className="btn btn-primary"
                  onClick={() => {setShowConfirmModal(false); setSelectedId("")}}
                >
                  Cancelar
                </button>

              
                <button
                  type="button"
                  className="btn btn-success"
                  onClick={() => {confirmConsulta(selectedID);setShowConfirmModal(false)
                         let lista_cores = coresConsultas
                
                  let lista = listaConsultasID

                lista.push(selectedID)
                lista_cores.push("confirmed")

                setCoresConsultas(lista_cores)

                setListaConsultaID(lista)
                  }}  
                  
                >
                  <i className="bi bi-trash me-1"></i> Confirmar
                </button>
              </div>
            </div>
          </div>
        </div>)
        
        
        
        }
            </div>

        </div>
    )
}

export default ConsultasPaciente;