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

// Default options helper
function loginlook_get_default_options() {
    return array(
        'logo_url'     => '',
        'redirect_url' => home_url(),
        'logo_width'   => '84',
        'logo_height'  => '84',
        'active_theme' => 'default',
        'background_color' => '',
        'background_image_url' => '',
        'background_overlay_color' => '',
        'background_overlay_opacity' => '0.45',
        'text_color' => '',
    );
}

/**
 * Get required capability for plugin admin pages.
 *
 * @return string
 */
function lg_forge_required_capability() {
    return is_multisite() ? 'manage_network_options' : 'manage_options';
}

/**
 * Get settings form action URL.
 *
 * options.php lives under /wp-admin/, even when current page is in /wp-admin/network/.
 *
 * @return string
 */
function lg_forge_settings_form_action_url() {
    return admin_url( 'options.php' );
}

// Add admin menu
if ( is_multisite() ) {
    add_action( 'network_admin_menu', 'lg_forge_add_admin_menu' );
} else {
    add_action( 'admin_menu', 'lg_forge_add_admin_menu' );
}
function lg_forge_add_admin_menu() {
    $capability = lg_forge_required_capability();

    add_menu_page(
        esc_html__( 'Login Forge', 'skyquake-loginforge' ),
        esc_html__( 'Login Forge', 'skyquake-loginforge' ),
        $capability,
        'loginlook',
        'lg_forge_options_page',
        LG_FORGE_PLUGIN_URL . 'images/loginlook-logo.svg',
        30
    );

    add_submenu_page(
        'loginlook',
        esc_html__( 'Settings', 'skyquake-loginforge' ),
        esc_html__( 'Settings', 'skyquake-loginforge' ),
        $capability,
        'loginlook',
        'lg_forge_options_page'
    );

    add_submenu_page(
        'loginlook',
        esc_html__( 'Themes', 'skyquake-loginforge' ),
        esc_html__( 'Themes', 'skyquake-loginforge' ),
        $capability,
        'loginlook-themes',
        'lg_forge_themes_page'
    );

    add_submenu_page(
        'loginlook',
        esc_html__( 'Customize', 'skyquake-loginforge' ),
        esc_html__( 'Customize', 'skyquake-loginforge' ),
        $capability,
        'loginlook-customize',
        'lg_forge_customize_page'
    );
}

// Settings initialization
add_action( 'admin_init', 'lg_forge_settings_init' );
function lg_forge_settings_init() {
    register_setting( 'loginlook', 'loginlook_options', 'lg_forge_options_validate' );

    add_settings_section(
        'loginlook_section',
        esc_html__( 'Login Page Customization', 'skyquake-loginforge' ),
        'lg_forge_section_callback',
        'loginlook'
    );

    add_settings_field(
        'logo_url',
        esc_html__( 'Login Logo', 'skyquake-loginforge' ),
        'lg_forge_logo_url_render',
        'loginlook',
        'loginlook_section'
    );

    add_settings_field(
        'redirect_url',
        esc_html__( 'Logo Redirect URL', 'skyquake-loginforge' ),
        'lg_forge_redirect_url_render',
        'loginlook',
        'loginlook_section'
    );

    add_settings_field(
        'logo_width',
        esc_html__( 'Logo Width (px)', 'skyquake-loginforge' ),
        'lg_forge_logo_width_render',
        'loginlook',
        'loginlook_section'
    );

    add_settings_field(
        'logo_height',
        esc_html__( 'Logo Height (px)', 'skyquake-loginforge' ),
        'lg_forge_logo_height_render',
        'loginlook',
        'loginlook_section'
    );

}

// Settings initialization for themes
add_action( 'admin_init', 'lg_forge_themes_settings_init' );
function lg_forge_themes_settings_init() {
    register_setting( 'loginlook_themes', 'loginlook_options', 'lg_forge_options_validate' );

    add_settings_section(
        'loginlook_themes_section',
        esc_html__( 'Choose a Login Theme', 'skyquake-loginforge' ),
        'lg_forge_themes_section_callback',
        'loginlook_themes'
    );

    add_settings_field(
        'active_theme',
        esc_html__( 'Available Themes', 'skyquake-loginforge' ),
        'lg_forge_active_theme_render',
        'loginlook_themes',
        'loginlook_themes_section'
    );
}

// Settings initialization for customize page
add_action( 'admin_init', 'lg_forge_customize_settings_init' );
function lg_forge_customize_settings_init() {
    register_setting( 'loginlook_customize', 'loginlook_options', 'lg_forge_options_validate' );

    add_settings_section(
        'loginlook_customize_section',
        esc_html__( 'Customize Login Page', 'skyquake-loginforge' ),
        'lg_forge_customize_section_callback',
        'loginlook_customize'
    );

    add_settings_field(
        'background_color',
        esc_html__( 'Background Color', 'skyquake-loginforge' ),
        'lg_forge_background_color_render',
        'loginlook_customize',
        'loginlook_customize_section'
    );

    add_settings_field(
        'background_image_url',
        esc_html__( 'Background Image', 'skyquake-loginforge' ),
        'lg_forge_background_image_render',
        'loginlook_customize',
        'loginlook_customize_section'
    );

    add_settings_field(
        'background_overlay_color',
        esc_html__( 'Background Overlay', 'skyquake-loginforge' ),
        'lg_forge_background_overlay_color_render',
        'loginlook_customize',
        'loginlook_customize_section'
    );

    add_settings_field(
        'background_overlay_opacity',
        esc_html__( 'Overlay Opacity', 'skyquake-loginforge' ),
        'lg_forge_background_overlay_opacity_render',
        'loginlook_customize',
        'loginlook_customize_section'
    );

    add_settings_field(
        'text_color',
        esc_html__( 'Text Color', 'skyquake-loginforge' ),
        'lg_forge_text_color_render',
        'loginlook_customize',
        'loginlook_customize_section'
    );
}

// Section callback
function lg_forge_section_callback() {
    echo '<p>' . esc_html__( 'Customize the appearance of the WordPress login page.', 'skyquake-loginforge' ) . '</p>';
}

// Themes section callback
function lg_forge_themes_section_callback() {
    echo '<p>' . esc_html__( 'Choose a pre-designed theme for your login page. Only one theme can be active at a time.', 'skyquake-loginforge' ) . '</p>';
}

// Customize section callback
function lg_forge_customize_section_callback() {
    echo '<p>' . esc_html__( 'Change background and input styles without touching code.', 'skyquake-loginforge' ) . '</p>';
}

// Render logo URL field
function lg_forge_logo_url_render() {
    $options = get_option( 'loginlook_options' );
    $logo_url = isset( $options['logo_url'] ) ? $options['logo_url'] : '';
    ?>
    <div class="loginlook-inline-field">
        <input
            type="text"
            id="loginlook_logo_url"
            name="loginlook_options[logo_url]"
            value="<?php echo esc_attr( $logo_url ); ?>"
            data-default=""
        />
        <button type="button" class="button" id="loginlook_upload_logo"><?php esc_html_e( 'Upload Logo', 'skyquake-loginforge' ); ?></button>
        <button
            type="button"
            class="button loginlook-reset-icon"
            data-target="#loginlook_logo_url"
            data-clear-preview="1"
            aria-label="<?php esc_attr_e( 'Reset logo URL', 'skyquake-loginforge' ); ?>"
        >
            <span class="dashicons dashicons-undo" aria-hidden="true"></span>
        </button>
    </div>
    <p class="description"><?php esc_html_e( 'Upload or enter the URL of the logo image.', 'skyquake-loginforge' ); ?></p>
    <div id="loginlook_logo_preview" style="margin-top: 10px;">
        <?php $logo_preview_style = $logo_url ? '' : 'display:none;'; ?>
        <img
            src="<?php echo esc_url( $logo_url ); ?>"
            alt="Logo Preview"
            style="max-width: 200px; max-height: 200px; <?php echo esc_attr( $logo_preview_style ); ?>"
        />
    </div>
    <?php
}

// Render redirect URL field
function lg_forge_redirect_url_render() {
    $options = get_option( 'loginlook_options' );
    $redirect_url = isset( $options['redirect_url'] ) ? $options['redirect_url'] : home_url();
    ?>
    <input
        type="url"
        id="loginlook_redirect_url"
        name="loginlook_options[redirect_url]"
        value="<?php echo esc_attr( $redirect_url ); ?>"
        data-default="<?php echo esc_attr( home_url() ); ?>"
        style="width: 100%;"
    />
    <button
        type="button"
        class="button loginlook-reset-icon"
        data-target="#loginlook_redirect_url"
        aria-label="<?php esc_attr_e( 'Reset redirect URL', 'skyquake-loginforge' ); ?>"
    >
        <span class="dashicons dashicons-undo" aria-hidden="true"></span>
    </button>
    <p class="description"><?php esc_html_e( 'URL to redirect when the logo is clicked. Default is home URL.', 'skyquake-loginforge' ); ?></p>
    <?php
}

// Render logo width field
function lg_forge_logo_width_render() {
    $options = get_option( 'loginlook_options' );
    $logo_width = isset( $options['logo_width'] ) ? $options['logo_width'] : '84';
    ?>
    <div class="loginlook-inline-field">
        <input
            type="number"
            id="loginlook_logo_width"
            name="loginlook_options[logo_width]"
            value="<?php echo esc_attr( $logo_width ); ?>"
            data-default="84"
            min="1"
        />
        <button
            type="button"
            class="button loginlook-reset-icon"
            data-target="#loginlook_logo_width"
            aria-label="<?php esc_attr_e( 'Reset logo width', 'skyquake-loginforge' ); ?>"
        >
            <span class="dashicons dashicons-undo" aria-hidden="true"></span>
        </button>
    </div>
    <p class="description"><?php esc_html_e( 'Width of the logo in pixels.', 'skyquake-loginforge' ); ?></p>
    <?php
}

// Render logo height field
function lg_forge_logo_height_render() {
    $options = get_option( 'loginlook_options' );
    $logo_height = isset( $options['logo_height'] ) ? $options['logo_height'] : '84';
    ?>
    <div class="loginlook-inline-field">
        <input
            type="number"
            id="loginlook_logo_height"
            name="loginlook_options[logo_height]"
            value="<?php echo esc_attr( $logo_height ); ?>"
            data-default="84"
            min="1"
        />
        <button
            type="button"
            class="button loginlook-reset-icon"
            data-target="#loginlook_logo_height"
            aria-label="<?php esc_attr_e( 'Reset logo height', 'skyquake-loginforge' ); ?>"
        >
            <span class="dashicons dashicons-undo" aria-hidden="true"></span>
        </button>
    </div>
    <p class="description"><?php esc_html_e( 'Height of the logo in pixels.', 'skyquake-loginforge' ); ?></p>
    <?php
}

// Render background color field
function lg_forge_background_color_render() {
    $options = get_option( 'loginlook_options' );
    $background_color = isset( $options['background_color'] ) ? $options['background_color'] : '';
    ?>
    <div class="loginlook-inline-field">
        <input type="color" class="loginlook-color-picker" id="loginlook_background_color_picker" value="<?php echo esc_attr( $background_color ? $background_color : '' ); ?>" placeholder="#0f172a" />
        <input type="text" class="loginlook-color-input" id="loginlook_background_color" name="loginlook_options[background_color]" value="<?php echo esc_attr( $background_color ); ?>" placeholder="#0f172a" />
        <input type="hidden" id="loginlook_background_color_touched" name="loginlook_options[background_color_touched]" value="0" />
        <button
            type="button"
            class="button loginlook-reset-icon loginlook-reset-color"
            data-target="#loginlook_background_color"
            aria-label="<?php esc_attr_e( 'Reset background color', 'skyquake-loginforge' ); ?>"
        >
            <span class="dashicons dashicons-undo" aria-hidden="true"></span>
        </button>
    </div>
    <p class="description"><?php esc_html_e( 'Set a solid background color (hex).', 'skyquake-loginforge' ); ?></p>
    <?php
}

// Render background image field
function lg_forge_background_image_render() {
    $options = get_option( 'loginlook_options' );
    $background_image_url = isset( $options['background_image_url'] ) ? $options['background_image_url'] : '';
    ?>
    <div class="loginlook-inline-field">
        <input type="text" id="loginlook_background_image_url" name="loginlook_options[background_image_url]" value="<?php echo esc_attr( $background_image_url ); ?>" />
        <button type="button" class="button" id="loginlook_upload_background"><?php esc_html_e( 'Upload Image', 'skyquake-loginforge' ); ?></button>
        <button
            type="button"
            class="button loginlook-reset-icon loginlook-reset-image"
            data-target="#loginlook_background_image_url"
            aria-label="<?php esc_attr_e( 'Reset background image', 'skyquake-loginforge' ); ?>"
        >
            <span class="dashicons dashicons-undo" aria-hidden="true"></span>
        </button>
    </div>
    <p class="description"><?php esc_html_e( 'Upload or paste a background image URL.', 'skyquake-loginforge' ); ?></p>
    <div id="loginlook_background_preview" style="margin-top: 10px;">
        <?php $background_preview_style = $background_image_url ? '' : 'display:none;'; ?>
        <img
            src="<?php echo esc_url( $background_image_url ); ?>"
            alt="Background Preview"
            style="max-width: 320px; max-height: 180px; border-radius: 10px; <?php echo esc_attr( $background_preview_style ); ?>"
        />
    </div>
    <?php
}

// Render background overlay color field
function lg_forge_background_overlay_color_render() {
    $options = get_option( 'loginlook_options' );
    $background_overlay_color = isset( $options['background_overlay_color'] ) ? $options['background_overlay_color'] : '';
    ?>
    <div class="loginlook-inline-field">
        <input type="color" class="loginlook-color-picker" id="loginlook_background_overlay_color_picker" name="loginlook_options[background_overlay_color_picker]" value="<?php echo esc_attr( $background_overlay_color ? $background_overlay_color : '' ); ?>" placeholder="#0f172a" />
        <input type="text" class="loginlook-color-input" id="loginlook_background_overlay_color" name="loginlook_options[background_overlay_color]" value="<?php echo esc_attr( $background_overlay_color ); ?>" placeholder="#0f172a" />
        <input type="hidden" id="loginlook_background_overlay_color_touched" name="loginlook_options[background_overlay_color_touched]" value="0" />
        <button
            type="button"
            class="button loginlook-reset-icon loginlook-reset-color"
            data-target="#loginlook_background_overlay_color"
            aria-label="<?php esc_attr_e( 'Reset background overlay color', 'skyquake-loginforge' ); ?>"
        >
            <span class="dashicons dashicons-undo" aria-hidden="true"></span>
        </button>
    </div>
    <p class="description"><?php esc_html_e( 'Set a color overlay (hex) to layer over the background image.', 'skyquake-loginforge' ); ?></p>
    <?php
}

// Render background overlay opacity field
function lg_forge_background_overlay_opacity_render() {
    $options = get_option( 'loginlook_options' );
    $opacity = isset( $options['background_overlay_opacity'] ) ? $options['background_overlay_opacity'] : '0.45';
    $opacity = is_numeric( $opacity ) ? (float) $opacity : 0.45;
    $opacity = max( 0, min( 1, $opacity ) );
    ?>
    <div class="loginlook-inline-field">
        <input
            type="range"
            id="loginlook_background_overlay_opacity_range"
            name="loginlook_options[background_overlay_opacity_range]"
            min="0"
            max="1"
            step="0.01"
            value="<?php echo esc_attr( $opacity ); ?>"
        />
        <input
            type="number"
            id="loginlook_background_overlay_opacity"
            name="loginlook_options[background_overlay_opacity]"
            min="0"
            max="1"
            step="0.01"
            value="<?php echo esc_attr( $opacity ); ?>"
            data-default="0.45"
            style="width: 90px;"
        />
        <button
            type="button"
            class="button loginlook-reset-icon"
            data-target="#loginlook_background_overlay_opacity"
            aria-label="<?php esc_attr_e( 'Reset overlay opacity', 'skyquake-loginforge' ); ?>"
        >
            <span class="dashicons dashicons-undo" aria-hidden="true"></span>
        </button>
    </div>
    <p class="description"><?php esc_html_e( 'Set overlay opacity from 0 (transparent) to 1 (opaque).', 'skyquake-loginforge' ); ?></p>
    <?php
}

// Render text color field
function lg_forge_text_color_render() {
    $options = get_option( 'loginlook_options' );
    $text_color = isset( $options['text_color'] ) ? $options['text_color'] : '';
    ?>
    <div class="loginlook-inline-field">
        <input type="color" class="loginlook-color-picker" id="loginlook_text_color_picker" value="<?php echo esc_attr( $text_color ? $text_color : '#000000' ); ?>" />
        <input type="text" class="loginlook-color-input" id="loginlook_text_color" name="loginlook_options[text_color]" value="<?php echo esc_attr( $text_color ); ?>" placeholder="#0f172a" />
        <input type="hidden" id="loginlook_text_color_touched" name="loginlook_options[text_color_touched]" value="0" />
        <button
            type="button"
            class="button loginlook-reset-icon loginlook-reset-color"
            data-target="#loginlook_text_color"
            aria-label="<?php esc_attr_e( 'Reset text color', 'skyquake-loginforge' ); ?>"
        >
            <span class="dashicons dashicons-undo" aria-hidden="true"></span>
        </button>
    </div>
    <p class="description"><?php esc_html_e( 'Set the default text color on the login page (hex).', 'skyquake-loginforge' ); ?></p>
    <?php
}

// Render active theme field
function lg_forge_active_theme_render() {
    $options = get_option( 'loginlook_options' );
    $active_theme = isset( $options['active_theme'] ) ? $options['active_theme'] : 'default';

    $themes = array(
        'default' => array(
            'name' => esc_html__( 'Default', 'skyquake-loginforge' ),
            'image' => LG_FORGE_PLUGIN_URL . 'images/login-theme-default.png',
        ),
        'dark' => array(
            'name' => esc_html__( 'Dark Mode', 'skyquake-loginforge' ),
            'image' => LG_FORGE_PLUGIN_URL . 'images/login-theme-dark.png',
        ),
        'gradient' => array(
            'name' => esc_html__( 'Gradient Style', 'skyquake-loginforge' ),
            'image' => LG_FORGE_PLUGIN_URL . 'images/login-theme-gradient-style.jpg',
        ),
        'member' => array(
            'name' => esc_html__( 'Member Card', 'skyquake-loginforge' ),
            'image' => LG_FORGE_PLUGIN_URL . 'images/login-theme-member.png',
        ),
        'skylogin-soft-ui' => array(
            'name' => esc_html__( 'SkyLogin Soft UI', 'skyquake-loginforge' ),
            'image' => LG_FORGE_PLUGIN_URL . 'images/login-theme-skylogin-soft-ui.png',
        ),
        'glowleaf-login' => array(
            'name' => esc_html__( 'GlowLeaf Login', 'skyquake-loginforge' ),
            'image' => LG_FORGE_PLUGIN_URL . 'images/login-theme-glowleaf-login.svg',
        ),
    );

    ?>
    <div class="loginlook-themes-grid">
        <?php foreach ( $themes as $theme_key => $theme ) : ?>
            <label class="loginlook-theme-card <?php echo ( $active_theme === $theme_key ) ? 'active' : ''; ?>" for="theme_<?php echo esc_attr( $theme_key ); ?>">
                <input type="radio" id="theme_<?php echo esc_attr( $theme_key ); ?>" name="loginlook_options[active_theme]" value="<?php echo esc_attr( $theme_key ); ?>" <?php checked( $active_theme, $theme_key ); ?> />
                <span class="loginlook-theme-check" aria-hidden="true">
                    <span class="dashicons dashicons-yes"></span>
                </span>
                <div class="loginlook-theme-preview">
                    <img src="<?php echo esc_url( $theme['image'] ); ?>" alt="<?php echo esc_attr( $theme['name'] ); ?>" />
                </div>
                <h4><?php echo esc_html( $theme['name'] ); ?></h4>
                <span class="loginlook-activate-btn">
                    <?php echo ( $active_theme === $theme_key ) ? esc_html__( 'Selected', 'skyquake-loginforge' ) : esc_html__( 'Activate', 'skyquake-loginforge' ); ?>
                </span>
            </label>
        <?php endforeach; ?>
    </div>
    <?php
}

// Validate options
function lg_forge_options_validate( $input ) {
    $options = get_option( 'loginlook_options' );
    $input = wp_parse_args( $input, $options );

    $output = array();

    $output['logo_url'] = esc_url_raw( $input['logo_url'] );
    $output['redirect_url'] = esc_url_raw( $input['redirect_url'] );
    $output['logo_width'] = absint( $input['logo_width'] );
    $output['logo_height'] = absint( $input['logo_height'] );
    $output['active_theme'] = sanitize_text_field( $input['active_theme'] );
    $background_color = sanitize_hex_color( $input['background_color'] );
    if ( ! $background_color && ! empty( $input['background_color_touched'] ) ) {
        $background_color = sanitize_hex_color( $input['background_color_picker'] ?? '' );
    }
    $output['background_color'] = $background_color;
    $output['background_image_url'] = esc_url_raw( $input['background_image_url'] );
    $overlay_color = sanitize_hex_color( $input['background_overlay_color'] );
    if ( ! $overlay_color && ! empty( $input['background_overlay_color_touched'] ) ) {
        $overlay_color = sanitize_hex_color( $input['background_overlay_color_picker'] ?? '' );
    }
    $output['background_overlay_color'] = $overlay_color;

    $overlay_opacity = '';
    if ( isset( $input['background_overlay_opacity_range'] ) && '' !== $input['background_overlay_opacity_range'] ) {
        $overlay_opacity = $input['background_overlay_opacity_range'];
    }
    if ( '' === $overlay_opacity ) {
        $overlay_opacity = $input['background_overlay_opacity'];
    }
    $output['background_overlay_opacity'] = (string) max( 0, min( 1, floatval( $overlay_opacity ) ) );
    $text_color = sanitize_hex_color( $input['text_color'] );
    if ( ! $text_color && ! empty( $input['text_color_touched'] ) ) {
        $text_color = sanitize_hex_color( $input['text_color_picker'] ?? '' );
    }
    $output['text_color'] = $text_color;
    return $output;
}

/**
 * Check whether WordPress redirected back with a settings-updated flag.
 *
 * @return bool
 */
function lg_forge_has_settings_updated_flag() {
    $settings_updated = filter_input( INPUT_GET, 'settings-updated', FILTER_SANITIZE_FULL_SPECIAL_CHARS );
    return 'true' === $settings_updated || '1' === $settings_updated;
}

// Options page
function lg_forge_options_page() {
    if ( ! current_user_can( lg_forge_required_capability() ) ) {
        wp_die( esc_html__( 'You do not have sufficient permissions to access this page.', 'skyquake-loginforge' ) );
    }

    ?>
    <div class="wrap loginlook-settings-wrap">
        <div class="loginlook-settings-branding">
            <img src="<?php echo esc_url( LG_FORGE_PLUGIN_URL . 'images/loginLook-logo.png' ); ?>" alt="<?php esc_attr_e( 'LoginLook Logo', 'skyquake-loginforge' ); ?>" />
            <h1><?php esc_html_e( 'Skyquake LoginForge | Settings', 'skyquake-loginforge' ); ?></h1>
        </div>
        <?php if ( lg_forge_has_settings_updated_flag() ) : ?>
            <div class="loginlook-notice-row">
                <div class="notice notice-success is-dismissible loginlook-settings-notice">
                    <p><?php esc_html_e( 'Settings saved successfully.', 'skyquake-loginforge' ); ?></p>
                </div>
            </div>
        <?php endif; ?>
        <form method="post" action="<?php echo esc_url( lg_forge_settings_form_action_url() ); ?>">
            <?php settings_fields( 'loginlook' ); ?>
            <div class="loginlook-settings-grid">
                <section class="loginlook-settings-card">
                    <div class="loginlook-card-header">
                        <h2><?php esc_html_e( 'Logo', 'skyquake-loginforge' ); ?></h2>
                        <p><?php esc_html_e( 'Upload and size your login logo.', 'skyquake-loginforge' ); ?></p>
                    </div>
                    <div class="loginlook-card-body">
                        <?php
                        lg_forge_logo_url_render();
                        lg_forge_logo_width_render();
                        lg_forge_logo_height_render();
                        ?>
                    </div>
                </section>

                <section class="loginlook-settings-card">
                    <div class="loginlook-card-header">
                        <h2><?php esc_html_e( 'Redirect', 'skyquake-loginforge' ); ?></h2>
                        <p><?php esc_html_e( 'Set where the logo links to.', 'skyquake-loginforge' ); ?></p>
                    </div>
                    <div class="loginlook-card-body">
                        <?php lg_forge_redirect_url_render(); ?>
                    </div>
                </section>
            </div>
            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}

// Themes page
function lg_forge_themes_page() {
    if ( ! current_user_can( lg_forge_required_capability() ) ) {
        wp_die( esc_html__( 'You do not have sufficient permissions to access this page.', 'skyquake-loginforge' ) );
    }

    ?>
    <div class="wrap loginlook-settings-wrap">
        <div class="loginlook-settings-branding">
            <img src="<?php echo esc_url( LG_FORGE_PLUGIN_URL . 'images/loginLook-logo.png' ); ?>" alt="<?php esc_attr_e( 'LoginLook Logo', 'skyquake-loginforge' ); ?>" />
            <div>
                <h1><?php esc_html_e( 'Skyquake LoginForge | Themes', 'skyquake-loginforge' ); ?></h1>
                <p><?php esc_html_e( 'Select a theme to style your login page.', 'skyquake-loginforge' ); ?></p>
            </div>
        </div>
        <?php if ( lg_forge_has_settings_updated_flag() ) : ?>
            <div class="loginlook-notice-row">
                <div class="notice notice-success is-dismissible loginlook-settings-notice">
                    <p><?php esc_html_e( 'Settings saved successfully.', 'skyquake-loginforge' ); ?></p>
                </div>
            </div>
        <?php endif; ?>
        <form method="post" action="<?php echo esc_url( lg_forge_settings_form_action_url() ); ?>">
            <?php
            settings_fields( 'loginlook_themes' );
            do_settings_sections( 'loginlook_themes' );
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

// Customize page
function lg_forge_customize_page() {
    if ( ! current_user_can( lg_forge_required_capability() ) ) {
        wp_die( esc_html__( 'You do not have sufficient permissions to access this page.', 'skyquake-loginforge' ) );
    }

    ?>
    <div class="wrap loginlook-settings-wrap">
        <div class="loginlook-settings-branding">
            <img src="<?php echo esc_url( LG_FORGE_PLUGIN_URL . 'images/loginLook-logo.png' ); ?>" alt="<?php esc_attr_e( 'LoginLook Logo', 'skyquake-loginforge' ); ?>" />
            <div>
                <h1><?php esc_html_e( 'Skyquake LoginForge | Customize', 'skyquake-loginforge' ); ?></h1>
                <p><?php esc_html_e( 'Fine-tune the login background styling.', 'skyquake-loginforge' ); ?></p>
            </div>
        </div>
        <?php if ( lg_forge_has_settings_updated_flag() ) : ?>
            <div class="loginlook-notice-row">
                <div class="notice notice-success is-dismissible loginlook-settings-notice">
                    <p><?php esc_html_e( 'Settings saved successfully.', 'skyquake-loginforge' ); ?></p>
                </div>
            </div>
        <?php endif; ?>
        <form method="post" action="<?php echo esc_url( lg_forge_settings_form_action_url() ); ?>">
            <?php settings_fields( 'loginlook_customize' ); ?>
            <div class="loginlook-settings-grid">
                <section class="loginlook-settings-card">
                    <div class="loginlook-card-header">
                        <h2><?php esc_html_e( 'Background', 'skyquake-loginforge' ); ?></h2>
                        <p><?php esc_html_e( 'Pick a color or upload a background image.', 'skyquake-loginforge' ); ?></p>
                    </div>
                    <div class="loginlook-card-body">
                        <?php
                        lg_forge_background_color_render();
                        lg_forge_background_image_render();
                        lg_forge_background_overlay_color_render();
                        lg_forge_background_overlay_opacity_render();
                        lg_forge_text_color_render();
                        ?>
                    </div>
                </section>

            </div>
            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}
?>
