import React, { useState, useMemo, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import API_KEY from '../components/utils/apiKeys.js';
import AgendamentoCadastroManager from './AgendamentoCadastroManager.jsx';
import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient.js';
import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia';
import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
import { GetAllDoctors, GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor.js';
import { useAuth } from '../components/utils/AuthProvider.js';
import dayjs from 'dayjs';
import 'dayjs/locale/pt-br';
import isBetween from 'dayjs/plugin/isBetween';
import localeData from 'dayjs/plugin/localeData';
import { Search, ChevronLeft, ChevronRight, Edit, Trash2 } from 'lucide-react';
import CalendarComponent from '../components/AgendarConsulta/CalendarComponent.jsx';
import "./style/Agendamento.css";
import './style/FilaEspera.css';
import Spinner from '../components/Spinner.jsx';

dayjs.locale('pt-br');
dayjs.extend(isBetween);
dayjs.extend(localeData);

const Agendamento = ({ setDictInfo }) => {
  const navigate = useNavigate();
  const [listaTodosAgendamentos, setListaTodosAgendamentos] = useState([]);
  const [selectedID, setSelectedId] = useState('0');
  const [filaEsperaData, setFilaEsperaData] = useState([]);
  const [FiladeEspera, setFiladeEspera] = useState(false);
  const [PageNovaConsulta, setPageConsulta] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const { getAuthorizationHeader } = useAuth();
  const [DictAgendamentosOrganizados, setAgendamentosOrganizados] = useState({});
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [ListaDeMedicos, setListaDeMedicos] = useState([]);
  const [FiltredTodosMedicos, setFiltredTodosMedicos] = useState([]);
  const [searchTermDoctor, setSearchTermDoctor] = useState('');
  const [MedicoFiltrado, setMedicoFiltrado] = useState({ id: "vazio" });
  const [cacheAgendamentos, setCacheAgendamentos] = useState([]);
  const [appointmentToEdit, setAppointmentToEdit] = useState(null);
  const [showConfirmModal, setShowConfirmModal] = useState(false);
  const [motivoCancelamento, setMotivoCancelamento] = useState("");
  const [showSpinner, setShowSpinner] = useState(true);
  const [waitlistSearch, setWaitlistSearch] = useState('');
  const [waitSortKey, setWaitSortKey] = useState(null);
  const [waitSortDir, setWaitSortDir] = useState('asc');
  const [waitPage, setWaitPage] = useState(1);
  const [waitPerPage, setWaitPerPage] = useState(10);
  const authHeader = getAuthorizationHeader();
  const cacheMedicos = useMemo(() => ({}), []);
  const cachePacientes = useMemo(() => ({}), []);
  const [currentDate, setCurrentDate] = useState(dayjs());
  const [selectedDay, setSelectedDay] = useState(dayjs());

  const [editingAppointmentId, setEditingAppointmentId] = useState(null);

  const [quickJump, setQuickJump] = useState({
    month: currentDate.month(),
    year: currentDate.year()
  });

  const fetchAppointments = async () => {
    const myHeaders = new Headers();
    myHeaders.append("Authorization", authHeader);
    myHeaders.append("apikey", API_KEY);
    const requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
    try {
      const res = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select=*", requestOptions);
      const data = await res.json();
      setListaTodosAgendamentos(data);
    } catch (err) {
      console.error('Erro ao buscar agendamentos', err);
    }
  };

  const updateAppointmentStatus = async (id, updates) => {
    const myHeaders = new Headers();
    myHeaders.append("Authorization", authHeader);
    myHeaders.append("apikey", API_KEY);
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("Prefer", "return=representation");
    const requestOptions = { method: 'PATCH', headers: myHeaders, body: JSON.stringify(updates) };

    try {
      const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${id}`, requestOptions);
      if (response.ok) {
        await fetchAppointments();
        return true;
      } else {
        console.error('Erro ao atualizar agendamento:', await response.text());
        return false;
      }
    } catch (error) {
      console.error('Erro de rede/servidor:', error);
      return false;
    }
  };

  const deleteConsulta = async (id) => {
    setShowSpinner(true);
    const success = await updateAppointmentStatus(id, {
      status: "cancelled",
      cancellation_reason: motivoCancelamento,
      updated_at: new Date().toISOString()
    });
    setShowSpinner(false);
    if (success) {
      setShowDeleteModal(false);
      setMotivoCancelamento("");
      setSelectedId('0');
    } else {
      alert("Falha ao cancelar a consulta.");
    }
  };

  const confirmConsulta = async (id) => {
    setShowSpinner(true);
    const success = await updateAppointmentStatus(id, {
      status: "agendado",
      cancellation_reason: null,
      updated_at: new Date().toISOString()
    });
    setShowSpinner(false);
    if (success) {
      setShowConfirmModal(false);
      setSelectedId('0');
    } else {
      alert("Falha ao reverter o cancelamento.");
    }
  };

  const handleQuickJumpChange = (type, value) => {
    setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
  };

  useEffect(() => {
    setQuickJump({
      month: currentDate.month(),
      year: currentDate.year()
    });
  }, [currentDate]);

  const applyQuickJump = () => {
    let newDate = dayjs().year(quickJump.year).month(quickJump.month).date(1);
    setCurrentDate(newDate);
    setSelectedDay(newDate);
  };

  useEffect(() => {
    if (!listaTodosAgendamentos.length) { setShowSpinner(false); return; }
    setShowSpinner(true);
    const fetchDados = async () => {
      const newDict = {};
      const newFila = [];
      for (const agendamento of listaTodosAgendamentos) {
        if (!agendamento.doctor_id || !agendamento.patient_id) continue;
        if (!cacheMedicos[agendamento.doctor_id]) {
          cacheMedicos[agendamento.doctor_id] = (await GetDoctorByID(agendamento.doctor_id, authHeader))[0];
        }
        if (!cachePacientes[agendamento.patient_id]) {
          cachePacientes[agendamento.patient_id] = (await GetPatientByID(agendamento.patient_id, authHeader))[0];
        }
        const medico = cacheMedicos[agendamento.doctor_id];
        const paciente = cachePacientes[agendamento.patient_id];

        const agendamentoMelhorado = {
          ...agendamento,
          medico_nome: medico?.full_name,
          paciente_nome: paciente?.full_name,
          paciente_cpf: paciente?.cpf
        };

<<<<<<< HEAD
        if (agendamento.status === "requested") {
          newFila.push({ agendamento: agendamentoMelhorado, Infos: agendamentoMelhorado });
        } else {
          const DiaAgendamento = dayjs(agendamento.scheduled_at).format("YYYY-MM-DD");
          if (newDict[DiaAgendamento]) {
            newDict[DiaAgendamento].push(agendamentoMelhorado);
          } else {
            newDict[DiaAgendamento] = [agendamentoMelhorado];
          }
        }
      }
      for (const key in newDict) {
        newDict[key].sort((a, b) => a.scheduled_at.localeCompare(b.scheduled_at));
      }
      setAgendamentosOrganizados(newDict);
      setFilaEsperaData(newFila);
      setShowSpinner(false);
=======

    useEffect(() => {
        fetchAppointments();
        GetAllDoctors(authHeader).then(docs => setListaDeMedicos(docs.map(d => ({ nomeMedico: d.full_name, idMedico: d.id }))));
    }, [authHeader]);


    const handleSearchMedicos = (term) => {
        setSearchTermDoctor(term);
        if (term.trim() === '') {
            setFiltredTodosMedicos([]);
            setMedicoFiltrado({ id: "vazio" });
            return;
        }
        const filtered = ListaDeMedicos.filter(medico =>
            medico.nomeMedico.toLowerCase().includes(term.toLowerCase())
        );
        setFiltredTodosMedicos(filtered);
    };


    const filaEsperaFiltrada = useMemo(() => {
        if (!waitlistSearch.trim()) return filaEsperaData;
        const term = waitlistSearch.toLowerCase();
        return filaEsperaData.filter(item => (item?.Infos?.paciente_nome?.toLowerCase() || '').includes(term) || (item?.Infos?.paciente_cpf?.toLowerCase() || '').includes(term) || (item?.Infos?.nome_medico?.toLowerCase() || '').includes(term));
    }, [waitlistSearch, filaEsperaData]);
    
    const applySortingWaitlist = (arr) => {
        if (!Array.isArray(arr) || !waitSortKey) return arr;
        const copy = [...arr];
        if (waitSortKey === 'paciente') { copy.sort((a, b) => (a?.Infos?.paciente_nome || '').localeCompare((b?.Infos?.paciente_nome || ''))); }
        else if (waitSortKey === 'medico') { copy.sort((a, b) => (a?.Infos?.nome_medico || '').localeCompare((b?.Infos?.nome_medico || ''))); }
        else if (waitSortKey === 'data') { copy.sort((a, b) => new Date(a?.agendamento?.scheduled_at || 0) - new Date(b?.agendamento?.scheduled_at || 0)); }
        if (waitSortDir === 'desc') copy.reverse();
        return copy;
>>>>>>> alteracoes-modais-tabela
    };
    fetchDados();
  }, [listaTodosAgendamentos, authHeader, cacheMedicos, cachePacientes]);

<<<<<<< HEAD
  useEffect(() => {
    fetchAppointments();
    GetAllDoctors(authHeader).then(docs =>
      setListaDeMedicos(docs.map(d => ({ nomeMedico: d.full_name, idMedico: d.id })))
=======

    const generateDateGrid = () => {
        const grid = []; const startOfMonth = currentDate.startOf('month');
        let currentDay = startOfMonth.subtract(startOfMonth.day(), 'day');
        for (let i = 0; i < 42; i++) { grid.push(currentDay); currentDay = currentDay.add(1, 'day'); }
        return grid;
    };
    const dateGrid = useMemo(() => generateDateGrid(), [currentDate]);
    const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
    const handleDateClick = (day) => setSelectedDay(day);


    const DeleteModal = () => (
        <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }} tabIndex="-1">
            <div className="modal-dialog modal-dialog-centered">
                <div className="modal-content">
                    <div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
                        <h5 className="modal-title">Confirmação de Cancelamento</h5>
                    </div>
                    <div className="modal-body">
                        <p>Qual o motivo do cancelamento?</p>
                        <textarea className="form-control" rows="3" value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)}></textarea>
                    </div>
                    <div className="modal-footer justify-content-center">
                        <button type="button" className="btn btn-secondary" onClick={() => { setShowDeleteModal(false); setMotivoCancelamento(""); }}>Cancelar</button>
                        <button type="button" className="btn btn-danger" onClick={() => deleteConsulta(selectedID)}>Excluir</button>
                    </div>
                </div>
            </div>
        </div>
>>>>>>> alteracoes-modais-tabela
    );
  }, [authHeader]);

  const handleSearchMedicos = (term) => { };

  const filaEsperaFiltrada = useMemo(() => {
    if (!waitlistSearch.trim()) return filaEsperaData;
    const term = waitlistSearch.toLowerCase();
    return filaEsperaData.filter(item =>
      (item?.Infos?.paciente_nome?.toLowerCase() || '').includes(term) ||
      (item?.Infos?.paciente_cpf?.toLowerCase() || '').includes(term) ||
      (item?.Infos?.nome_medico?.toLowerCase() || '').includes(term)
    );
  }, [waitlistSearch, filaEsperaData]);

  const applySortingWaitlist = (arr) => {
    if (!Array.isArray(arr) || !waitSortKey) return arr;
    const copy = [...arr];
    if (waitSortKey === 'paciente') {
      copy.sort((a, b) => (a?.Infos?.paciente_nome || '').localeCompare((b?.Infos?.paciente_nome || '')));
    } else if (waitSortKey === 'medico') {
      copy.sort((a, b) => (a?.Infos?.nome_medico || '').localeCompare((b?.Infos?.nome_medico || '')));
    } else if (waitSortKey === 'data') {
      copy.sort((a, b) =>
        new Date(a?.agendamento?.scheduled_at || 0) - new Date(b?.agendamento?.scheduled_at || 0)
      );
    }
    if (waitSortDir === 'desc') copy.reverse();
    return copy;
  };

  const filaEsperaOrdenada = applySortingWaitlist(filaEsperaFiltrada);
  const waitTotalPages = Math.ceil(filaEsperaOrdenada.length / waitPerPage) || 1;
  const waitIndiceInicial = (waitPage - 1) * waitPerPage;
  const waitIndiceFinal = waitIndiceInicial + waitPerPage;
  const filaEsperaPaginada = filaEsperaOrdenada.slice(waitIndiceInicial, waitIndiceFinal);

<<<<<<< HEAD
  const gerarNumerosWaitPages = () => {
    const paginas = [];
    const paginasParaMostrar = 5;
    let inicio = Math.max(1, waitPage - Math.floor(paginasParaMostrar / 2));
    let fim = Math.min(waitTotalPages, inicio + paginasParaMostrar - 1);
    inicio = Math.max(1, fim - paginasParaMostrar + 1);
    for (let i = inicio; i <= fim; i++) { paginas.push(i); }
    return paginas;
  };

  useEffect(() => { setWaitPage(1); }, [waitlistSearch, waitSortKey, waitSortDir]);

  const generateDateGrid = () => {
    const grid = [];
    const startOfMonth = currentDate.startOf('month');
    let currentDay = startOfMonth.subtract(startOfMonth.day(), 'day');
    for (let i = 0; i < 42; i++) {
      grid.push(currentDay);
      currentDay = currentDay.add(1, 'day');
    }
    return grid;
  };

  const dateGrid = useMemo(() => generateDateGrid(), [currentDate]);
  const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
  const handleDateClick = (day) => setSelectedDay(day);

  const DeleteModal = () => (
    <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }} tabIndex="-1">
      <div className="modal-dialog modal-dialog-centered">
        <div className="modal-content">
          <div className="modal-header" style={{ backgroundColor: '#f8d7da', color: '#721c24' }}>
            <h5 className="modal-title">Confirmação de Cancelamento</h5>
            <button type="button" className="btn-close" onClick={() => setShowDeleteModal(false)}></button>
          </div>
          <div className="modal-body">
            <p>Qual o motivo do cancelamento?</p>
            <textarea
              className="form-control"
              rows="3"
              value={motivoCancelamento}
              onChange={(e) => setMotivoCancelamento(e.target.value)}
            ></textarea>
          </div>
          <div className="modal-footer justify-content-center">
            <button
              type="button"
              className="btn btn-secondary"
              onClick={() => { setShowDeleteModal(false); setMotivoCancelamento(""); }}
            >
              Cancelar
            </button>
            <button
              type="button"
              className="btn btn-danger"
              onClick={() => deleteConsulta(selectedID)}
            >
              <Trash2 size={16} className="me-1" /> Excluir
            </button>
          </div>
        </div>
      </div>
    </div>
  );

  const ConfirmEditModal = () => (
    <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }} tabIndex="-1">
      <div className="modal-dialog modal-dialog-centered">
        <div className="modal-content">
          <div className="modal-header" style={{ backgroundColor: '#d4edda', color: '#155724' }}>
            <h5 className="modal-title">Confirmação de edição</h5>
            <button type="button" className="btn-close" onClick={() => setShowConfirmModal(false)}></button>
          </div>
          <div className="modal-body">
            <p>Tem certeza que deseja retirar o cancelamento?</p>
            <small className="text-muted">Isso reverterá o status do agendamento para Agendado.</small>
          </div>
          <div className="modal-footer justify-content-center">
            <button
              type="button"
              className="btn btn-secondary"
              onClick={() => setShowConfirmModal(false)}
            >
              Cancelar
            </button>
            <button
              type="button"
              className="btn btn-success"
              onClick={() => confirmConsulta(selectedID)}
            >
              <Trash2 size={16} className="me-1" style={{ transform: 'rotate(45deg)' }} /> Confirmar
            </button>
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <div>
      <h1>Agendar nova consulta</h1>

      {!PageNovaConsulta ? (
        <div className='atendimento-eprocura'>
          <div className='unidade-selecionarprofissional'>
            <div className='busca-atendimento-container'>
              <div className='input-e-dropdown-wrapper'>
                <div className='busca-atendimento'>
                  <div className='mb-5'>
                    <input
                      type="text"
                      placeholder="Filtrar atendimento do medico..."
                      value={searchTermDoctor}
                      onChange={(e) => handleSearchMedicos(e.target.value)}
                    />
                  </div>
                </div>
                {searchTermDoctor && FiltredTodosMedicos.length > 0 && (
                  <div className='dropdown-medicos'>
                    {FiltredTodosMedicos.map((medico) => (
                      <div
                        key={medico.idMedico}
                        className='dropdown-item'
                        onClick={() => {
                          setSearchTermDoctor(medico.nomeMedico);
                          setFiltredTodosMedicos([]);
                          setMedicoFiltrado(medico);
                        }}
                      >
                        <p>{medico.nomeMedico}</p>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* ABA + BOTÕES NA MESMA BARRA */}
          <div className='container-btns-agenda-fila_esepera'>
            <div className="tabs-agenda-fila">
              <button
                className={`btn-agenda ${!FiladeEspera ? "opc-agenda-ativo" : ""}`}
                onClick={() => { setFiladeEspera(false); setSearchTerm(''); }}
              >
                Agenda
              </button>
              <button
                className={`btn-fila-espera ${FiladeEspera ? "opc-filaespera-ativo" : ""}`}
                onClick={() => { setFiladeEspera(true); setSearchTerm(''); }}
              >
                Fila de espera
              </button>
            </div>

            <div className="btns-gerenciamento-e-consulta">
              <button
                className="btn btn-primary"
                onClick={() => {
                  setPageConsulta(true);
                  setEditingAppointmentId(null);
                  setAppointmentToEdit(null);
                }}
              >
                <i className="bi bi-plus-circle"></i> Adicionar Consulta
              </button>
              <button
                className="manage-button btn"
                onClick={() => navigate("/secretaria/excecoes-disponibilidade")}
              >
                <i className="bi bi-gear-fill me-1"></i> Gerenciar Exceções
              </button>
              <button
                className='manage-button btn'
                onClick={() => navigate('/secretaria/disponibilidade')}
              >
                <i className="bi bi-gear-fill me-1"></i> Mudar Disponibilidade
              </button>
            </div>
          </div>

          <section className='calendario-ou-filaespera'>
            {FiladeEspera === false ? (
              <div className="calendar-wrapper">
                <div className="calendar-info-panel">
                  <div className="info-date-display">
                    <span>{selectedDay.format('MMM')}</span>
                    <strong>{selectedDay.format('DD')}</strong>
                  </div>
                  <div className="info-details">
                    <h3>{selectedDay.format('dddd')}</h3>
                    <p>{selectedDay.format('D [de] MMMM [de] YYYY')}</p>
                  </div>
                  <div className="appointments-list">
                    <h4>Consultas para {selectedDay.format('DD/MM')}</h4>
                    {showSpinner ? (
                      <Spinner />
                    ) : (DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]?.length > 0) ? (
                      DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')].map(app => (
                        <div key={app.id} className="appointment-item" data-status={app.status}>
                          <div className="item-time">
                            {dayjs(app.scheduled_at).format('HH:mm')}
                          </div>
                          <div className="item-details">
                            <span>{app.paciente_nome}</span>
                            <small>Dr(a). {app.medico_nome}</small>
                          </div>
                          <div className="appointment-actions">
                            {app.status === 'cancelled' ? (
                              <button
                                className="btn-action btn-edit"
                                onClick={() => { setSelectedId(app.id); setShowConfirmModal(true); }}
                              >
                                <Edit size={16} />
                              </button>
                            ) : (
                              <>
                                <button
                                  className="btn-action btn-edit"
                                  onClick={() => {
                                    setAppointmentToEdit(app);
                                    setEditingAppointmentId(app.id);
                                    setPageConsulta(true);
                                  }}
                                >
                                  <Edit size={16} />
                                </button>
                                <button
                                  className="btn-action btn-delete"
                                  onClick={() => { setSelectedId(app.id); setShowDeleteModal(true); }}
                                >
                                  <Trash2 size={16} />
                                </button>
                              </>
                            )}
                          </div>
                        </div>
                      ))
                    ) : (
                      <div className="no-appointments-info">
                        <p>Nenhuma consulta agendada.</p>
                      </div>
                    )}
                  </div>
=======
    return (
        <div>
            <h1>Agendar nova consulta</h1>
            <div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>

                <button className="btn btn-primary" onClick={() => {
                    setPageConsulta(true);
                    setEditingAppointmentId(null);
                    setAppointmentToEdit(null); 
                }}><i className="bi bi-plus-circle"></i> Adicionar Consulta</button>
                <button className="manage-button btn" onClick={() => navigate("/secretaria/excecoes-disponibilidade")}><i className="bi bi-gear-fill me-1"></i> Gerenciar Exceções</button>
                <button className='manage-button btn' onClick={() => navigate('/secretaria/disponibilidade')}><i className="bi bi-gear-fill me-1"></i> Mudar Disponibilidade</button>
            </div>
            {!PageNovaConsulta ? (
                <div className='atendimento-eprocura'>
                    <div className='container-btns-agenda-fila_esepera'>
                        <button className={`btn-agenda ${!FiladeEspera ? "opc-agenda-ativo" : ""}`} onClick={() => { setFiladeEspera(false); setSearchTerm(''); }}>Agenda</button>
                        <button className={`btn-fila-espera ${FiladeEspera ? "opc-filaespera-ativo" : ""}`} onClick={() => { setFiladeEspera(true); setSearchTerm(''); }}>Fila de espera</button>
                    </div>
                
                    {!FiladeEspera && (
                        <div className="card p-3 mb-3" style={{ marginTop: '20px' }}>
                            <h5 className="mb-3">
                                <i className="bi bi-funnel-fill me-2 text-primary"></i>
                                Filtrar por Médico
                            </h5>
                            <div className="mb-3">
                                <input
                                    type="text"
                                    className="form-control"
                                    placeholder="Digite o nome do médico..."
                                    value={searchTermDoctor}
                                    onChange={(e) => handleSearchMedicos(e.target.value)}
                                />
                                <small className="text-muted">
                                    Filtre os agendamentos por médico
                                </small>
                            </div>
                            {searchTermDoctor && FiltredTodosMedicos.length > 0 && (
                                <div className="list-group">
                                    {FiltredTodosMedicos.map((medico) => (
                                        <button
                                            key={medico.idMedico}
                                            className="list-group-item list-group-item-action"
                                            onClick={() => {
                                                setSearchTermDoctor(medico.nomeMedico);
                                                setFiltredTodosMedicos([]);
                                                setMedicoFiltrado(medico);
                                            }}
                                        >
                                            {medico.nomeMedico}
                                        </button>
                                    ))}
                                </div>
                            )}
                            {MedicoFiltrado.id !== "vazio" && (
                                <div className="alert alert-info mt-2" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                    <span>
                                        <i className="bi bi-info-circle me-2"></i>
                                        Filtrando por: <strong>{searchTermDoctor}</strong>
                                    </span>
                                    <button 
                                        className="btn btn-sm btn-outline-secondary"
                                        onClick={() => {
                                            setSearchTermDoctor('');
                                            setMedicoFiltrado({ id: "vazio" });
                                            setFiltredTodosMedicos([]);
                                        }}
                                    >
                                        <i className="bi bi-x-circle me-1"></i>
                                        Limpar filtro
                                    </button>
                                </div>
                            )}
                        </div>
                    )}
                    
                    <section className='calendario-ou-filaespera'>
                        {FiladeEspera === false ? (
                            <div className="calendar-wrapper">
                                <div className="calendar-info-panel">
                                    <div className="info-date-display"><span>{selectedDay.format('MMM')}</span><strong>{selectedDay.format('DD')}</strong></div>
                                    <div className="info-details"><h3>{selectedDay.format('dddd')}</h3><p>{selectedDay.format('D [de] MMMM [de] YYYY')}</p></div>
                                    <div className="appointments-list">
                                        <h4>Consultas para {selectedDay.format('DD/MM')}</h4>
                                        {showSpinner ? <Spinner/> : (DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]?.length > 0) ? (
                                            DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]
                                                .filter(app => {
                                                    if (MedicoFiltrado.id === "vazio") return true;
                                                    return app.doctor_id === MedicoFiltrado.idMedico;
                                                })
                                                .map(app => (
                                            <div key={app.id} className="appointment-item" data-status={app.status}>
                                                <div className="item-time">{dayjs(app.scheduled_at).format('HH:mm')}</div>
                                                <div className="item-details"><span>{app.paciente_nome}</span><small>Dr(a). {app.medico_nome}</small></div>
                                                <div className="appointment-actions">
                                                    {app.status === 'cancelled' ? (
                                                        <button className="btn-action btn-edit" onClick={() => { setSelectedId(app.id); setShowConfirmModal(true); }}>
                                                            <Edit size={16} />
                                                        </button>
                                                    ) : (
                                                        <>

                                                            <button
                                                                className="btn-action btn-edit"
                                                                onClick={() => {
                                                                    setAppointmentToEdit(app);
                                                                    setEditingAppointmentId(app.id);
                                                                    setPageConsulta(true);
                                                                }}
                                                            >
                                                                <Edit size={16} />
                                                            </button>
                                            
                                                            <button className="btn-action btn-delete" onClick={() => { setSelectedId(app.id); setShowDeleteModal(true); }}>
                                                                <Trash2 size={16} />
                                                            </button>
                                                        </>
                                                    )}
                                                </div>
                                            </div>
                                        ))) : (<div className="no-appointments-info"><p>Nenhuma consulta agendada.</p></div>)}
                                    </div>
                                </div>
                                <div className="calendar-main">
                                    <div className="calendar-legend">
                                        <div className="legend-item" data-status="completed">Realizado</div><div className="legend-item" data-status="confirmed">Confirmado</div><div className="legend-item" data-status="agendado">Agendado</div><div className="legend-item" data-status="cancelled">Cancelado</div>
                                    </div>
                                    <div className="calendar-controls">
                                        <div className="date-indicator">
                                            <h2>{currentDate.format('MMMM [de] YYYY')}</h2>
                                            <div className="quick-jump-controls" style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
                                                <select
                                                    value={quickJump.month}
                                                    onChange={(e) => handleQuickJumpChange('month', e.target.value)}
                                                    className="form-select form-select-sm w-auto"
                                                >
                                                    {dayjs.months().map((month, index) => (
                                                        <option key={index} value={index}>{month.charAt(0).toUpperCase() + month.slice(1)}</option>
                                                    ))}
                                                </select>
                                                <select
                                                    value={quickJump.year}
                                                    onChange={(e) => handleQuickJumpChange('year', e.target.value)}
                                                    className="form-select form-select-sm w-auto"
                                                >
                                                    {Array.from({ length: 11 }, (_, i) => dayjs().year() - 5 + i).map(year => (
                                                        <option key={year} value={year}>{year}</option>
                                                    ))}
                                                </select>
                                                <button
                                                    className="btn btn-sm btn-outline-primary"
                                                    onClick={applyQuickJump}
                                                    disabled={quickJump.month === currentDate.month() && quickJump.year === currentDate.year()}
                                                >
                                                    Ir
                                                </button>
                                            </div>
                                        </div>
                                        
                                        <div className="nav-buttons">
                                            <button onClick={() => { setCurrentDate(currentDate.subtract(1, 'month')); setSelectedDay(currentDate.subtract(1, 'month')); }}><ChevronLeft size={20} /></button>
                                            <button onClick={() => { setCurrentDate(dayjs()); setSelectedDay(dayjs()); }}>Hoje</button>
                                            <button onClick={() => { setCurrentDate(currentDate.add(1, 'month')); setSelectedDay(currentDate.add(1, 'month')); }}><ChevronRight size={20} /></button>
                                        </div>
                                    </div>
                                    
                                    <div className="calendar-grid">
                                        {weekDays.map(day => <div key={day} className="day-header">{day}</div>)}
                                        {dateGrid.map((day, index) => {
                                            const appointmentsOnDay = DictAgendamentosOrganizados[day.format('YYYY-MM-DD')] || [];
                                            const cellClasses = `day-cell ${day.isSame(currentDate, 'month') ? 'current-month' : 'other-month'} ${day.isSame(dayjs(), 'day') ? 'today' : ''} ${day.isSame(selectedDay, 'day') ? 'selected' : ''}`;
                                            return (<div key={index} className={cellClasses} onClick={() => handleDateClick(day)}><span>{day.format('D')}</span>{appointmentsOnDay.length > 0 && <div className="appointments-indicator">{appointmentsOnDay.length}</div>}</div>);
                                        })}
                                    </div>
                                </div>
                            </div>
                        ) : (
                            <div className="page-content table-paciente-container">
                               <section className="row">
                                    <div className="col-12">
                                        <div className="card table-paciente-card">
                                            <div className="card-header"><h4 className="card-title mb-0">Fila de Espera</h4></div>
                                            <div className="card-body">
                                                <div className="card p-3 mb-3 table-paciente-filters">
                                                    <h5 className="mb-3"><i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros</h5>
                                                    <div className="mb-3"><input type="text" className="form-control" placeholder="Buscar por paciente, CPF ou médico..." value={waitlistSearch} onChange={(e) => setWaitlistSearch(e.target.value)} /><small className="text-muted">Digite o nome do paciente, CPF ou nome do médico</small></div>
                                                    <div className="d-flex flex-wrap align-items-center gap-2 mb-3">
                                                        <div className="d-flex align-items-center gap-2">
                                                            <span className="me-2 text-muted small">Ordenar por:</span>
                                                            {(() => { const sortValue = waitSortKey ? `${waitSortKey}-${waitSortDir}` : ''; return (<select className="form-select compact-select sort-select w-auto" value={sortValue} onChange={(e) => { const v = e.target.value; if (!v) { setWaitSortKey(null); setWaitSortDir('asc'); return; } const [k, d] = v.split('-'); setWaitSortKey(k); setWaitSortDir(d); }}>
                                                                <option value="">Sem ordenação</option><option value="paciente-asc">Paciente (A-Z)</option><option value="paciente-desc">Paciente (Z-A)</option><option value="medico-asc">Médico (A-Z)</option><option value="medico-desc">Médico (Z-A)</option><option value="data-asc">Data (mais antiga)</option><option value="data-desc">Data (mais recente)</option>
                                                            </select>);})()}
                                                        </div>
                                                    </div>
                                                    <div className="mt-3"><div className="contador-pacientes">{filaEsperaFiltrada.length} DE {filaEsperaData.length} SOLICITAÇÕES ENCONTRADAS</div></div>
                                                </div>
                                                <div className="table-responsive">
                                                    <table className="table table-striped table-hover table-paciente-table">
                                                        <thead><tr><th>Nome do Paciente</th><th>CPF</th><th>Médico Solicitado</th><th>Data da Solicitação</th><th>Ações</th></tr></thead>
                                                        <tbody>
                                                            {filaEsperaPaginada.length > 0 ? (filaEsperaPaginada.map((item, index) => (
                                                                <tr key={index}><td>{item?.Infos?.paciente_nome}</td><td>{item?.Infos?.paciente_cpf}</td><td>{item?.Infos?.nome_medico}</td><td>{dayjs(item.agendamento.scheduled_at).format('DD/MM/YYYY')}</td><td><button className="btn btn-sm btn-delete" onClick={() => { setSelectedId(item.agendamento.id); setShowDeleteModal(true); }}><i className="bi bi-trash me-1"></i> Excluir</button></td></tr>
                                                            ))) : (<tr><td colSpan="5" className="text-center py-4"><div className="text-muted">{showSpinner ? <Spinner /> : (<><i className="bi bi-inbox display-4"></i><p className="mt-2">Nenhuma solicitação encontrada.</p></>)}</div></td></tr>)}
                                                        </tbody>
                                                    </table>
                                                    {filaEsperaFiltrada.length > 0 && (<div className="d-flex justify-content-between align-items-center mt-3">
                                                        <div className="d-flex align-items-center"><span className="me-2 text-muted">Itens por página:</span><select className="form-select form-select-sm w-auto" value={waitPerPage} onChange={(e) => { setWaitPerPage(Number(e.target.value)); setWaitPage(1); }}><option value={5}>5</option><option value={10}>10</option><option value={25}>25</option><option value={50}>50</option></select></div>
                                                        <div className="d-flex align-items-center"><span className="me-3 text-muted">Página {waitPage} de {waitTotalPages} • Mostrando {waitIndiceInicial + 1}-{Math.min(waitIndiceFinal, filaEsperaFiltrada.length)} de {filaEsperaFiltrada.length}</span><nav><ul className="pagination pagination-sm mb-0">
                                                            <li className={`page-item ${waitPage === 1 ? 'disabled' : ''}`}><button className="page-link" onClick={() => setWaitPage(p => Math.max(1, p - 1))}><i className="bi bi-chevron-left"></i></button></li>
                                                            {gerarNumerosWaitPages().map(pagina => (<li key={pagina} className={`page-item ${pagina === waitPage ? 'active' : ''}`}><button className="page-link" onClick={() => setWaitPage(pagina)}>{pagina}</button></li>))}
                                                            <li className={`page-item ${waitPage === waitTotalPages ? 'disabled' : ''}`}><button className="page-link" onClick={() => setWaitPage(p => Math.min(waitTotalPages, p + 1))}><i className="bi bi-chevron-right"></i></button></li>
                                                        </ul></nav></div>
                                                    </div>)}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        )}
                    </section>
>>>>>>> alteracoes-modais-tabela
                </div>

                <div className="calendar-main">
                  <div className="calendar-legend">
                    <div className="legend-item" data-status="completed">Realizado</div>
                    <div className="legend-item" data-status="confirmed">Confirmado</div>
                    <div className="legend-item" data-status="agendado">Agendado</div>
                    <div className="legend-item" data-status="cancelled">Cancelado</div>
                  </div>
                  <div className="calendar-controls">
                    <div className="date-indicator">
                      <h2>{currentDate.format('MMMM [de] YYYY')}</h2>
                      <div className="quick-jump-controls" style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
                        <select
                          value={quickJump.month}
                          onChange={(e) => handleQuickJumpChange('month', e.target.value)}
                          className="form-select form-select-sm w-auto"
                        >
                          {dayjs.months().map((month, index) => (
                            <option key={index} value={index}>
                              {month.charAt(0).toUpperCase() + month.slice(1)}
                            </option>
                          ))}
                        </select>
                        <select
                          value={quickJump.year}
                          onChange={(e) => handleQuickJumpChange('year', e.target.value)}
                          className="form-select form-select-sm w-auto"
                        >
                          {Array.from({ length: 11 }, (_, i) => dayjs().year() - 5 + i).map(year => (
                            <option key={year} value={year}>{year}</option>
                          ))}
                        </select>
                        <button
                          className="btn btn-sm btn-outline-primary"
                          onClick={applyQuickJump}
                          disabled={quickJump.month === currentDate.month() && quickJump.year === currentDate.year()}
                        >
                          Ir
                        </button>
                      </div>
                    </div>

                    <div className="nav-buttons">
                      <button onClick={() => { setCurrentDate(currentDate.subtract(1, 'month')); setSelectedDay(currentDate.subtract(1, 'month')); }}>
                        <ChevronLeft size={20} />
                      </button>
                      <button onClick={() => { setCurrentDate(dayjs()); setSelectedDay(dayjs()); }}>
                        Hoje
                      </button>
                      <button onClick={() => { setCurrentDate(currentDate.add(1, 'month')); setSelectedDay(currentDate.add(1, 'month')); }}>
                        <ChevronRight size={20} />
                      </button>
                    </div>
                  </div>

                  <div className="calendar-grid">
                    {weekDays.map(day => (
                      <div key={day} className="day-header">{day}</div>
                    ))}
                    {dateGrid.map((day, index) => {
                      const appointmentsOnDay = DictAgendamentosOrganizados[day.format('YYYY-MM-DD')] || [];
                      const cellClasses = `day-cell ${
                        day.isSame(currentDate, 'month') ? 'current-month' : 'other-month'
                      } ${day.isSame(dayjs(), 'day') ? 'today' : ''} ${
                        day.isSame(selectedDay, 'day') ? 'selected' : ''
                      }`;
                      return (
                        <div
                          key={index}
                          className={cellClasses}
                          onClick={() => handleDateClick(day)}
                        >
                          <span>{day.format('D')}</span>
                          {appointmentsOnDay.length > 0 && (
                            <div className="appointments-indicator">{appointmentsOnDay.length}</div>
                          )}
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
            ) : (
              <div className="page-content table-paciente-container">
                <section className="row">
                  <div className="col-12">
                    <div className="card table-paciente-card">
                      <div className="card-header">
                        <h4 className="card-title mb-0">Fila de Espera</h4>
                      </div>
                      <div className="card-body">
                        <div className="card p-3 mb-3 table-paciente-filters">
                          <h5 className="mb-3">
                            <i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
                          </h5>
                          <div className="mb-3">
                            <input
                              type="text"
                              className="form-control"
                              placeholder="Buscar por paciente, CPF ou médico..."
                              value={waitlistSearch}
                              onChange={(e) => setWaitlistSearch(e.target.value)}
                            />
                            <small className="text-muted">
                              Digite o nome do paciente, CPF ou nome do médico
                            </small>
                          </div>
                          <div className="d-flex flex-wrap align-items-center gap-2 mb-3">
                            <div className="d-flex align-items-center gap-2">
                              <span className="me-2 text-muted small">Ordenar por:</span>
                              {(() => {
                                const sortValue = waitSortKey ? `${waitSortKey}-${waitSortDir}` : '';
                                return (
                                  <select
                                    className="form-select compact-select sort-select w-auto"
                                    value={sortValue}
                                    onChange={(e) => {
                                      const v = e.target.value;
                                      if (!v) {
                                        setWaitSortKey(null);
                                        setWaitSortDir('asc');
                                        return;
                                      }
                                      const [k, d] = v.split('-');
                                      setWaitSortKey(k);
                                      setWaitSortDir(d);
                                    }}
                                  >
                                    <option value="">Sem ordenação</option>
                                    <option value="paciente-asc">Paciente (A-Z)</option>
                                    <option value="paciente-desc">Paciente (Z-A)</option>
                                    <option value="medico-asc">Médico (A-Z)</option>
                                    <option value="medico-desc">Médico (Z-A)</option>
                                    <option value="data-asc">Data (mais antiga)</option>
                                    <option value="data-desc">Data (mais recente)</option>
                                  </select>
                                );
                              })()}
                            </div>
                          </div>
                          <div className="mt-3">
                            <div className="contador-pacientes">
                              {filaEsperaFiltrada.length} DE {filaEsperaData.length} SOLICITAÇÕES ENCONTRADAS
                            </div>
                          </div>
                        </div>

                        <div className="table-responsive">
                          <table className="table table-striped table-hover table-paciente-table">
                            <thead>
                              <tr>
                                <th>Nome do Paciente</th>
                                <th>CPF</th>
                                <th>Médico Solicitado</th>
                                <th>Data da Solicitação</th>
                                <th>Ações</th>
                              </tr>
                            </thead>
                            <tbody>
                              {filaEsperaPaginada.length > 0 ? (
                                filaEsperaPaginada.map((item, index) => (
                                  <tr key={index}>
                                    <td>{item?.Infos?.paciente_nome}</td>
                                    <td>{item?.Infos?.paciente_cpf}</td>
                                    <td>{item?.Infos?.nome_medico}</td>
                                    <td>{dayjs(item.agendamento.scheduled_at).format('DD/MM/YYYY')}</td>
                                    <td>
                                      <button
                                        className="btn btn-sm btn-delete"
                                        onClick={() => { setSelectedId(item.agendamento.id); setShowDeleteModal(true); }}
                                      >
                                        <i className="bi bi-trash me-1"></i> Excluir
                                      </button>
                                    </td>
                                  </tr>
                                ))
                              ) : (
                                <tr>
                                  <td colSpan="5" className="text-center py-4">
                                    <div className="text-muted">
                                      {showSpinner ? (
                                        <Spinner />
                                      ) : (
                                        <>
                                          <i className="bi bi-inbox display-4"></i>
                                          <p className="mt-2">Nenhuma solicitação encontrada.</p>
                                        </>
                                      )}
                                    </div>
                                  </td>
                                </tr>
                              )}
                            </tbody>
                          </table>

                          {filaEsperaFiltrada.length > 0 && (
                            <div className="d-flex justify-content-between align-items-center mt-3">
                              <div className="d-flex align-items-center">
                                <span className="me-2 text-muted">Itens por página:</span>
                                <select
                                  className="form-select form-select-sm w-auto"
                                  value={waitPerPage}
                                  onChange={(e) => {
                                    setWaitPerPage(Number(e.target.value));
                                    setWaitPage(1);
                                  }}
                                >
                                  <option value={5}>5</option>
                                  <option value={10}>10</option>
                                  <option value={25}>25</option>
                                  <option value={50}>50</option>
                                </select>
                              </div>
                              <div className="d-flex align-items-center">
                                <span className="me-3 text-muted">
                                  Página {waitPage} de {waitTotalPages} • Mostrando {waitIndiceInicial + 1}-{Math.min(waitIndiceFinal, filaEsperaFiltrada.length)} de {filaEsperaFiltrada.length}
                                </span>
                                <nav>
                                  <ul className="pagination pagination-sm mb-0">
                                    <li className={`page-item ${waitPage === 1 ? 'disabled' : ''}`}>
                                      <button
                                        className="page-link"
                                        onClick={() => setWaitPage(p => Math.max(1, p - 1))}
                                      >
                                        <i className="bi bi-chevron-left"></i>
                                      </button>
                                    </li>
                                    {gerarNumerosWaitPages().map(pagina => (
                                      <li
                                        key={pagina}
                                        className={`page-item ${pagina === waitPage ? 'active' : ''}`}
                                      >
                                        <button
                                          className="page-link"
                                          onClick={() => setWaitPage(pagina)}
                                        >
                                          {pagina}
                                        </button>
                                      </li>
                                    ))}
                                    <li className={`page-item ${waitPage === waitTotalPages ? 'disabled' : ''}`}>
                                      <button
                                        className="page-link"
                                        onClick={() => setWaitPage(p => Math.min(waitTotalPages, p + 1))}
                                      >
                                        <i className="bi bi-chevron-right"></i>
                                      </button>
                                    </li>
                                  </ul>
                                </nav>
                              </div>
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            )}
          </section>
        </div>
      ) : (
        <AgendamentoCadastroManager
          setPageConsulta={setPageConsulta}
          agendamentoInicial={appointmentToEdit}
          setEditingAppointmentId={setEditingAppointmentId}
        />
      )}

      {showDeleteModal && <DeleteModal />}
      {showConfirmModal && <ConfirmEditModal />}
    </div>
  );
};

export default Agendamento;