<?php
/**
 * Couple Portal — Wedding Schedule Dashboard (RC-018 / UX004)
 * Location: app/views/timeline/dashboard.php
 *
 * A simple, chronological wedding schedule — not a project manager.
 * Answers: Today / Coming Up / Overdue / Milestones
 */

$weddingDateStr    = $stats['wedding_date'];
$daysRemaining     = $stats['countdown_days'];
$completionPercent = $stats['completion_percent'];
$total             = $stats['total_tasks'];
$completed         = $stats['completed_tasks'];
$overdue           = $stats['overdue_tasks'];
?>

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

    <!-- ── Page Header ──────────────────────────────────────────────────── -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="page-h1">
                <span class="page-header-icon">
                    <i class="fa-solid fa-calendar-days"></i>
                </span>
                Wedding Schedule
            </h1>
            <p class="page-subtitle">Your upcoming wedding preparation, day by day.</p>
        </div>
        <div class="flex items-center gap-2.5">
            <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> All Items
            </a>
            <a href="<?= url('/app/couple/timeline/tasks/create') ?>"
               class="btn btn-primary btn-md">
                <i class="fa-solid fa-plus text-[10px]"></i> Add to Schedule
            </a>
        </div>
    </div>

    <!-- ── Flash Notifications ──────────────────────────────────────────── -->
    <?php if (!empty($success)): ?>
        <div class="p-4 bg-emerald-50 border border-emerald-150 text-emerald-800 rounded-2xl flex items-center gap-3 text-sm shadow-sm">
            <i class="fa-solid fa-circle-check text-emerald-500 text-base flex-shrink-0"></i>
            <div class="font-semibold"><?= escape_html($success) ?></div>
        </div>
    <?php endif; ?>
    <?php if (!empty($error)): ?>
        <div class="p-4 bg-rose-50 border border-rose-150 text-rose-800 rounded-2xl flex items-center gap-3 text-sm shadow-sm">
            <i class="fa-solid fa-circle-xmark text-rose-500 text-base flex-shrink-0"></i>
            <div class="font-semibold"><?= escape_html($error) ?></div>
        </div>
    <?php endif; ?>

    <!-- ── Hero: Wedding Countdown ──────────────────────────────────────── -->
    <div class="rounded-3xl p-6 text-white relative overflow-hidden shadow-md" style="background-color:#232323;">
        <div class="absolute right-0 bottom-0 opacity-10 translate-x-8 translate-y-8 scale-150 text-[160px] pointer-events-none" style="color:#D4A28C;">
            <i class="fa-solid fa-heart"></i>
        </div>

        <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6 relative">
            <div>
                <span class="text-xs font-bold uppercase tracking-widest block" style="color:#D0C8BE;">Wedding Countdown</span>
                <h2 class="text-2xl font-black mt-2 leading-tight">
                    <?= escape_html($stats['groom_name']) ?> &amp; <?= escape_html($stats['bride_name']) ?>'s Big Day
                </h2>
                <p class="text-xs mt-1.5 flex items-center gap-1.5" style="color:#FAF8F3; opacity:0.8;">
                    <i class="fa-regular fa-calendar-check" style="color:#D4A28C;"></i>
                    <?= date('l, d F Y', strtotime($weddingDateStr)) ?>
                </p>
            </div>

            <div class="flex items-end gap-6 flex-shrink-0">
                <!-- Days remaining -->
                <div class="text-right">
                    <span class="text-5xl font-extrabold tracking-tight block leading-none"><?= $daysRemaining ?></span>
                    <span class="text-xs font-semibold mt-1 block" style="color:#D0C8BE;">days to go</span>
                </div>

                <!-- Checklist progress pill -->
                <?php if ($total > 0): ?>
                <div class="bg-white/10 rounded-2xl px-4 py-3 text-center" style="border: 1px solid rgba(255,255,255,0.1);">
                    <span class="text-2xl font-black block leading-none"><?= round($completionPercent) ?>%</span>
                    <span class="text-[11px] mt-1 block" style="color:#D0C8BE;"><?= $completed ?>/<?= $total ?> done</span>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- ── Overdue Attention Banner ──────────────────────────────────────── -->
    <?php if (!empty($stats['overdue_list'])): ?>
    <div class="bg-rose-50 rounded-2xl border border-rose-100 overflow-hidden">
        <div class="px-5 py-3.5 flex items-center gap-3 border-b border-rose-100">
            <i class="fa-solid fa-circle-exclamation text-rose-500"></i>
            <span class="text-sm font-bold text-rose-800">Needs Your Attention</span>
            <span class="ml-auto text-xs text-rose-400 font-medium"><?= count($stats['overdue_list']) ?> overdue</span>
        </div>
        <div class="divide-y divide-rose-50">
            <?php foreach ($stats['overdue_list'] as $t): ?>
                <div class="px-5 py-3 flex items-center justify-between gap-4">
                    <div>
                        <span class="text-sm font-semibold text-rose-900 block"><?= escape_html($t['title']) ?></span>
                        <span class="text-xs text-rose-400 mt-0.5 block">
                            Was due <?= date('d M Y', strtotime($t['due_date'])) ?>
                        </span>
                    </div>
                    <a href="<?= url('/app/couple/timeline/tasks/edit/' . $t['id']) ?>"
                       class="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-white border border-rose-200 text-rose-600 hover:bg-rose-100 text-xs font-bold transition-all">
                        Reschedule
                    </a>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
    <?php endif; ?>

    <!-- ── Main Content: Schedule + Milestones ──────────────────────────── -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        <!-- Left: Schedule (Today + This Week) -->
        <div class="lg:col-span-2 space-y-5">

            <!-- Today's Items -->
            <div class="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
                <div class="px-5 py-4 flex items-center justify-between border-b border-slate-100">
                    <h2 class="text-sm font-bold text-slate-800 flex items-center gap-2">
                        <i class="fa-solid fa-sun text-amber-400"></i> Today
                    </h2>
                    <span class="text-xs text-slate-400 font-medium"><?= date('d F Y') ?></span>
                </div>

                <?php if (empty($stats['today_tasks'])): ?>
                    <div class="px-5 py-10 text-center">
                        <div class="inline-flex items-center justify-center w-10 h-10 bg-slate-50 rounded-xl mb-3">
                            <i class="fa-regular fa-sun text-slate-300 text-base"></i>
                        </div>
                        <p class="text-sm text-slate-400 font-medium">Nothing scheduled today</p>
                        <p class="text-xs text-slate-300 mt-0.5">Enjoy your day!</p>
                    </div>
                <?php else: ?>
                    <div class="divide-y divide-slate-50">
                        <?php foreach ($stats['today_tasks'] as $t): ?>
                            <div class="px-5 py-3.5 flex items-center gap-3 group">
                                <!-- Toggle complete -->
                                <form method="POST" action="<?= url('/app/couple/timeline/tasks/toggle-status/' . $t['id']) ?>" class="flex-shrink-0">
                                    <input type="hidden" name="_csrf" value="<?= escape_html($_SESSION['csrf_token'] ?? '') ?>">
                                    <button type="submit"
                                            class="w-5 h-5 rounded-full border-2 border-slate-300 bg-white flex items-center justify-center text-transparent hover:text-indigo-500 hover:border-indigo-400 transition-all">
                                        <i class="fa-solid fa-check text-[9px]"></i>
                                    </button>
                                </form>
                                <!-- Title -->
                                <div class="flex-1 min-w-0">
                                    <span class="text-sm font-semibold text-slate-700 block truncate"><?= escape_html($t['title']) ?></span>
                                    <?php if (!empty($t['category'])): ?>
                                        <span class="text-[11px] text-slate-400 mt-0.5 block"><?= escape_html($t['category']) ?></span>
                                    <?php endif; ?>
                                </div>
                                <!-- Edit link -->
                                <a href="<?= url('/app/couple/timeline/tasks/edit/' . $t['id']) ?>"
                                   class="opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 text-slate-300 hover:text-indigo-500 text-xs">
                                    <i class="fa-solid fa-pen text-[10px]"></i>
                                </a>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>

            <!-- This Week's Items -->
            <div class="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
                <div class="px-5 py-4 flex items-center justify-between border-b border-slate-100">
                    <h2 class="text-sm font-bold text-slate-800 flex items-center gap-2">
                        <i class="fa-solid fa-calendar-week text-indigo-400"></i> Coming Up This Week
                    </h2>
                    <a href="<?= url('/app/couple/timeline/tasks') ?>"
                       class="text-xs text-indigo-500 hover:text-indigo-700 font-semibold transition-colors">
                        View All
                    </a>
                </div>

                <?php if (empty($stats['this_week_tasks'])): ?>
                    <div class="px-5 py-10 text-center">
                        <div class="inline-flex items-center justify-center w-10 h-10 bg-slate-50 rounded-xl mb-3">
                            <i class="fa-regular fa-calendar text-slate-300 text-base"></i>
                        </div>
                        <p class="text-sm text-slate-400 font-medium">Nothing coming up this week</p>
                        <a href="<?= url('/app/couple/timeline/tasks/create') ?>"
                           class="inline-flex items-center gap-1.5 mt-3 text-xs text-indigo-500 hover:text-indigo-700 font-semibold transition-colors">
                            <i class="fa-solid fa-plus text-[10px]"></i> Add something to your schedule
                        </a>
                    </div>
                <?php else: ?>
                    <div class="divide-y divide-slate-50">
                        <?php foreach ($stats['this_week_tasks'] as $t):
                            $daysLeft = (int) ceil((strtotime($t['due_date']) - time()) / 86400);
                        ?>
                            <div class="px-5 py-3.5 flex items-center gap-3 group">
                                <!-- Toggle complete -->
                                <form method="POST" action="<?= url('/app/couple/timeline/tasks/toggle-status/' . $t['id']) ?>" class="flex-shrink-0">
                                    <input type="hidden" name="_csrf" value="<?= escape_html($_SESSION['csrf_token'] ?? '') ?>">
                                    <button type="submit"
                                            class="w-5 h-5 rounded-full border-2 border-slate-300 bg-white flex items-center justify-center text-transparent hover:text-indigo-500 hover:border-indigo-400 transition-all">
                                        <i class="fa-solid fa-check text-[9px]"></i>
                                    </button>
                                </form>
                                <!-- Title + date -->
                                <div class="flex-1 min-w-0">
                                    <a href="<?= url('/app/couple/timeline/tasks/edit/' . $t['id']) ?>"
                                       class="text-sm font-semibold text-slate-700 block truncate hover:text-indigo-600 transition-colors">
                                        <?= escape_html($t['title']) ?>
                                    </a>
                                    <span class="text-[11px] text-slate-400 mt-0.5 block">
                                        <?= date('d M Y', strtotime($t['due_date'])) ?>
                                        <?= $daysLeft === 1 ? '· Tomorrow' : ($daysLeft === 0 ? '· Today' : '· in ' . $daysLeft . ' days') ?>
                                    </span>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>

        </div>

        <!-- Right: Milestones -->
        <div class="space-y-5">

            <!-- Wedding Milestones -->
            <div class="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
                <div class="px-5 py-4 flex items-center justify-between border-b border-slate-100">
                    <h2 class="text-sm font-bold text-slate-800 flex items-center gap-2">
                        <i class="fa-solid fa-flag text-indigo-400"></i> Milestones
                    </h2>
                    <a href="<?= url('/app/couple/timeline/milestones') ?>"
                       class="text-xs text-indigo-500 hover:text-indigo-700 font-semibold transition-colors">
                        Manage
                    </a>
                </div>

                <?php if (empty($milestones)): ?>
                    <div class="px-5 py-8 text-center">
                        <div class="inline-flex items-center justify-center w-10 h-10 bg-slate-50 rounded-xl mb-3">
                            <i class="fa-solid fa-flag text-slate-300 text-base"></i>
                        </div>
                        <p class="text-sm text-slate-400 font-medium">No milestones yet</p>
                    </div>
                <?php else: ?>
                    <div class="divide-y divide-slate-50 max-h-[280px] overflow-y-auto">
                        <?php foreach ($milestones as $m): ?>
                            <div class="px-5 py-3 flex items-start gap-3">
                                <form method="POST" action="<?= url('/app/couple/timeline/milestones/toggle-complete/' . $m['id']) ?>" class="flex-shrink-0 mt-0.5">
                                    <input type="hidden" name="_csrf" value="<?= escape_html($_SESSION['csrf_token'] ?? '') ?>">
                                    <button type="submit"
                                            class="w-5 h-5 rounded-lg border-2 flex items-center justify-center transition-all <?= $m['is_completed'] ? 'bg-emerald-500 border-emerald-500 text-white' : 'border-slate-300 bg-white text-transparent hover:border-emerald-400' ?>">
                                        <i class="fa-solid fa-check text-[9px]"></i>
                                    </button>
                                </form>
                                <div class="flex-1 min-w-0">
                                    <span class="text-sm font-semibold block <?= $m['is_completed'] ? 'text-slate-400 line-through' : 'text-slate-700' ?>">
                                        <?= escape_html($m['title']) ?>
                                    </span>
                                    <?php if ($m['target_date']): ?>
                                        <span class="text-[11px] text-slate-400 block mt-0.5">
                                            By <?= date('d M Y', strtotime($m['target_date'])) ?>
                                        </span>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>

                <!-- Quick Add Milestone -->
                <div class="border-t border-slate-100 px-5 py-4">
                    <p class="text-xs font-semibold text-slate-500 mb-2.5">Add a milestone</p>
                    <form method="POST" action="<?= url('/app/couple/timeline/milestones/create') ?>" class="space-y-2">
                        <input type="hidden" name="_csrf" value="<?= escape_html($_SESSION['csrf_token'] ?? '') ?>">
                        <input type="text" name="title" placeholder="e.g. Venue deposit paid" class="form-input text-sm py-2 px-3 rounded-xl w-full" required>
                        <div class="flex gap-2">
                            <input type="date" name="target_date" class="form-input text-sm py-2 px-3 rounded-xl flex-grow">
                            <button type="submit"
                                    class="flex-shrink-0 inline-flex items-center gap-1 px-3 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold transition-all">
                                <i class="fa-solid fa-plus text-[9px]"></i> Add
                            </button>
                        </div>
                    </form>
                </div>
            </div>

        </div>

    </div>

</div>
