<?php

/**
 * Auth — Login View
 *
 * Unified login form for couple, crew, and super_admin roles.
 * Rendered by AuthController::showLogin() via BaseController::render().
 * Wrapped by app/views/layouts/public.php.
 *
 * Location: app/views/auth/login.php
 * Controller render call: $this->render('auth/login', [...])
 *
 * Variables available in scope (extracted by BaseController::render()):
 *   $flash  — array<string, string> — flash messages (populated on failure redirect)
 *   $title  — string                — page title (set in AuthController)
 *
 * 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 (INIT-010).
 *   The POST /login route is protected by CsrfMiddleware (AUTH-001 routes.php).
 *
 * @ref SPRINT2_PLANNING.md §5, DBP v1.1 §9.2, AUTH-001
 */

/** @var array<string, string> $flash */
$flash = $flash ?? [];
?>
<div class="w-full max-w-md mx-auto" id="login-form-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"><?= escape_html($heading ?? 'Welcome back') ?></h1>
            <p class="mt-1 text-sm" style="color: var(--color-neutral-300);"><?= escape_html($subheading ?? 'Sign in to your Inveetaire workspace') ?></p>
        </div>

        <!-- ── Flash Messages ────────────────────────────────────────────── -->
        <?php if (!empty($flash)): ?>
            <div class="px-8 pt-6 -mb-2" id="login-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; ?>

        <!-- ── Login Form ────────────────────────────────────────────────── -->
        <form
            method="POST"
            action="<?= escape_html($action ?? '/couple') ?>"
            id="login-form"
            novalidate
            class="px-8 py-8 space-y-5"
        >
            <?= csrf_field() ?>

            <!-- Email / Username -->
            <div class="form-group">
                <label for="identifier" class="form-label">
                    Email or Username
                </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-user text-slate-400 text-sm"></i>
                    </div>
                    <input
                        type="text"
                        id="identifier"
                        name="identifier"
                        autocomplete="username"
                        required
                        class="form-input pl-10"
                        placeholder="you@example.com or crew-username"
                        aria-required="true"
                        aria-describedby="identifier-hint"
                    >
                </div>
                <p id="identifier-hint" class="mt-1.5 text-xs text-slate-500">
                    Couple &amp; Admin: use email address &nbsp;·&nbsp; Crew: use username
                </p>
            </div>

            <!-- Password -->
            <div class="form-group">
                <div class="flex items-center justify-between mb-1.5">
                    <label for="password" class="form-label mb-0">
                        Password
                    </label>
                </div>
                <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="current-password"
                        required
                        class="form-input pl-10 pr-10"
                        placeholder="Enter your password"
                        aria-required="true"
                    >
                    <!-- Show / hide password 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>
            </div>

            <!-- Submit -->
            <div class="pt-2 text-center">
                <button
                    type="submit"
                    id="login-submit-btn"
                    class="btn btn-primary btn-md w-full"
                >
                    Sign in
                </button>
                <div class="mt-5 mb-2">
                    <a href="/" class="inline-flex items-center text-xs font-semibold uppercase tracking-wider transition-colors duration-200" style="color: var(--brand-charcoal);" onmouseover="this.style.color='var(--brand-rose-gold)'" onmouseout="this.style.color='var(--brand-charcoal)'">
                        &larr; Back to Home
                    </a>
                </div>
            </div>

        </form>

        <!-- ── Footer Links ─────────────────────────────────────────────── -->
        <div class="border-t border-slate-100 px-8 py-5 text-center bg-slate-50">
            <a
                href="<?= url('/forgot-password') ?>"
                id="forgot-password-link"
                class="link-elegant text-sm font-semibold"
            >
                Forgot your password?
            </a>
        </div>

    </div>

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

</div>
