<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Templates use local variables supplied by the render context.
if (!defined('ABSPATH')) {
    exit;
}

$ui_labels = isset($ui_labels) && is_array($ui_labels) ? $ui_labels : [];
$plural_label = sanitize_text_field((string) ($ui_labels['plural'] ?? __('Events', 'nexdirectory')));
$page_kicker = sanitize_text_field((string) $this->get_event_hero_kicker_text());
$default_tab = isset($default_tab) ? sanitize_key((string) $default_tab) : 'login';
if (!in_array($default_tab, ['login', 'signup', 'forgot', 'reset'], true)) {
    $default_tab = 'login';
}

$can_reset = !empty($can_reset);
$forgot_url = isset($forgot_url) ? esc_url((string) $forgot_url) : '';
$login_url = isset($login_url) ? esc_url((string) $login_url) : '';
$signup_url = isset($signup_url) ? esc_url((string) $signup_url) : '';
$reset_url = isset($reset_url) ? esc_url((string) $reset_url) : '';
$reset_login = isset($reset_login) ? sanitize_user((string) $reset_login, true) : '';
$reset_key = isset($reset_key) ? sanitize_text_field((string) $reset_key) : '';
$redirect_target = isset($redirect) ? wp_validate_redirect(esc_url_raw((string) $redirect), home_url('/')) : home_url('/');
$core_login_action = network_site_url('wp-login.php', 'login_post');
$core_register_url = nexdirectory_add_query_arg('redirect_to', $redirect_target, wp_registration_url());
$core_lostpassword_url = wp_lostpassword_url($redirect_target);
$auth_id_prefix = wp_unique_id('nexdirectory-auth-');
?>

<?php $this->enqueue_local_style_asset('templates-frontend-auth-php-style-1', 'assets/generated/templates-frontend-auth-php-style-1.css'); ?>
<div class="bg-gray-50 bg-pattern min-h-screen flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8 font-sans antialiased text-gray-800"
     x-data="{ currentTab: '<?php echo esc_js($default_tab); ?>', isSubmitting: false }"
     @nexdirectory-submit-reset.window="isSubmitting = false">

    <?php
    // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Breadcrumb markup is sanitized by esc_nexdirectory_plugin_markup() against the plugin-owned allow-list.
    echo esc_nexdirectory_plugin_markup((string) $this->render_platform_breadcrumbs(__('Sign In Or Join', 'nexdirectory')));
    ?>

    <div class="w-full max-w-md mx-auto mb-6">
        <?php echo wp_kses_post($this->render_notice()); ?>
    </div>

    <div class="sm:mx-auto sm:w-full sm:max-w-md text-center mb-8">
        <?php if ($page_kicker) : ?>
            <p class="inline-flex items-center px-3 py-1 rounded-full bg-brand-50 text-brand-600 text-xs font-bold uppercase tracking-widest mb-4 border border-brand-100 shadow-sm">
                <?php echo esc_html($page_kicker); ?>
            </p>
        <?php endif; ?>
        <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 tracking-tight mb-3">
            <?php esc_html_e('Sign In Or Join', 'nexdirectory'); ?>
        </h1>
        <p class="text-sm sm:text-base text-gray-500 max-w-sm mx-auto leading-relaxed">
            <?php /* translators: %s: Placeholder value. */ ?>
            <?php echo esc_html(sprintf(__('Access your account, submit %s, and manage your profile.', 'nexdirectory'), strtolower((string) $plural_label))); ?>
        </p>
    </div>

    <div class="sm:mx-auto w-full max-w-md">
        <div class="bg-white py-8 px-5 sm:px-10 shadow-xl shadow-gray-200/50 rounded-2xl border border-gray-100 relative overflow-hidden">
            
            <div class="absolute -top-24 -right-24 w-48 h-48 bg-brand-400/10 rounded-full mix-blend-multiply filter blur-2xl pointer-events-none"></div>

            <div class="bg-gray-100/80 p-1.5 rounded-xl flex flex-wrap gap-1 mb-8 relative z-10" role="tablist" aria-label="<?php esc_attr_e('Account access', 'nexdirectory'); ?>">
                <button type="button"
                        id="<?php echo esc_attr($auth_id_prefix . 'login-tab'); ?>"
                        role="tab"
                        aria-controls="<?php echo esc_attr($auth_id_prefix . 'login-panel'); ?>"
                        :aria-selected="currentTab === 'login'"
                        :tabindex="currentTab === 'login' ? 0 : -1"
                        x-ref="loginTab"
                        @click="currentTab = 'login'"
                        @keydown.right.prevent="currentTab = 'signup'; $refs.signupTab.focus()"
                        @keydown.end.prevent="currentTab = 'signup'; $refs.signupTab.focus()"
                        :class="currentTab === 'login' ? 'bg-white text-gray-900 shadow-sm ring-1 ring-gray-900/5' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-200/50'"
                        class="flex-1 px-3 py-2 text-sm font-semibold rounded-lg transition-all duration-200 focus:outline-none">
                    <?php esc_html_e('Log In', 'nexdirectory'); ?>
                </button>
                <button type="button"
                        id="<?php echo esc_attr($auth_id_prefix . 'signup-tab'); ?>"
                        role="tab"
                        aria-controls="<?php echo esc_attr($auth_id_prefix . 'signup-panel'); ?>"
                        :aria-selected="currentTab === 'signup'"
                        :tabindex="currentTab === 'signup' ? 0 : -1"
                        x-ref="signupTab"
                        @click="currentTab = 'signup'"
                        @keydown.left.prevent="currentTab = 'login'; $refs.loginTab.focus()"
                        @keydown.home.prevent="currentTab = 'login'; $refs.loginTab.focus()"
                        :class="currentTab === 'signup' ? 'bg-white text-gray-900 shadow-sm ring-1 ring-gray-900/5' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-200/50'"
                        class="flex-1 px-3 py-2 text-sm font-semibold rounded-lg transition-all duration-200 focus:outline-none">
                    <?php esc_html_e('Sign Up', 'nexdirectory'); ?>
                </button>
                <?php if ($can_reset) : ?>
                    <button type="button"
                            id="<?php echo esc_attr($auth_id_prefix . 'reset-tab'); ?>"
                            role="tab"
                            aria-controls="<?php echo esc_attr($auth_id_prefix . 'reset-panel'); ?>"
                            :aria-selected="currentTab === 'reset'"
                            :tabindex="currentTab === 'reset' ? 0 : -1"
                            @click="currentTab = 'reset'"
                            x-show="currentTab === 'reset'"
                            x-cloak
                            class="bg-white text-gray-900 shadow-sm ring-1 ring-gray-900/5 flex-1 px-3 py-2 text-sm font-semibold rounded-lg transition-all duration-200 focus:outline-none">
                        <?php esc_html_e('Reset', 'nexdirectory'); ?>
                    </button>
                <?php endif; ?>
            </div>

            <div class="relative z-10">
                
                <form method="post" action="<?php echo esc_url($core_login_action); ?>"
                      id="<?php echo esc_attr($auth_id_prefix . 'login-panel'); ?>"
                      role="tabpanel"
                      aria-labelledby="<?php echo esc_attr($auth_id_prefix . 'login-tab'); ?>"
                      x-show="currentTab === 'login'" x-transition.opacity.duration.300ms
                      @submit="isSubmitting = true"
                      class="space-y-5" <?php echo $default_tab === 'login' ? '' : 'x-cloak'; ?>>
                    
                    <input type="hidden" name="redirect_to" value="<?php echo esc_attr($redirect_target); ?>">
                    <input type="hidden" name="testcookie" value="1">

                    <div>
                        <label for="<?php echo esc_attr($auth_id_prefix . 'login-identifier'); ?>" class="block text-[11px] font-bold uppercase tracking-wider text-gray-500 mb-2"><?php esc_html_e('Username or Email', 'nexdirectory'); ?></label>
                        <input id="<?php echo esc_attr($auth_id_prefix . 'login-identifier'); ?>" type="text" name="log" required autocomplete="username"
                               class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm bg-gray-50 focus:bg-white focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 outline-none transition-all duration-200">
                    </div>

                    <div>
                        <label for="<?php echo esc_attr($auth_id_prefix . 'login-password'); ?>" class="block text-[11px] font-bold uppercase tracking-wider text-gray-500 mb-2"><?php esc_html_e('Password', 'nexdirectory'); ?></label>
                        <input id="<?php echo esc_attr($auth_id_prefix . 'login-password'); ?>" type="password" name="pwd" required autocomplete="current-password"
                               class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm bg-gray-50 focus:bg-white focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 outline-none transition-all duration-200">
                    </div>

                    <div class="pt-2">
                        <label class="flex items-center gap-2 text-sm text-gray-500 mb-4">
                            <input type="checkbox" name="rememberme" value="forever" class="w-4 h-4 text-brand-600 bg-gray-50 border-gray-300 rounded focus:ring-brand-500 focus:ring-2 transition-colors">
                            <span><?php esc_html_e('Remember me', 'nexdirectory'); ?></span>
                        </label>
                        <button type="submit" :disabled="isSubmitting" class="nexdirectory-force-accent-action w-full flex items-center justify-center gap-2 py-3 px-4 bg-brand-600 hover:bg-brand-700 disabled:opacity-70 active:scale-[0.98] text-white text-sm font-semibold rounded-xl transition-all shadow-sm">
                            <svg x-show="!isSubmitting" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
                            <svg x-show="isSubmitting" x-cloak class="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
                            <span x-text="isSubmitting ? 'Logging in...' : '<?php esc_html_e('Log In', 'nexdirectory'); ?>'"></span>
                        </button>
                    </div>

                    <div class="text-center mt-4">
                        <button type="button" @click="currentTab = 'forgot'" class="text-sm font-medium text-gray-500 hover:text-brand-600 transition-colors">
                            <?php esc_html_e('Forgot your password?', 'nexdirectory'); ?>
                        </button>
                    </div>
                </form>

                <section id="<?php echo esc_attr($auth_id_prefix . 'signup-panel'); ?>"
                         role="tabpanel"
                         aria-labelledby="<?php echo esc_attr($auth_id_prefix . 'signup-tab'); ?>"
                         x-show="currentTab === 'signup'" x-transition.opacity.duration.300ms
                         class="space-y-5 text-center" <?php echo $default_tab === 'signup' ? '' : 'x-cloak'; ?>>
                    <div class="rounded-xl bg-gray-50 border border-gray-100 px-4 py-5">
                        <h3 class="text-lg font-bold text-gray-900 mb-2"><?php esc_html_e('Create Your Account', 'nexdirectory'); ?></h3>
                        <p class="text-sm text-gray-500 leading-relaxed">
                            <?php esc_html_e('Registration is handled by WordPress so site security, spam, and membership plugins can protect the process.', 'nexdirectory'); ?>
                        </p>
                    </div>
                    <a href="<?php echo esc_url($core_register_url); ?>" data-nexdirectory-auth-core="1" class="nexdirectory-force-accent-action w-full flex items-center justify-center gap-2 py-3 px-4 bg-gray-900 hover:bg-black active:scale-[0.98] text-white text-sm font-semibold rounded-xl transition-all shadow-sm">
                        <?php esc_html_e('Open WordPress Registration', 'nexdirectory'); ?>
                    </a>
                </section>

                <form method="post" action="<?php echo esc_url($core_lostpassword_url); ?>"
                      id="<?php echo esc_attr($auth_id_prefix . 'forgot-panel'); ?>"
                      role="region"
                      aria-labelledby="<?php echo esc_attr($auth_id_prefix . 'forgot-title'); ?>"
                      x-show="currentTab === 'forgot'" x-transition.opacity.duration.300ms
                      @submit="isSubmitting = true"
                      class="space-y-5" <?php echo $default_tab === 'forgot' ? '' : 'x-cloak'; ?>>
                    
                    <input type="hidden" name="redirect_to" value="<?php echo esc_attr($redirect_target); ?>">

                    <div class="text-center mb-6">
                        <h3 id="<?php echo esc_attr($auth_id_prefix . 'forgot-title'); ?>" class="text-lg font-bold text-gray-900 mb-1"><?php esc_html_e('Reset Your Password', 'nexdirectory'); ?></h3>
                        <p class="text-sm text-gray-500"><?php esc_html_e('Enter your username or email and we will send a password reset link.', 'nexdirectory'); ?></p>
                    </div>

                    <div>
                        <label for="<?php echo esc_attr($auth_id_prefix . 'forgot-identifier'); ?>" class="block text-[11px] font-bold uppercase tracking-wider text-gray-500 mb-2"><?php esc_html_e('Username or Email', 'nexdirectory'); ?></label>
                        <input id="<?php echo esc_attr($auth_id_prefix . 'forgot-identifier'); ?>" type="text" name="user_login" required autocomplete="username email"
                               class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm bg-gray-50 focus:bg-white focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 outline-none transition-all duration-200">
                    </div>

                    <div class="pt-2">
                        <button type="submit" :disabled="isSubmitting" class="nexdirectory-force-accent-action w-full py-3 px-4 bg-gray-900 hover:bg-black disabled:opacity-70 active:scale-[0.98] text-white text-sm font-semibold rounded-xl transition-all shadow-sm">
                            <span x-text="isSubmitting ? 'Sending...' : '<?php esc_html_e('Send Reset Link', 'nexdirectory'); ?>'"></span>
                        </button>
                    </div>

                    <div class="text-center mt-4">
                        <button type="button" @click="currentTab = 'login'" class="text-sm font-medium text-gray-500 hover:text-brand-600 transition-colors inline-flex items-center gap-1">
                            &larr; <?php esc_html_e('Back to log in', 'nexdirectory'); ?>
                        </button>
                    </div>
                </form>

                <?php if ($can_reset) : ?>
                <section id="<?php echo esc_attr($auth_id_prefix . 'reset-panel'); ?>"
                         role="tabpanel"
                         aria-labelledby="<?php echo esc_attr($auth_id_prefix . 'reset-tab'); ?>"
                         x-show="currentTab === 'reset'" x-transition.opacity.duration.300ms
                         class="space-y-5 text-center" <?php echo $default_tab === 'reset' ? '' : 'x-cloak'; ?>>
                    <div class="rounded-xl bg-gray-50 border border-gray-100 px-4 py-5">
                        <h3 class="text-lg font-bold text-gray-900 mb-2"><?php esc_html_e('Reset Your Password', 'nexdirectory'); ?></h3>
                        <p class="text-sm text-gray-500 leading-relaxed">
                            <?php esc_html_e('Password changes are completed through WordPress so security plugins can protect the process.', 'nexdirectory'); ?>
                        </p>
                    </div>
                    <a href="<?php echo esc_url($reset_url); ?>" data-nexdirectory-auth-core="1" class="nexdirectory-force-accent-action w-full flex items-center justify-center gap-2 py-3 px-4 bg-gray-900 hover:bg-black active:scale-[0.98] text-white text-sm font-semibold rounded-xl transition-all shadow-sm">
                        <?php esc_html_e('Continue To Password Reset', 'nexdirectory'); ?>
                    </a>
                </section>
                <?php endif; ?>

            </div>
        </div>
    </div>
</div>
