<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($title ?? 'Zen Mode - OTIS') ?></title>
    <!-- Use Bootstrap RTL -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;800&display=swap" rel="stylesheet">
    <style>
        body {
            background-color: #020617; /* Slate 950 */
            color: #f8fafc;
            font-family: 'Cairo', sans-serif;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        .zen-top {
            padding: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .timer-container {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .timer-circle {
            width: 350px;
            height: 350px;
            border-radius: 50%;
            border: 8px solid #1e293b;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            box-shadow: 0 0 50px rgba(13, 110, 253, 0.1);
            transition: all 0.3s ease;
        }
        .timer-circle.active {
            border-color: #3b82f6; /* Blue 500 */
            box-shadow: 0 0 80px rgba(59, 130, 246, 0.3);
        }
        .timer-circle.break {
            border-color: #10b981; /* Emerald 500 */
            box-shadow: 0 0 80px rgba(16, 185, 129, 0.3);
        }
        .time-display {
            font-size: 6rem;
            font-weight: 800;
            line-height: 1;
            font-variant-numeric: tabular-nums;
            letter-spacing: -2px;
        }
        .session-type {
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 4px;
            color: #94a3b8;
            margin-bottom: -10px;
        }
        .task-focus {
            font-size: 1.5rem;
            margin-top: 20px;
            color: #cbd5e1;
            text-align: center;
            max-width: 80%;
            height: 3rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .controls {
            display: flex;
            gap: 1rem;
            margin-top: 2.5rem;
        }
        .btn-zen {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            padding: 1rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.2s;
            cursor: pointer;
        }
        .btn-zen:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.05);
        }
        .btn-zen-primary {
            background: #3b82f6;
            color: white;
        }
        .btn-zen-primary:hover {
            background: #2563eb;
        }
        .btn-zen-success {
            background: #10b981;
        }
        .btn-zen-success:hover {
            background: #059669;
        }
    </style>
</head>
<body>
    <div class="zen-top">
        <a href="<?= BASE_URL ?>/todo" class="text-white text-decoration-none">
            <i class="fa-solid fa-arrow-right me-2"></i> خروج من وضع التركيز
        </a>
        <div class="d-flex align-items-center gap-3">
            <button class="btn btn-outline-light border-0 rounded-circle" id="ambientBtn" title="ضوضاء بيضاء">
                <i class="fa-solid fa-headphones"></i>
            </button>
            <div class="text-secondary fw-bold">OTIS ZEN</div>
        </div>
    </div>

    <div class="timer-container">
        
        <div class="task-focus mb-4">
            <?php if(!empty($focusTasks)): ?>
                <?= htmlspecialchars($focusTasks[0]->title) ?> <span class="badge bg-primary ms-2 opacity-75">مهمة التركيز</span>
            <?php else: ?>
                جلسة عمل حر <span class="badge bg-secondary ms-2 opacity-50">بدون مهمة محددة</span>
            <?php endif; ?>
        </div>

        <div class="timer-circle" id="timerCircle">
            <div class="session-type" id="sessionLabel">جلسة عمل</div>
            <div class="time-display" id="timeDisplay">25:00</div>
        </div>
        
        <div class="controls">
            <button class="btn-zen btn-zen-primary" id="startBtn">
                <i class="fa-solid fa-play me-2"></i> ابدأ التركيز
            </button>
            <button class="btn-zen" id="resetBtn" style="display:none;">
                <i class="fa-solid fa-rotate-right"></i>
            </button>
            <button class="btn-zen" id="breakBtn">
                <i class="fa-solid fa-mug-hot me-2"></i> راحة
            </button>
        </div>

    </div>

    <!-- Hidden audio for White Noise -->
    <audio id="ambientAudio" loop>
        <source src="https://cdn.pixabay.com/download/audio/2022/02/10/audio_f8cfac87ef.mp3?filename=brown-noise-9407.mp3" type="audio/mpeg">
    </audio>
    <audio id="bellAudio">
        <source src="https://cdn.pixabay.com/download/audio/2021/08/04/audio_0625c1539c.mp3?filename=singing-bowl-strike-101568.mp3" type="audio/mpeg">
    </audio>

    <script>
        const WORK_TIME = 25 * 60;
        const BREAK_TIME = 5 * 60;
        let timeLeft = WORK_TIME;
        let timerInterval = null;
        let isWorking = true;
        let isPaused = true;

        const timeDisplay = document.getElementById('timeDisplay');
        const sessionLabel = document.getElementById('sessionLabel');
        const timerCircle = document.getElementById('timerCircle');
        const startBtn = document.getElementById('startBtn');
        const resetBtn = document.getElementById('resetBtn');
        const breakBtn = document.getElementById('breakBtn');
        const ambientBtn = document.getElementById('ambientBtn');
        
        const ambientAudio = document.getElementById('ambientAudio');
        const bellAudio = document.getElementById('bellAudio');

        function updateDisplay() {
            const minutes = Math.floor(timeLeft / 60);
            const seconds = timeLeft % 60;
            timeDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            document.title = `(${timeDisplay.textContent}) OTIS Focus`;
        }

        function toggleTimer() {
            if (isPaused) {
                isPaused = false;
                startBtn.innerHTML = '<i class="fa-solid fa-pause me-2"></i> إيقاف مؤقت';
                startBtn.classList.replace('btn-zen-primary', 'btn-zen-success');
                resetBtn.style.display = 'inline-block';
                timerCircle.classList.add('active');
                
                timerInterval = setInterval(() => {
                    timeLeft--;
                    updateDisplay();
                    if (timeLeft <= 0) {
                        completeSession();
                    }
                }, 1000);
            } else {
                isPaused = true;
                clearInterval(timerInterval);
                startBtn.innerHTML = '<i class="fa-solid fa-play me-2"></i> متابعة';
                startBtn.classList.replace('btn-zen-success', 'btn-zen-primary');
                timerCircle.classList.remove('active');
            }
        }

        function completeSession() {
            clearInterval(timerInterval);
            isPaused = true;
            bellAudio.play();
            
            if (isWorking) {
                // Done with work, save session via API
                fetch('<?= BASE_URL ?>/todo/saveFocusSession', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({
                        task_name: '<?= !empty($focusTasks) ? addslashes($focusTasks[0]->title) : "General Session" ?>',
                        duration: 25
                    })
                });

                isWorking = false;
                timeLeft = BREAK_TIME;
                sessionLabel.textContent = 'استراحة';
                timerCircle.classList.remove('active');
                timerCircle.classList.add('break');
                startBtn.innerHTML = '<i class="fa-solid fa-play me-2"></i> ابدأ الراحة';
            } else {
                // Done with break
                isWorking = true;
                timeLeft = WORK_TIME;
                sessionLabel.textContent = 'جلسة عمل';
                timerCircle.classList.remove('break');
                startBtn.innerHTML = '<i class="fa-solid fa-play me-2"></i> ابدأ التركيز';
            }
            startBtn.classList.replace('btn-zen-success', 'btn-zen-primary');
            updateDisplay();
        }

        startBtn.addEventListener('click', toggleTimer);
        
        breakBtn.addEventListener('click', () => {
            clearInterval(timerInterval);
            isPaused = true;
            isWorking = false;
            timeLeft = BREAK_TIME;
            sessionLabel.textContent = 'استراحة';
            timerCircle.classList.remove('active');
            timerCircle.classList.add('break');
            startBtn.innerHTML = '<i class="fa-solid fa-play me-2"></i> ابدأ الراحة';
            startBtn.classList.replace('btn-zen-success', 'btn-zen-primary');
            resetBtn.style.display = 'inline-block';
            updateDisplay();
        });

        resetBtn.addEventListener('click', () => {
            clearInterval(timerInterval);
            isPaused = true;
            isWorking = true;
            timeLeft = WORK_TIME;
            sessionLabel.textContent = 'جلسة عمل';
            timerCircle.classList.remove('active', 'break');
            startBtn.innerHTML = '<i class="fa-solid fa-play me-2"></i> ابدأ التركيز';
            startBtn.classList.replace('btn-zen-success', 'btn-zen-primary');
            resetBtn.style.display = 'none';
            updateDisplay();
        });

        ambientBtn.addEventListener('click', () => {
            if (ambientAudio.paused) {
                ambientAudio.play();
                ambientBtn.classList.add('text-primary');
            } else {
                ambientAudio.pause();
                ambientBtn.classList.remove('text-primary');
            }
        });

        updateDisplay();
    </script>
</body>
</html>
