script.js

document.addEventListener('DOMContentLoaded', () => {
    const medForm = document.getElementById('med-form');
    const medicineList = document.getElementById('medicine-list');
    const totalMedsEl = document.getElementById('total-meds');
    const takenTodayEl = document.getElementById('taken-today');

    // State
    let medicines = JSON.parse(localStorage.getItem('medicines')) || [];

    // Initialize
    renderMedicines();
    updateStats();

    // Event Listeners
    medForm.addEventListener('submit', (e) => {
        e.preventDefault();
        
        const nameInput = document.getElementById('med-name');
        const dosageInput = document.getElementById('med-dosage');
        const timeInput = document.getElementById('med-time');

        const newMedicine = {
            id: Date.now().toString(),
            name: nameInput.value,
            dosage: dosageInput.value,
            time: timeInput.value,
            taken: false,
            dateAdded: new Date().toLocaleDateString()
        };

        medicines.push(newMedicine);
        saveToLocalStorage();
        
        // Clear form
        nameInput.value = '';
        dosageInput.value = '';
        timeInput.value = '';

        renderMedicines();
        updateStats();
    });

    // Delegated events for check and delete
    medicineList.addEventListener('click', (e) => {
        const checkBtn = e.target.closest('.btn-check');
        const deleteBtn = e.target.closest('.btn-delete');

        if (checkBtn) {
            const id = checkBtn.dataset.id;
            toggleTaken(id);
        }

        if (deleteBtn) {
            const id = deleteBtn.dataset.id;
            deleteMedicine(id);
        }
    });

    // Functions
    function toggleTaken(id) {
        medicines = medicines.map(med => {
            if (med.id === id) {
                return { ...med, taken: !med.taken };
            }
            return med;
        });
        saveToLocalStorage();
        renderMedicines();
        updateStats();
    }

    function deleteMedicine(id) {
        // Add a slight animation out before deleting
        const item = document.querySelector(`.med-item[data-id="${id}"]`);
        if (item) {
            item.style.transform = 'scale(0.9)';
            item.style.opacity = '0';
            
            setTimeout(() => {
                medicines = medicines.filter(med => med.id !== id);
                saveToLocalStorage();
                renderMedicines();
                updateStats();
            }, 300);
        }
    }

    function renderMedicines() {
        if (medicines.length === 0) {
            medicineList.innerHTML = `
                <div style="text-align: center; color: var(--text-muted); padding: 2rem;">
                    <i class="fa-solid fa-leaf" style="font-size: 2rem; margin-bottom: 1rem; opacity: 0.5;"></i>
                    <p>No medicines scheduled. Enjoy the peace of the forest.</p>
                </div>
            `;
            return;
        }

        // Sort by time
        const sortedMeds = [...medicines].sort((a, b) => a.time.localeCompare(b.time));

        medicineList.innerHTML = sortedMeds.map(med => `
            <div class="med-item ${med.taken ? 'taken' : ''}" data-id="${med.id}">
                <div class="med-info">
                    <div class="med-time">${formatTime(med.time)}</div>
                    <div class="med-details">
                        <h4 class="med-name">${med.name}</h4>
                        <p>${med.dosage}</p>
                    </div>
                </div>
                <div class="med-actions">
                    <button class="btn-icon btn-check" data-id="${med.id}" title="${med.taken ? 'Mark as not taken' : 'Mark as taken'}">
                        <i class="fa-solid ${med.taken ? 'fa-rotate-left' : 'fa-check'}"></i>
                    </button>
                    <button class="btn-icon btn-delete" data-id="${med.id}" title="Delete">
                        <i class="fa-solid fa-trash"></i>
                    </button>
                </div>
            </div>
        `).join('');
    }

    function updateStats() {
        totalMedsEl.textContent = medicines.length;
        const takenCount = medicines.filter(med => med.taken).length;
        takenTodayEl.textContent = takenCount;
    }

    function saveToLocalStorage() {
        localStorage.setItem('medicines', JSON.stringify(medicines));
    }

    // Helper: Convert 24h to 12h format
    function formatTime(time24) {
        if (!time24) return '';
        const [hours24, minutes] = time24.split(':');
        let hours = parseInt(hours24, 10);
        const ampm = hours >= 12 ? 'PM' : 'AM';
        
        hours = hours % 12;
        hours = hours ? hours : 12; // the hour '0' should be '12'
        
        return `${hours}:${minutes} ${ampm}`;
    }
});