<?php
/**
 * Couple Portal — Timeline Checklist Month Calendar View (RC-018)
 */

$monthNames = [
    1 => 'January', 2 => 'February', 3 => 'March', 4 => 'April', 5 => 'May', 6 => 'June',
    7 => 'July', 8 => 'August', 9 => 'September', 10 => 'October', 11 => 'November', 12 => 'December'
];

$monthName = $monthNames[$month] ?? '';
$firstDaySecs = strtotime(sprintf('%04d-%02d-01', $year, $month));
$daysInMonth = (int) date('t', $firstDaySecs);
$startDayOfWeek = (int) date('w', $firstDaySecs); // 0 (Sunday) to 6 (Saturday)

// Month offsets for pagination
$prevMonth = $month - 1;
$prevYear = $year;
if ($prevMonth < 1) {
    $prevMonth = 12;
    $prevYear--;
}

$nextMonth = $month + 1;
$nextYear = $year;
if ($nextMonth > 12) {
    $nextMonth = 1;
    $nextYear++;
}
?>

<div class="max-w-6xl mx-auto space-y-6">

    <!-- ── Header Section ────────────────────────────────────────────────── -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 border-b border-slate-100 pb-5">
        <div>
            <div class="page-breadcrumb">
                <a href="<?= url('/app/couple/timeline') ?>">Timeline Planner</a>
                <span class="sep">/</span>
                <span>Calendar View</span>
            </div>
            <h1 class="page-h1">
                <span class="page-header-icon">
                    <i class="fa-solid fa-calendar-days"></i>
                </span>
                Monthly Timeline Calendar
            </h1>
            <p class="page-subtitle">Due date schedule logs for all wedding preparation tasks.</p>
        </div>
        <div class="flex items-center gap-2">
            <a href="<?= url('/app/couple/timeline') ?>" class="cp-btn-back">
                <i class="fa-solid fa-arrow-left"></i> Back
            </a>
            <a href="<?= url('/app/couple/timeline/tasks') ?>" class="btn btn-secondary btn-md flex items-center gap-1.5">
                <i class="fa-solid fa-list-check text-slate-400"></i> Tasks List
            </a>
        </div>
    </div>

    <!-- ── Calendar Navigation header ───────────────────────────────────── -->
    <div class="flex items-center justify-between bg-white p-4 rounded-2xl border border-slate-100 shadow-sm">
        <h2 class="text-lg font-black text-slate-850 flex items-center gap-2">
            <i class="fa-regular fa-calendar-check text-indigo-500"></i> 
            <?= $monthName ?> <?= $year ?>
        </h2>
        <div class="flex items-center gap-1">
            <a href="<?= url("/app/couple/timeline/calendar?year={$prevYear}&month={$prevMonth}") ?>" class="p-2 hover:bg-slate-50 border border-slate-200 rounded-xl text-slate-650 transition-all font-bold text-xs" title="Previous Month">
                <i class="fa-solid fa-chevron-left"></i> Prev
            </a>
            <a href="<?= url('/app/couple/timeline/calendar') ?>" class="px-3.5 py-2 hover:bg-slate-50 border border-slate-200 rounded-xl text-slate-700 font-bold text-xs transition-all">
                Today
            </a>
            <a href="<?= url("/app/couple/timeline/calendar?year={$nextYear}&month={$nextMonth}") ?>" class="p-2 hover:bg-slate-50 border border-slate-200 rounded-xl text-slate-650 transition-all font-bold text-xs" title="Next Month">
                Next <i class="fa-solid fa-chevron-right"></i>
            </a>
        </div>
    </div>

    <!-- ── Calendar Grid ────────────────────────────────────────────────── -->
    <div class="bg-white rounded-3xl border border-slate-100 shadow-sm overflow-hidden">
        <!-- Weekdays header -->
        <div class="grid grid-cols-7 border-b border-slate-100 text-center bg-slate-50/50 py-3 text-[10px] font-extrabold uppercase tracking-wider text-slate-400">
            <div>Sun</div>
            <div>Mon</div>
            <div>Tue</div>
            <div>Wed</div>
            <div>Thu</div>
            <div>Fri</div>
            <div>Sat</div>
        </div>

        <!-- Days grid -->
        <div class="grid grid-cols-7 divide-x divide-y divide-slate-100 border-l border-t border-slate-100">
            <!-- Empty cells before start day -->
            <?php for ($i = 0; $i < $startDayOfWeek; $i++): ?>
                <div class="bg-slate-50/20 min-h-[120px] p-2 border-l border-t border-slate-100"></div>
            <?php endfor; ?>

            <!-- Calendar Days -->
            <?php 
            $todayDay = (int) date('j');
            $todayMonth = (int) date('n');
            $todayYear = (int) date('Y');

            for ($day = 1; $day <= $daysInMonth; $day++): 
                $isToday = ($day === $todayDay && $month === $todayMonth && $year === $todayYear);
                $dayTasks = $tasks_by_day[$day] ?? [];
            ?>
                <div class="min-h-[120px] p-2 flex flex-col justify-between hover:bg-slate-50/30 transition-colors border-l border-t border-slate-100 relative group">
                    <div class="flex justify-between items-center">
                        <span class="text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center <?= $isToday ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-500' ?>">
                            <?= $day ?>
                        </span>
                        <?php if (count($dayTasks) > 0): ?>
                            <span class="text-[9px] font-bold px-1.5 py-0.2 bg-indigo-50 text-indigo-700 rounded border border-indigo-100">
                                <?= count($dayTasks) ?> due
                            </span>
                        <?php endif; ?>
                    </div>

                    <!-- Tasks listings within day cells -->
                    <div class="mt-2 space-y-1 overflow-y-auto max-h-[85px] pr-1 flex-grow">
                        <?php foreach ($dayTasks as $t): 
                            $statusDot = ($t['status'] === 'Completed') ? 'bg-emerald-500' : 'bg-amber-500';
                            if ($t['priority'] === 'Critical' && $t['status'] !== 'Completed') {
                                $statusDot = 'bg-rose-600';
                            }
                        ?>
                            <a href="<?= url('/app/couple/timeline/tasks/edit/' . $t['id']) ?>" class="block p-1 bg-slate-50 border border-slate-100 hover:border-indigo-200 rounded text-[9px] leading-tight font-bold text-slate-700 truncate transition-all flex items-center gap-1" title="<?= escape_html($t['title']) ?>">
                                <span class="w-1 h-1 rounded-full <?= $statusDot ?> flex-shrink-0"></span>
                                <span class="truncate"><?= escape_html($t['title']) ?></span>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>
            <?php endfor; ?>

            <!-- Empty cells to pad out grid to multiples of 7 -->
            <?php 
            $totalCells = $startDayOfWeek + $daysInMonth;
            $remCells = 7 - ($totalCells % 7);
            if ($remCells < 7): 
                for ($i = 0; $i < $remCells; $i++):
            ?>
                <div class="bg-slate-50/20 min-h-[120px] p-2 border-l border-t border-slate-100"></div>
            <?php 
                endfor;
            endif; 
            ?>
        </div>
    </div>

</div>
