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 TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia';
import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
// Importação de endpoints para lógica da Fila de Espera e Médicos (versão main)
import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient.js';
import { GetAllDoctors, GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor.js';

import { useAuth } from '../components/utils/AuthProvider.js';
// ✨ NOVO: Caminho de importação corrigido com base na sua estrutura de pastas
import AgendamentosMes from '../components/AgendarConsulta/DadosConsultasMock.js';

import dayjs from 'dayjs';
import "./style/Agendamento.css";
import './style/FilaEspera.css';
import { Search } from 'lucide-react';

import Spinner from '../components/Spinner.jsx';





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 [tabela, setTabela] = useState('diario');
  const [PageNovaConsulta, setPageConsulta] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [agendamentos, setAgendamentos] = useState()
  const { getAuthorizationHeader } = useAuth()
  const [DictAgendamentosOrganizados, setAgendamentosOrganizados] = useState({})

  const [showDeleteModal, setShowDeleteModal] = useState(false)
  const [AgendamentoFiltrado, setAgendamentoFiltrado] = useState()

  const [ListaDeMedicos, setListaDeMedicos] = useState([])
  const [FiltredTodosMedicos, setFiltredTodosMedicos] = useState([])
  const [searchTermDoctor, setSearchTermDoctor] = useState('');

  const [MedicoFiltrado, setMedicoFiltrado] = useState({ id: "vazio" })


  const [cacheAgendamentos, setCacheAgendamentos] = useState([])

  const [showConfirmModal, setShowConfirmModal] = useState(false)

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

  const [corModal, setCorModal] = useState("")

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

  // Estados para a tabela da fila de espera
  const [searchTermFila, setSearchTermFila] = useState('');
  const [filtroMedicoFila, setFiltroMedicoFila] = useState('Todos');
  const [paginaAtualFila, setPaginaAtualFila] = useState(1);
  const [itensPorPaginaFila, setItensPorPaginaFila] = useState(10);

  let authHeader = getAuthorizationHeader()

  const cacheMedicos = {};
  const cachePacientes = {};

  useMemo(() => {
    if (!listaTodosAgendamentos.length) return { agendamentosOrganizados: {}, filaEsperaData: [] };
    console.log("recarregando")
    const DictAgendamentosOrganizados = {};
    const ListaFilaDeEspera = [];

    const fetchDados = async () => {
      for (const agendamento of listaTodosAgendamentos) {
        if (agendamento.status === "requested") {
          // Cache de médico e paciente
          if (!cacheMedicos[agendamento.doctor_id]) {
            cacheMedicos[agendamento.doctor_id] = await GetDoctorByID(agendamento.doctor_id, authHeader);
          }
          if (!cachePacientes[agendamento.patient_id]) {
            cachePacientes[agendamento.patient_id] = await GetPatientByID(agendamento.patient_id, authHeader);
          }

          const medico = cacheMedicos[agendamento.doctor_id];
          const paciente = cachePacientes[agendamento.patient_id];

          ListaFilaDeEspera.push({
            agendamento,
            Infos: {
              nome_medico: medico[0]?.full_name,
              doctor_id: medico[0]?.id,
              patient_id: paciente[0]?.id,
              paciente_nome: paciente[0]?.full_name,
              paciente_cpf: paciente[0]?.cpf,
            },
          });
        } else {
          const DiaAgendamento = agendamento.scheduled_at.split("T")[0];

          if (DiaAgendamento in DictAgendamentosOrganizados) {
            DictAgendamentosOrganizados[DiaAgendamento].push(agendamento);
          } else {
            DictAgendamentosOrganizados[DiaAgendamento] = [agendamento];
          }
        }
      }

      // Ordenar por data
      for (const DiaAgendamento in DictAgendamentosOrganizados) {
        DictAgendamentosOrganizados[DiaAgendamento].sort((a, b) => a.scheduled_at.localeCompare(b.scheduled_at));
      }

      const chavesOrdenadas = Object.keys(DictAgendamentosOrganizados).sort();

      const DictAgendamentosFinal = {};
      for (const data of chavesOrdenadas) {
        DictAgendamentosFinal[data] = DictAgendamentosOrganizados[data];
      }

      setAgendamentosOrganizados(DictAgendamentosFinal);
      setFilaEsperaData(ListaFilaDeEspera);
    };

    fetchDados();

    return { agendamentosOrganizados: DictAgendamentosOrganizados, filaEsperaData: ListaFilaDeEspera };
  }, [listaTodosAgendamentos]); // 👉 só recalcula quando a lista muda


  useEffect(() => {
    var myHeaders = new Headers();
    myHeaders.append("Authorization", authHeader);
    myHeaders.append("apikey", API_KEY)

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

    fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select&doctor_id&patient_id&status&scheduled_at&order&limit&offset", requestOptions)
      .then(response => response.json())
      .then(result => { setListaTodosAgendamentos(result); console.log(result) })
      .catch(error => console.log('error', error));

    const PegarTodosOsMedicos = async () => {
      let lista = []
      const TodosOsMedicos = await GetAllDoctors(authHeader)

      for (let d = 0; TodosOsMedicos.length > d; d++) {
        lista.push({ nomeMedico: TodosOsMedicos[d].full_name, idMedico: TodosOsMedicos[d].id })
      }
      setListaDeMedicos(lista)
    }
    PegarTodosOsMedicos()

  }, [])


  const deleteConsulta = (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": "cancelled",
      "cancellation_reason": motivoCancelamento
    });


    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 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 filteredAgendamentos = useMemo(() => {
    if (!searchTerm.trim()) {
      return AgendamentosMes;
    }
    const lowerCaseSearchTerm = searchTerm.toLowerCase();
    const filteredData = {};

    for (const semana in AgendamentosMes) {
      filteredData[semana] = {};
      for (const dia in AgendamentosMes[semana]) {
        filteredData[semana][dia] = AgendamentosMes[semana][dia].filter(agendamento =>
          agendamento.status === 'vazio' ||
          (agendamento.paciente && agendamento.paciente.toLowerCase().includes(lowerCaseSearchTerm))
        );
      }
    }
    return filteredData;
  }, [searchTerm]);

  const ListarDiasdoMes = (ano, mes) => {
    let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = []
    const base = dayjs(`${ano}-${mes}-01`)
    const DiasnoMes = base.daysInMonth()
    for (let d = 1; d <= DiasnoMes; d++) {
      const data = dayjs(`${ano}-${mes}-${d}`)
      const dia = data.format('dddd')
      switch (dia) {
        case 'Monday': segundas.push(d); break
        case 'Tuesday': tercas.push(d); break
        case 'Wednesday': quartas.push(d); break
        case 'Thursday': quintas.push(d); break
        case 'Friday': sextas.push(d); break
        default: break
      }
    }
    let ListaDiasDatas = { segundas: segundas, tercas: tercas, quartas: quartas, quintas: quintas, sextas: sextas }
    return ListaDiasDatas
  }


  const handleClickAgendamento = (agendamento) => {
    if (agendamento.status !== 'vazio') return
    else setPageConsulta(true)
  };


  useEffect(() => {
    console.log("mudou FiltredTodosMedicos:", FiltredTodosMedicos);
    if (MedicoFiltrado.id != "vazio") {
      const unicoMedico = MedicoFiltrado;
      console.log(unicoMedico)
      const idMedicoFiltrado = unicoMedico.idMedico;
      console.log(`Médico único encontrado: ${unicoMedico.nomeMedico}. ID: ${idMedicoFiltrado}`);

      const agendamentosDoMedico = filtrarAgendamentosPorMedico(
        DictAgendamentosOrganizados,
        idMedicoFiltrado
      );
      console.log(`Total de agendamentos filtrados para este médico: ${agendamentosDoMedico.length}`);
      console.log("Lista completa de Agendamentos do Médico:", agendamentosDoMedico);

      //FiltrarAgendamentos(agendamentosDoMedico)

      setListaTodosAgendamentos(agendamentosDoMedico)

    }
  }, [FiltredTodosMedicos, MedicoFiltrado]);

  const filtrarAgendamentosPorMedico = (dictAgendamentos, idMedicoFiltrado) => {
    setCacheAgendamentos(DictAgendamentosOrganizados);

    const todasAsListasDeAgendamentos = Object.values(dictAgendamentos);
    const todosOsAgendamentos = todasAsListasDeAgendamentos.flat();

    const agendamentosFiltrados = todosOsAgendamentos.filter(agendamento =>
      agendamento.doctor_id === idMedicoFiltrado
    );

    return agendamentosFiltrados;
  };

  const handleSearchMedicos = (term) => {
    setSearchTermDoctor(term);
    if (term.trim() === '') {
      if (MedicoFiltrado.id !== "vazio") {
        console.log("Medico escolhido, mas vai ser apagado")
        console.log(cacheAgendamentos, "cache ")

      }


      setFiltredTodosMedicos([]);
      setMedicoFiltrado({ id: "vazio" })

      //2  FiltrarAgendamentos()
      return;
    }
    if (FiltredTodosMedicos.length === 1) {
      setMedicoFiltrado({ ...FiltredTodosMedicos[0] })
    }

    const filtered = ListaDeMedicos.filter(medico =>
      medico.nomeMedico.toLowerCase().includes(term.toLowerCase())
    );
    setFiltredTodosMedicos(filtered);
  };


  return (
    <div>
      <div className='spinner'></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)}>
          <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='unidade-selecionarprofissional'>

            {/* Bloco de busca por médico */}
            <div className='busca-atendimento-container'>
              <div className='input-e-dropdown-wrapper'>
                <div className='busca-atendimento'>
                  <div>
                    <i className="fa-solid fa-calendar-day"></i>
                    <input
                      type="text"
                      placeholder="Filtrar atendimento por médico..."
                      value={searchTermDoctor}
                      onChange={(e) => handleSearchMedicos(e.target.value)}
                    />
                  </div>
                </div>

                {/* DROPDOWN (RENDERIZAÇÃO CONDICIONAL) */}
                {searchTermDoctor && FiltredTodosMedicos.length > 0 && (
                  <div className='dropdown-medicos'>
                    {FiltredTodosMedicos.map((medico) => (
                      <div
                        key={medico.id}
                        className='dropdown-item'
                        onClick={() => {
                          setSearchTermDoctor(medico.nomeMedico);
                          setFiltredTodosMedicos([]);
                          setMedicoFiltrado(medico)

                        }}
                      >
                        <p>{medico.nomeMedico} </p>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>

          </div>

          <div className='container-btns-agenda-fila_esepera'>
            <button
              className={`btn-agenda ${FiladeEspera === false ? "opc-agenda-ativo" : ""}`}
              onClick={() => {
                setFiladeEspera(false);
                setSearchTerm('');
              }}
            >
              Agenda
            </button>
            <button
              className={`btn-fila-espera ${FiladeEspera === true ? "opc-filaespera-ativo" : ""}`}
              onClick={() => {
                setFiladeEspera(true);
                setSearchTerm('');
              }}
            >
              Fila de espera

            </button>
          </div>

          <section className='calendario-ou-filaespera'>
            {FiladeEspera === false ?
              (
                <div className='calendario'>
                  <div>
                    <section className='btns-e-legenda-container'>
                      <div>
                        <button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`} onClick={() => setTabela("diario")}>
                          <i className="fa-solid fa-calendar-day"></i> Dia
                        </button>
                        <button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo' : ""}`} onClick={() => setTabela("semanal")}>
                          <i className="fa-solid fa-calendar-day"></i> Semana
                        </button>
                        <button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo' : ''}`} onClick={() => setTabela("mensal")}>
                          <i className="fa-solid fa-calendar-day"></i> Mês
                        </button>
                      </div>
                      <div className='legenda-tabela'>
                        <div className='legenda-item-realizado'><span>Realizado</span></div>
                        <div className='legenda-item-confirmado'><span>Confirmado</span></div>
                        <div className='legenda-item-agendado'><span>Agendado</span></div>
                        <div className='legenda-item-cancelado'><span>Cancelado</span></div>
                      </div>
                    </section>

                    {/* Componentes de Tabela - Adicionado props de delete da main */}
                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID} />}
                    {tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID} />}
                    {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID} />}
                  </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">
                          {/* Filtros */}
                          <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 nome do paciente ou CPF..."
                                value={searchTermFila}
                                onChange={(e) => setSearchTermFila(e.target.value)}
                              />
                              <small className="text-muted">
                                Digite o nome completo ou número do CPF
                              </small>
                            </div>

                            <div className="mb-3">
                              <input
                                type="text"
                                className="form-control"
                                placeholder="Filtrar por nome do médico..."
                                value={filtroMedicoFila === 'Todos' ? '' : filtroMedicoFila}
                                onChange={(e) => setFiltroMedicoFila(e.target.value || 'Todos')}
                              />
                              <small className="text-muted">
                                Digite o nome do médico para filtrar
                              </small>
                            </div>

                            <div className="d-flex justify-content-end">
                              <button
                                className="btn btn-outline-secondary btn-sm"
                                onClick={() => {
                                  setSearchTermFila('');
                                  setFiltroMedicoFila('Todos');
                                  setPaginaAtualFila(1);
                                }}
                              >
                                <i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
                              </button>
                            </div>

                            <div className="mt-3">
                              <div className="contador-pacientes">
                                {(() => {
                                  const filtrados = filaEsperaData.filter((item) => {
                                    const buscaNome = item.Infos?.paciente_nome?.toLowerCase().includes(searchTermFila.toLowerCase());
                                    const buscaCPF = item.Infos?.paciente_cpf?.toLowerCase().includes(searchTermFila.toLowerCase());
                                    const passaBusca = searchTermFila === "" || buscaNome || buscaCPF;
                                    const passaMedico = filtroMedicoFila === "Todos" || item.Infos?.nome_medico?.toLowerCase().includes(filtroMedicoFila.toLowerCase());
                                    return passaBusca && passaMedico;
                                  });
                                  return filtrados.length;
                                })()} DE {filaEsperaData.length} SOLICITAÇÕES ENCONTRADAS
                              </div>
                            </div>
                          </div>

                          {/* Filtros Ativos */}
                          {(searchTermFila || filtroMedicoFila !== "Todos") && (
                            <div className="alert alert-info mb-3 filters-active">
                              <strong>Filtros ativos:</strong>
                              <div className="mt-1">
                                {searchTermFila && <span className="badge bg-primary me-2">Busca: "{searchTermFila}"</span>}
                                {filtroMedicoFila !== "Todos" && <span className="badge bg-primary me-2">Médico: {filtroMedicoFila}</span>}
                              </div>
                            </div>
                          )}

                          {/* Tabela */}
                          <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>
                                {(() => {
                                  // Filtrar dados
                                  const filaFiltrada = filaEsperaData.filter((item) => {
                                    const buscaNome = item.Infos?.paciente_nome?.toLowerCase().includes(searchTermFila.toLowerCase());
                                    const buscaCPF = item.Infos?.paciente_cpf?.toLowerCase().includes(searchTermFila.toLowerCase());
                                    const passaBusca = searchTermFila === "" || buscaNome || buscaCPF;
                                    const passaMedico = filtroMedicoFila === "Todos" || item.Infos?.nome_medico?.toLowerCase().includes(filtroMedicoFila.toLowerCase());
                                    return passaBusca && passaMedico;
                                  });

                                  // Paginação
                                  const totalPaginasFila = Math.ceil(filaFiltrada.length / itensPorPaginaFila);
                                  const indiceInicial = (paginaAtualFila - 1) * itensPorPaginaFila;
                                  const indiceFinal = indiceInicial + itensPorPaginaFila;
                                  const filaPaginada = filaFiltrada.slice(indiceInicial, indiceFinal);

                                  if (filaPaginada.length > 0) {
                                    return filaPaginada.map((item, index) => (
                                      <tr key={index}>
                                        <td>
                                          <div className="d-flex align-items-center">
                                            {item.Infos?.paciente_nome}
                                          </div>
                                        </td>
                                        <td>{item.Infos?.paciente_cpf}</td>
                                        <td>
                                          <span className="badge insurance-badge">
                                            {item.Infos?.nome_medico || 'Não informado'}
                                          </span>
                                        </td>
                                        <td>{dayjs(item.agendamento.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`);
                                                setDictInfo(item);
                                              }}
                                            >
                                              <i className="bi bi-pencil me-1"></i> Editar
                                            </button>

                                            <button
                                              className="btn btn-sm btn-delete"
                                              onClick={() => {
                                                setSelectedId(item.agendamento.id);
                                                setShowDeleteModal(true);
                                              }}
                                            >
                                              <i className="bi bi-trash me-1"></i> Excluir
                                            </button>
                                          </div>
                                        </td>
                                      </tr>
                                    ));
                                  } else {
                                    return (
                                      <tr>
                                        <td colSpan="5" className="text-center py-4">
                                          <div className="text-muted">
                                            <i className="bi bi-search display-4"></i>
                                            <p className="mt-2">Nenhuma solicitação encontrada com os filtros aplicados.</p>
                                            {(searchTermFila || filtroMedicoFila !== "Todos") && (
                                              <button
                                                className="btn btn-outline-primary btn-sm mt-2"
                                                onClick={() => {
                                                  setSearchTermFila('');
                                                  setFiltroMedicoFila('Todos');
                                                  setPaginaAtualFila(1);
                                                }}
                                              >
                                                Limpar filtros
                                              </button>
                                            )}
                                          </div>
                                        </td>
                                      </tr>
                                    );
                                  }
                                })()}
                              </tbody>
                            </table>

                            {/* Paginação */}
                            {(() => {
                              const filaFiltrada = filaEsperaData.filter((item) => {
                                const buscaNome = item.Infos?.paciente_nome?.toLowerCase().includes(searchTermFila.toLowerCase());
                                const buscaCPF = item.Infos?.paciente_cpf?.toLowerCase().includes(searchTermFila.toLowerCase());
                                const passaBusca = searchTermFila === "" || buscaNome || buscaCPF;
                                const passaMedico = filtroMedicoFila === "Todos" || item.Infos?.nome_medico?.toLowerCase().includes(filtroMedicoFila.toLowerCase());
                                return passaBusca && passaMedico;
                              });

                              const totalPaginasFila = Math.ceil(filaFiltrada.length / itensPorPaginaFila);
                              const indiceInicial = (paginaAtualFila - 1) * itensPorPaginaFila;
                              const indiceFinal = indiceInicial + itensPorPaginaFila;

                              if (filaFiltrada.length > 0) {
                                return (
                                  <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={itensPorPaginaFila}
                                        onChange={(e) => {
                                          setItensPorPaginaFila(Number(e.target.value));
                                          setPaginaAtualFila(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 {paginaAtualFila} de {totalPaginasFila} •
                                        Mostrando {indiceInicial + 1}-{Math.min(indiceFinal, filaFiltrada.length)} de {filaFiltrada.length} solicitações
                                      </span>

                                      <nav>
                                        <ul className="pagination pagination-sm mb-0">
                                          <li className={`page-item ${paginaAtualFila === 1 ? 'disabled' : ''}`}>
                                            <button
                                              className="page-link"
                                              onClick={() => setPaginaAtualFila(paginaAtualFila - 1)}
                                            >
                                              <i className="bi bi-chevron-left"></i>
                                            </button>
                                          </li>

                                          {Array.from({ length: Math.min(5, totalPaginasFila) }, (_, i) => {
                                            const startPage = Math.max(1, paginaAtualFila - 2);
                                            const pageNum = startPage + i;
                                            if (pageNum <= totalPaginasFila) {
                                              return (
                                                <li key={pageNum} className={`page-item ${pageNum === paginaAtualFila ? 'active' : ''}`}>
                                                  <button
                                                    className="page-link"
                                                    onClick={() => setPaginaAtualFila(pageNum)}
                                                  >
                                                    {pageNum}
                                                  </button>
                                                </li>
                                              );
                                            }
                                            return null;
                                          })}

                                          <li className={`page-item ${paginaAtualFila === totalPaginasFila ? 'disabled' : ''}`}>
                                            <button
                                              className="page-link"
                                              onClick={() => setPaginaAtualFila(paginaAtualFila + 1)}
                                            >
                                              <i className="bi bi-chevron-right"></i>
                                            </button>
                                          </li>
                                        </ul>
                                      </nav>
                                    </div>
                                  </div>
                                );
                              }
                              return null;
                            })()}
                          </div>
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              )
            }
          </section>
        </div>
      ) : (
        <AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
      )}

      {/* Modal de Confirmação de Exclusão */}
      {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>
  )
}

export default Agendamento;