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 [searchConsultas, setSearchConsultas] = useState('');
    const [searchFilaEspera, setSearchFilaEspera] = useState('');
    
   
    const [waitPage, setWaitPage] = useState(1);
    const [waitPerPage, setWaitPerPage] = useState(10);
    const [waitSortKey, setWaitSortKey] = useState(null);
    const [waitSortDir, setWaitSortDir] = useState('asc');


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


    const consultasDoDiaFiltradas = useMemo(() => {
        const consultas = DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')] || [];
        if (!searchConsultas.trim()) return consultas;
        const term = searchConsultas.toLowerCase();
        return consultas.filter(app => 
            app.medico_nome?.toLowerCase().includes(term) ||
            app.status?.toLowerCase().includes(term)
        );
    }, [DictAgendamentosOrganizados, selectedDay, searchConsultas]);

    
    const filaEsperaFiltrada = useMemo(() => {
        if (!searchFilaEspera.trim()) return filaEsperaData;
        const term = searchFilaEspera.toLowerCase();
        return filaEsperaData.filter(item =>
            item.Infos?.medico_nome?.toLowerCase().includes(term)
        );
    }, [filaEsperaData, searchFilaEspera]);

    const applySortingWaitlist = (arr) => {
        if (!Array.isArray(arr) || !waitSortKey) return arr;
        const copy = [...arr];
        if (waitSortKey === 'medico') {
            copy.sort((a, b) => (a?.Infos?.medico_nome || '').localeCompare(b?.Infos?.medico_nome || ''));
        } else if (waitSortKey === 'data') {
            copy.sort((a, b) => new Date(a?.agendamento?.created_at || 0) - new Date(b?.agendamento?.created_at || 0));
        }
        if (waitSortDir === 'desc') copy.reverse();
        return copy;
    };

    const filaEsperaOrdenada = applySortingWaitlist(filaEsperaFiltrada);

    // Paginação
    const waitTotalPages = Math.ceil(filaEsperaOrdenada.length / waitPerPage) || 1;
    const waitIndiceInicial = (waitPage - 1) * waitPerPage;
    const waitIndiceFinal = waitIndiceInicial + waitPerPage;
    const filaEsperaPaginada = filaEsperaOrdenada.slice(waitIndiceInicial, waitIndiceFinal);

    const gerarNumerosWaitPages = () => {
        const paginas = [];
        const paginasParaMostrar = 5;
        let inicio = Math.max(1, waitPage - Math.floor(paginasParaMostrar / 2));
        let fim = Math.min(waitTotalPages, inicio + paginasParaMostrar - 1);
        inicio = Math.max(1, fim - paginasParaMostrar + 1);
        for (let i = inicio; i <= fim; i++) {
            paginas.push(i);
        }
        return paginas;
    };


    useEffect(() => {
        setWaitPage(1);
    }, [searchFilaEspera, waitSortKey, waitSortDir]);

    const activeButtonStyle = {
        backgroundColor: '#1B2A41', 
        color: 'white',
        padding: '6px 12px',
        fontSize: '0.875rem',
        borderRadius: '8px',
        border: '1px solid white', 
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
        cursor: 'pointer'
    };

    const inactiveButtonStyle = {
        backgroundColor: '#1B2A41', 
        color: 'white',
        padding: '6px 12px',
        fontSize: '0.875rem',
        borderRadius: '8px',
        border: '1px solid #1B2A41', 
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
        cursor: 'pointer'
    };



    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 
                    style={PageNovaConsulta ? activeButtonStyle : inactiveButtonStyle} 
                    onClick={() => {
                        setPageConsulta(true);
                        setFiladeEspera(false);
                    }}
                >
                    <i className="bi bi-plus-circle"></i> Solicitar Agendamento
                </button>
                
                <button 
                    style={FiladeEspera && !PageNovaConsulta ? activeButtonStyle : inactiveButtonStyle} 
                    onClick={() => {
                        setFiladeEspera(!FiladeEspera);
                        setPageConsulta(false);
                    }}
                >
                    <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="mb-3">
                                        <input
                                            type="text"
                                            className="form-control form-control-sm"
                                            placeholder="Buscar por médico ou status..."
                                            value={searchConsultas}
                                            onChange={(e) => setSearchConsultas(e.target.value)}
                                        />
                                    </div>
                                    
                                    <div className="appointments-list">
                                        <h4>Consultas para {selectedDay.format('DD/MM')}</h4>
                                        {(consultasDoDiaFiltradas.length > 0) ? (
                                            consultasDoDiaFiltradas.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="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 médico..."
                                                            value={searchFilaEspera}
                                                            onChange={(e) => setSearchFilaEspera(e.target.value)}
                                                        />
                                                        <small className="text-muted">Digite o nome do médico</small>
                                                    </div>
                                                    
                                                    <div className="d-flex align-items-center gap-2 mb-3">
                                                        <span className="text-muted small">Ordenar por:</span>
                                                        {(() => {
                                                            const sortValue = waitSortKey ? `${waitSortKey}-${waitSortDir}` : '';
                                                            return (
                                                                <select
                                                                    className="form-select compact-select sort-select w-auto"
                                                                    value={sortValue}
                                                                    onChange={(e) => {
                                                                        const v = e.target.value;
                                                                        if (!v) { setWaitSortKey(null); setWaitSortDir('asc'); return; }
                                                                        const [k, d] = v.split('-');
                                                                        setWaitSortKey(k);
                                                                        setWaitSortDir(d);
                                                                    }}
                                                                >
                                                                    <option value="">Sem ordenação</option>
                                                                    <option value="medico-asc">Médico (A-Z)</option>
                                                                    <option value="medico-desc">Médico (Z-A)</option>
                                                                    <option value="data-asc">Data (mais antiga)</option>
                                                                    <option value="data-desc">Data (mais recente)</option>
                                                                </select>
                                                            );
                                                        })()}
                                                    </div>
                                                    
                                                    <div className="mt-3">
                                                        <div className="contador-pacientes">
                                                            {filaEsperaFiltrada.length} DE {filaEsperaData.length} SOLICITAÇÕES ENCONTRADAS
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <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>
                                                            {filaEsperaPaginada.length > 0 ? (filaEsperaPaginada.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>
                                                    
                                                    {filaEsperaFiltrada.length > 0 && (
                                                        <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={waitPerPage}
                                                                    onChange={(e) => {
                                                                        setWaitPerPage(Number(e.target.value));
                                                                        setWaitPage(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 {waitPage} de {waitTotalPages} • 
                                                                    Mostrando {waitIndiceInicial + 1}-{Math.min(waitIndiceFinal, filaEsperaFiltrada.length)} de {filaEsperaFiltrada.length}
                                                                </span>
                                                                
                                                                <nav>
                                                                    <ul className="pagination pagination-sm mb-0">
                                                                        <li className={`page-item ${waitPage === 1 ? 'disabled' : ''}`}>
                                                                            <button className="page-link" onClick={() => setWaitPage(p => Math.max(1, p - 1))}>
                                                                                <i className="bi bi-chevron-left"></i>
                                                                            </button>
                                                                        </li>
                                                                        
                                                                        {gerarNumerosWaitPages().map(pagina => (
                                                                            <li key={pagina} className={`page-item ${pagina === waitPage ? 'active' : ''}`}>
                                                                                <button className="page-link" onClick={() => setWaitPage(pagina)}>
                                                                                    {pagina}
                                                                                </button>
                                                                            </li>
                                                                        ))}
                                                                        
                                                                        <li className={`page-item ${waitPage === waitTotalPages ? 'disabled' : ''}`}>
                                                                            <button className="page-link" onClick={() => setWaitPage(p => Math.min(waitTotalPages, p + 1))}>
                                                                                <i className="bi bi-chevron-right"></i>
                                                                            </button>
                                                                        </li>
                                                                    </ul>
                                                                </nav>
                                                            </div>
                                                        </div>
                                                    )}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        )}
                    </section>
                </div>
            ) : (
                <AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
            )}


            {isCancelModalOpen && (
                <div
                    className="modal fade show delete-modal"
                    style={{
                        display: "block",
                        backgroundColor: "rgba(0, 0, 0, 0.5)",
                    }}
                    tabIndex="-1"
                >
                    <div className="modal-dialog modal-dialog-centered">
                        <div className="modal-content">
                            <div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
                                <h5 className="modal-title">
                                    Confirmação de Cancelamento
                                </h5>
                            </div>

                            <div className="modal-body">
                                <p>Qual o motivo do cancelamento?</p>
                                <textarea
                                    className="form-control"
                                    rows="3"
                                    value={cancellationReason}
                                    onChange={(e) => setCancellationReason(e.target.value)}
                                    placeholder="Ex: Precisei viajar, motivo pessoal, etc."
                                ></textarea>
                            </div>

                            <div className="modal-footer">
                                <button
                                    type="button"
                                    className="btn btn-primary"
                                    onClick={() => setIsCancelModalOpen(false)}
                                >
                                    Cancelar
                                </button>

                                <button
                                    type="button"
                                    className="btn btn-danger"
                                    onClick={executeCancellation}
                                >
                                    Excluir
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    )
}


export default Agendamento;