<?php
/**
 * Template Part: Affiliate Registration Form
 *
 * Self-service affiliate registration form
 */

// Prevent direct access
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// Enqueue registration form scripts and styles.
wp_enqueue_script(
    'strp-sub-affiliate-registration',
    STRP_SUB_PLUGIN_URL . 'assets/js/affiliate-registration.js',
    array( 'jquery', 'password-strength-meter' ),
    STRP_SUB_VERSION,
    true
);
wp_localize_script( 'strp-sub-affiliate-registration', 'strp_sub_affiliate_params', array(
    'ajax_url'       => admin_url( 'admin-ajax.php' ),
    'redirect_url'   => add_query_arg( array( 'verification-sent' => 'true', '_wpnonce' => wp_create_nonce( 'strp_sub_affiliate_redirect' ) ), get_option( 'strp_sub_affiliate_page_url', home_url( '/' ) ) ),
    'i18n_very_weak' => __( 'Very Weak', 'subscription-manager-for-stripe' ),
    'i18n_weak'      => __( 'Weak', 'subscription-manager-for-stripe' ),
    'i18n_medium'    => __( 'Medium', 'subscription-manager-for-stripe' ),
    'i18n_strong'    => __( 'Strong', 'subscription-manager-for-stripe' ),
    'i18n_error'     => __( 'An error occurred. Please try again.', 'subscription-manager-for-stripe' ),
) );

wp_register_style( 'strp-sub-affiliate-registration', false, array(), STRP_SUB_VERSION );
wp_enqueue_style( 'strp-sub-affiliate-registration' );
wp_add_inline_style( 'strp-sub-affiliate-registration', '.animate-spin{animation:spin 1s linear infinite;display:inline-block}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.btn-loader{display:inline-flex;align-items:center;gap:8px}' );
?>

<div class="custom-login-form-wrapper">

    <div class="affiliate-registration-header" style="text-align: center; margin-bottom: 30px;">
        <div class="affiliate-icon-badge" style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var(--color-gradient-primary); border-radius: 16px; margin-bottom: 20px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M17 18a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2"/>
                <rect width="18" height="18" x="3" y="4" rx="2"/>
                <circle cx="12" cy="10" r="2"/>
                <line x1="8" x2="8" y1="2" y2="4"/>
                <line x1="16" x2="16" y1="2" y2="4"/>
            </svg>
        </div>
        <h2 class="custom-account-form-title"><?php esc_html_e( 'Become an Affiliate', 'subscription-manager-for-stripe' ); ?></h2>
        <p style="color: var(--color-text-secondary); margin-top: 8px; line-height: 1.6;">
            <?php esc_html_e( 'Share your personal affiliate code and earn commission when someone subscribes through your link. This is an affiliate account without dashboard access. You can upgrade later to a full subscription.', 'subscription-manager-for-stripe' ); ?>
        </p>
    </div>

    <form class="woocommerce-form custom-login-form strp-sub-affiliate-registration-form" method="post" id="strp-sub-affiliate-registration-form">

        <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
            <label for="affiliate_first_name"><?php esc_html_e( 'First Name', 'subscription-manager-for-stripe' ); ?>&nbsp;<span class="required">*</span></label>
            <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="affiliate_first_name" id="affiliate_first_name" value="" required />
        </p>

        <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
            <label for="affiliate_last_name"><?php esc_html_e( 'Last Name', 'subscription-manager-for-stripe' ); ?>&nbsp;<span class="required">*</span></label>
            <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="affiliate_last_name" id="affiliate_last_name" value="" required />
        </p>

        <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
            <label for="affiliate_email"><?php esc_html_e( 'Email Address', 'subscription-manager-for-stripe' ); ?>&nbsp;<span class="required">*</span></label>
            <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="affiliate_email" id="affiliate_email" autocomplete="email" value="" required />
        </p>

        <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
            <label for="affiliate_password"><?php esc_html_e( 'Password', 'subscription-manager-for-stripe' ); ?>&nbsp;<span class="required">*</span></label>
            <span class="password-input">
                <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="affiliate_password" id="affiliate_password" autocomplete="new-password" required />
            </span>
            <span class="password-hint" style="display: block; font-size: 0.875rem; color: var(--color-text-secondary); margin-top: 8px;"><?php esc_html_e( 'Use uppercase and lowercase letters, numbers, and symbols like ! " ? $ % ^', 'subscription-manager-for-stripe' ); ?></span>
        </p>

        <div class="form-field">
            <div id="affiliate-password-strength-meter" class="password-strength-meter" style="display: none;"></div>
        </div>

        <div class="form-actions">
            <?php wp_nonce_field( 'strp_sub_affiliate_registration', 'strp_sub_affiliate_registration_nonce' ); ?>
            <button type="submit" class="woocommerce-button button" name="strp_sub_register_affiliate" id="strp-sub-register-affiliate-btn" disabled>
                <span class="btn-text"><?php esc_html_e( 'Register as Affiliate', 'subscription-manager-for-stripe' ); ?></span>
                <span class="btn-loader" style="display: none;">
                    <i data-lucide="loader" class="animate-spin"></i> <?php esc_html_e( 'Registering...', 'subscription-manager-for-stripe' ); ?>
                </span>
            </button>
        </div>

        <div class="affiliate-registration-info" style="margin-top: 24px; padding: 16px; background: var(--color-surface-secondary); border-radius: 8px; border: 1px solid var(--glass-border);">
            <div style="display: flex; gap: 12px; align-items: start;">
                <div style="flex-shrink: 0; color: var(--color-primary);">
                    <i data-lucide="info" style="width: 20px; height: 20px;"></i>
                </div>
                <div style="font-size: 14px; color: var(--color-text-secondary); line-height: 1.6;">
                    <strong style="display: block; margin-bottom: 8px; color: var(--color-text-primary);"><?php esc_html_e( 'After registration:', 'subscription-manager-for-stripe' ); ?></strong>
                    <ul style="margin: 0; padding-left: 20px;">
                        <li><?php esc_html_e( 'You will receive a verification email', 'subscription-manager-for-stripe' ); ?></li>
                        <li><?php esc_html_e( 'Activate your account via the link in the email', 'subscription-manager-for-stripe' ); ?></li>
                        <li><?php esc_html_e( 'Log in and receive your personal affiliate code', 'subscription-manager-for-stripe' ); ?></li>
                        <li><?php esc_html_e( 'Start sharing your code and earn commission!', 'subscription-manager-for-stripe' ); ?></li>
                    </ul>
                </div>
            </div>
        </div>

    </form>
</div>
