import React, { useState, useMemo, useEffect } from 'react';
import API_KEY from '../components/utils/apiKeys.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 { 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';

const Agendamento = () => {

  // Dados mocados para simular consultas com a API de Hugo
  const Agendamentos = [
  {
    id: "9d5c7233-0437-4283-84cd-668714b1c6af",
    order_number: "APT-2025-0001",
    patient_id: "47902ada-7d04-480a-a759-bae8a211973a",
    appointment_type: "presencial",
    cancellation_reason: null,
    cancelled_at: null,
    checked_in_at: null,
    chief_complaint: "Dor de cabeça há 3",
    completed_at: null,
    created_at: "2025-10-10T15:56:59.112231+00:00",
    created_by: "87f2662c-9da7-45c0-9e05-521d9d92d105",
    doctor_id: "16e93000-7239-4865-85f6-7f89af3ce5cd",
    duration_minutes: 30,
    insurance_provider: "Unimed",
    notes: null,
    patient_notes: "Prefiro horário pela manhã",
    scheduled_at: "2025-10-10T15:56:58.937+00:00",
    status: "requested",
    updated_at: "2025-10-10T15:56:59.112231+00:00",
    updated_by: null
  },
  // mesma data
  {
    id: "c8d87a3a-f221-4e88-a71e-947c03f3a9c2",
    order_number: "APT-2025-0002",
    patient_id: "4b102ada-7d04-480a-a759-bae8a211973b",
    appointment_type: "presencial",
    chief_complaint: "Retorno de consulta",
    created_at: "2025-10-10T09:30:00.000+00:00",
    scheduled_at: "2025-10-10T09:30:00.000+00:00",
    doctor_id: "16e93000-7239-4865-85f6-7f89af3ce5cd",
    duration_minutes: 45,
    insurance_provider: "Amil",
    status: "requested"
  },
  // dia anterior 1
  {
    id: "a3b77a12-1f11-45f8-912b-99372cd6a711",
    order_number: "APT-2025-0003",
    patient_id: "57902ada-7d04-480a-a759-bae8a211973a",
    appointment_type: "teleconsulta",
    chief_complaint: "Tosse persistente",
    created_at: "2025-10-09T10:15:00.000+00:00",
    scheduled_at: "2025-10-09T10:15:00.000+00:00",
    doctor_id: "16e93000-7239-4865-85f6-7f89af3ce5cd",
    duration_minutes: 20,
    insurance_provider: "Bradesco Saúde",
    status: "confirmed"
  },
  // dia anterior 2
  {
    id: "f77a42e1-b1a3-41af-8b4f-b92e8372bb20",
    order_number: "APT-2025-0004",
    patient_id: "5a902ada-7d04-480a-a759-bae8a211973a",
    appointment_type: "presencial",
    chief_complaint: "Check-up anual",
    created_at: "2025-10-09T14:00:00.000+00:00",
    scheduled_at: "2025-10-09T14:00:00.000+00:00",
    doctor_id: "16e93000-7239-4865-85f6-7f89af3ce5cd",
    duration_minutes: 60,
    insurance_provider: "Unimed",
    status: "requested"
  },
  // dia seguinte
  {
    id: "b832a7e3-7319-4c22-b17b-922a6d4a9287",
    order_number: "APT-2025-0005",
    patient_id: "6c902ada-7d04-480a-a759-bae8a211973a",
    appointment_type: "presencial",
    chief_complaint: "Dor lombar",
    created_at: "2025-10-11T11:45:00.000+00:00",
    scheduled_at: "2025-10-11T11:45:00.000+00:00",
    doctor_id: "16e93000-7239-4865-85f6-7f89af3ce5cd",
    duration_minutes: 30,
    insurance_provider: "SulAmérica",
    status: "requested"
  },
  // outro qualquer (para variedade)
  {
    id: "d112f76a-24a1-41de-8d03-9e8a20a73b54",
    order_number: "APT-2025-0006",
    patient_id: "78902ada-7d04-480a-a759-bae8a211973a",
    appointment_type: "teleconsulta",
    chief_complaint: "Acompanhamento pós-cirurgia",
    created_at: "2025-10-10T18:00:00.000+00:00",
    scheduled_at: "2025-10-10T18:00:00.000+00:00",
    doctor_id: "16e93000-7239-4865-85f6-7f89af3ce5cd",
    duration_minutes: 25,
    insurance_provider: "Unimed",
    status: "requested"
  }
];



    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 [AgendamentoFiltrado, setAgendamentoFiltrado] = useState()


  let authHeader = getAuthorizationHeader() 


  // id do doutor
  // dias

  const FiltrarAgendamentos = (listaTodosAgendamentos) => {
   
      
  // cria um dicionário temporário
  let DictAgendamentosOrganizados = {};

  for (let i = 0; i < listaTodosAgendamentos.length; i++) {
    const agendamento = listaTodosAgendamentos[i];
    const DiaAgendamento = agendamento.scheduled_at.split("T")[0];

    console.log(DictAgendamentosOrganizados)

    if (DiaAgendamento in DictAgendamentosOrganizados) {
      // já existe a data → adiciona na lista
      DictAgendamentosOrganizados[DiaAgendamento].push(agendamento);
    } else {
      // não existe → cria nova key com uma lista
      DictAgendamentosOrganizados[DiaAgendamento] = [agendamento];
    }
  }

  // faz o set de uma vez só ✅
  setAgendamentosOrganizados(DictAgendamentosOrganizados);


  }

  const handleSave = (Dict) => {
    let DataAtual = dayjs()
    var myHeaders = new Headers();
    myHeaders.append("apikey", API_KEY);
    myHeaders.append("Authorization", authHeader);
    myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({
   "patient_id": Dict.patient_id,
   "doctor_id": Dict.doctor_id,
   "scheduled_at": DataAtual,
   "duration_minutes": 30,
   "appointment_type": "presencial",
   "chief_complaint": "Dor de cabeça há 3 ",
   "patient_notes": "Prefiro horário pela manhã",
   "insurance_provider": "Unimed",
   "created_by": "87f2662c-9da7-45c0-9e05-521d9d92d105"
});

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

fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions)
   .then(response => response.text())
   .then(result => console.log(result))
   .catch(error => console.log('error', error));

  }

  // Requisição inicial para mostrar os agendamentos do banco de dados
  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 => {FiltrarAgendamentos(Agendamentos); console.log(Agendamentos)})
      .catch(error => console.log('error', error));
  }, [])


  // Dados da fila de espera (sem alteração)
  const filaEsperaData = [
    { nome: 'Ricardo Pereira', email: 'ricardo.pereira@gmail.com', cpf: '444.777.666-55', telefone: '(79) 99123-4567', entrada: '25/09/2025 às 08:00' },
    { nome: 'Ana Costa', email: 'ana.costa@gmail.com', cpf: '321.654.987-00', telefone: '(79) 97777-3333', entrada: '25/09/2025 às 08:30' },
    { nome: 'Lucas Martins', email: 'lucas.martins@gmail.com', cpf: '777.666.555-33', telefone: '(79) 99654-3210', entrada: '25/09/2025 às 09:00' },
    { nome: 'João Souza', email: 'joao.souza@gmail.com', cpf: '987.654.321-00', telefone: '(79) 98888-2222', entrada: '25/09/2025 às 14:00' },
    { nome: 'Maria Silva', email: 'maria.silva@gmail.com', cpf: '123.456.789-00', telefone: '(79) 99999-1111', entrada: '25/09/2025 às 14:30' },
    { nome: 'Fernanda Lima', email: 'fernanda.lima@gmail.com', cpf: '888.999.000-22', telefone: '(79) 98877-6655', entrada: '26/09/2025 às 09:30' },
    { nome: 'Carlos Andrade', email: 'carlos.andrade@gmail.com', cpf: '222.555.888-11', telefone: '(79) 99876-5432', entrada: '26/09/2025 às 10:00' },
    { nome: 'Juliana Oliveira', email: 'juliana.o@gmail.com', cpf: '111.222.333-44', telefone: '(79) 98765-1234', entrada: '26/09/2025 às 11:30' },
  ];

  // Filtro da fila de espera (sem alteração)
  const filteredFila = filaEsperaData.filter(item =>
    item.nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
    item.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
    item.cpf.includes(searchTerm) ||
    item.telefone.includes(searchTerm)
  );

  // Lógica para filtrar os dados da AGENDA (AgendamentosMes)
  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, tercas, quartas, quintas, sextas]
    return ListaDiasDatas
  }

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

  const handleClickCancel = () => setPageConsulta(false)

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

      {!PageNovaConsulta ? (
        <div className='atendimento-eprocura'>
          <div className='busca-atendimento'>
            <div>
              <i className="fa-solid fa-calendar-day"></i>
              <input
                type="text"
                placeholder="Buscar atendimento por paciente..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
            <div>
              <select>
                <option value="" disabled selected>Agendar</option>
                <option value="">Atendimento</option>
                <option value="">Sessões</option>
                <option value="">Urgência</option>
              </select>
            </div>
          </div>

          <div className='unidade-selecionarprofissional'>
            <select>
              <option value="" disabled selected >Unidade</option>
              <option value="">Unidade Central</option>
              <option value="">Unidade Zona Norte</option>
              <option value="">Unidade Zona Oeste</option>
            </select>
            <input type="text" placeholder='Selecionar profissional' />
          </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>
                    
                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={filteredAgendamentos} />}
                    {tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={filteredAgendamentos} />}
                    {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={filteredAgendamentos} />}
                  </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</th>
                        <th>Email</th>
                        <th>CPF</th>
                        <th>Telefone</th>
                        <th>Entrou na fila de espera</th>
                      </tr>
                    </thead>
                    <tbody>
                      {filteredFila.map((item, index) => (
                        <tr key={index}>
                          <td>{item.nome}</td>
                          <td>{item.email}</td>
                          <td>{item.cpf}</td>
                          <td>{item.telefone}</td>
                          <td>{item.entrada}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )
            }
          </section>
        </div>
      ) : (
        <FormNovaConsulta onCancel={handleClickCancel} onSave={handleSave} />
      )}
    </div>
  )
}

export default Agendamento;