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';





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([])



  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="fila-container">
                  <div className="fila-header">
                    <input
                      type="text"
                      placeholder="Pesquisar na fila de espera..."
                      className="busca-fila-espera"
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                    />
                    <h2 className="fila-titulo">Fila de Espera</h2>
                  </div>
                  <table className="fila-tabela">
                    <thead>
                      <tr>
                        <th>Nome do Paciente</th> {/* Ajustado o cabeçalho */}
                        <th>CPF</th> {/* Ajustado o cabeçalho */}
                        <th>Médico Solicitado</th> {/* Ajustado o cabeçalho */}
                        <th>Data da Solicitação</th> {/* Ajustado o cabeçalho */}
                        <th>Ações</th>
                      </tr>
                    </thead>
                    <tbody>
                      {filaEsperaData.map((item, index) => (
                        <tr key={index}>
                          <td> <p>{item.Infos?.paciente_nome} </p>  </td>
                          <td><p>{item.Infos?.paciente_cpf} </p></td>
                          <td><p>{item.Infos?.nome_medico} </p></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>
                      ))}
                    </tbody>
                  </table>
                </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;