<?php

/**
 * Auth — Reset Password View
 *
 * Renders the password reset form where a user sets a new password after
 * following a valid reset link.
 *
 * Location: app/views/auth/reset_password.php
 * Controller render call: $this->render('auth/reset_password', [...])
 * Wrapped by: app/views/layouts/public.php
 *
 * Variables available in scope (extracted by BaseController::render()):
 *   $flash  — array<string, string> — flash messages from previous request
 *   $title  — string                — page title
 *   $token  — string                — reset token passed to the hidden field
 *
 * Output escaping:
 *   All dynamic output uses escape_html() — no raw echo (DBP v1.1 §9.2).
 *
 * CSRF:
 *   The hidden _csrf field is output via csrf_field() helper.
 *   POST /reset-password/{token} is protected by CsrfMiddleware.
 *
 * Token handling:
 *   The $token is embedded in the form as a hidden field.
 *   Token validation occurs server-side in AuthService before any DB write.
 *
 * @ref SPRINT2_PLANNING.md §5, DBP v1.1 §9.2, AUTH-003
 */

/** @var array<string, string> $flash */
/** @var string $token */
$flash = $flash ?? [];
$token = isset($token) && is_string($token) ? $token : '';

?>

<div class="w-full max-w-md mx-auto" id="reset-password-wrapper">

    <!-- Logo above card panel -->
    <div class="flex justify-center mb-6">
        <a href="/" class="hover:opacity-85 transition-opacity" aria-label="INVEETAIRE Home">
            <img src="<?= asset('/assets/branding/logo/Primary-Logo-Light-TransparentBG.png') ?>" alt="INVEETAIRE Logo" style="height: 76px; width: auto; object-fit: contain;">
        </a>
    </div>

    <!-- ── Card ─────────────────────────────────────────────────────────── -->
    <div class="bg-white rounded-2xl shadow-xl overflow-hidden border border-slate-100">

        <!-- ── Header ───────────────────────────────────────────────────── -->
        <div class="hero-card-gradient px-8 py-10 text-center rounded-t-2xl">
            <h1 class="text-2xl font-bold text-white tracking-tight">Set new password</h1>
            <p class="mt-1 text-sm" style="color: var(--color-neutral-300);">Choose a strong password for your account</p>
        </div>

        <!-- ── Flash Messages ────────────────────────────────────────────── -->
        <?php if (!empty($flash)): ?>
            <div class="px-8 pt-6" id="reset-flash-container" role="alert" aria-live="polite">
                <?php foreach ($flash as $type => $message): ?>
                    <?php
                    if ($type === 'success') {
                        $alertClass = 'alert-success';
                    } elseif ($type === 'warning') {
                        $alertClass = 'alert-warning';
                    } else {
                        $alertClass = 'alert-danger';
                    }
                    ?>
                    <div class="alert <?= escape_html($alertClass) ?> mb-2" id="flash-<?= escape_html($type) ?>">
                        <span><?= escape_html($message) ?></span>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <!-- ── Reset Password Form ───────────────────────────────────────── -->
        <form
            method="POST"
            action="<?= url('/reset-password/' . $token) ?>"
            id="reset-password-form"
            novalidate
            class="px-8 py-8 space-y-5"
        >
            <?= csrf_field() ?>

            <!-- Hidden token field (belt-and-suspenders — also in URL) -->
            <input type="hidden" name="token" value="<?= escape_html($token) ?>">

            <!-- New password -->
            <div class="form-group">
                <label for="password" class="form-label">
                    New Password
                </label>
                <div class="relative">
                    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                        <i class="fa-solid fa-lock text-slate-400 text-sm"></i>
                    </div>
                    <input
                        type="password"
                        id="password"
                        name="password"
                        autocomplete="new-password"
                        required
                        minlength="8"
                        class="form-input pl-10 pr-10"
                        placeholder="Minimum 8 characters"
                        aria-required="true"
                        aria-describedby="password-hint"
                    >
                    <!-- Show / hide toggle (Alpine.js) -->
                    <button
                        type="button"
                        id="toggle-password"
                        class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-600 transition-colors"
                        aria-label="Toggle password visibility"
                        x-data
                        @click="
                            const inp = document.getElementById('password');
                            inp.type = inp.type === 'password' ? 'text' : 'password';
                            $el.querySelector('i').classList.toggle('hidden');
                            $el.querySelector('i:nth-of-type(2)').classList.toggle('hidden');
                        "
                    >
                        <i class="fa-solid fa-eye text-slate-400 text-sm"></i>
                        <i class="fa-solid fa-eye-slash text-slate-400 text-sm hidden"></i>
                    </button>
                </div>
                <p id="password-hint" class="mt-1 text-xs text-slate-500">
                    At least 8 characters &nbsp;·&nbsp; Use a mix of letters, numbers, and symbols.
                </p>
            </div>

            <!-- Confirm password -->
            <div class="form-group">
                <label for="password_confirm" class="form-label">
                    Confirm New Password
                </label>
                <div class="relative">
                    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                        <i class="fa-solid fa-lock text-slate-400 text-sm"></i>
                    </div>
                    <input
                        type="password"
                        id="password_confirm"
                        name="password_confirm"
                        autocomplete="new-password"
                        required
                        minlength="8"
                        class="form-input pl-10 pr-4"
                        placeholder="Repeat your new password"
                        aria-required="true"
                    >
                </div>
            </div>

            <!-- Submit -->
            <div class="pt-2">
                <button
                    type="submit"
                    id="reset-password-submit-btn"
                    class="btn btn-primary btn-md w-full"
                >
                    <i class="fa-solid fa-key mr-1"></i> Update password
                </button>
            </div>

        </form>

        <!-- ── Footer Links ─────────────────────────────────────────────── -->
        <div class="border-t border-slate-100 px-8 py-5 text-center bg-slate-50">
            <a
                href="<?= url('/couple') ?>"
                id="reset-back-to-login-link"
                class="link-elegant text-sm font-semibold"
            >
                <i class="fa-solid fa-arrow-left text-[10px] mr-1"></i> Back to sign in
            </a>
        </div>

    </div>

    <!-- ── Attribution ──────────────────────────────────────────────────── -->
    <p class="mt-6 text-center text-xs text-gray-400">
        Secured by Inveetaire &mdash; Premium Wedding Experience Platform
    </p>

</div>
