import InputMask from "react-input-mask";
import "./style/formagendamentos.css";
import { useState, useEffect } from "react";
import { GetPatientByCPF } from "../utils/Functions-Endpoints/Patient";
import { GetDoctorByName, GetAllDoctors } from "../utils/Functions-Endpoints/Doctor";
import { useAuth } from "../utils/AuthProvider";
import API_KEY from "../utils/apiKeys";

const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) => {
  const {getAuthorizationHeader} = useAuth()

  console.log(agendamento, 'aqui2')

  const [sessoes,setSessoes] = useState(1)
  const [tempoBaseConsulta, setTempoBaseConsulta] = useState(30); // NOVO: Tempo base da consulta em minutos

  const [selectedFile, setSelectedFile] = useState(null);
  const [anexos, setAnexos] = useState([]);
  const [loadingAnexos, setLoadingAnexos] = useState(false);
  const [acessibilidade, setAcessibilidade] = useState({cadeirante:false,idoso:false,gravida:false,bebe:false, autista:false })


const [todosProfissionais, setTodosProfissionais] = useState([])
const [profissionaisFiltrados, setProfissionaisFiltrados] = useState([]);
const [isDropdownOpen, setIsDropdownOpen] = useState(false); 


  const [horarioInicio, setHorarioInicio] = useState('');
  const [horarioTermino, setHorarioTermino] = useState('');

  const [horariosDisponiveis, sethorariosDisponiveis] = useState([])

  let authHeader = getAuthorizationHeader()
 
  const FormatCPF = (valor) => {
    const digits = String(valor).replace(/\D/g, '').slice(0, 11);
    return digits
      .replace(/(\d{3})(\d)/, '$1.$2')
      .replace(/(\d{3})(\d)/, '$1.$2')
      .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
  }

     

  const handleChange = (e) => {
    const {value, name} = e.target;
    console.log(value, name, agendamento)
    
    if(name === 'email'){
      setAgendamento({...agendamento, contato:{
        ...agendamento.contato,
        email:value
      }})}
      else if(name === 'status'){
        if(agendamento.status==='requested'){
        setAgendamento((prev) => ({
                      ...prev,
                      status:'confirmed',
                                          }));  
        }else if(agendamento.status === 'confirmed'){
        console.log(value)
        setAgendamento((prev) => ({
                      ...prev,
                      status:'requested',
                                          }));
      }}
    
    else if(name === 'paciente_cpf'){

      let cpfFormatted = FormatCPF(value)
       const fetchPatient = async () => {
                  let patientData = await GetPatientByCPF(cpfFormatted, authHeader);
                  if (patientData) {
                    setAgendamento((prev) => ({
                      ...prev,
                      paciente_nome: patientData.full_name,
                      patient_id: patientData.id
                    }));
                  }}
      setAgendamento(prev => ({ ...prev, cpf: cpfFormatted }))
      fetchPatient()
    }else if(name==='convenio'){
      setAgendamento({...agendamento,insurance_provider:value})
    }
    else{
    setAgendamento({...agendamento,[name]:value})
    }
  }

  // Se estiver na página de edição esse useEffect pega o horario de inicio para coloca-lo no horarioInicio
  useEffect(() => {
    console.log("Horario", )
    setHorarioInicio(formatarHora(agendamento.scheduled_at))
  }, [])


useEffect(() => {
  const ChamarMedicos = async () => {
    const Medicos = await GetAllDoctors(authHeader)
    setTodosProfissionais(Medicos)
  }
  ChamarMedicos();

  var myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/json");
  myHeaders.append("apikey", API_KEY)
  myHeaders.append("Authorization", `Bearer ${authHeader.split(' ')[1]}`);

var raw = JSON.stringify({
   "doctor_id": agendamento.doctor_id,
   "start_date": agendamento.dataAtendimento,
   "end_date": `${agendamento.dataAtendimento}T23:59:59.999Z`,
  
});

var requestOptions = {
   method: 'POST',
   headers: myHeaders,
   body: raw,
   redirect: 'follow'
};

fetch("https://yuanqfswhberkoevtmfr.supabase.co/functions/v1/get-available-slots", requestOptions)
   .then(response => response.json())
   .then(result => {console.log(result); sethorariosDisponiveis(result)})
   .catch(error => console.log('error', error));

}, [agendamento.dataAtendimento, agendamento.doctor_id])


// FUNÇÃO DE BUSCA E FILTRAGEM
const handleSearchProfissional = (e) => {
    const term = e.target.value;    
    handleChange(e); 
    // 2. Lógica de filtragem:
    if (term.trim() === '') {
        setProfissionaisFiltrados([]);
        setIsDropdownOpen(false);
        return;
    }
    // Adapte o nome da propriedade (ex: 'nome', 'full_name')
    const filtered = todosProfissionais.filter(p => 
        p.full_name.toLowerCase().includes(term.toLowerCase())
    );
    
    setProfissionaisFiltrados(filtered);
    setIsDropdownOpen(filtered.length > 0); // Abre se houver resultados
};


// FUNÇÃO PARA SELECIONAR UM ITEM DO DROPDOWN
const handleSelectProfissional = async (profissional) => {
    setAgendamento(prev => ({
        ...prev,
        doctor_id: profissional.id,
        nome_medico: profissional.full_name
    }));
        // 2. Fecha o dropdown
    setProfissionaisFiltrados([]);
    setIsDropdownOpen(false);
    };

  
const formatarHora = (datetimeString) => {
    return datetimeString.substring(11, 16);
  };

  const opcoesDeHorario = horariosDisponiveis?.slots?.map(item => ({
    
    value: formatarHora(item.datetime),
    label: formatarHora(item.datetime),
    disabled: !item.available
  }));

const calcularHorarioTermino = (inicio, sessoes, tempoBase) => {
    if (!inicio || inicio.length !== 5 || !inicio.includes(':')) return '';

    const [horas, minutos] = inicio.split(':').map(Number);
    const minutosInicio = (horas * 60) + minutos;
    const duracaoTotalMinutos = sessoes * tempoBase;
    const minutosTermino = minutosInicio + duracaoTotalMinutos;

    const horaTermino = Math.floor(minutosTermino / 60) % 24;
    const minutoTermino = minutosTermino % 60;

    const formatar = (num) => String(num).padStart(2, '0');

    return `${formatar(horaTermino)}:${formatar(minutoTermino)}`;
  };

  useEffect(() => {
    // Recalcula o horário de término sempre que houver alteração nas variáveis dependentes
    const novoTermino = calcularHorarioTermino(horarioInicio, sessoes, tempoBaseConsulta);
    setHorarioTermino(novoTermino);

    setAgendamento(prev => ({
        ...prev,
        horarioTermino: novoTermino 
    }));
  }, [horarioInicio, sessoes, tempoBaseConsulta, setAgendamento]);

const handleSubmit = (e) => {
    e.preventDefault();
    alert("Agendamento salvo!");
    onSave({...agendamento, horarioInicio:horarioInicio})
  };

  return (
    <div className="form-container">
      

      <form className="form-agendamento" onSubmit={handleSubmit}>
        <h2 className="section-title">Informações do paciente</h2>

      <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-um">
          
          <div className="campo-de-input">
            <label>CPF do paciente</label> 
               <input  type="text" name="paciente_cpf"  placeholder="000.000.000-00" onChange={handleChange}  value={agendamento.paciente_cpf}/>
           
          </div>
          
          <div className="campo-de-input">
            <label>Nome *</label>
            <input type="text" name="paciente_nome" value={agendamento.paciente_nome} placeholder="Insira o nome do paciente" required onChange={handleChange} />
          </div>        
      </div>
      <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-tres">
       
        <div >
          <label>Convênio</label>
          <select name="convenio" onChange={handleChange}>
            <option value="publico">Público</option>
            <option value="unimed">Unimed</option>
            <option value="bradesco_saude">Bradesco Saúde</option>
            <option value="hapvida">Hapvida</option>
          </select>
        </div>
        
      </div>
      
        <h2 className="section-title">Informações do atendimento</h2>
       

        <div className="campo-informacoes-atendimento">
            
            <div className="campo-de-input-container"> {/* NOVO CONTAINER PAI */}
    <div className="campo-de-input">
        <label>Nome do profissional *</label>
        <input 
            type="text" 
            name="nome_medico" // Use o nome correto da propriedade no estado `agendamento`
            onChange={handleSearchProfissional} 
            value={agendamento?.nome_medico} 
            autoComplete="off" // Ajuda a evitar o autocomplete nativo do navegador
            required 
        />
    </div>

    {/* DROPDOWN - RENDERIZAÇÃO CONDICIONAL */}
    {isDropdownOpen && profissionaisFiltrados.length > 0 && (
        <div className='dropdown-profissionais'>
            {profissionaisFiltrados.map((profissional) => (
                <div 
                    key={profissional.id} // Use o ID do profissional
                    className='dropdown-item'
                    onClick={() => handleSelectProfissional(profissional)}
                >
                    {profissional.full_name}
                </div>
            ))}
        </div>
    )}
</div>
        
          <div  className="tipo_atendimento">
            <label>Tipo de atendimento *</label>
            <select onChange={handleChange} name="tipo_atendimento" >
              <option value="presencial" selected>Presencial</option>
              <option value="teleconsulta">Teleconsulta</option>
            </select>
          </div>

        </div>

        <section id="informacoes-atendimento-segunda-linha">
          <section id="informacoes-atendimento-segunda-linha-esquerda">
        
          <div className="campo-informacoes-atendimento">
            
          
            <div className="campo-de-input">
              <label>Data *</label>
              <input type="date" name="dataAtendimento" onChange={handleChange} value={agendamento.dataAtendimento} required />
            </div>
          </div>
<div className="linha">
    {/* Dropdown de Início (Não modificado) */}
    <div className="campo-de-input">
        <label htmlFor="inicio">Início *</label>
        <select 
            id="inicio"
            name="inicio" 
            required
            value={horarioInicio}
            onChange={(e) => setHorarioInicio(e.target.value)}
        >
            <option value="" disabled>Selecione a hora de início</option>
            {opcoesDeHorario?.map((opcao, index) => (
                <option 
                    key={index} 
                    value={opcao.value} 
                    disabled={opcao.disabled}
                >
                    {opcao.label}
                    {opcao.disabled && " (Indisponível)"} 
                </option>
            ))}
        </select>
    </div>

    {/* SELETOR DE SESSÕES MODIFICADO */}
    {/* Removemos o 'label' para evitar o desalinhamento e colocamos o texto acima */}
    <div className='seletor-wrapper'>
        <label>Número de Sessões *</label> {/* Novo label para o seletor */}
        <div className='sessao-contador'>
            <button 
                type="button" /* Adicionado para evitar submissão de formulário */
                onClick={() => {if(sessoes === 0)return; else(setSessoes(sessoes - 1))}}
                disabled={sessoes === 0} /* Desabilita o botão no limite */
            > 
                <i className="bi bi-chevron-compact-left"></i>
            </button>
            
            <p className='sessao-valor'>{sessoes}</p> {/* Adicionada classe para estilização */}
            
            <button 
                type="button" /* Adicionado para evitar submissão de formulário */
                onClick={() => {if(sessoes === 3 )return; else(setSessoes(sessoes + 1))}}
                disabled={sessoes === 3} /* Desabilita o botão no limite */
            >  
                <i className="bi bi-chevron-compact-right"></i>
            </button>
        </div>
    </div>
      <div className="campo-de-input">
        <label htmlFor="termino">Término *</label>
                    <input
                        type="text"
                        id="termino"
                        name="termino"
                        value={horarioTermino || '— —'}
                        readOnly
                        className="horario-termino-readonly"
                    />
       
    
    </div>
</div>
    
      </section>

      <section className="informacoes-atendimento-segunda-linha-direita"> 
     

        <div className="campo-de-input">
          <label>Observações</label>
          <textarea name="observacoes" rows="4" cols="1"></textarea>
        </div>
      </section>
      
    </section>
    

      <div className="form-actions">
        <button type="submit" className="btn-primary">Salvar agendamento</button>
          <button type="button" className="btn-cancel" onClick={onCancel}>Cancelar</button>
        </div>
      </form>
        <div className="campo-de-input-check">
                <input className="form-check-input form-custom-check" type="checkbox" name="status" onChange={handleChange} />
                <label className="form-check-label checkbox-label" htmlFor="status">
                 Adicionar a fila de espera
                </label>
              </div>
      
    </div>
  );
};

export default FormNovaConsulta;