document.addEventListener("DOMContentLoaded", function() {
    const monthNames = [
        "January", "February", "March", "April", "May", "June",
        "July", "August", "September", "October", "November", "December"
    ];
    const calendarMonth = document.getElementById("calendarMonth");
    const calendarYear = document.getElementById("calendarYear");
    const calendarTableBody = document.getElementById("calendarTable").getElementsByTagName('tbody')[0];
    const prevMonthBtn = document.getElementById("prevMonthBtn");
    const nextMonthBtn = document.getElementById("nextMonthBtn");

    // Only allow current year, disable year dropdown
    const currentYear = new Date().getFullYear();
    let opt = document.createElement("option");
    opt.value = currentYear;
    opt.text = currentYear;
    calendarYear.appendChild(opt);
    calendarYear.disabled = true;

    // Populate month dropdown
    for (let m = 0; m < 12; m++) {
        let opt = document.createElement("option");
        opt.value = m;
        opt.text = monthNames[m];
        calendarMonth.appendChild(opt);
    }

    // Set default to today
    let today = new Date();
    today.setHours(0,0,0,0);
    let selectedMonth = today.getMonth();
    let selectedYear = currentYear;
    let selectedDay = today.getDate();
    let selectedTime = ""; // Add this at the top

    calendarMonth.value = selectedMonth;
    calendarYear.value = selectedYear;

    function isLeapYear(year) {
        return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
    }

    function getDaysInMonth(month, year) {
        if (month === 1) { // February
            return isLeapYear(year) ? 29 : 28;
        }
        return [31,28,31,30,31,30,31,31,30,31,30,31][month];
    }

    function generateCalendar(month, year, day) {
        calendarTableBody.innerHTML = "";
        let firstDay = new Date(year, month, 1).getDay();
        let daysInMonth = getDaysInMonth(month, year);
        let date = 1;

        for (let i = 0; i < 6; i++) {
            let row = document.createElement("tr");
            for (let j = 0; j < 7; j++) {
                let cell = document.createElement("td");
                if (i === 0 && j < firstDay) {
                    cell.innerHTML = "";
                } else if (date > daysInMonth) {
                    cell.innerHTML = "";
                } else {
                    let btn = document.createElement("button");
                    btn.className = "calendar-day";
                    btn.innerText = date;

                    // Disable past days
                    let thisDay = new Date(year, month, date, 23, 59, 59, 999);
                    if (thisDay < today) {
                        btn.disabled = true;
                        btn.classList.add("calendar-day-disabled");
                    } else {
                        btn.onclick = function() {
                            selectedDay = date;
                            document.querySelectorAll(".calendar-day.selected").forEach(b => b.classList.remove("selected"));
                            btn.classList.add("selected");
                            updateSummary();
                            updateConfirmButtonState();
                            updateMonthNav();
                        };
                    }

                    if (date === day && !btn.disabled) btn.classList.add("selected");
                    cell.appendChild(btn);
                    date++;
                }
                row.appendChild(cell);
            }
            calendarTableBody.appendChild(row);
            if (date > daysInMonth) break;
        }

        updateMonthNav();
        generateTimeSlots(); // Add this line
        updateConfirmButtonState && updateConfirmButtonState();
    }

    const confirmBtn = document.querySelector('.appointment-confirm-btn');

    function updateConfirmButtonState() {
        const service = document.getElementById('service').value;
        const provider = document.getElementById('provider').value;
        const hasDate = selectedDay && selectedMonth !== undefined && selectedYear;
        
        if (
            service !== "Select a service" && 
            provider !== "Select a provider" && 
            hasDate && 
            selectedTime
        ) {
            confirmBtn.disabled = false;
            confirmBtn.classList.remove('disabled');
        } else {
            confirmBtn.disabled = true;
            confirmBtn.classList.add('disabled');
        }
    }

    function generateTimeSlots() {
        // Example time slots, you can customize as needed
        const times = [
            "9:00 AM", "10:00 AM", "11:00 AM",
            "1:00 PM", "2:00 PM", "3:00 PM"
        ];
        const timesRow = document.getElementById("times-row");
        timesRow.innerHTML = "";
        times.forEach(time => {
            const btn = document.createElement("button");
            btn.className = "calendar-time-btn";
            btn.textContent = time;
            btn.onclick = function() {
                selectedTime = time;
                document.querySelectorAll(".calendar-time-btn.selected").forEach(b => b.classList.remove("selected"));
                btn.classList.add("selected");
                updateConfirmButtonState();
                updateSummary();
            };
            timesRow.appendChild(btn);
        });
    }

    function updateMonthNav() {
        // Only enable prev/next if allowed by rules
        // Prev: only if current month is after today's month
        // Next: only if last day of month is selected

        // Prev month logic
        if (selectedMonth > today.getMonth()) {
            prevMonthBtn.disabled = false;
            prevMonthBtn.classList.remove("calendar-nav-disabled");
        } else {
            prevMonthBtn.disabled = true;
            prevMonthBtn.classList.add("calendar-nav-disabled");
        }

        // Next month logic
        let daysInMonth = getDaysInMonth(selectedMonth, selectedYear);
        let isLastDay = selectedDay === daysInMonth;
        if (isLastDay && selectedMonth < 11) {
            nextMonthBtn.disabled = false;
            nextMonthBtn.classList.remove("calendar-nav-disabled");
            calendarMonth.disabled = false;
        } else {
            nextMonthBtn.disabled = true;
            nextMonthBtn.classList.add("calendar-nav-disabled");
            // Disable month dropdown if not last day
            calendarMonth.disabled = true;
        }
    }

    function updateSummary() {
        // Update the summary section with the selected date
        const summaryRows = document.querySelectorAll('.summary-row');
        const service = document.getElementById('service').value;
        const provider = document.getElementById('provider').value;
        let dateStr = `${monthNames[selectedMonth]} ${selectedDay}, ${selectedYear}`;
        summaryRows[0].children[1].textContent = service !== "Select a service" ? service : "";
        summaryRows[1].children[1].textContent = provider !== "Select a provider" ? provider : "";
        summaryRows[2].children[1].textContent = `${dateStr}`;
        document.getElementById('summary-time').textContent = selectedTime;
    }

    // Initial calendar and summary
    generateCalendar(selectedMonth, selectedYear, selectedDay);
    updateSummary();

    calendarMonth.onchange = function() {
        // Only allow selecting months if enabled (when last day is selected)
        if (calendarMonth.disabled) {
            calendarMonth.value = selectedMonth;
            return;
        }
        let newMonth = parseInt(calendarMonth.value);
        if (newMonth < today.getMonth()) {
            calendarMonth.value = selectedMonth;
            return;
        }
        selectedMonth = newMonth;
        selectedDay = 1;
        generateCalendar(selectedMonth, selectedYear, selectedDay);
        updateSummary();
    };

    // Year dropdown is disabled, so no change needed
    calendarYear.onchange = function() {};

    prevMonthBtn.onclick = function() {
        if (prevMonthBtn.disabled) return;
        selectedMonth--;
        calendarMonth.value = selectedMonth;
        selectedDay = 1;
        generateCalendar(selectedMonth, selectedYear, selectedDay);
        updateSummary();
    };
    nextMonthBtn.onclick = function() {
        if (nextMonthBtn.disabled) return;
        selectedMonth++;
        calendarMonth.value = selectedMonth;
        selectedDay = 1;
        generateCalendar(selectedMonth, selectedYear, selectedDay);
        updateSummary();
    };

    // Update summary when service/provider changes
    document.getElementById('service').onchange = updateSummary;
    document.getElementById('provider').onchange = updateSummary;

    document.getElementById('confirmation-done').onclick = function() {
        // Hide confirmation modal and redirect to dashboard
        document.getElementById('confirmation-modal').style.display = 'none';
        window.location.href = 'dashboard.html';
    };

    function showConfirmation() {
        const service = document.getElementById('service').value;
        const provider = document.getElementById('provider').value;
        const date = `${monthNames[selectedMonth]} ${selectedDay}, ${selectedYear}`;
        const time = selectedTime;
        const location = "Main Clinic";

        // Save appointment data
        let appointments = JSON.parse(localStorage.getItem("appointments")) || [];
        appointments.push({
            date: date,
            time: time,
            doctor: provider,
            type: service,
            status: "Scheduled",
            location: location
        });
        localStorage.setItem("appointments", JSON.stringify(appointments));

        // Show confirmation overlay
        const overlay = document.getElementById('confirmation-overlay');
        const details = `
            <div class="confirmation-modal">
                <div class="approved-status">
                    <div class="approved-icon">✓</div>
                    <h1>Appointment Confirmed!</h1>
                    <p class="approved-message">
                        Your appointment has been successfully scheduled. A confirmation has been sent to your email. 
                        Please review the details below.
                    </p>
                </div>
                <section class="approved-details-card">
                    <h2>Appointment Details</h2>
                    <div class="approved-details-table">
                        <div class="approved-details-row">
                            <span class="approved-details-label">Date</span>
                            <span class="approved-details-value">${date}</span>
                        </div>
                        <div class="approved-details-row">
                            <span class="approved-details-label">Time</span>
                            <span class="approved-details-value">${time}</span>
                        </div>
                        <div class="approved-details-row">
                            <span class="approved-details-label">Provider</span>
                            <span class="approved-details-value">${provider}</span>
                        </div>
                        <div class="approved-details-row">
                            <span class="approved-details-label">Service</span>
                            <span class="approved-details-value">${service}</span>
                        </div>
                        <div class="approved-details-row">
                            <span class="approved-details-label">Location</span>
                            <span class="approved-details-value">${location}</span>
                        </div>
                    </div>
                    <div class="approved-details-actions">
                        <button onclick="handleDone()" class="approved-btn">Done</button>
                    </div>
                </section>
            </div>
        `;
        
        overlay.innerHTML = details;
        overlay.style.display = 'flex';
    }

    // Add this function to handle the Done button click
    function handleDone() {
        document.getElementById('confirmation-overlay').style.display = 'none';
        window.location.href = 'dashboard.html';
    }

    // Update the confirm button click handler
    document.querySelector('.appointment-confirm-btn').onclick = function() {
        if (!this.disabled) {
            showConfirmation();
        }
    };

    // Disable confirm button if no time is selected
    function updateConfirmButtonState() {
        const service = document.getElementById('service').value;
        const provider = document.getElementById('provider').value;
        const hasDate = selectedDay && selectedMonth !== undefined && selectedYear;
        
        if (
            service !== "Select a service" && 
            provider !== "Select a provider" && 
            hasDate && 
            selectedTime
        ) {
            confirmBtn.disabled = false;
            confirmBtn.classList.remove('disabled');
        } else {
            confirmBtn.disabled = true;
            confirmBtn.classList.add('disabled');
        }
    }
});