<?php
// Fallback falls $authView nicht gesetzt ist
$authView = $authView ?? 'login';

// Optional: View über GET-Parameter überschreiben (?view=login|register)
if (isset($_GET['view']) && in_array($_GET['view'], ['login', 'register'], true)) {
    $authView = $_GET['view'];
}

// Flash-Meldung holen (falls flash_get() existiert)
$flash = function_exists('flash_get') ? flash_get() : null;

// Wenn eine Flash-Message mit Kontext kommt, Tabs entsprechend umschalten
if ($flash && !empty($flash['context']) && in_array($flash['context'], ['login', 'register'], true)) {
    $authView = $flash['context'];
}
?>
<section id="auth" class="section-band section-band--reverse border-t border-brand-border/60 py-16 sm:py-20">
    <div class="px-4 sm:px-6 lg:px-8">
        <div class="section-shell w-full max-w-2xl mx-auto">
        <div class="mb-8 text-center space-y-3">
            <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="auth_kicker">
                Account &amp; Login
            </p>
            <h1 class="font-heading text-2xl sm:text-3xl font-bold text-brand-text" data-i18n="auth_title">
                Melde dich bei USBCheck an
            </h1>
            <p class="text-sm sm:text-base text-brand-muted max-w-2xl mx-auto" data-i18n="auth_intro">
                Mit einem Account kannst du Tests speichern, Reports exportieren und den Pro-Modus auf mehreren Geräten nutzen. Die Registrierung ist kostenlos – du kannst später jederzeit auf Pro upgraden.
            </p>
        </div>

        <?php if ($flash): ?>
            <div class="mb-6 rounded-xl px-4 py-3 text-sm border
                <?php if ($flash['type'] === 'error'): ?>
                    border-red-500/60 bg-red-500/10 text-red-300
                <?php elseif ($flash['type'] === 'success'): ?>
                    border-emerald-500/60 bg-emerald-500/10 text-emerald-300
                <?php else: ?>
                    border-brand-border bg-brand-bg/60 text-brand-muted
                <?php endif; ?>
            ">
                <?= htmlspecialchars($flash['message']) ?>
            </div>
        <?php endif; ?>

        <!-- Tabs -->
        <div class="mb-6 rounded-full border border-brand-border bg-brand-surface/80 p-1 flex text-xs font-semibold uppercase tracking-[0.18em] text-brand-muted">
            <button
                type="button"
                class="flex-1 px-3 py-2 rounded-full text-center transition-colors auth-tab <?= $authView === 'login' ? 'bg-brand-primary text-brand-bg' : 'hover:text-brand-primary'; ?>"
                data-tab="login"
                data-i18n="auth_tab_login">
                Login
            </button>
            <button
                type="button"
                class="flex-1 px-3 py-2 rounded-full text-center transition-colors auth-tab <?= $authView === 'register' ? 'bg-brand-primary text-brand-bg' : 'hover:text-brand-primary'; ?>"
                data-tab="register"
                data-i18n="auth_tab_register">
                Registrieren
            </button>
        </div>

        <!-- Panels -->
        <div class="space-y-6">
            <!-- Login Panel -->
            <div
                id="authPanelLogin"
                class="card-frame card-frame--soft space-y-5 <?= $authView !== 'login' ? 'hidden' : ''; ?>">
                <h2 class="font-heading text-lg font-semibold text-brand-text" data-i18n="auth_login_title">
                    Login
                </h2>
                <p class="text-sm text-brand-muted" data-i18n="auth_login_text">
                    Melde dich mit deiner E-Mail-Adresse und deinem Passwort an.
                </p>

                <form method="post" action="/auth/login" class="space-y-4" autocomplete="on">
                    <input type="hidden" name="lang" value="<?= htmlspecialchars($lang ?? 'de') ?>">
                    <input type="hidden" name="redirect" value="<?= htmlspecialchars($_GET['redirect'] ?? '/') ?>">
                    <input type="hidden" name="authView" value="login">

                    <div class="space-y-1">
                        <label for="login_email" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_login_email_label">
                            E-Mail-Adresse
                        </label>
                        <input
                            type="email"
                            id="login_email"
                            name="email"
                            required
                            class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
                            placeholder="you@example.com"
                            autocomplete="username"
                        >
                    </div>

                    <div class="space-y-1">
                        <label for="login_password" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_login_password_label">
                            Passwort
                        </label>
                        <input
                            type="password"
                            id="login_password"
                            name="password"
                            required
                            class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
                            placeholder="••••••••"
                            autocomplete="current-password"
                        >
                    </div>

                    <p class="text-xs text-red-400 hidden" id="login_error">
                        <!-- später dynamisch -->
                    </p>

                    <button
                        type="submit"
                        class="w-full inline-flex items-center justify-center rounded-full bg-brand-primary px-4 py-2.5 text-sm font-semibold text-brand-bg hover:bg-blue-400 transition-colors"
                        data-i18n="auth_login_submit">
                        Einloggen
                    </button>

                    <div class="flex justify-between items-center text-xs text-brand-muted mt-1">
                        <a href="#" class="hover:text-brand-primary transition-colors" data-i18n="auth_login_forgot">
                            Passwort vergessen?
                        </a>
                    </div>
                </form>
            </div>

            <!-- Register Panel -->
            <div
                id="authPanelRegister"
                class="card-frame space-y-5 <?= $authView !== 'register' ? 'hidden' : ''; ?>">
                <h2 class="font-heading text-lg font-semibold text-brand-text" data-i18n="auth_register_title">
                    Kostenlos registrieren
                </h2>
                <p class="text-sm text-brand-muted" data-i18n="auth_register_text">
                    Erstelle einen kostenlosen Account, um Tests zu speichern, Berichte zu exportieren und den Pro-Modus später freizuschalten.
                </p>

                <form method="post" action="/auth/register" class="space-y-4" autocomplete="on">
                    <input type="hidden" name="lang" value="<?= htmlspecialchars($lang ?? 'de') ?>">
                    <input type="hidden" name="redirect" value="<?= htmlspecialchars($_GET['redirect'] ?? '/') ?>">
                    <input type="hidden" name="authView" value="register">

                    <div class="space-y-1">
                        <label for="reg_name" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_register_name_label">
                            Name
                        </label>
                        <input
                            type="text"
                            id="reg_name"
                            name="name"
                            required
                            class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
                            placeholder="Dein Name"
                            autocomplete="name"
                        >
                    </div>

                    <div class="space-y-1">
                        <label for="reg_email" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_register_email_label">
                            E-Mail-Adresse
                        </label>
                        <input
                            type="email"
                            id="reg_email"
                            name="email"
                            required
                            class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
                            placeholder="you@example.com"
                            autocomplete="email"
                        >
                    </div>

                    <div class="space-y-1">
                        <label for="reg_password" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_register_password_label">
                            Passwort
                        </label>
                        <input
                            type="password"
                            id="reg_password"
                            name="password"
                            required
                            class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
                            placeholder="Mindestens 8 Zeichen"
                            autocomplete="new-password"
                        >
                    </div>

                    <p class="text-xs text-red-400 hidden" id="register_error">
                        <!-- später dynamisch -->
                    </p>

                    <button
                        type="submit"
                        class="w-full inline-flex items-center justify-center rounded-full border border-brand-primary bg-brand-bg/80 px-4 py-2.5 text-sm font-semibold text-brand-primary hover:bg-brand-primary hover:text-brand-bg transition-colors"
                        data-i18n="auth_register_submit">
                        Account erstellen
                    </button>

                    <p class="text-[11px] text-brand-muted/80 mt-1" data-i18n="auth_register_hint">
                        Durch die Registrierung akzeptierst du die Datenschutzerklärung und das Impressum von USBCheck.
                    </p>
                </form>
            </div>
        </div>
        </div>
    </div>
</section>
