document.addEventListener('DOMContentLoaded', function () {
    const timeElement = document.getElementById('current-time');
    const statusMessage = document.getElementById('status-message');
    const clockInButton = document.getElementById('clock-in-btn');
    const clockOutButton = document.getElementById('clock-out-btn');

    function updateTime() {
        const now = new Date();
        timeElement.textContent = now.toLocaleTimeString('es-ES');
    }

    setInterval(updateTime, 1000);
    updateTime();

    function showToast(message, type = 'success') {
        const toast = document.createElement('div');
        toast.className = `toast ${type}`;
        toast.textContent = message;
        document.body.appendChild(toast);

        setTimeout(() => {
            toast.classList.add('show');
        }, 100);

        setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => {
                document.body.removeChild(toast);
            }, 300);
        }, 3000);
    }

    async function handleClockAction(action) {
        clockInButton.disabled = true;
        clockOutButton.disabled = true;

        try {
            const response = await fetch('api/track_time.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ action: action, employee_id: 1 }) // Hardcoded employee_id
            });

            const result = await response.json();

            if (result.success) {
                showToast(result.message);
                statusMessage.textContent = result.status;
                if (result.action === 'clock_in') {
                    clockOutButton.disabled = false;
                } else {
                    clockInButton.disabled = false;
                }
            } else {
                showToast(result.message, 'error');
                // Re-enable buttons based on assumed last state if error
                 if(action === 'clock_in') clockInButton.disabled = false; else clockOutButton.disabled = false;
            }
        } catch (error) {
            showToast('Error de conexión con el servidor.', 'error');
            if(action === 'clock_in') clockInButton.disabled = false; else clockOutButton.disabled = false;
        }
    }

    clockInButton.addEventListener('click', () => handleClockAction('clock_in'));
    clockOutButton.addEventListener('click', () => handleClockAction('clock_out'));

    // Initial state check
    async function checkInitialState() {
        try {
            const response = await fetch('api/track_time.php?employee_id=1');
            const result = await response.json();
            if(result.status) {
                 statusMessage.textContent = result.status;
                 if(result.last_action === 'clock_in'){
                    clockInButton.disabled = true;
                    clockOutButton.disabled = false;
                 } else {
                    clockInButton.disabled = false;
                    clockOutButton.disabled = true;
                 }
            }
        } catch(e) {
            // assume default state
            clockOutButton.disabled = true;
        }
    }

    checkInitialState();
});