<?php
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) : '';
?>

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
    .bg-pattern { background-image: radial-gradient(#e5e7eb 1px, transparent 1px); background-size: 20px 20px; }
</style>
<script>
    tailwind.config = {
        theme: {
            extend: {
                fontFamily: { sans: ['Inter', 'sans-serif'] },
                colors: {
                    brand: {
                        50: 'color-mix(in srgb, var(--eep-primary) 8%, #ffffff)',
                        100: 'color-mix(in srgb, var(--eep-primary) 14%, #ffffff)',
                        200: 'color-mix(in srgb, var(--eep-primary) 24%, #ffffff)',
                        300: 'color-mix(in srgb, var(--eep-primary) 36%, #ffffff)',
                        400: 'color-mix(in srgb, var(--eep-primary) 52%, #ffffff)',
                        500: 'var(--eep-primary)',
                        600: 'var(--eep-primary-hover)',
                        700: 'color-mix(in srgb, var(--eep-primary-hover) 80%, #000000)',
                        800: 'color-mix(in srgb, var(--eep-primary-hover) 64%, #000000)',
                        900: 'color-mix(in srgb, var(--eep-primary-hover) 48%, #000000)'
                    }
                }
            }
        }
    }
</script>

<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 }">

    <?php echo $this->render_platform_breadcrumbs(__('Sign In Or Join', 'nexdirectory')); // phpcs:ignore ?>

    <div class="w-full max-w-md mx-auto mb-6">
        <?php echo $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 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">
                <button type="button" @click="currentTab = 'login'"
                        :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" @click="currentTab = 'signup'"
                        :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" @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(admin_url('admin-post.php')); ?>" 
                      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="action" value="eep_auth_login">
                    <input type="hidden" name="redirect_to" value="<?php echo esc_attr($redirect ?? ''); ?>">
                    <input type="hidden" name="_wpnonce" value="<?php echo esc_attr(wp_create_nonce('eep_auth_login_nonce')); ?>">
                    <input type="hidden" name="eep_website_auth" class="eep-honeypot" tabindex="-1" autocomplete="off" aria-hidden="true">
                    <input type="hidden" name="eep_recaptcha_token" class="eep-recaptcha-token" value="">
                    <?php wp_nonce_field('eep_auth_login_nonce', 'eep_auth_login_nonce'); ?>

                    <div>
                        <label class="block text-[11px] font-bold uppercase tracking-wider text-gray-500 mb-2"><?php esc_html_e('Username or Email', 'nexdirectory'); ?></label>
                        <input 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 class="block text-[11px] font-bold uppercase tracking-wider text-gray-500 mb-2"><?php esc_html_e('Password', 'nexdirectory'); ?></label>
                        <input 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">
                        <button type="submit" :disabled="isSubmitting" class="eep-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>

                <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" 
                      x-show="currentTab === 'signup'" x-transition.opacity.duration.300ms
                      @submit="isSubmitting = true"
                      class="space-y-4" <?php echo $default_tab === 'signup' ? '' : 'x-cloak'; ?>>
                    
                    <input type="hidden" name="action" value="eep_auth_signup">
                    <input type="hidden" name="redirect_to" value="<?php echo esc_attr($redirect ?? ''); ?>">
                    <input type="hidden" name="_wpnonce" value="<?php echo esc_attr(wp_create_nonce('eep_auth_signup_nonce')); ?>">
                    <input type="hidden" name="eep_website_auth" class="eep-honeypot" tabindex="-1" autocomplete="off" aria-hidden="true">
                    <input type="hidden" name="eep_recaptcha_token" class="eep-recaptcha-token" value="">
                    <?php wp_nonce_field('eep_auth_signup_nonce', 'eep_auth_signup_nonce'); ?>

                    <div>
                        <label class="block text-[11px] font-bold uppercase tracking-wider text-gray-500 mb-1.5"><?php esc_html_e('Username', 'nexdirectory'); ?></label>
                        <input type="text" name="user_login" required autocomplete="username" 
                               class="w-full px-4 py-2.5 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 class="block text-[11px] font-bold uppercase tracking-wider text-gray-500 mb-1.5"><?php esc_html_e('Email', 'nexdirectory'); ?></label>
                        <input type="email" name="user_email" required autocomplete="email" 
                               class="w-full px-4 py-2.5 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 class="block text-[11px] font-bold uppercase tracking-wider text-gray-500 mb-1.5"><?php esc_html_e('Password', 'nexdirectory'); ?></label>
                        <input type="password" name="user_pass" required autocomplete="new-password" 
                               class="w-full px-4 py-2.5 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="space-y-3 pt-2">
                        <label class="flex items-start gap-3 cursor-pointer group">
                            <div class="flex items-center h-5">
                                <input type="checkbox" name="eep_gdpr_accept" value="1" required class="w-4 h-4 text-brand-600 bg-gray-50 border-gray-300 rounded focus:ring-brand-500 focus:ring-2 transition-colors">
                            </div>
                            <span class="text-xs text-gray-500 leading-relaxed group-hover:text-gray-700 transition-colors">
                                <?php esc_html_e('I agree to GDPR/privacy processing and essential service emails needed for account access, RSVP confirmations, moderation updates, and event operations.', 'nexdirectory'); ?>
                            </span>
                        </label>
                        <label class="flex items-start gap-3 cursor-pointer group">
                            <div class="flex items-center h-5">
                                <input type="checkbox" name="eep_gdpr_marketing_opt_in" value="1" checked class="w-4 h-4 text-brand-600 bg-gray-50 border-gray-300 rounded focus:ring-brand-500 focus:ring-2 transition-colors">
                            </div>
                            <span class="text-xs text-gray-500 leading-relaxed group-hover:text-gray-700 transition-colors">
                                <?php esc_html_e('I agree to receive organizer announcements and platform news emails (optional, can be turned off in My Account settings).', 'nexdirectory'); ?>
                            </span>
                        </label>
                    </div>

                    <div class="pt-3">
                        <button type="submit" :disabled="isSubmitting" class="eep-force-accent-action w-full flex items-center justify-center gap-2 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">
                            <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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></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 ? 'Creating...' : '<?php esc_html_e('Create Account', 'nexdirectory'); ?>'"></span>
                        </button>
                    </div>
                </form>

                <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" 
                      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="action" value="eep_auth_forgot_password">
                    <input type="hidden" name="redirect_to" value="<?php echo esc_attr($redirect ?? ''); ?>">
                    <input type="hidden" name="eep_website_auth" class="eep-honeypot" tabindex="-1" autocomplete="off" aria-hidden="true">
                    <?php wp_nonce_field('eep_auth_forgot_password_nonce', 'eep_auth_forgot_password_nonce'); ?>

                    <div class="text-center mb-6">
                        <h3 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 class="block text-[11px] font-bold uppercase tracking-wider text-gray-500 mb-2"><?php esc_html_e('Username or Email', 'nexdirectory'); ?></label>
                        <input type="text" name="user_login_email" 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="eep-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) : ?>
                <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" 
                      x-show="currentTab === 'reset'" x-transition.opacity.duration.300ms
                      @submit="isSubmitting = true"
                      class="space-y-5" <?php echo $default_tab === 'reset' ? '' : 'x-cloak'; ?>>
                    
                    <input type="hidden" name="action" value="eep_auth_reset_password">
                    <input type="hidden" name="redirect_to" value="<?php echo esc_attr($redirect ?? ''); ?>">
                    <input type="hidden" name="rp_login" value="<?php echo esc_attr($reset_login); ?>">
                    <input type="hidden" name="rp_key" value="<?php echo esc_attr($reset_key); ?>">
                    <input type="hidden" name="eep_website_auth" class="eep-honeypot" tabindex="-1" autocomplete="off" aria-hidden="true">
                    <?php wp_nonce_field('eep_auth_reset_password_nonce', 'eep_auth_reset_password_nonce'); ?>

                    <div class="text-center mb-6">
                        <h3 class="text-lg font-bold text-gray-900 mb-1"><?php esc_html_e('Choose A New Password', 'nexdirectory'); ?></h3>
                        <p class="text-sm text-gray-500"><?php esc_html_e('Enter your new password below.', 'nexdirectory'); ?></p>
                    </div>

                    <div>
                        <label class="block text-[11px] font-bold uppercase tracking-wider text-gray-500 mb-2"><?php esc_html_e('New Password', 'nexdirectory'); ?></label>
                        <input type="password" name="pass1" required autocomplete="new-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>
                        <label class="block text-[11px] font-bold uppercase tracking-wider text-gray-500 mb-2"><?php esc_html_e('Confirm New Password', 'nexdirectory'); ?></label>
                        <input type="password" name="pass2" required autocomplete="new-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">
                        <button type="submit" :disabled="isSubmitting" class="eep-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 ? 'Updating...' : '<?php esc_html_e('Update Password', 'nexdirectory'); ?>'"></span>
                        </button>
                    </div>
                </form>
                <?php endif; ?>

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