<?php
/**
 * Couple Portal — Timeline Milestones Manager (RC-018)
 */
?>

<div class="max-w-6xl mx-auto space-y-6" x-data="{
    editingId: null,
    editingTitle: '',
    editingTargetDate: '',
    editingNotes: '',
    startEdit(id, title, targetDate, notes) {
        this.editingId = id;
        this.editingTitle = title;
        this.editingTargetDate = targetDate;
        this.editingNotes = notes;
    }
}">

    <!-- ── 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>Milestones</span>
            </div>
            <h1 class="page-h1">
                <span class="page-header-icon">
                    <i class="fa-solid fa-flag"></i>
                </span>
                Milestone Settings
            </h1>
            <p class="page-subtitle">Configure wedding preparation milestones and completion dates.</p>
        </div>
        <div>
            <a href="<?= url('/app/couple/timeline') ?>" class="cp-btn-back">
                <i class="fa-solid fa-arrow-left"></i> Back
            </a>
        </div>
    </div>

    <!-- ── Alerts ────────────────────────────────────────────────────────── -->
    <?php if (!empty($success)): ?>
        <div class="p-4 bg-emerald-50 border border-emerald-200 text-emerald-800 rounded-xl flex items-center gap-3 text-sm">
            <i class="fa-solid fa-circle-check text-emerald-600 text-lg"></i>
            <div><?= escape_html($success) ?></div>
        </div>
    <?php endif; ?>
    <?php if (!empty($error)): ?>
        <div class="p-4 bg-rose-50 border border-rose-200 text-rose-800 rounded-xl flex items-center gap-3 text-sm">
            <i class="fa-solid fa-circle-xmark text-rose-600 text-lg"></i>
            <div><?= escape_html($error) ?></div>
        </div>
    <?php endif; ?>

    <!-- ── Add Milestone Card ────────────────────────────────────────────── -->
    <div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm max-w-xl">
        <h3 class="font-bold text-slate-800 text-sm mb-3">Add Custom Milestone Checkpoint</h3>
        <form method="POST" action="<?= url('/app/couple/timeline/milestones/create') ?>" class="space-y-3">
            <input type="hidden" name="_csrf" value="<?= escape_html($_SESSION['csrf_token'] ?? '') ?>">
            
            <div class="form-group mb-0">
                <label for="title" class="form-label text-xxs font-bold text-slate-400">Milestone Title <span class="text-rose-500">*</span></label>
                <input type="text" id="title" name="title" placeholder="e.g. Venue DP Settled" class="form-input text-xs" required>
            </div>
            
            <div class="grid grid-cols-2 gap-3">
                <div class="form-group mb-0">
                    <label for="target_date" class="form-label text-xxs font-bold text-slate-400">Target Completion Date</label>
                    <input type="date" id="target_date" name="target_date" class="form-input text-xs">
                </div>
                <div class="flex items-end">
                    <button type="submit" class="btn btn-primary w-full py-2 font-bold rounded-xl text-xs flex items-center justify-center gap-1.5">
                        <i class="fa-solid fa-plus"></i> Add Milestone
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- ── Milestones Grid / List ───────────────────────────────────────── -->
    <div class="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
        <div class="p-5 border-b border-slate-50 flex items-center justify-between">
            <h3 class="font-bold text-slate-800 text-sm">Active Checklist Milestones</h3>
            <span class="text-xxs font-bold text-slate-400 uppercase tracking-wider"><?= count($milestones) ?> Total</span>
        </div>

        <?php if (empty($milestones)): ?>
            <div class="text-center py-12 text-slate-400 text-xs">
                No wedding milestones defined yet.
            </div>
        <?php else: ?>
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-slate-50 text-[10px] font-bold text-slate-400 uppercase tracking-wider border-b border-slate-100">
                            <th class="py-3 px-5 w-16 text-center">Complete</th>
                            <th class="py-3 px-5">Milestone Checkpoint</th>
                            <th class="py-3 px-5">Target Date</th>
                            <th class="py-3 px-5">Completed Timestamp</th>
                            <th class="py-3 px-5 w-44 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-xs">
                        <?php foreach ($milestones as $m): 
                            $id = (int) $m['id'];
                        ?>
                            <tr class="hover:bg-slate-50/50 transition-colors">
                                <!-- Checkbox Status -->
                                <td class="py-3.5 px-5 text-center">
                                    <form method="POST" action="<?= url('/app/couple/timeline/milestones/toggle-complete/' . $id) ?>">
                                        <input type="hidden" name="_csrf" value="<?= escape_html($_SESSION['csrf_token'] ?? '') ?>">
                                        <button type="submit" class="mx-auto w-5 h-5 rounded-lg border flex items-center justify-center transition-all <?= $m['is_completed'] ? 'bg-emerald-500 border-emerald-500 text-white' : 'border-slate-300 bg-white text-slate-100 hover:text-emerald-500 hover:border-emerald-500' ?>">
                                            <i class="fa-solid fa-check text-[10px]"></i>
                                        </button>
                                    </form>
                                </td>

                                <!-- Title Cell / Inline editing modal logic -->
                                <td class="py-3.5 px-5">
                                    <!-- View State -->
                                    <div x-show="editingId !== <?= $id ?>">
                                        <span class="font-bold text-slate-700 block <?= $m['is_completed'] ? 'line-through text-slate-400' : '' ?>">
                                            <?= escape_html($m['title']) ?>
                                        </span>
                                        <?php if ($m['notes']): ?>
                                            <span class="text-[10px] text-slate-450 block mt-0.5"><?= escape_html($m['notes']) ?></span>
                                        <?php endif; ?>
                                    </div>

                                    <!-- Inline edit form -->
                                    <div x-show="editingId === <?= $id ?>" style="display: none;">
                                        <form method="POST" action="<?= url("/app/couple/timeline/milestones/edit/{$id}") ?>" class="space-y-2.5 max-w-md bg-slate-50 p-3 rounded-xl border border-slate-200">
                                            <input type="hidden" name="_csrf" value="<?= escape_html($_SESSION['csrf_token'] ?? '') ?>">
                                            <input type="hidden" name="is_completed" value="<?= $m['is_completed'] ?>">
                                            
                                            <div class="form-group mb-0">
                                                <input type="text" x-model="editingTitle" class="form-input text-xs py-1 px-2.5 bg-white" required>
                                            </div>
                                            <div class="form-group mb-0">
                                                <input type="date" x-model="editingTargetDate" class="form-input text-xs py-1 px-2.5 bg-white">
                                            </div>
                                            <div class="form-group mb-0">
                                                <input type="text" x-model="editingNotes" placeholder="Notes..." class="form-input text-xs py-1 px-2.5 bg-white">
                                            </div>
                                            <div class="flex justify-end gap-1.5 pt-1">
                                                <button type="submit" class="p-1 px-2 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 rounded-lg text-xxs font-bold" title="Save changes">
                                                    Save
                                                </button>
                                                <button type="button" @click="editingId = null" class="p-1 px-2 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-lg text-xxs font-bold">
                                                    Cancel
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </td>

                                <!-- Target Date -->
                                <td class="py-3.5 px-5 text-slate-500 whitespace-nowrap">
                                    <?= $m['target_date'] ? date('d M Y', strtotime($m['target_date'])) : '<span class="text-slate-350 italic">None</span>' ?>
                                </td>

                                <!-- Completed Timestamp -->
                                <td class="py-3.5 px-5 text-slate-500 whitespace-nowrap">
                                    <?= $m['completed_at'] ? date('d M Y H:i', strtotime($m['completed_at'])) : '<span class="text-slate-350 italic">Pending</span>' ?>
                                </td>

                                <!-- Actions -->
                                <td class="py-3.5 px-5 text-right">
                                    <div class="flex items-center justify-end gap-1.5" x-show="editingId !== <?= $id ?>">
                                        <button type="button" @click="startEdit(<?= $id ?>, '<?= escape_html($m['title']) ?>', '<?= $m['target_date'] ?? '' ?>', '<?= escape_html($m['notes'] ?? '') ?>')" class="p-1.5 bg-slate-50 hover:bg-slate-100 text-slate-650 hover:text-indigo-600 rounded-lg transition-all text-xs" title="Edit milestone">
                                            <i class="fa-solid fa-pencil"></i> Edit
                                        </button>
                                        
                                        <form method="POST" action="<?= url("/app/couple/timeline/milestones/delete/{$id}") ?>" class="inline" onsubmit="return confirm('Are you sure you want to delete this milestone?');">
                                            <input type="hidden" name="_csrf" value="<?= escape_html($_SESSION['csrf_token'] ?? '') ?>">
                                            <button type="submit" class="p-1.5 bg-rose-550/10 hover:bg-rose-600 hover:text-white text-rose-600 rounded-lg transition-all text-xs" title="Delete milestone">
                                                <i class="fa-solid fa-trash-can"></i> Delete
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php endif; ?>
    </div>

</div>
