import React from 'react'
import "./style.css"
import CardConsultaPaciente from './CardConsultaPaciente'
import { useNavigate } from 'react-router-dom'
import { useEffect, useState } from 'react'
import API_KEY from '../components/utils/apiKeys'
import { useAuth } from '../components/utils/AuthProvider'

const ConsultasPaciente = ({ setConsulta }) => {
    const { getAuthorizationHeader } = useAuth()

    const [showDeleteModal, setShowDeleteModal] = useState(false)
    const [selectedID, setSelectedId] = useState("")
    let authHeader = getAuthorizationHeader()

    const [consultas, setConsultas] = useState([])

    const FiltrarAgendamentos = (agendamentos, id) => {
        if (!agendamentos || !Array.isArray(agendamentos)) {
            console.error("A lista de agendamentos é inválida.");
            setConsultas([]);
            return;
        }

        const consultasFiltradas = agendamentos.filter(agendamento => {
            return agendamento.patient_id && agendamento.patient_id.toString() === id.toString();
        });

        console.log(consultasFiltradas)
        setConsultas(consultasFiltradas);
    }

    useEffect(() => {
        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?select=*", requestOptions);
                const result = await response.json();
                FiltrarAgendamentos(result, "6e7f8829-0574-42df-9290-8dbb70f75ada");
            } catch (error) {
                console.log('error', error);
            }
        };

        fetchConsultas();
    }, [authHeader]);

    const navigate = useNavigate()
    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" });

            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>

                <h2>Seus próximos atendimentos</h2>

                {consultas.map((consulta) => (
                    <CardConsultaPaciente key={consulta.id} consulta={consulta} setConsulta={setConsulta} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} />
                ))}

                {showDeleteModal &&
                    <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 Exclusão
                                </h5>
                                <button
                                    type="button"
                                    className="btn-close"
                                    onClick={() => setShowDeleteModal(false)}
                                ></button>
                            </div>
                            <div className="modal-body">
                                <p className="mb-0 fs-5">
                                    Tem certeza que deseja excluir este agendamento?
                                </p>
                            </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) }}
                                >
                                    <i className="bi bi-trash me-1"></i> Excluir
                                </button>
                            </div>
                        </div>
                    </div>}
            </div>
        </div>
    )
}

export default ConsultasPaciente;