<?php

/**
 * Workspace — Provisioning Success View
 * Step 3: View credentials
 */

/** @var array $result */

?>

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

    <!-- Step Wizard Progress Indicator -->
    <div class="mb-8 text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-emerald-50 border border-emerald-100 rounded-full text-emerald-500 mb-4 animate-bounce">
            <i class="fa-solid fa-circle-check text-3xl"></i>
        </div>
        <h2 class="text-2xl font-black text-slate-900 tracking-tight">
            Workspace Provisioned!
        </h2>
        <p class="text-xs text-slate-500 mt-1">The tenant isolation environment and couple account have been created successfully.</p>
    </div>

    <!-- Main Content Card -->
    <div class="bg-white border border-slate-150 rounded-2xl shadow-sm overflow-hidden">
        
        <div class="bg-slate-50 px-6 py-4 border-b border-slate-150">
            <h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider">Access Credentials</h3>
            <p class="text-[10px] text-slate-450 mt-0.5">Please copy these credentials. The password is encrypted in database and cannot be retrieved again.</p>
        </div>

        <div class="p-6 space-y-5 text-xs text-slate-650">
            
            <div class="space-y-4 bg-slate-50 p-4 rounded-xl border border-slate-100 font-mono">
                <!-- Username -->
                <div class="flex justify-between items-center py-1">
                    <span class="text-slate-400 font-bold uppercase text-[9px]">Username</span>
                    <span class="font-bold text-slate-800" id="cred-username"><?= escape_html($result['username']) ?></span>
                </div>
                <!-- Email -->
                <div class="flex justify-between items-center py-1 border-t border-slate-100">
                    <span class="text-slate-400 font-bold uppercase text-[9px]">Email Address</span>
                    <span class="font-bold text-slate-800" id="cred-email"><?= escape_html($result['email']) ?></span>
                </div>
                <!-- Password -->
                <div class="flex justify-between items-center py-1 border-t border-slate-100" x-data="{ show: false }">
                    <span class="text-slate-400 font-bold uppercase text-[9px]">Password</span>
                    <div class="flex items-center gap-2">
                        <span class="font-bold text-slate-800" x-text="show ? '<?= escape_html($result['plain_password']) ?>' : '••••••••••••'"></span>
                        <button type="button" @click="show = !show" class="text-[10px] bg-none border-none cursor-pointer focus:outline-none hover:opacity-85" style="color: var(--brand-rose-gold);">
                            <i class="fa-solid" :class="show ? 'fa-eye-slash' : 'fa-eye'"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="bg-slate-50/50 p-4 rounded-xl border border-slate-100 space-y-2">
                <h4 class="font-bold text-slate-700 uppercase text-[9px] tracking-wider">Workspace metadata</h4>
                <div class="flex justify-between py-0.5 text-xxs">
                    <span class="text-slate-400">Workspace Name</span>
                    <span class="font-bold text-slate-800"><?= escape_html($result['workspace_name'] ?? '') ?></span>
                </div>
                <div class="flex justify-between py-0.5 text-xxs">
                    <span class="text-slate-400">URL Slug</span>
                    <span class="font-mono text-slate-800">/i/<?= escape_html($result['slug'] ?? '') ?></span>
                </div>
                <div class="flex justify-between py-0.5 text-xxs">
                    <span class="text-slate-400">Wedding Date</span>
                    <span class="font-mono text-slate-800"><?= escape_html($result['wedding_date'] ?? '') ?></span>
                </div>
                <div class="flex justify-between py-0.5 text-xxs">
                    <span class="text-slate-400">Assigned Crew</span>
                    <span class="text-slate-800 font-bold">
                        <?php if (empty($result['crew_names'])): ?>
                            None
                        <?php else: ?>
                            <?= escape_html(implode(', ', $result['crew_names'])) ?>
                        <?php endif; ?>
                    </span>
                </div>
                <div class="flex justify-between py-0.5 text-xxs">
                    <span class="text-slate-400">Workspace ID</span>
                    <span class="font-mono text-slate-800"><?= $result['workspace_id'] ?></span>
                </div>
                <div class="flex justify-between py-0.5 text-xxs">
                    <span class="text-slate-400">Tenant Owner User ID</span>
                    <span class="font-mono text-slate-800"><?= $result['user_id'] ?></span>
                </div>
            </div>

            <!-- Redirect / Complete buttons -->
            <div class="pt-4 flex justify-center">
                <a
                    href="/app/admin/dashboard"
                    class="btn btn-primary text-xs font-bold px-6 py-2.5 rounded-xl shadow-xs"
                >
                    Done & Return to Dashboard
                </a>
            </div>

        </div>

    </div>

</div>
