<?php

/**
 * Workspace Setup Checklist Component
 *
 * Renders an interactive 7-step checklist displaying setup progress.
 * Presentation-only component. Does not query database, access sessions, or PDO.
 *
 * Variables expected in scope:
 *   $checklist — array — Checklist state payload returned by WorkspaceService::getChecklist().
 *                Contains keys: 'steps', 'progress_percentage', 'ready_to_send_unlocked'.
 *
 * @package Inveetaire
 * @ref     SPRINT3_PLANNING.md, SPRINT3_EXECUTION_GUIDE.md, WS-002
 */

/** @var array $checklist */
$checklist = $checklist ?? [
    'steps' => [],
    'progress_percentage' => 0,
    'ready_to_send_unlocked' => false
];

$steps = $checklist['steps'] ?? [];
$progress = (int) ($checklist['progress_percentage'] ?? 0);
$unlocked = (bool) ($checklist['ready_to_send_unlocked'] ?? false);

?>

<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden" id="workspace-checklist-widget">
    
    <!-- Checklist Header -->
    <div class="px-6 py-5 border-b border-slate-100 bg-slate-50/50">
        <div class="flex items-center justify-between gap-4 flex-wrap">
            <div>
                <h3 class="text-base font-bold text-slate-900">Wedding Setup Checklist</h3>
                <p class="text-xs text-slate-500 mt-0.5">Complete these tasks to launch your wedding invitation website.</p>
            </div>
            <!-- Progress Badge -->
            <div class="flex items-center gap-2.5">
                <span class="text-2xl font-extrabold text-amber-600 font-mono tracking-tight">
                    <?= escape_html((string) $progress) ?>%
                </span>
                <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Done</span>
            </div>
        </div>

        <!-- Progress Bar -->
        <div class="w-full bg-slate-200 h-2 rounded-full mt-4 overflow-hidden">
            <div 
                class="bg-gradient-to-r from-amber-500 to-amber-600 h-full rounded-full transition-all duration-700 ease-out"
                style="width: <?= escape_html((string) $progress) ?>%"
                role="progressbar" 
                aria-valuenow="<?= escape_html((string) $progress) ?>" 
                aria-valuemin="0" 
                aria-valuemax="100"
                aria-label="Setup progress"
            ></div>
        </div>
    </div>

    <!-- Steps List -->
    <ul class="divide-y divide-slate-100" role="list">
        <?php foreach ($steps as $number => $step): ?>
            <?php 
            $isCompleted = (bool) ($step['completed'] ?? false); 
            $isReadyToSend = ($step['slug'] === 'ready_to_send');
            ?>
            <li class="px-6 py-4 transition hover:bg-slate-50/50" id="checklist-step-<?= escape_html((string) $number) ?>">
                <div class="flex items-center justify-between gap-4">
                    <div class="flex items-center gap-4">
                        
                        <!-- Checkbox / Circle Status Icon -->
                        <div class="flex-shrink-0">
                            <?php if ($isCompleted): ?>
                                <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-emerald-100 text-emerald-600 border border-emerald-200 shadow-sm" aria-label="Completed">
                                    <i class="fa-solid fa-circle-check text-[14px]"></i>
                                </span>
                            <?php else: ?>
                                <?php if ($isReadyToSend): ?>
                                    <!-- Lock Icon for Ready to Send -->
                                    <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-slate-100 text-slate-400 border border-slate-200" aria-label="Locked">
                                        <i class="fa-solid fa-lock text-[11px]"></i>
                                    </span>
                                <?php else: ?>
                                    <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white border border-slate-300 text-slate-300 text-xs font-semibold font-mono" aria-label="Pending">
                                        <?= escape_html((string) $number) ?>
                                    </span>
                                <?php endif; ?>
                            <?php endif; ?>
                        </div>

                        <!-- Step Description -->
                        <div>
                            <span class="text-sm font-semibold <?= $isCompleted ? 'text-slate-500 line-through decoration-slate-300' : 'text-slate-800' ?>">
                                <?= escape_html($step['name']) ?>
                            </span>
                            
                            <!-- Subtext Details based on Step Slugs -->
                            <p class="text-xs text-slate-400 mt-0.5">
                                <?php if ($step['slug'] === 'workspace_provisioned'): ?>
                                    Wedding database, boundaries, and configs initialized.
                                <?php elseif ($step['slug'] === 'configure_invitation'): ?>
                                    Set up couple names, stories, bank information, and gift registries.
                                <?php elseif ($step['slug'] === 'select_theme'): ?>
                                    Select and apply a released design theme version.
                                <?php elseif ($step['slug'] === 'add_first_guest'): ?>
                                    Register at least one guest account in the guest list dashboard.
                                <?php elseif ($step['slug'] === 'configure_printer'): ?>
                                    Adjust label prints and angpao ticket sizes.
                                <?php elseif ($step['slug'] === 'create_first_event'): ?>
                                    Publish Reception, Holy Matrimony, or Wedding ceremonies.
                                <?php elseif ($step['slug'] === 'ready_to_send'): ?>
                                    <?php if ($isCompleted): ?>
                                        🎉 Setup is complete! Your wedding invitations are ready to be sent.
                                    <?php else: ?>
                                        Unlock this step by completing all six prerequisite tasks above.
                                    <?php endif; ?>
                                <?php endif; ?>
                            </p>
                        </div>
                    </div>

                    <!-- Side Status Tag -->
                    <div class="flex-shrink-0">
                        <?php if ($isCompleted): ?>
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xxs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-100">
                                Completed
                            </span>
                        <?php else: ?>
                            <?php if ($isReadyToSend): ?>
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xxs font-semibold bg-slate-100 text-slate-600 border border-slate-200">
                                    Locked
                                </span>
                            <?php else: ?>
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xxs font-semibold bg-amber-50 text-amber-700 border border-amber-100 animate-pulse">
                                    Pending
                                </span>
                            <?php endif; ?>
                        <?php endif; ?>
                    </div>
                </div>
            </li>
        <?php endforeach; ?>
    </ul>
</div>
