<?php
/**
 * Couple Portal — Budget Categories Manager (RC-017)
 */
?>

<div class="max-w-6xl mx-auto space-y-6" x-data="{
    editingId: null,
    editingName: '',
    startEdit(id, name) {
        this.editingId = id;
        this.editingName = name;
    }
}">

    <!-- ── Header Section ────────────────────────────────────────────────── -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <div class="page-breadcrumb">
                <a href="<?= url('/app/couple/budget') ?>">Budget Planner</a>
                <span class="sep">/</span>
                <span>Categories</span>
            </div>
            <h1 class="page-h1">
                <span class="page-header-icon">
                    <i class="fa-solid fa-tags"></i>
                </span>
                Category Settings
            </h1>
            <p class="page-subtitle">Manage the categories that organise your wedding budget.</p>
        </div>
        <div>
            <a href="<?= url('/app/couple/budget') ?>" 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-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; ?>

    <!-- ── Add Category Block ────────────────────────────────────────────── -->
    <div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm">
        <h3 class="font-bold text-slate-800 text-sm mb-3">Add Custom Category</h3>
        <form method="POST" action="<?= url('/app/couple/budget/categories/create') ?>" class="flex flex-col sm:flex-row gap-2 max-w-lg">
            <input type="hidden" name="_csrf" value="<?= escape_html($_SESSION['csrf_token'] ?? '') ?>">
            <div class="relative flex-grow">
                <span class="absolute left-3 top-2.5 text-slate-400 text-sm"><i class="fa-solid fa-tag"></i></span>
                <input type="text" name="name" placeholder="e.g. Traditional Costumes, Bridal Car" class="form-input pl-9" required>
            </div>
            <button type="submit" class="btn btn-primary font-bold px-5 py-2 whitespace-nowrap flex items-center justify-center gap-1.5 rounded-xl text-xs">
                <i class="fa-solid fa-plus"></i> Add Category
            </button>
        </form>
    </div>

    <!-- ── Categories Table ──────────────────────────────────────────────── -->
    <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 Categories</h3>
            <span class="text-xxs font-bold text-slate-400 uppercase tracking-wider"><?= count($categories) ?> Total</span>
        </div>

        <?php if (empty($categories)): ?>
            <div class="text-center py-12 text-slate-400 text-xs">
                No categories defined. Please add one above.
            </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">Sort</th>
                            <th class="py-3 px-5">Category Name</th>
                            <th class="py-3 px-5 w-44 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-sm">
                        <?php foreach ($categories as $index => $cat): 
                            $id = (int) $cat['id'];
                        ?>
                            <tr class="hover:bg-slate-50/60 transition-colors">
                                <!-- Reorder controls (up/down) -->
                                <td class="py-3.5 px-5">
                                    <div class="flex items-center gap-1">
                                        <!-- Move Up -->
                                        <?php if ($index > 0): ?>
                                            <form method="POST" action="<?= url('/app/couple/budget/categories/reorder') ?>" class="inline">
                                                <input type="hidden" name="_csrf" value="<?= escape_html($_SESSION['csrf_token'] ?? '') ?>">
                                                <?php
                                                    $ids = array_column($categories, 'id');
                                                    $temp = $ids[$index - 1];
                                                    $ids[$index - 1] = $ids[$index];
                                                    $ids[$index] = $temp;
                                                ?>
                                                <input type="hidden" name="category_ids" value='<?= json_encode($ids) ?>'>
                                                <button type="submit" class="p-1 hover:bg-[#FAF8F3] hover:text-[#D4A28C] rounded text-slate-450 transition-all text-xs" title="Move Up">
                                                    <i class="fa-solid fa-chevron-up"></i>
                                                </button>
                                            </form>
                                        <?php else: ?>
                                            <span class="p-1 text-slate-200 text-xs"><i class="fa-solid fa-chevron-up"></i></span>
                                        <?php endif; ?>

                                        <!-- Move Down -->
                                        <?php if ($index < count($categories) - 1): ?>
                                            <form method="POST" action="<?= url('/app/couple/budget/categories/reorder') ?>" class="inline">
                                                <input type="hidden" name="_csrf" value="<?= escape_html($_SESSION['csrf_token'] ?? '') ?>">
                                                <?php
                                                    $ids = array_column($categories, 'id');
                                                    $temp = $ids[$index + 1];
                                                    $ids[$index + 1] = $ids[$index];
                                                    $ids[$index] = $temp;
                                                ?>
                                                <input type="hidden" name="category_ids" value='<?= json_encode($ids) ?>'>
                                                <button type="submit" class="p-1 hover:bg-[#FAF8F3] hover:text-[#D4A28C] rounded text-slate-455 transition-all text-xs" title="Move Down">
                                                    <i class="fa-solid fa-chevron-down"></i>
                                                </button>
                                            </form>
                                        <?php else: ?>
                                            <span class="p-1 text-slate-200 text-xs"><i class="fa-solid fa-chevron-down"></i></span>
                                        <?php endif; ?>
                                    </div>
                                </td>

                                <!-- Category Name cell -->
                                <td class="py-3.5 px-5">
                                    <!-- View State -->
                                    <div x-show="editingId !== <?= $id ?>" class="font-bold text-slate-700">
                                        <?= escape_html($cat['name']) ?>
                                    </div>
                                    <!-- Inline Edit State -->
                                    <div x-show="editingId === <?= $id ?>" style="display: none;">
                                        <form method="POST" action="<?= url("/app/couple/budget/categories/rename/{$id}") ?>" class="flex gap-2 max-w-sm">
                                            <input type="hidden" name="_csrf" value="<?= escape_html($_SESSION['csrf_token'] ?? '') ?>">
                                            <input type="text" name="name" x-model="editingName" class="form-input text-xs py-1 px-2.5" required>
                                            <button type="submit" class="p-1.5 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 rounded-lg text-xs" title="Save">
                                                <i class="fa-solid fa-check"></i>
                                            </button>
                                            <button type="button" @click="editingId = null" class="p-1.5 bg-slate-50 hover:bg-slate-100 text-slate-600 rounded-lg text-xs" title="Cancel">
                                                <i class="fa-solid fa-xmark"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>

                                <!-- Action Buttons -->
                                <td class="py-3.5 px-5 text-right">
                                    <div class="flex items-center justify-end gap-1.5">
                                        <button type="button" @click="startEdit(<?= $id ?>, '<?= escape_html($cat['name']) ?>')" x-show="editingId !== <?= $id ?>" class="p-1.5 bg-slate-50 hover:bg-slate-100 text-slate-650 rounded-xl hover:text-[#D4A28C] transition-all text-xs" title="Rename Category">
                                            <i class="fa-solid fa-pencil text-[10px]"></i> Rename
                                        </button>
                                        
                                        <form method="POST" action="<?= url("/app/couple/budget/categories/delete/{$id}") ?>" class="inline" onsubmit="return confirm('WARNING: Deleting this category will soft-delete all expense items and payment records associated with it. Are you sure you want to proceed?');">
                                            <input type="hidden" name="_csrf" value="<?= escape_html($_SESSION['csrf_token'] ?? '') ?>">
                                            <button type="submit" x-show="editingId !== <?= $id ?>" class="p-1.5 text-rose-600 hover:bg-rose-50 rounded-xl transition-all text-xs flex items-center gap-1" title="Delete Category">
                                                <i class="fa-solid fa-trash-can text-[10px]"></i> Delete
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php endif; ?>
    </div>

</div>
