<?php
/**
 * Name: Login Page Customizer
 * Description: Customize WordPress login page design with custom logo, background image, colors, button styles, and CSS to create branded login experience matching site design
 * Category: Admin
 * Icon: -
 * UseCases: [
 *   {
 *     "title": "White-Label Client Login",
 *     "description": "Replace WordPress logo with client's logo and brand colors to create fully branded login experience matching their company identity."
 *   },
 *   {
 *     "title": "Agency Branding",
 *     "description": "Add your agency's logo and colors to login page so clients see your brand every time they access their website backend."
 *   },
 *   {
 *     "title": "Custom Login Experience",
 *     "description": "Style login page to match frontend design with custom backgrounds, fonts, and colors for cohesive brand experience."
 *   }
 * ]
 * WhereToFind: {
 *   "location": "Login Page",
 *   "url": "/wp-login.php",
 *   "instructions": "Logout to see your customized login page",
 *   "newTab": true
 * }
 * Added: 2025-08-10
 * Tags: login, customization, branding, design, logo
 */

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

class SwitchboardLoginPageCustomizer {
    
    public function __construct() {
        add_action('login_enqueue_scripts', [$this, 'customize_login_page']);
        add_filter('login_headerurl', [$this, 'custom_login_url']);
        add_filter('login_headertext', [$this, 'custom_login_title']);
    }

    public function register_data_locations() {
        return [
            'options' => [
                'switchboard_login-page-customizer_settings'
            ],
            'option_patterns' => [],
            'tables' => [],
            'post_meta' => [],
            'user_meta' => [],
            'term_meta' => [],
            'transients' => []
        ];
    }
    
    /**
     * Render settings panel for Login Page Customizer
     *
     * Displays comprehensive login page customization interface with:
     * - Form position and layout
     * - Form theme (light/dark/custom)
     * - Logo upload and dimensions
     * - Background color, image, or pattern
     * - Button and link colors
     * - Form styling (background, radius, shadow)
     * - Visibility options for back link and lost password
     * - Custom CSS for advanced styling
     *
     * @param array $settings Current module settings
     * @return void Outputs HTML directly
     */
    public function render_settings($settings = []) {
        // === BACKWARD COMPATIBILITY FOR UI ===
        // Detect if this is a legacy configuration (before modernization)
        $is_legacy = !isset($settings['form_position']) && !isset($settings['form_theme']) && !isset($settings['bg_type']);

        // Form position and theme settings
        $form_position = isset($settings['form_position']) ? $settings['form_position'] : 'center';

        // Form theme: For legacy configs with custom form_bg, show 'custom' mode
        $form_theme = 'light';
        if (isset($settings['form_theme'])) {
            $form_theme = $settings['form_theme'];
        } elseif ($is_legacy && isset($settings['form_bg']) && $settings['form_bg'] !== '#ffffff') {
            $form_theme = 'custom';
        }

        $form_bg_opacity = isset($settings['form_bg_opacity']) ? $settings['form_bg_opacity'] : '100';
        $form_text_color = isset($settings['form_text_color']) ? $settings['form_text_color'] : '#24292f';

        // Logo settings - legacy detection for correct tab display
        $logo_url = isset($settings['logo_url']) ? $settings['logo_url'] : '';
        $logo_external_url = isset($settings['logo_external_url']) ? $settings['logo_external_url'] : '';

        $logo_source = 'upload';
        if (isset($settings['logo_source'])) {
            $logo_source = $settings['logo_source'];
        } elseif ($is_legacy) {
            // Legacy: show correct tab based on existing data
            if (!empty($logo_external_url)) {
                $logo_source = 'url';
            } elseif (!empty($logo_url)) {
                $logo_source = 'upload';
            }
        }

        $logo_width = isset($settings['logo_width']) ? $settings['logo_width'] : '320';
        $logo_height = isset($settings['logo_height']) ? $settings['logo_height'] : '100';

        // Background settings - legacy detection for correct type display
        $bg_color = isset($settings['bg_color']) ? $settings['bg_color'] : '#f0f0f1';
        $bg_image = isset($settings['bg_image']) ? $settings['bg_image'] : '';
        $bg_external_url = isset($settings['bg_external_url']) ? $settings['bg_external_url'] : '';

        $bg_type = 'color';
        if (isset($settings['bg_type'])) {
            $bg_type = $settings['bg_type'];
        } elseif ($is_legacy) {
            // Legacy: show 'image' type if they had a background image
            if (!empty($bg_image) || !empty($bg_external_url)) {
                $bg_type = 'image';
            }
        }

        $bg_source = isset($settings['bg_source']) ? $settings['bg_source'] : 'upload';
        $bg_pattern = isset($settings['bg_pattern']) ? $settings['bg_pattern'] : 'none';
        $bg_overlay = isset($settings['bg_overlay']) ? $settings['bg_overlay'] : 'none';
        $bg_overlay_opacity = isset($settings['bg_overlay_opacity']) ? $settings['bg_overlay_opacity'] : '50';

        // Color scheme
        $button_color = isset($settings['button_color']) ? $settings['button_color'] : '#2271b1';
        $link_color = isset($settings['link_color']) ? $settings['link_color'] : '#2271b1';

        // Form styling
        $form_bg = isset($settings['form_bg']) ? $settings['form_bg'] : '#ffffff';
        $form_radius = isset($settings['form_radius']) ? $settings['form_radius'] : '8';
        $form_shadow = isset($settings['form_shadow']) ? $settings['form_shadow'] : 'yes';

        // Visibility options
        $hide_back_link = isset($settings['hide_back_link']) ? $settings['hide_back_link'] : 'no';
        $hide_lost_password = isset($settings['hide_lost_password']) ? $settings['hide_lost_password'] : 'no';
        $custom_css = isset($settings['custom_css']) ? $settings['custom_css'] : '';

        // Get site icon for preview
        $site_icon_url = get_site_icon_url(512);
        ?>
        <style>
        /* Toggle buttons */
        .sb-source-toggle {
            display: inline-flex;
            background: #f3f4f6;
            border-radius: 6px;
            padding: 3px;
            margin-bottom: 12px;
        }
        .sb-source-btn {
            padding: 6px 14px;
            font-size: 13px;
            font-weight: 500;
            background: transparent;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            color: #6b7280;
            transition: all 0.15s ease;
        }
        .sb-source-btn:hover:not(.active) {
            color: #374151;
        }
        .sb-source-btn.active {
            background: #fff;
            color: #111827;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        .sb-source-content {
            margin-top: 12px;
        }
        .sb-url-input-wrapper {
            position: relative;
        }
        .sb-url-input-wrapper input {
            padding-right: 36px;
        }
        .sb-url-status {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 16px;
            line-height: 1;
        }
        .sb-url-status.loading { color: #9ca3af; }
        .sb-url-status.success { color: #10b981; }
        .sb-url-status.error { color: #ef4444; }
        .sb-url-preview-error {
            padding: 12px;
            background: #fef2f2;
            border: 1px solid #fecaca;
            border-radius: 6px;
            color: #991b1b;
            font-size: 13px;
            margin-top: 8px;
        }

        /* Form Position Selector */
        .sb-position-selector {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .sb-position-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 12px 10px;
            background: #fff;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s ease;
            min-width: 70px;
        }
        .sb-position-option:hover {
            border-color: #9ca3af;
        }
        .sb-position-option.active {
            border-color: #2271b1;
            background: #f0f7ff;
        }
        .sb-position-option input {
            display: none;
        }
        .sb-position-icon {
            width: 40px;
            height: 28px;
            background: #f3f4f6;
            border-radius: 4px;
            position: relative;
            overflow: hidden;
        }
        .sb-position-icon::before {
            content: '';
            position: absolute;
            width: 10px;
            height: 14px;
            background: #6b7280;
            border-radius: 2px;
            top: 50%;
            transform: translateY(-50%);
        }
        .sb-position-option[data-position="left-edge"] .sb-position-icon::before { left: 2px; }
        .sb-position-option[data-position="left-half"] .sb-position-icon::before { left: 25%; transform: translate(-50%, -50%); }
        .sb-position-option[data-position="center"] .sb-position-icon::before { left: 50%; transform: translate(-50%, -50%); }
        .sb-position-option[data-position="right-half"] .sb-position-icon::before { left: 75%; transform: translate(-50%, -50%); }
        .sb-position-option[data-position="right-edge"] .sb-position-icon::before { right: 2px; left: auto; }
        .sb-position-option.active .sb-position-icon { background: #dbeafe; }
        .sb-position-option.active .sb-position-icon::before { background: #2271b1; }
        .sb-position-label {
            font-size: 11px;
            color: #6b7280;
            text-align: center;
            white-space: nowrap;
        }
        .sb-position-option.active .sb-position-label {
            color: #2271b1;
            font-weight: 500;
        }

        /* Form Theme Selector */
        .sb-theme-selector {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        .sb-theme-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 14px 20px;
            background: #fff;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s ease;
            min-width: 80px;
        }
        .sb-theme-option:hover {
            border-color: #9ca3af;
        }
        .sb-theme-option.active {
            border-color: #2271b1;
            background: #f0f7ff;
        }
        .sb-theme-option input {
            display: none;
        }
        .sb-theme-preview {
            width: 48px;
            height: 32px;
            border-radius: 4px;
            border: 1px solid #e5e7eb;
        }
        .sb-theme-preview.light {
            background: #ffffff;
        }
        .sb-theme-preview.dark {
            background: #1f2937;
        }
        .sb-theme-preview.custom {
            background: linear-gradient(135deg, #f0f0f1 50%, #2271b1 50%);
        }
        .sb-theme-label {
            font-size: 12px;
            color: #6b7280;
            font-weight: 500;
        }
        .sb-theme-option.active .sb-theme-label {
            color: #2271b1;
        }

        /* Background Type Content Panels */
        .sb-bg-type-content {
            margin-top: 16px;
            padding: 16px;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
        }

        /* Range slider with value */
        .sb-range-wrapper {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .sb-range-wrapper input[type="range"] {
            flex: 1;
            -webkit-appearance: none;
            height: 6px;
            background: #e5e7eb;
            border-radius: 3px;
            outline: none;
        }
        .sb-range-wrapper input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            background: #2271b1;
            border-radius: 50%;
            cursor: pointer;
        }
        .sb-range-value {
            min-width: 40px;
            text-align: right;
            font-size: 13px;
            color: #374151;
            font-weight: 500;
        }

        /* Conditional fields */
        .sb-conditional-field {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #e5e7eb;
        }
        .sb-conditional-field.hidden {
            display: none;
        }

        /* Site icon preview */
        .sb-site-icon-preview {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: #f9fafb;
            border-radius: 6px;
            margin-top: 8px;
        }
        .sb-site-icon-preview img {
            width: 64px;
            height: 64px;
            border-radius: 8px;
            object-fit: contain;
        }
        .sb-site-icon-preview .sb-no-icon {
            width: 64px;
            height: 64px;
            background: #e5e7eb;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
        }
        .sb-site-icon-info {
            font-size: 13px;
            color: #6b7280;
        }
        .sb-site-icon-info a {
            color: #2271b1;
            text-decoration: none;
        }
        .sb-site-icon-info a:hover {
            text-decoration: underline;
        }
        </style>
        <input type="hidden" name="module" value="login-page-customizer">

        <!-- Form Position Section -->
        <div class="sb-sp-group" style="background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
            <h4 class="sb-sp-heading-sm" style="margin: 0 0 16px 0;"><?php esc_html_e('Login Form Position', 'wpswitchboard'); ?></h4>

            <div class="sb-sp-group">
                <label class="sb-sp-label"><?php esc_html_e('Form Alignment', 'wpswitchboard'); ?></label>
                <p class="sb-sp-description" style="margin-bottom: 12px;"><?php esc_html_e('Choose where the login form appears on the page', 'wpswitchboard'); ?></p>

                <input type="hidden" id="setting_form_position" name="setting_form_position" value="<?php echo esc_attr($form_position); ?>">
                <div class="sb-position-selector">
                    <?php
                    $positions = [
                        'left-edge' => __('Left Edge', 'wpswitchboard'),
                        'left-half' => __('Left', 'wpswitchboard'),
                        'center' => __('Center', 'wpswitchboard'),
                        'right-half' => __('Right', 'wpswitchboard'),
                        'right-edge' => __('Right Edge', 'wpswitchboard'),
                    ];
                    foreach ($positions as $value => $label):
                    ?>
                    <label class="sb-position-option <?php echo $form_position === $value ? 'active' : ''; ?>" data-position="<?php echo esc_attr($value); ?>">
                        <input type="radio" name="form_position_radio" value="<?php echo esc_attr($value); ?>" <?php checked($form_position, $value); ?>>
                        <div class="sb-position-icon"></div>
                        <span class="sb-position-label"><?php echo esc_html($label); ?></span>
                    </label>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>

        <!-- Form Theme Section -->
        <div class="sb-sp-group" style="background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
            <h4 class="sb-sp-heading-sm" style="margin: 0 0 16px 0;"><?php esc_html_e('Login Form Background', 'wpswitchboard'); ?></h4>

            <div class="sb-sp-group">
                <label class="sb-sp-label"><?php esc_html_e('Form Theme', 'wpswitchboard'); ?></label>
                <p class="sb-sp-description" style="margin-bottom: 12px;"><?php esc_html_e('Choose a preset theme or customize colors', 'wpswitchboard'); ?></p>

                <input type="hidden" id="setting_form_theme" name="setting_form_theme" value="<?php echo esc_attr($form_theme); ?>">
                <div class="sb-theme-selector">
                    <label class="sb-theme-option <?php echo $form_theme === 'light' ? 'active' : ''; ?>" data-theme="light">
                        <input type="radio" name="form_theme_radio" value="light" <?php checked($form_theme, 'light'); ?>>
                        <div class="sb-theme-preview light"></div>
                        <span class="sb-theme-label"><?php esc_html_e('Light', 'wpswitchboard'); ?></span>
                    </label>
                    <label class="sb-theme-option <?php echo $form_theme === 'dark' ? 'active' : ''; ?>" data-theme="dark">
                        <input type="radio" name="form_theme_radio" value="dark" <?php checked($form_theme, 'dark'); ?>>
                        <div class="sb-theme-preview dark"></div>
                        <span class="sb-theme-label"><?php esc_html_e('Dark', 'wpswitchboard'); ?></span>
                    </label>
                    <label class="sb-theme-option <?php echo $form_theme === 'custom' ? 'active' : ''; ?>" data-theme="custom">
                        <input type="radio" name="form_theme_radio" value="custom" <?php checked($form_theme, 'custom'); ?>>
                        <div class="sb-theme-preview custom"></div>
                        <span class="sb-theme-label"><?php esc_html_e('Custom', 'wpswitchboard'); ?></span>
                    </label>
                </div>
            </div>

            <!-- Custom Theme Options (shown when Custom is selected) -->
            <div class="sb-conditional-field <?php echo $form_theme !== 'custom' ? 'hidden' : ''; ?>" id="custom-theme-options">
                <div class="sb-sp-group sb-sp-field-horizontal" style="margin-bottom: 16px;">
                    <div class="sb-sp-field-horizontal-left">
                        <label class="sb-sp-label" for="setting_form_bg"><?php esc_html_e('Form Background Color', 'wpswitchboard'); ?></label>
                    </div>
                    <input type="color" name="setting_form_bg" id="setting_form_bg" value="<?php echo esc_attr($form_bg); ?>" data-default="#ffffff" class="sb-sp-input-color">
                </div>

                <div class="sb-sp-group sb-sp-field-horizontal" style="margin-bottom: 16px;">
                    <div class="sb-sp-field-horizontal-left">
                        <label class="sb-sp-label" for="setting_form_bg_opacity"><?php esc_html_e('Background Opacity', 'wpswitchboard'); ?></label>
                    </div>
                    <div class="sb-range-wrapper">
                        <input type="range" name="setting_form_bg_opacity" id="setting_form_bg_opacity" value="<?php echo esc_attr($form_bg_opacity); ?>" min="0" max="100" step="5">
                        <span class="sb-range-value" id="opacity-value"><?php echo esc_html($form_bg_opacity); ?>%</span>
                    </div>
                </div>

                <div class="sb-sp-group sb-sp-field-horizontal">
                    <div class="sb-sp-field-horizontal-left">
                        <label class="sb-sp-label" for="setting_form_text_color"><?php esc_html_e('Label Text Color', 'wpswitchboard'); ?></label>
                        <p class="sb-sp-description"><?php esc_html_e('Important for visibility on dark backgrounds', 'wpswitchboard'); ?></p>
                    </div>
                    <input type="color" name="setting_form_text_color" id="setting_form_text_color" value="<?php echo esc_attr($form_text_color); ?>" data-default="#24292f" class="sb-sp-input-color">
                </div>
            </div>
        </div>

        <!-- Logo Settings Section -->
        <div class="sb-sp-group" style="background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
            <h4 class="sb-sp-heading-sm" style="margin: 0 0 16px 0;"><?php esc_html_e('Logo Image', 'wpswitchboard'); ?></h4>

            <div class="sb-sp-group">
                <label class="sb-sp-label"><?php esc_html_e('Logo Source', 'wpswitchboard'); ?></label>
                <p class="sb-sp-description" style="margin-bottom: 12px;"><?php esc_html_e('Choose where to get the logo image from', 'wpswitchboard'); ?></p>

                <!-- Logo Source Toggle -->
                <input type="hidden" id="setting_logo_source" name="setting_logo_source" value="<?php echo esc_attr($logo_source); ?>">
                <div class="sb-source-toggle" data-target="logo">
                    <button type="button" class="sb-source-btn <?php echo $logo_source === 'site-icon' ? 'active' : ''; ?>" data-source="site-icon"><?php esc_html_e('Site Icon', 'wpswitchboard'); ?></button>
                    <button type="button" class="sb-source-btn <?php echo $logo_source === 'upload' ? 'active' : ''; ?>" data-source="upload"><?php esc_html_e('Media Library', 'wpswitchboard'); ?></button>
                    <button type="button" class="sb-source-btn <?php echo $logo_source === 'url' ? 'active' : ''; ?>" data-source="url"><?php esc_html_e('Image URL', 'wpswitchboard'); ?></button>
                </div>

                <!-- Site Icon Mode -->
                <div class="sb-source-content sb-source-site-icon" data-target="logo" <?php echo $logo_source !== 'site-icon' ? 'style="display:none;"' : ''; ?>>
                    <div class="sb-site-icon-preview">
                        <?php if ($site_icon_url): ?>
                            <img src="<?php echo esc_url($site_icon_url); ?>" alt="Site Icon">
                        <?php else: ?>
                            <div class="sb-no-icon">
                                <span class="dashicons dashicons-admin-site-alt3"></span>
                            </div>
                        <?php endif; ?>
                        <div class="sb-site-icon-info">
                            <?php if ($site_icon_url): ?>
                                <strong><?php esc_html_e('Site Icon found', 'wpswitchboard'); ?></strong><br>
                                <a href="<?php echo esc_url(admin_url('options-general.php')); ?>"><?php esc_html_e('Change in Settings → General', 'wpswitchboard'); ?></a>
                            <?php else: ?>
                                <strong><?php esc_html_e('No Site Icon set', 'wpswitchboard'); ?></strong><br>
                                <a href="<?php echo esc_url(admin_url('options-general.php')); ?>"><?php esc_html_e('Add one in Settings → General', 'wpswitchboard'); ?></a>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

                <!-- Upload Mode -->
                <div class="sb-source-content sb-source-upload" data-target="logo" <?php echo $logo_source !== 'upload' ? 'style="display:none;"' : ''; ?>>
                    <div id="login-logo-preview" class="sb-sp-upload-preview">
                        <?php if ($logo_url): ?>
                            <img src="<?php echo esc_url($logo_url); ?>" alt="Login Logo" class="sb-sp-upload-image">
                        <?php endif; ?>
                    </div>
                    <input type="hidden" id="setting_logo_url" name="setting_logo_url" value="<?php echo esc_attr($logo_url); ?>">
                    <div class="sb-sp-button-group">
                        <button type="button" class="button button-small button-primary upload-logo-btn" data-target="login-logo">
                            <span class="dashicons dashicons-upload"></span> <?php esc_html_e('Select', 'wpswitchboard'); ?>
                        </button>
                        <button type="button" class="button button-small button-primary-outline remove-logo-btn" data-target="login-logo" <?php echo $logo_url ? '' : 'hidden'; ?>>
                            <span class="dashicons dashicons-no"></span> <?php esc_html_e('Remove', 'wpswitchboard'); ?>
                        </button>
                    </div>
                </div>

                <!-- URL Mode -->
                <div class="sb-source-content sb-source-url" data-target="logo" <?php echo $logo_source !== 'url' ? 'style="display:none;"' : ''; ?>>
                    <div class="sb-url-input-wrapper">
                        <input type="url" id="setting_logo_external_url" name="setting_logo_external_url" value="<?php echo esc_attr($logo_external_url); ?>" class="sb-sp-input" placeholder="https://example.com/logo.png">
                        <span class="sb-url-status" id="logo-url-status"></span>
                    </div>
                    <div id="login-logo-url-preview" class="sb-sp-upload-preview" style="margin-top: 12px;">
                        <?php if ($logo_external_url): ?>
                            <img src="<?php echo esc_url($logo_external_url); ?>" alt="Login Logo" class="sb-sp-upload-image">
                        <?php endif; ?>
                    </div>
                </div>
            </div>

            <div class="sb-sp-group sb-sp-field-horizontal">
                <div class="sb-sp-field-horizontal-left">
                    <label class="sb-sp-label" for="setting_logo_width"><?php esc_html_e('Logo Width (px)', 'wpswitchboard'); ?></label>
                    <p class="sb-sp-description"><?php esc_html_e('Adjust the width of your logo (50-600px)', 'wpswitchboard'); ?></p>
                </div>
                <input type="number" name="setting_logo_width" id="setting_logo_width" value="<?php echo esc_attr($logo_width); ?>" min="50" max="600" class="sb-sp-input">
            </div>

            <div class="sb-sp-group sb-sp-field-horizontal">
                <div class="sb-sp-field-horizontal-left">
                    <label class="sb-sp-label" for="setting_logo_height"><?php esc_html_e('Logo Height (px)', 'wpswitchboard'); ?></label>
                    <p class="sb-sp-description"><?php esc_html_e('Adjust the height of your logo (30-300px)', 'wpswitchboard'); ?></p>
                </div>
                <input type="number" name="setting_logo_height" id="setting_logo_height" value="<?php echo esc_attr($logo_height); ?>" min="30" max="300" class="sb-sp-input">
            </div>
        </div>

        <!-- Page Background Section -->
        <div class="sb-sp-group" style="background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
            <h4 class="sb-sp-heading-sm" style="margin: 0 0 16px 0;"><?php esc_html_e('Page Background', 'wpswitchboard'); ?></h4>

            <div class="sb-sp-group">
                <label class="sb-sp-label"><?php esc_html_e('Background Type', 'wpswitchboard'); ?></label>
                <p class="sb-sp-description" style="margin-bottom: 12px;"><?php esc_html_e('Choose how to style the login page background', 'wpswitchboard'); ?></p>

                <input type="hidden" id="setting_bg_type" name="setting_bg_type" value="<?php echo esc_attr($bg_type); ?>">
                <div class="sb-source-toggle" data-target="bg-type">
                    <button type="button" class="sb-source-btn <?php echo $bg_type === 'color' ? 'active' : ''; ?>" data-type="color"><?php esc_html_e('Color', 'wpswitchboard'); ?></button>
                    <button type="button" class="sb-source-btn <?php echo $bg_type === 'image' ? 'active' : ''; ?>" data-type="image"><?php esc_html_e('Image', 'wpswitchboard'); ?></button>
                    <button type="button" class="sb-source-btn <?php echo $bg_type === 'pattern' ? 'active' : ''; ?>" data-type="pattern"><?php esc_html_e('Pattern', 'wpswitchboard'); ?></button>
                </div>
            </div>

            <!-- Color Background Options -->
            <div class="sb-bg-type-content" id="bg-type-color" <?php echo $bg_type !== 'color' ? 'style="display:none;"' : ''; ?>>
                <div class="sb-sp-group sb-sp-field-horizontal">
                    <div class="sb-sp-field-horizontal-left">
                        <label class="sb-sp-label" for="setting_bg_color"><?php esc_html_e('Background Color', 'wpswitchboard'); ?></label>
                    </div>
                    <input type="color" name="setting_bg_color" id="setting_bg_color" value="<?php echo esc_attr($bg_color); ?>" data-default="#f0f0f1" class="sb-sp-input-color sb-sync-bg-color">
                </div>
            </div>

            <!-- Image Background Options -->
            <div class="sb-bg-type-content" id="bg-type-image" <?php echo $bg_type !== 'image' ? 'style="display:none;"' : ''; ?>>
                <div class="sb-sp-group">
                    <label class="sb-sp-label"><?php esc_html_e('Image Source', 'wpswitchboard'); ?></label>

                    <input type="hidden" id="setting_bg_source" name="setting_bg_source" value="<?php echo esc_attr($bg_source); ?>">
                    <div class="sb-source-toggle" data-target="bg" style="margin-top: 8px;">
                        <button type="button" class="sb-source-btn <?php echo $bg_source === 'upload' ? 'active' : ''; ?>" data-source="upload"><?php esc_html_e('Media Library', 'wpswitchboard'); ?></button>
                        <button type="button" class="sb-source-btn <?php echo $bg_source === 'url' ? 'active' : ''; ?>" data-source="url"><?php esc_html_e('Image URL', 'wpswitchboard'); ?></button>
                    </div>

                    <!-- Upload Mode -->
                    <div class="sb-source-content sb-source-upload" data-target="bg" <?php echo $bg_source !== 'upload' ? 'style="display:none;"' : ''; ?>>
                        <div id="login-bg-preview" class="sb-sp-upload-preview">
                            <?php if ($bg_image): ?>
                                <img src="<?php echo esc_url($bg_image); ?>" alt="Background Image" class="sb-sp-upload-image">
                            <?php endif; ?>
                        </div>
                        <input type="hidden" id="setting_bg_image" name="setting_bg_image" value="<?php echo esc_attr($bg_image); ?>">
                        <div class="sb-sp-button-group">
                            <button type="button" class="button button-small button-primary upload-logo-btn" data-target="login-bg">
                                <span class="dashicons dashicons-upload"></span> <?php esc_html_e('Select', 'wpswitchboard'); ?>
                            </button>
                            <button type="button" class="button button-small button-primary-outline remove-logo-btn" data-target="login-bg" <?php echo $bg_image ? '' : 'hidden'; ?>>
                                <span class="dashicons dashicons-no"></span> <?php esc_html_e('Remove', 'wpswitchboard'); ?>
                            </button>
                        </div>
                    </div>

                    <!-- URL Mode -->
                    <div class="sb-source-content sb-source-url" data-target="bg" <?php echo $bg_source !== 'url' ? 'style="display:none;"' : ''; ?>>
                        <div class="sb-url-input-wrapper">
                            <input type="url" id="setting_bg_external_url" name="setting_bg_external_url" value="<?php echo esc_attr($bg_external_url); ?>" class="sb-sp-input" placeholder="https://example.com/background.jpg">
                            <span class="sb-url-status" id="bg-url-status"></span>
                        </div>
                        <div id="login-bg-url-preview" class="sb-sp-upload-preview" style="margin-top: 12px;">
                            <?php if ($bg_external_url): ?>
                                <img src="<?php echo esc_url($bg_external_url); ?>" alt="Background Image" class="sb-sp-upload-image" style="max-width: 200px; height: auto;">
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

                <!-- Image Overlay -->
                <div class="sb-sp-group sb-sp-field-horizontal" style="margin-top: 16px;">
                    <div class="sb-sp-field-horizontal-left">
                        <label class="sb-sp-label" for="setting_bg_overlay"><?php esc_html_e('Image Overlay', 'wpswitchboard'); ?></label>
                        <p class="sb-sp-description"><?php esc_html_e('Darken or lighten background for better readability', 'wpswitchboard'); ?></p>
                    </div>
                    <select name="setting_bg_overlay" id="setting_bg_overlay" class="sb-sp-select">
                        <option value="none" <?php selected($bg_overlay, 'none'); ?>><?php esc_html_e('None', 'wpswitchboard'); ?></option>
                        <option value="dark" <?php selected($bg_overlay, 'dark'); ?>><?php esc_html_e('Dark', 'wpswitchboard'); ?></option>
                        <option value="light" <?php selected($bg_overlay, 'light'); ?>><?php esc_html_e('Light', 'wpswitchboard'); ?></option>
                    </select>
                </div>

                <div class="sb-sp-group sb-sp-field-horizontal sb-conditional-field <?php echo $bg_overlay === 'none' ? 'hidden' : ''; ?>" id="overlay-opacity-field">
                    <div class="sb-sp-field-horizontal-left">
                        <label class="sb-sp-label" for="setting_bg_overlay_opacity"><?php esc_html_e('Overlay Opacity', 'wpswitchboard'); ?></label>
                    </div>
                    <div class="sb-range-wrapper">
                        <input type="range" name="setting_bg_overlay_opacity" id="setting_bg_overlay_opacity" value="<?php echo esc_attr($bg_overlay_opacity); ?>" min="10" max="90" step="5">
                        <span class="sb-range-value" id="overlay-opacity-value"><?php echo esc_html($bg_overlay_opacity); ?>%</span>
                    </div>
                </div>
            </div>

            <!-- Pattern Background Options -->
            <div class="sb-bg-type-content" id="bg-type-pattern" <?php echo $bg_type !== 'pattern' ? 'style="display:none;"' : ''; ?>>
                <div class="sb-sp-group sb-sp-field-horizontal">
                    <div class="sb-sp-field-horizontal-left">
                        <label class="sb-sp-label" for="setting_bg_pattern"><?php esc_html_e('Select Pattern', 'wpswitchboard'); ?></label>
                    </div>
                    <select name="setting_bg_pattern" id="setting_bg_pattern" class="sb-sp-select">
                        <option value="none" <?php selected($bg_pattern, 'none'); ?>><?php esc_html_e('None', 'wpswitchboard'); ?></option>
                        <option value="dots" <?php selected($bg_pattern, 'dots'); ?>><?php esc_html_e('Dots', 'wpswitchboard'); ?></option>
                        <option value="grid" <?php selected($bg_pattern, 'grid'); ?>><?php esc_html_e('Grid', 'wpswitchboard'); ?></option>
                        <option value="diagonal" <?php selected($bg_pattern, 'diagonal'); ?>><?php esc_html_e('Diagonal Lines', 'wpswitchboard'); ?></option>
                        <option value="cross" <?php selected($bg_pattern, 'cross'); ?>><?php esc_html_e('Cross Hatch', 'wpswitchboard'); ?></option>
                        <option value="waves" <?php selected($bg_pattern, 'waves'); ?>><?php esc_html_e('Waves', 'wpswitchboard'); ?></option>
                        <option value="topography" <?php selected($bg_pattern, 'topography'); ?>><?php esc_html_e('Topography', 'wpswitchboard'); ?></option>
                        <option value="circuit" <?php selected($bg_pattern, 'circuit'); ?>><?php esc_html_e('Circuit', 'wpswitchboard'); ?></option>
                    </select>
                </div>

                <div class="sb-sp-group sb-sp-field-horizontal" style="margin-top: 16px;">
                    <div class="sb-sp-field-horizontal-left">
                        <label class="sb-sp-label" for="setting_bg_color_pattern"><?php esc_html_e('Base Color', 'wpswitchboard'); ?></label>
                    </div>
                    <input type="color" id="setting_bg_color_pattern" value="<?php echo esc_attr($bg_color); ?>" data-default="#f0f0f1" class="sb-sp-input-color sb-sync-bg-color">
                </div>
            </div>
        </div>

        <!-- Color Scheme Section -->
        <div class="sb-sp-group" style="background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
            <h4 class="sb-sp-heading-sm" style="margin: 0 0 16px 0;"><?php esc_html_e('Color Scheme', 'wpswitchboard'); ?></h4>

            <div class="sb-sp-group sb-sp-field-horizontal">
                <div class="sb-sp-field-horizontal-left">
                    <label class="sb-sp-label" for="setting_button_color"><?php esc_html_e('Button Color', 'wpswitchboard'); ?></label>
                    <p class="sb-sp-description"><?php esc_html_e('Color for the login button', 'wpswitchboard'); ?></p>
                </div>
                <input type="color" name="setting_button_color" id="setting_button_color" value="<?php echo esc_attr($button_color); ?>" data-default="#2271b1" class="sb-sp-input-color">
            </div>

            <div class="sb-sp-group sb-sp-field-horizontal">
                <div class="sb-sp-field-horizontal-left">
                    <label class="sb-sp-label" for="setting_link_color"><?php esc_html_e('Link Color', 'wpswitchboard'); ?></label>
                    <p class="sb-sp-description"><?php esc_html_e('Color for links below the form', 'wpswitchboard'); ?></p>
                </div>
                <input type="color" name="setting_link_color" id="setting_link_color" value="<?php echo esc_attr($link_color); ?>" data-default="#2271b1" class="sb-sp-input-color">
            </div>
        </div>

        <!-- Form Styling Section -->
        <div class="sb-sp-group" style="background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
            <h4 class="sb-sp-heading-sm" style="margin: 0 0 16px 0;"><?php esc_html_e('Form Styling', 'wpswitchboard'); ?></h4>

            <div class="sb-sp-group sb-sp-field-horizontal">
                <div class="sb-sp-field-horizontal-left">
                    <label class="sb-sp-label" for="setting_form_radius"><?php esc_html_e('Border Radius', 'wpswitchboard'); ?></label>
                    <p class="sb-sp-description"><?php esc_html_e('0 = square corners, 50 = pill shape', 'wpswitchboard'); ?></p>
                </div>
                <input type="number" name="setting_form_radius" id="setting_form_radius" value="<?php echo esc_attr($form_radius); ?>" min="0" max="50" class="sb-sp-input">
            </div>

            <div class="sb-sp-group sb-sp-field-horizontal">
                <div class="sb-sp-field-horizontal-left">
                    <label class="sb-sp-label" for="setting_form_shadow"><?php esc_html_e('Drop Shadow', 'wpswitchboard'); ?></label>
                    <p class="sb-sp-description"><?php esc_html_e('Add depth effect to the login form', 'wpswitchboard'); ?></p>
                </div>
                <select name="setting_form_shadow" id="setting_form_shadow" class="sb-sp-select">
                    <option value="yes"<?php echo ($form_shadow === 'yes' ? ' selected' : ''); ?>><?php esc_html_e('Enabled', 'wpswitchboard'); ?></option>
                    <option value="no"<?php echo ($form_shadow === 'no' ? ' selected' : ''); ?>><?php esc_html_e('Disabled', 'wpswitchboard'); ?></option>
                </select>
            </div>
        </div>

        <!-- Visibility Options Section -->
        <div class="sb-sp-group" style="background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
            <h4 class="sb-sp-heading-sm" style="margin: 0 0 16px 0;"><?php esc_html_e('Visibility Options', 'wpswitchboard'); ?></h4>

            <label class="sb-module-checkbox-item" style="margin-bottom: 12px;">
                <input type="checkbox" name="setting_hide_back_link" value="yes" <?php checked($hide_back_link, 'yes'); ?>>
                <span><?php esc_html_e('Hide "Back to Site" Link', 'wpswitchboard'); ?></span>
            </label>

            <label class="sb-module-checkbox-item">
                <input type="checkbox" name="setting_hide_lost_password" value="yes" <?php checked($hide_lost_password, 'yes'); ?>>
                <span><?php esc_html_e('Hide "Lost Password" Link', 'wpswitchboard'); ?></span>
            </label>
        </div>

        <!-- Custom CSS Section -->
        <div class="sb-sp-group" style="background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
            <h4 class="sb-sp-heading-sm" style="margin: 0 0 16px 0;"><?php esc_html_e('Custom CSS', 'wpswitchboard'); ?></h4>

            <div class="sb-sp-group">
                <label class="sb-sp-label" for="setting_custom_css"><?php esc_html_e('Additional Styling (Advanced)', 'wpswitchboard'); ?></label>
                <textarea name="setting_custom_css" id="setting_custom_css" rows="6" class="sb-sp-textarea" style="font-family: 'Courier New', monospace; font-size: 13px;"><?php echo esc_textarea($custom_css); ?></textarea>
                <p class="sb-sp-description"><?php esc_html_e('Advanced styling customization for the login page', 'wpswitchboard'); ?></p>
            </div>
        </div>
        <?php
    }
    
    public function custom_login_url() {
        return home_url();
    }
    
    public function custom_login_title() {
        $site_name = get_bloginfo('name');
        return !empty($site_name) ? $site_name : 'WordPress';
    }
    
    public function customize_login_page() {
        $settings = get_option('switchboard_login-page-customizer_settings', []);

        // Validate settings is an array
        if (!is_array($settings)) {
            $settings = [];
        }

        // === BACKWARD COMPATIBILITY ===
        // Detect if this is a legacy configuration (before modernization)
        $is_legacy = !isset($settings['form_position']) && !isset($settings['form_theme']) && !isset($settings['bg_type']);

        // Form position and theme (new features - default to legacy behavior)
        $form_position = isset($settings['form_position']) ? $settings['form_position'] : 'center';

        // Form theme: For legacy configs with custom form_bg, use 'custom' mode
        $form_theme = 'light';
        if (isset($settings['form_theme'])) {
            $form_theme = $settings['form_theme'];
        } elseif ($is_legacy && isset($settings['form_bg']) && $settings['form_bg'] !== '#ffffff') {
            // Legacy user had a custom form background, preserve it with custom mode
            $form_theme = 'custom';
        }

        $form_bg_opacity = isset($settings['form_bg_opacity']) ? intval($settings['form_bg_opacity']) : 100;
        $form_bg_opacity = max(0, min($form_bg_opacity, 100));
        $form_text_color = $this->sanitize_hex_color($settings['form_text_color'] ?? '#24292f', '#24292f');

        // Logo settings - validate URLs and dimensions
        // Legacy support: if logo_source not set, check if logo_url or logo_external_url exists
        $logo_source = 'upload';
        if (isset($settings['logo_source'])) {
            $logo_source = $settings['logo_source'];
        } elseif ($is_legacy) {
            // Legacy: determine source from existing data
            if (!empty($settings['logo_external_url'])) {
                $logo_source = 'url';
            } elseif (!empty($settings['logo_url'])) {
                $logo_source = 'upload';
            }
        }

        $logo_url = '';
        if ($logo_source === 'site-icon') {
            $logo_url = get_site_icon_url(512);
        } elseif ($logo_source === 'url' && isset($settings['logo_external_url']) && is_string($settings['logo_external_url'])) {
            $logo_url = esc_url_raw($settings['logo_external_url']);
        } elseif (isset($settings['logo_url']) && is_string($settings['logo_url'])) {
            $logo_url = esc_url_raw($settings['logo_url']);
        }

        $logo_width = 320;
        if (isset($settings['logo_width'])) {
            $logo_width = intval($settings['logo_width']);
            $logo_width = max(50, min($logo_width, 1000));
        }

        $logo_height = 100;
        if (isset($settings['logo_height'])) {
            $logo_height = intval($settings['logo_height']);
            $logo_height = max(20, min($logo_height, 500));
        }

        // Background type and settings
        // Legacy support: if bg_type not set but bg_image exists, use 'image' mode
        $bg_type = 'color';
        if (isset($settings['bg_type'])) {
            $bg_type = $settings['bg_type'];
        } elseif ($is_legacy) {
            // Legacy: if they had a background image, switch to image mode
            $has_bg_image = (!empty($settings['bg_image']) || !empty($settings['bg_external_url']));
            if ($has_bg_image) {
                $bg_type = 'image';
            }
        }

        $bg_color = $this->sanitize_hex_color($settings['bg_color'] ?? '#f0f0f1', '#f0f0f1');
        $bg_pattern = isset($settings['bg_pattern']) ? $settings['bg_pattern'] : 'none';
        $bg_overlay = isset($settings['bg_overlay']) ? $settings['bg_overlay'] : 'none';
        $bg_overlay_opacity = isset($settings['bg_overlay_opacity']) ? intval($settings['bg_overlay_opacity']) : 50;
        $bg_overlay_opacity = max(10, min($bg_overlay_opacity, 90));

        // Background image - legacy support for bg_source
        $bg_source = isset($settings['bg_source']) ? $settings['bg_source'] : 'upload';
        $bg_image = '';
        if ($bg_source === 'url' && isset($settings['bg_external_url']) && is_string($settings['bg_external_url'])) {
            $bg_image = esc_url_raw($settings['bg_external_url']);
        } elseif (isset($settings['bg_image']) && is_string($settings['bg_image'])) {
            $bg_image = esc_url_raw($settings['bg_image']);
        }

        // Color settings
        $button_color = $this->sanitize_hex_color($settings['button_color'] ?? '#2271b1', '#2271b1');
        $link_color = $this->sanitize_hex_color($settings['link_color'] ?? '#2271b1', '#2271b1');

        // Form styling - preserve legacy form_bg if custom theme or legacy config
        $form_bg = '#ffffff';
        if ($form_theme === 'custom' || $is_legacy) {
            $form_bg = $this->sanitize_hex_color($settings['form_bg'] ?? '#ffffff', '#ffffff');
        } elseif ($form_theme === 'dark') {
            $form_bg = '#1f2937';
        }

        $form_radius = 8;
        if (isset($settings['form_radius'])) {
            $form_radius = intval($settings['form_radius']);
            $form_radius = max(0, min($form_radius, 50));
        }

        $form_shadow = isset($settings['form_shadow']) ? $settings['form_shadow'] : 'yes';

        // Visibility options
        $hide_back_link = (isset($settings['hide_back_link']) && $settings['hide_back_link'] === 'yes') ? 'yes' : 'no';
        $hide_lost_password = (isset($settings['hide_lost_password']) && $settings['hide_lost_password'] === 'yes') ? 'yes' : 'no';

        // Custom CSS
        $custom_css = '';
        if (isset($settings['custom_css']) && is_string($settings['custom_css'])) {
            $custom_css = $this->sanitize_css($settings['custom_css']);
        }

        // Calculate form background with opacity
        $form_bg_rgba = $this->hex_to_rgba($form_bg, $form_bg_opacity / 100);

        // Determine text colors based on theme
        $label_color = '#24292f';
        $input_bg = '#ffffff';
        if ($form_theme === 'dark') {
            $label_color = '#ffffff';
            $input_bg = '#374151';
        } elseif ($form_theme === 'custom') {
            $label_color = $form_text_color;
        }

        ?>
        <style type="text/css">
        /* Switchboard Login Page Customizer */
        body.login {
            background: <?php echo esc_attr($bg_color); ?> !important;
            <?php if ($bg_type === 'image' && !empty($bg_image)): ?>
            background-image: url(<?php echo esc_url($bg_image); ?>) !important;
            background-size: cover !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
            <?php elseif ($bg_type === 'pattern' && $bg_pattern !== 'none'): ?>
            <?php echo $this->get_pattern_css($bg_pattern, $bg_color); ?>
            <?php endif; ?>
        }

        <?php if ($bg_type === 'image' && !empty($bg_image) && $bg_overlay !== 'none'): ?>
        body.login::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: <?php echo $bg_overlay === 'dark' ? 'rgba(0,0,0,' . ($bg_overlay_opacity / 100) . ')' : 'rgba(255,255,255,' . ($bg_overlay_opacity / 100) . ')'; ?>;
            z-index: 0;
            pointer-events: none;
        }
        body.login #login {
            position: relative;
            z-index: 1;
        }
        <?php endif; ?>

        <?php
        // Form position styles - pass theme-aware panel background
        $panel_bg = $form_theme === 'dark' ? 'rgba(31,41,55,0.95)' : 'rgba(255,255,255,0.95)';
        $position_css = $this->get_position_css($form_position, $panel_bg);
        echo $position_css;
        ?>

        <?php if (!empty($logo_url)): ?>
        #login h1 a {
            background-image: url(<?php echo esc_url($logo_url); ?>) !important;
            background-size: contain !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
            width: <?php echo esc_attr($logo_width); ?>px !important;
            height: <?php echo esc_attr($logo_height); ?>px !important;
        }
        <?php endif; ?>

        #login form {
            background: <?php echo esc_attr($form_bg_rgba); ?> !important;
            border-radius: <?php echo esc_attr($form_radius); ?>px !important;
            <?php if ($form_shadow === 'yes'): ?>
            box-shadow: 0 4px 24px rgba(0,0,0,0.15) !important;
            <?php else: ?>
            box-shadow: none !important;
            <?php endif; ?>
            border: none !important;
        }

        <?php if ($form_theme === 'dark' || ($form_theme === 'custom' && $this->is_dark_color($form_bg))): ?>
        /* Dark form theme adjustments */
        #login form label {
            color: <?php echo esc_attr($label_color); ?> !important;
        }
        #login form input[type="text"],
        #login form input[type="password"],
        #login form input[type="email"] {
            background: <?php echo esc_attr($input_bg); ?> !important;
            border-color: rgba(255,255,255,0.2) !important;
            color: <?php echo $form_theme === 'dark' ? '#ffffff' : 'inherit'; ?> !important;
        }
        #login form .forgetmenot label {
            color: <?php echo esc_attr($label_color); ?> !important;
        }
        <?php elseif ($form_theme === 'custom'): ?>
        #login form label {
            color: <?php echo esc_attr($label_color); ?> !important;
        }
        <?php endif; ?>

        .wp-core-ui .button-primary {
            background: <?php echo esc_attr($button_color); ?> !important;
            border-color: <?php echo esc_attr($button_color); ?> !important;
            text-shadow: none !important;
            box-shadow: none !important;
        }

        .wp-core-ui .button-primary:hover,
        .wp-core-ui .button-primary:focus {
            background: <?php echo esc_attr($button_color); ?> !important;
            border-color: <?php echo esc_attr($button_color); ?> !important;
            opacity: 0.85 !important;
        }

        input[type="text"]:focus,
        input[type="password"]:focus,
        input[type="email"]:focus {
            border-color: <?php echo esc_attr($button_color); ?> !important;
            box-shadow: 0 0 0 1px <?php echo esc_attr($button_color); ?> !important;
        }

        .login #backtoblog a,
        .login #nav a {
            color: <?php echo esc_attr($link_color); ?> !important;
        }

        .login #backtoblog a:hover,
        .login #nav a:hover {
            color: <?php echo esc_attr($link_color); ?> !important;
            opacity: 0.8 !important;
        }

        <?php if ($hide_back_link === 'yes'): ?>
        .login #backtoblog {
            display: none !important;
        }
        <?php endif; ?>

        <?php if ($hide_lost_password === 'yes'): ?>
        .login #nav {
            display: none !important;
        }
        <?php endif; ?>

        <?php
        if (!empty($custom_css)) {
            // Strip any HTML tags to prevent </style> breakout
            echo wp_strip_all_tags($custom_css);
        }
        ?>
        </style>
        <?php
    }

    /**
     * Get CSS for form position
     */
    private function get_position_css($position, $panel_bg = 'rgba(255,255,255,0.95)') {
        $css = '';

        switch ($position) {
            case 'left-edge':
                $css = '
                body.login {
                    display: flex !important;
                    align-items: stretch !important;
                    min-height: 100vh !important;
                }
                #login {
                    margin: 0 !important;
                    padding: 40px !important;
                    background: ' . esc_attr($panel_bg) . ';
                    min-height: 100vh !important;
                    display: flex !important;
                    flex-direction: column !important;
                    justify-content: center !important;
                    width: 400px !important;
                    max-width: 100% !important;
                }
                ';
                break;

            case 'left-half':
                $css = '
                body.login {
                    display: flex !important;
                    align-items: stretch !important;
                    min-height: 100vh !important;
                }
                #login {
                    margin: 0 !important;
                    padding: 40px !important;
                    background: ' . esc_attr($panel_bg) . ';
                    min-height: 100vh !important;
                    display: flex !important;
                    flex-direction: column !important;
                    justify-content: center !important;
                    width: 50% !important;
                    max-width: 500px !important;
                }
                @media (max-width: 768px) {
                    #login { width: 100% !important; max-width: 100% !important; }
                }
                ';
                break;

            case 'right-half':
                $css = '
                body.login {
                    display: flex !important;
                    align-items: stretch !important;
                    justify-content: flex-end !important;
                    min-height: 100vh !important;
                }
                #login {
                    margin: 0 !important;
                    padding: 40px !important;
                    background: ' . esc_attr($panel_bg) . ';
                    min-height: 100vh !important;
                    display: flex !important;
                    flex-direction: column !important;
                    justify-content: center !important;
                    width: 50% !important;
                    max-width: 500px !important;
                }
                @media (max-width: 768px) {
                    #login { width: 100% !important; max-width: 100% !important; }
                }
                ';
                break;

            case 'right-edge':
                $css = '
                body.login {
                    display: flex !important;
                    align-items: stretch !important;
                    justify-content: flex-end !important;
                    min-height: 100vh !important;
                }
                #login {
                    margin: 0 !important;
                    padding: 40px !important;
                    background: ' . esc_attr($panel_bg) . ';
                    min-height: 100vh !important;
                    display: flex !important;
                    flex-direction: column !important;
                    justify-content: center !important;
                    width: 400px !important;
                    max-width: 100% !important;
                }
                ';
                break;

            case 'center':
            default:
                // Default WordPress centered layout - no changes needed
                break;
        }

        return $css;
    }

    /**
     * Get CSS for background patterns
     */
    private function get_pattern_css($pattern, $bg_color) {
        $pattern_color = $this->adjust_color_brightness($bg_color, -10);

        switch ($pattern) {
            case 'dots':
                return "background-image: radial-gradient({$pattern_color} 1px, transparent 1px) !important;
                        background-size: 20px 20px !important;";

            case 'grid':
                return "background-image: linear-gradient({$pattern_color} 1px, transparent 1px),
                                         linear-gradient(90deg, {$pattern_color} 1px, transparent 1px) !important;
                        background-size: 40px 40px !important;";

            case 'diagonal':
                return "background-image: repeating-linear-gradient(
                            45deg,
                            {$pattern_color},
                            {$pattern_color} 1px,
                            transparent 1px,
                            transparent 20px
                        ) !important;";

            case 'cross':
                return "background-image: linear-gradient({$pattern_color} 1px, transparent 1px),
                                         linear-gradient(90deg, {$pattern_color} 1px, transparent 1px),
                                         linear-gradient(45deg, {$pattern_color} 1px, transparent 1px),
                                         linear-gradient(-45deg, {$pattern_color} 1px, transparent 1px) !important;
                        background-size: 40px 40px !important;";

            case 'waves':
                return "background-image: repeating-radial-gradient(
                            circle at 0 0,
                            transparent 0,
                            {$bg_color} 40px
                        ), repeating-linear-gradient(
                            {$pattern_color},
                            {$bg_color}
                        ) !important;";

            case 'topography':
                return "background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='" . urlencode($pattern_color) . "' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;";

            case 'circuit':
                return "background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='76' height='76'%3E%3Cpath fill='" . urlencode($pattern_color) . "' fill-opacity='0.4' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2z'%3E%3C/path%3E%3C/svg%3E\") !important;";

            default:
                return '';
        }
    }

    /**
     * Convert hex color to rgba
     */
    private function hex_to_rgba($hex, $alpha = 1) {
        $hex = ltrim($hex, '#');

        if (strlen($hex) === 3) {
            $hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2];
        }

        $r = hexdec(substr($hex, 0, 2));
        $g = hexdec(substr($hex, 2, 2));
        $b = hexdec(substr($hex, 4, 2));

        return "rgba({$r}, {$g}, {$b}, {$alpha})";
    }

    /**
     * Check if a hex color is dark
     */
    private function is_dark_color($hex) {
        $hex = ltrim($hex, '#');

        if (strlen($hex) === 3) {
            $hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2];
        }

        $r = hexdec(substr($hex, 0, 2));
        $g = hexdec(substr($hex, 2, 2));
        $b = hexdec(substr($hex, 4, 2));

        // Calculate luminance
        $luminance = (0.299 * $r + 0.587 * $g + 0.114 * $b) / 255;

        return $luminance < 0.5;
    }

    /**
     * Adjust color brightness
     */
    private function adjust_color_brightness($hex, $percent) {
        $hex = ltrim($hex, '#');

        if (strlen($hex) === 3) {
            $hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2];
        }

        $r = hexdec(substr($hex, 0, 2));
        $g = hexdec(substr($hex, 2, 2));
        $b = hexdec(substr($hex, 4, 2));

        $r = max(0, min(255, $r + ($r * $percent / 100)));
        $g = max(0, min(255, $g + ($g * $percent / 100)));
        $b = max(0, min(255, $b + ($b * $percent / 100)));

        return sprintf('#%02x%02x%02x', $r, $g, $b);
    }

    /**
     * Sanitize hex color code
     */
    private function sanitize_hex_color($color, $default = '#000000') {
        // Remove whitespace
        $color = trim($color);

        // Check if it's a valid hex color
        if (preg_match('/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/', $color)) {
            return $color;
        }

        return $default;
    }

    /**
     * Sanitize CSS - remove dangerous content while preserving CSS
     */
    private function sanitize_css($css) {
        if (empty($css) || !is_string($css)) {
            return '';
        }

        // Remove script tags
        $css = preg_replace('/<script\b[^>]*>(.*?)<\/script>/is', '', $css);

        // Remove other HTML tags except style-related ones
        $css = wp_strip_all_tags($css, true);

        // Remove javascript: protocol
        $css = preg_replace('/javascript\s*:/i', '', $css);

        // Remove expression() - IE specific vulnerability
        $css = preg_replace('/expression\s*\(/i', '', $css);

        // Remove @import that could load external content
        $css = preg_replace('/@import/i', '', $css);

        // Remove behavior: property - IE specific vulnerability
        $css = preg_replace('/behavior\s*:/i', '', $css);

        return $css;
    }
}

// Initialize and register with data system
$switchboard_instance = new SwitchboardLoginPageCustomizer();
Switchboard_Data_Registry::get_instance()->auto_register($switchboard_instance, __FILE__);
