import React, { useState, useMemo, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import API_KEY from '../components/utils/apiKeys.js';
import AgendamentoCadastroManager from '../pages/AgendamentoCadastroManager.jsx';
import { useAuth } from '../components/utils/AuthProvider.js';
import dayjs from 'dayjs';
import 'dayjs/locale/pt-br';
import isBetween from 'dayjs/plugin/isBetween';
import localeData from 'dayjs/plugin/localeData';
import { ChevronLeft, ChevronRight, Edit, Trash2 } from 'lucide-react';
import "../pages/style/Agendamento.css";
import '../pages/style/FilaEspera.css';
import Spinner from '../components/Spinner.jsx';

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

const Agendamento = ({ setDictInfo }) => {
  const navigate = useNavigate();
  const { getAuthorizationHeader, user } = useAuth();

  const [isLoading, setIsLoading] = useState(true);
  const [DictAgendamentosOrganizados, setDictAgendamentosOrganizados] = useState({});
  const [filaEsperaData, setFilaDeEsperaData] = useState([]);
  const [FiladeEspera, setFiladeEspera] = useState(false);
  const [PageNovaConsulta, setPageConsulta] = useState(false);

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

  const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
  const [appointmentToCancel, setAppointmentToCancel] = useState(null);
  const [cancellationReason, setCancellationReason] = useState('');

  const authHeader = useMemo(() => getAuthorizationHeader(), [getAuthorizationHeader]);

  useEffect(() => {
    const carregarDados = async () => {
      const patientId = user?.patient_id || "6e7f8829-0574-42df-9290-8dbb70f75ada";

      if (!authHeader) {
        console.warn("Header de autorização não disponível.");
        setIsLoading(false);
        return;
      }

      setIsLoading(true);
      try {
        const myHeaders = new Headers({ "Authorization": authHeader, "apikey": API_KEY });
        const requestOptions = { method: 'GET', headers: myHeaders };
        const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select=*,doctors(full_name)&patient_id=eq.${patientId}`, requestOptions);

        if (!response.ok) throw new Error(`Erro na requisição: ${response.statusText}`);

        const consultasBrutas = await response.json() || [];

        const newDict = {};
        const newFila = [];

        for (const agendamento of consultasBrutas) {
          const agendamentoMelhorado = {
            ...agendamento,
            medico_nome: agendamento.doctors?.full_name || 'Médico não informado'
          };

          if (agendamento.status === "requested") {
            newFila.push({ agendamento: agendamentoMelhorado, Infos: agendamentoMelhorado });
          } else {
            const diaAgendamento = dayjs(agendamento.scheduled_at).format("YYYY-MM-DD");
            if (newDict[diaAgendamento]) {
              newDict[diaAgendamento].push(agendamentoMelhorado);
            } else {
              newDict[diaAgendamento] = [agendamentoMelhorado];
            }
          }
        }

        for (const key in newDict) {
          newDict[key].sort((a, b) => a.scheduled_at.localeCompare(b.scheduled_at));
        }

        setDictAgendamentosOrganizados(newDict);
        setFilaDeEsperaData(newFila);

      } catch (err) {
        console.error('Falha ao buscar ou processar agendamentos:', err);
        setDictAgendamentosOrganizados({});
        setFilaDeEsperaData([]);
      } finally {
        setIsLoading(false);
      }
    };

    carregarDados();
  }, [authHeader, user]);

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

    try {
      const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${id}`, requestOptions);
      if (!response.ok) throw new Error('Falha ao atualizar o status.');
      return true;
    } catch (error) {
      console.error('Erro de rede/servidor:', error);
      return false;
    }
  };

  const handleCancelClick = (appointmentId) => {
    setAppointmentToCancel(appointmentId);
    setCancellationReason('');
    setIsCancelModalOpen(true);
  };

  const executeCancellation = async () => {
    if (!appointmentToCancel) return;
    setIsLoading(true);
    const motivo = cancellationReason.trim() || "Cancelado pelo paciente (motivo não especificado)";
    const success = await updateAppointmentStatus(appointmentToCancel, {
      status: "cancelled",
      cancellation_reason: motivo,
      updated_at: new Date().toISOString()
    });

    setIsCancelModalOpen(false);
    setAppointmentToCancel(null);
    setCancellationReason('');

    if (success) {
      alert("Solicitação cancelada com sucesso!");

      setDictAgendamentosOrganizados(prev => {
        const newDict = { ...prev };
        for (const date in newDict) {
          newDict[date] = newDict[date].filter(app => app.id !== appointmentToCancel);
        }
        return newDict;
      });
      setFilaDeEsperaData(prev => prev.filter(item => item.agendamento.id !== appointmentToCancel));
    } else {
      alert("Falha ao cancelar a solicitação.");
    }
    setIsLoading(false);
  };

  const handleQuickJumpChange = (type, value) => setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
  const applyQuickJump = () => {
    const newDate = dayjs().year(quickJump.year).month(quickJump.month).date(1);
    setCurrentDate(newDate);
    setSelectedDay(newDate);
  };
  const dateGrid = useMemo(() => {
    const grid = [];
    const startOfMonth = currentDate.startOf('month');
    let currentDay = startOfMonth.subtract(startOfMonth.day(), 'day');
    for (let i = 0; i < 42; i++) {
      grid.push(currentDay);
      currentDay = currentDay.add(1, 'day');
    }
    return grid;
  }, [currentDate]);
  const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
  const handleDateClick = (day) => setSelectedDay(day);

  if (isLoading) {
    return (
      <div className="form-container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
        <Spinner />
      </div>
    );
  }

  return (
    <div>
      <h1>Minhas consultas</h1>
      <div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
        <button
          className="btn-adicionar-consulta"
          onClick={() => {
            setPageConsulta(true);
            setFiladeEspera(false);
          }}
          style={{
            backgroundColor: PageNovaConsulta ? '#1d4ed8' : undefined
          }}
        >
          <i className="bi bi-plus-circle"></i> Solicitar Agendamento
        </button>
        <button
          className="btn-adicionar-consulta"
          onClick={() => {
            setFiladeEspera(!FiladeEspera);
            setPageConsulta(false);
          }}
          style={{
            backgroundColor: FiladeEspera && !PageNovaConsulta ? '#1d4ed8' : undefined
          }}
        >
          <i className="bi bi-list-task me-1"></i> Fila de Espera ({filaEsperaData.length})
        </button>
      </div>

      {!PageNovaConsulta ? (
        <div className='atendimento-eprocura'>
          <section className='calendario-ou-filaespera'>
            {!FiladeEspera ? (
              <div className="calendar-wrapper">
                <div className="calendar-info-panel">
                  <div className="info-date-display"><span>{selectedDay.format('MMM')}</span><strong>{selectedDay.format('DD')}</strong></div>
                  <div className="info-details"><h3>{selectedDay.format('dddd')}</h3><p>{selectedDay.format('D [de] MMMM [de] YYYY')}</p></div>
                  <div className="appointments-list">
                    <h4>Consultas para {selectedDay.format('DD/MM')}</h4>
                    {(DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]?.length > 0) ? (
                      DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')].map(app => (
                        <div key={app.id} className="appointment-item" data-status={app.status}>
                          <div className="item-time">{dayjs(app.scheduled_at).format('HH:mm')}</div>
                          <div className="item-details">
                            <span>Consulta com Dr(a). {app.medico_nome}</span>
                          </div>
                          <div className='item-actions'>
                            {app.status !== 'cancelled' && dayjs(app.scheduled_at).isAfter(dayjs()) && (
                              <button className="btn btn-sm btn-outline-danger" onClick={() => handleCancelClick(app.id)} title="Cancelar Consulta">
                                <Trash2 size={16} />
                              </button>
                            )}
                          </div>
                        </div>
                      ))
                    ) : (<div className="no-appointments-info"><p>Nenhuma consulta agendada para esta data.</p></div>)}
                  </div>
                </div>
                <div className="calendar-main">
                  <div className="calendar-legend">
                    <div className="legend-item" data-status="completed">Realizado</div>
                    <div className="legend-item" data-status="confirmed">Confirmado</div>
                    <div className="legend-item" data-status="agendado">Agendado</div>
                    <div className="legend-item" data-status="cancelled">Cancelado</div>
                  </div>
                  <div className="calendar-controls">
                    <div className="date-indicator">
                      <h2>{currentDate.format('MMMM [de] YYYY')}</h2>
                      <div className="quick-jump-controls" style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
                        <select value={quickJump.month} onChange={(e) => handleQuickJumpChange('month', e.target.value)} className="form-select form-select-sm w-auto">
                          {dayjs.months().map((month, index) => (<option key={index} value={index}>{month.charAt(0).toUpperCase() + month.slice(1)}</option>))}
                        </select>
                        <select value={quickJump.year} onChange={(e) => handleQuickJumpChange('year', e.target.value)} className="form-select form-select-sm w-auto">
                          {Array.from({ length: 11 }, (_, i) => dayjs().year() - 5 + i).map(year => (<option key={year} value={year}>{year}</option>))}
                        </select>
                        <button className="btn btn-sm btn-outline-primary" onClick={applyQuickJump} disabled={quickJump.month === currentDate.month() && quickJump.year === currentDate.year()}>Ir</button>
                      </div>
                    </div>
                    <div className="nav-buttons">
                      <button onClick={() => setCurrentDate(c => c.subtract(1, 'month'))}><ChevronLeft size={20} /></button>
                      <button onClick={() => setCurrentDate(dayjs())}>Hoje</button>
                      <button onClick={() => setCurrentDate(c => c.add(1, 'month'))}><ChevronRight size={20} /></button>
                    </div>
                  </div>
                  <div className="calendar-grid">
                    {weekDays.map(day => <div key={day} className="day-header">{day}</div>)}
                    {dateGrid.map((day, index) => {
                      const appointmentsOnDay = DictAgendamentosOrganizados[day.format('YYYY-MM-DD')] || [];
                      const cellClasses = `day-cell ${day.isSame(currentDate, 'month') ? 'current-month' : 'other-month'} ${day.isSame(dayjs(), 'day') ? 'today' : ''} ${day.isSame(selectedDay, 'day') ? 'selected' : ''}`;
                      return (
                        <div key={index} className={cellClasses} onClick={() => handleDateClick(day)}>
                          <span>{day.format('D')}</span>
                          {appointmentsOnDay.length > 0 && <div className="appointments-indicator">{appointmentsOnDay.length}</div>}
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
            ) : (
              <div className="page-content table-paciente-container">
                <section className="row">
                  <div className="col-12">
                    <div className="card table-paciente-card">
                      <div className="card-header"><h4 className="card-title mb-0">Minhas Solicitações em Fila de Espera</h4></div>
                      <div className="card-body">
                        <div className="table-responsive">
                          <table className="table table-striped table-hover">
                            <thead>
                              <tr>
                                <th>Médico Solicitado</th>
                                <th>Data da Solicitação</th>
                                <th>Ações</th>
                              </tr>
                            </thead>
                            <tbody>
                              {filaEsperaData.length > 0 ? (filaEsperaData.map((item) => (
                                <tr key={item.agendamento.id}>
                                  <td>Dr(a). {item.Infos?.medico_nome}</td>
                                  <td>{dayjs(item.agendamento.created_at).format('DD/MM/YYYY HH:mm')}</td>
                                  <td>
                                    <button className="btn btn-sm btn-danger" onClick={() => handleCancelClick(item.agendamento.id)}>
                                      <i className="bi bi-trash me-1"></i> Cancelar
                                    </button>
                                  </td>
                                </tr>
                              ))) : (
                                <tr>
                                  <td colSpan="3" className="text-center py-4">
                                    <div className="text-muted">Nenhuma solicitação na fila de espera.</div>
                                  </td>
                                </tr>
                              )}
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            )}
          </section>
        </div>
      ) : (
        <AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
      )}

      {isCancelModalOpen && (
        <div className="modal-overlay">
          <div className="modal-content" style={{ maxWidth: '400px' }}>
            <div className="modal-header" style={{ backgroundColor: '#fee2e2', borderBottom: '1px solid #fca5a5', padding: '15px', borderRadius: '8px 8px 0 0' }}>
              <h4 style={{ margin: 0, color: '#dc2626' }}>Confirmação de Cancelamento</h4>
              <button className="close-button" onClick={() => setIsCancelModalOpen(false)} style={{ background: 'none', border: 'none', fontSize: '1.5rem', cursor: 'pointer' }}>&times;</button>
            </div>
            <div className="modal-body" style={{ padding: '20px' }}>
              <p>Qual o motivo do cancelamento?</p>
              <textarea
                value={cancellationReason}
                onChange={(e) => setCancellationReason(e.target.value)}
                placeholder="Ex: Precisei viajar, motivo pessoal, etc."
                rows="4"
                style={{ width: '100%', padding: '10px', resize: 'none', border: '1px solid #ccc', borderRadius: '4px' }}
              ></textarea>
            </div>
            <div className="modal-footer" style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', padding: '15px', borderTop: '1px solid #eee' }}>
              <button
                className="btn btn-secondary"
                onClick={() => setIsCancelModalOpen(false)}
                style={{ backgroundColor: '#6c757d', color: 'white', border: 'none', padding: '8px 15px', borderRadius: '4px' }}
              >
                Cancelar
              </button>
              <button
                className="btn btn-danger"
                onClick={executeCancellation}
                style={{ backgroundColor: '#dc3545', color: 'white', border: 'none', padding: '8px 15px', borderRadius: '4px' }}
              >
                <Trash2 size={16} style={{ marginRight: '5px' }} /> Excluir
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

export default Agendamento;
