<?php
/**
 * Welcome Page Template (Onboarding)
 */

if (!defined('ABSPATH')) {
    exit;
}

$seazonify_current_user = wp_get_current_user();
$seazonify_admin_email = $seazonify_current_user->user_email;
$seazonify_admin_name = $seazonify_current_user->display_name;
?>

<div class="wrap seazonify-admin-wrap seazonify-welcome-wrap">
    <div class="seazonify-welcome-container">
        <!-- Branding Header -->
        <div class="seazonify-welcome-header">
            <div class="seazonify-logo">
                <img src="<?php echo esc_url(SEAZONIFY_LOGO_URL); ?>" alt="Seazonify" class="seazonify-logo-img">
                <p class="tagline"><?php esc_html_e('Bring your WordPress site to life with seasonal magic', 'seazonify'); ?></p>
            </div>
        </div>

        <div class="seazonify-onboarding-card">
            <!-- Step Indicators -->
            <div class="seazonify-steps-indicator">
                <div class="step-dot active" data-step="1"></div>
                <div class="step-line"></div>
                <div class="step-dot" data-step="2"></div>
                <div class="step-line registration-line" style="display:none;"></div>
                <div class="step-dot registration-dot" data-step="3" style="display:none;"></div>
            </div>

            <!-- Step 1: Email Entry -->
            <div class="onboarding-step active" id="step-1">
                <h2><?php esc_html_e('Connect Your Account', 'seazonify'); ?></h2>
                <p class="step-description"><?php esc_html_e('Confirm your email address. We\'ll send a verification code to this address to securely connect your account.', 'seazonify'); ?></p>
                
                <div class="form-group">
                    <label for="seazonify-email"><?php esc_html_e('Seazonify Account Email', 'seazonify'); ?></label>
                    <input type="email" id="seazonify-email" value="<?php echo esc_attr($seazonify_admin_email); ?>" placeholder="you@example.com">
                    <p class="description"><?php esc_html_e('Defaults to your WordPress admin email. Change it if you use a different email for Seazonify.', 'seazonify'); ?></p>
                </div>

                <div class="step-actions">
                    <button type="button" id="btn-init-connect" class="button button-primary button-hero">
                        <?php esc_html_e('Get Verification Code', 'seazonify'); ?>
                        <span class="sz-spinner"></span>
                    </button>
                </div>
            </div>

            <!-- Step 2: OTP Verification -->
            <div class="onboarding-step" id="step-2">
                <h2><?php esc_html_e('Verify Your Email', 'seazonify'); ?></h2>
                <p class="step-description"><?php esc_html_e('We\'ve sent a 6-digit code to', 'seazonify'); ?> <strong id="display-email"></strong>. <?php esc_html_e('Please enter it below.', 'seazonify'); ?></p>
                
                <div class="otp-input-container">
                    <input type="text" class="otp-digit" maxlength="1" pattern="\d*">
                    <input type="text" class="otp-digit" maxlength="1" pattern="\d*">
                    <input type="text" class="otp-digit" maxlength="1" pattern="\d*">
                    <input type="text" class="otp-digit" maxlength="1" pattern="\d*">
                    <input type="text" class="otp-digit" maxlength="1" pattern="\d*">
                    <input type="text" class="otp-digit" maxlength="1" pattern="\d*">
                </div>
                <input type="hidden" id="seazonify-otp">

                <div class="step-actions">
                    <button type="button" id="btn-verify-otp" class="button button-primary button-hero" disabled>
                        <?php esc_html_e('Verify Code', 'seazonify'); ?>
                        <span class="sz-spinner"></span>
                    </button>
                    <button type="button" id="btn-back-to-1" class="button button-link"><?php esc_html_e('Change Email', 'seazonify'); ?></button>
                </div>
            </div>

            <!-- Step 3: Registration (New Users) -->
            <div class="onboarding-step" id="step-3">
                <h2><?php esc_html_e('Complete Your Profile', 'seazonify'); ?></h2>
                <p class="step-description"><?php esc_html_e('It looks like you\'re new to Seazonify! Let\'s set up your account properly.', 'seazonify'); ?></p>
                
                <div class="form-group">
                    <label for="seazonify-name"><?php esc_html_e('Full Name', 'seazonify'); ?></label>
                    <input type="text" id="seazonify-name" value="<?php echo esc_attr($seazonify_admin_name); ?>" placeholder="Your Name">
                </div>

                <div class="form-group">
                    <label for="seazonify-password"><?php esc_html_e('Password', 'seazonify'); ?></label>
                    <input type="password" id="seazonify-password" placeholder="Choose a secure password">
                </div>

                <div class="step-actions">
                    <button type="button" id="btn-complete-reg" class="button button-primary button-hero">
                        <?php esc_html_e('Finish & Connect', 'seazonify'); ?>
                        <span class="sz-spinner"></span>
                    </button>
                </div>
            </div>

            <!-- Feedback Messages -->
            <div id="onboarding-feedback" class="feedback-message"></div>
        </div>

        <div class="seazonify-welcome-footer">
            <p>&copy; <?php echo esc_html(gmdate('Y')); ?> <a href="https://seazonify.com" target="_blank"><?php esc_html_e('Seazonify', 'seazonify'); ?></a> &bull; <a href="https://seazonify.com/aura/docs/" target="_blank"><?php esc_html_e('Documentation', 'seazonify'); ?></a> &bull; <a href="https://discord.com/invite/HknBRy9h46" target="_blank"><?php esc_html_e('Discord', 'seazonify'); ?></a></p>
        </div>
    </div>
</div>
<?php
// Inline styles and scripts moved to admin.css and admin.js
?>
