<div class="flex flex-col h-full">
    
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold text-white">
            📅 <?= date('F Y', mktime(0, 0, 0, $month, 1, $year)) ?>
        </h2>
        
        <div class="flex gap-2">
            <a href="/calendar.php?month=<?= $prevMonth ?>&year=<?= $prevYear ?>" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg text-white border border-gray-600 transition">
                &larr; Prev
            </a>
            <a href="/calendar.php?month=<?= date('m') ?>&year=<?= date('Y') ?>" class="px-4 py-2 bg-rose-500 hover:bg-rose-600 rounded-lg text-white font-bold transition">
                Today
            </a>
            <a href="/calendar.php?month=<?= $nextMonth ?>&year=<?= $nextYear ?>" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg text-white border border-gray-600 transition">
                Next &rarr;
            </a>
        </div>
    </div>

    <div class="glass-panel p-6 rounded-xl overflow-hidden">
        
        <div class="grid grid-cols-7 gap-px border-b border-gray-700 pb-4 mb-4 text-center">
            <div class="text-gray-400 font-bold uppercase text-xs">Mon</div>
            <div class="text-gray-400 font-bold uppercase text-xs">Tue</div>
            <div class="text-gray-400 font-bold uppercase text-xs">Wed</div>
            <div class="text-gray-400 font-bold uppercase text-xs">Thu</div>
            <div class="text-gray-400 font-bold uppercase text-xs">Fri</div>
            <div class="text-gray-400 font-bold uppercase text-xs text-rose-400">Sat</div>
            <div class="text-gray-400 font-bold uppercase text-xs text-rose-400">Sun</div>
        </div>

        <div class="grid grid-cols-7 gap-2 auto-rows-fr">
            
            <?php for($i = 0; $i < $dayOffset; $i++): ?>
                <div class="h-32 bg-gray-900/30 rounded-lg opacity-50"></div>
            <?php endfor; ?>

            <?php for($day = 1; $day <= $daysInMonth; $day++): ?>
                <?php 
                    $currentDate = sprintf('%04d-%02d-%02d', $year, $month, $day);
                    $isToday = ($currentDate == date('Y-m-d'));
                    $dayTasks = $calendarTasks[$currentDate] ?? [];
                ?>

                <div class="h-32 bg-gray-900/50 border border-gray-700/50 rounded-lg p-2 relative hover:border-rose-500/30 transition overflow-y-auto custom-scrollbar <?= $isToday ? 'ring-1 ring-rose-500 bg-rose-500/5' : '' ?>">
                    
                    <span class="absolute top-2 right-2 text-xs font-bold <?= $isToday ? 'text-rose-400' : 'text-gray-500' ?>">
                        <?= $day ?>
                    </span>

                    <div class="mt-6 space-y-1">
                        <?php foreach($dayTasks as $task): ?>
                            <a href="/task_details.php?id=<?= $task['id'] ?>" class="block px-2 py-1 rounded text-[10px] font-medium truncate text-white border-l-2 hover:opacity-80 transition
                                <?= $task['status'] == 'completed' ? 'bg-green-500/20 border-green-500' : 
                                   ($task['priority'] == 'high' ? 'bg-red-500/20 border-red-500' : 'bg-blue-500/20 border-blue-500') ?>">
                                <?= htmlspecialchars($task['title']) ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>
            <?php endfor; ?>

        </div>
    </div>
</div>