<?php

/**
 * Workspace — Finish & Review View (Step 4/5)
 */

/** @var array $workspace */
/** @var array $couple */
/** @var array $crewNames */
/** @var array $errors */

$commercialPlans = [
    1 => 'Starter',
    2 => 'Pro',
    3 => 'Custom'
];
$planName = $commercialPlans[(int) $workspace['commercial_plan_id']] ?? 'Unknown';
$limitText = ((int) $workspace['commercial_plan_id'] === 3) ? ($workspace['custom_guest_limit'] . ' (Custom)') : ($workspace['commercial_plan_id'] == 1 ? '150' : '500');

?>

<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">

    <!-- Step Wizard Progress Indicator -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <h2 class="text-2xl font-bold leading-7 text-slate-900 sm:text-3xl tracking-tight">
                Review & Finish
            </h2>
            <span class="text-xs font-bold text-slate-400">Step 5 of 5</span>
        </div>
        <div class="mt-4 bg-slate-200 h-1.5 rounded-full overflow-hidden">
            <div class="h-full rounded-full transition-all duration-300" style="background-color: var(--brand-charcoal); width: 100%;"></div>
        </div>
        <div class="flex justify-between text-[10px] font-bold text-slate-400 mt-2">
            <span class="text-slate-650">1. Basic Info</span>
            <span class="text-slate-650">2. Preview Config</span>
            <span class="text-slate-650">3. Couple Owner</span>
            <span class="text-slate-650">4. Assign Crew</span>
            <span style="color: var(--brand-charcoal); font-weight: 800;">5. Finish & Review</span>
        </div>
    </div>

    <!-- Main Content Card -->
    <div class="card p-0 overflow-hidden bg-white border border-slate-150 rounded-2xl shadow-sm">
        
        <div class="bg-slate-50 px-6 py-4 border-b border-slate-150">
            <h3 class="text-sm font-bold text-slate-800">5. Workspace Summary & Provisioning</h3>
            <p class="text-xxs text-slate-450 mt-0.5">Please review all settings. Clicking 'Finish & Provision' will write records to the database.</p>
        </div>

        <?php if (!empty($errors['general'])): ?>
            <div class="alert alert-danger mx-6 mt-6 bg-rose-50 border border-rose-150 text-rose-800 p-4 rounded-xl" role="alert">
                <div class="flex gap-2">
                    <i class="fa-solid fa-triangle-exclamation text-rose-600 text-sm mt-0.5"></i>
                    <p class="text-xs font-bold"><?= escape_html($errors['general']) ?></p>
                </div>
            </div>
        <?php endif; ?>

        <form
            method="POST"
            action="/app/admin/workspaces/finish"
            id="workspace-finish-form"
            class="p-6 space-y-6"
        >
            <?= csrf_field() ?>

            <!-- Preview Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                
                <!-- Workspace details card -->
                <div class="border border-slate-150 rounded-xl p-5 space-y-4 bg-slate-50/50">
                    <h4 class="text-xs font-black uppercase tracking-wider flex items-center gap-1.5" style="color: var(--brand-rose-gold);">
                        <i class="fa-solid fa-calendar-check"></i> Workspace Specifications
                    </h4>
                    <div class="grid grid-cols-2 gap-3 text-xxs">
                        <div>
                            <span class="block text-slate-450 font-bold uppercase">Groom Name</span>
                            <span class="text-slate-800 font-bold mt-1 block"><?= escape_html($workspace['groom_name']) ?></span>
                        </div>
                        <div>
                            <span class="block text-slate-450 font-bold uppercase">Bride Name</span>
                            <span class="text-slate-800 font-bold mt-1 block"><?= escape_html($workspace['bride_name']) ?></span>
                        </div>
                        <div>
                            <span class="block text-slate-450 font-bold uppercase">Wedding Date</span>
                            <span class="font-mono text-slate-800 font-bold mt-1 block"><?= escape_html($workspace['wedding_date']) ?></span>
                        </div>
                        <div>
                            <span class="block text-slate-450 font-bold uppercase">URL Slug</span>
                            <span class="font-mono text-slate-800 font-bold mt-1 block">/i/<?= escape_html($workspace['slug']) ?></span>
                        </div>
                        <div>
                            <span class="block text-slate-450 font-bold uppercase">Commercial Plan</span>
                            <span class="text-slate-800 font-bold mt-1 block"><?= escape_html($planName) ?></span>
                        </div>
                        <div>
                            <span class="block text-slate-450 font-bold uppercase">Guest Limit</span>
                            <span class="font-mono text-slate-800 font-bold mt-1 block"><?= escape_html($limitText) ?></span>
                        </div>
                    </div>
                </div>

                <!-- Couple owner account card -->
                <div class="border border-slate-150 rounded-xl p-5 space-y-4 bg-slate-50/50">
                    <h4 class="text-xs font-black uppercase tracking-wider flex items-center gap-1.5" style="color: var(--brand-rose-gold);">
                        <i class="fa-solid fa-user-group"></i> Owner Couple Account
                    </h4>
                    <div class="grid grid-cols-1 gap-3 text-xxs">
                        <div>
                            <span class="block text-slate-450 font-bold uppercase">Display Name</span>
                            <span class="text-slate-800 font-bold mt-0.5 block"><?= escape_html($couple['display_name']) ?></span>
                        </div>
                        <div>
                            <span class="block text-slate-450 font-bold uppercase">Username</span>
                            <span class="font-mono text-slate-800 font-bold mt-0.5 block"><?= escape_html($couple['username']) ?></span>
                        </div>
                        <div>
                            <span class="block text-slate-450 font-bold uppercase">Email Address</span>
                            <span class="font-mono text-slate-800 font-bold mt-0.5 block"><?= escape_html($couple['email']) ?></span>
                        </div>
                    </div>
                </div>

                <!-- Assigned crew operators card -->
                <div class="md:col-span-2 border border-slate-150 rounded-xl p-5 space-y-4 bg-slate-50/50">
                    <h4 class="text-xs font-black uppercase tracking-wider flex items-center gap-1.5" style="color: var(--brand-rose-gold);">
                        <i class="fa-solid fa-users"></i> Assigned Crew Operators
                    </h4>
                    <?php if (empty($crewNames)): ?>
                        <p class="text-xxs text-slate-450 italic">No crew accounts assigned yet. You can assign crew later inside Crew Management.</p>
                    <?php else: ?>
                        <div class="flex flex-wrap gap-2">
                            <?php foreach ($crewNames as $name): ?>
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xxs font-bold" style="background-color: var(--brand-ivory-warm); border: 1px solid var(--brand-ivory-dark); color: var(--brand-charcoal);">
                                    <i class="fa-solid fa-user text-[9px] mr-1"></i> <?= escape_html($name) ?>
                                </span>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>

            </div>

            <!-- Actions Footer -->
            <div class="flex items-center justify-between pt-6 border-t border-slate-100">
                <a
                    href="/app/admin/workspaces/assign-crew"
                    class="btn btn-secondary text-xs font-bold px-4 py-2 rounded-xl flex items-center gap-1"
                >
                    <i class="fa-solid fa-arrow-left text-[10px]"></i> Back
                </a>
                <button
                    type="submit"
                    class="btn btn-primary text-xs font-bold px-6 py-2.5 rounded-xl flex items-center gap-1.5"
                >
                    <i class="fa-solid fa-square-check text-[11px]"></i> Finish & Provision
                </button>
            </div>

        </form>

    </div>

</div>
