<?php
if ( ! defined( 'ABSPATH' ) ) { exit; }

function litemamo_render_settings_page() {
    // ✅ 1. Save settings logic
    if ( isset( $_POST['litemamo_save'] ) ) {
        check_admin_referer( 'litemamo_settings_save' );

        $options = [
            'enabled'    => isset( $_POST['litemamo_enabled'] ) ? 1 : 0,
            'heading'    => sanitize_text_field( wp_unslash( $_POST['litemamo_heading'] ?? '' ) ),
            'subheading' => sanitize_text_field( wp_unslash( $_POST['litemamo_subheading'] ?? '' ) ),
            'message'    => wp_kses_post( wp_unslash( $_POST['litemamo_message'] ?? '' ) ),
            'bg_image'   => esc_url_raw( wp_unslash( $_POST['litemamo_bg_image'] ?? '' ) ),
            'main_image' => esc_url_raw( wp_unslash( $_POST['litemamo_main_image'] ?? '' ) ),
            'fav_icon'   => esc_url_raw( wp_unslash( $_POST['litemamo_fav_icon'] ?? '' ) ),
            'facebook'   => esc_url_raw( wp_unslash( $_POST['litemamo_facebook'] ?? '' ) ),
            'instagram'  => esc_url_raw( wp_unslash( $_POST['litemamo_instagram'] ?? '' ) ),
            'whatsapp'   => sanitize_text_field( wp_unslash( $_POST['litemamo_whatsapp'] ?? '' ) ),
            'twitter'    => esc_url_raw( wp_unslash( $_POST['litemamo_twitter'] ?? '' ) ),
        ];
        
        update_option( 'litemamo_settings', $options );
        echo '<div class="notice notice-success is-dismissible"><p><strong>' . esc_html__( 'Settings saved successfully!', 'lite-maintenance-mode' ) . '</strong></p></div>';
    }

    // ✅ 2. Get saved options
    $options = get_option( 'litemamo_settings', [] );

    // ✅ Default Values Configuration (Translatable)
    $default_subheading = __( 'WE ARE COMING SOON', 'lite-maintenance-mode' );
    $default_heading    = __( 'The website is under maintenance!', 'lite-maintenance-mode' );
    $default_message    = __( 'A simple and customizable maintenance mode plugin with a stylish toggle switch to enable or disable maintenance mode.', 'lite-maintenance-mode' );
    
    // Social defaults (Usually URLs don't need translation but kept as variables)
    $default_fb    = 'https://www.facebook.com/';
    $default_insta = 'https://www.instagram.com/';
    $default_wa    = '+919131606673';
    $default_tw    = 'https://x.com/';
    ?>

    <div class="litemamo-admin-container">
        <div class="litemamo-sidebar">
            <div class="nav-item active" data-tab="dashboard">
                <span class="dashicons dashicons-dashboard"></span> <?php esc_html_e( 'Dashboard', 'lite-maintenance-mode' ); ?>
            </div>
            <div class="nav-item" data-tab="logo-bg">
                <span class="dashicons dashicons-format-image"></span> <?php esc_html_e( 'Logo & Background', 'lite-maintenance-mode' ); ?>
            </div>
            <div class="nav-item" data-tab="settings">
                <span class="dashicons dashicons-admin-settings"></span> <?php esc_html_e( 'Settings', 'lite-maintenance-mode' ); ?>
            </div>
            <div class="nav-item" data-tab="social">
                <span class="dashicons dashicons-share"></span> <?php esc_html_e( 'Social Profile', 'lite-maintenance-mode' ); ?>
            </div>
        </div>

        <div class="litemamo-content">
            <form method="post" action="<?php echo esc_url( admin_url( 'admin.php?page=litemamo_settings' ) ); ?>">
                <?php wp_nonce_field( 'litemamo_settings_save' ); ?>

                <div id="dashboard" class="tab-content active">
                    <div class="litemamo-card">
                        <div class="card-row">
                            <h3><?php esc_html_e( 'Enable Maintenance Mode', 'lite-maintenance-mode' ); ?></h3>
                            <label class="litemamo-toggle">
                                <input type="checkbox" name="litemamo_enabled" value="1" <?php checked( 1, $options['enabled'] ?? 0 ); ?>>
                                <span class="litemamo-slider"></span>
                            </label>
                        </div>
                    </div>
                </div>

                <div id="logo-bg" class="tab-content">
                    <div class="litemamo-card">
                        <div class="figma-input-section">
                            <h3><?php esc_html_e( 'Logo Image', 'lite-maintenance-mode' ); ?></h3>
                            <div class="figma-upload-row">
                                <input type="text" name="litemamo_main_image" id="litemamo_main_image" value="<?php echo esc_url( $options['main_image'] ?? '' ); ?>">
                                <button type="button" class="litemamo-figma-btn-dark litemamo-upload" data-target="#litemamo_main_image"><?php esc_html_e( 'UPLOAD', 'lite-maintenance-mode' ); ?></button>
                            </div>
                        </div>
                        <div class="figma-input-section">
                            <h3><?php esc_html_e( 'Fav Icon', 'lite-maintenance-mode' ); ?></h3>
                            <div class="figma-upload-row">
                                <input type="text" name="litemamo_fav_icon" id="litemamo_fav_icon" value="<?php echo esc_url( $options['fav_icon'] ?? '' ); ?>">
                                <button type="button" class="litemamo-figma-btn-dark litemamo-upload" data-target="#litemamo_fav_icon"><?php esc_html_e( 'UPLOAD', 'lite-maintenance-mode' ); ?></button>
                            </div>
                        </div>
                        <div class="figma-input-section">
                            <h3><?php esc_html_e( 'Background Image', 'lite-maintenance-mode' ); ?></h3>
                            <div class="figma-upload-row">
                                <input type="text" name="litemamo_bg_image" id="litemamo_bg_image" value="<?php echo esc_url( $options['bg_image'] ?? '' ); ?>">
                                <button type="button" class="litemamo-figma-btn-dark litemamo-upload" data-target="#litemamo_bg_image"><?php esc_html_e( 'UPLOAD', 'lite-maintenance-mode' ); ?></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="settings" class="tab-content">
                    <div class="litemamo-card">
                        <div class="figma-input-section">
                            <h3><?php esc_html_e( 'Subheading', 'lite-maintenance-mode' ); ?></h3>
                            <input type="text" name="litemamo_subheading" value="<?php echo esc_attr( $options['subheading'] ?? $default_subheading ); ?>" class="figma-full-input">
                        </div>
                        <div class="figma-input-section">
                            <h3><?php esc_html_e( 'Heading', 'lite-maintenance-mode' ); ?></h3>
                            <input type="text" name="litemamo_heading" value="<?php echo esc_attr( $options['heading'] ?? $default_heading ); ?>" class="figma-full-input">
                        </div>
                        <div class="figma-input-section">
                            <h3><?php esc_html_e( 'Message', 'lite-maintenance-mode' ); ?></h3>
                            <?php wp_editor( $options['message'] ?? $default_message, 'litemamo_message', ['textarea_name' => 'litemamo_message', 'textarea_rows' => 8] ); ?>
                        </div>
                    </div>
                </div>

                <div id="social" class="tab-content">
                    <div class="litemamo-card">
                        <div class="figma-social-row">
                            <label><?php esc_html_e( 'Facebook', 'lite-maintenance-mode' ); ?></label>
                            <input type="text" name="litemamo_facebook" value="<?php echo esc_url( $options['facebook'] ?? $default_fb ); ?>" class="figma-full-input">
                        </div>
                        <div class="figma-social-row">
                            <label><?php esc_html_e( 'Instagram', 'lite-maintenance-mode' ); ?></label>
                            <input type="text" name="litemamo_instagram" value="<?php echo esc_url( $options['instagram'] ?? $default_insta ); ?>" class="figma-full-input">
                        </div>
                        <div class="figma-social-row">
                            <label><?php esc_html_e( 'Whatsapp', 'lite-maintenance-mode' ); ?></label>
                            <input type="text" name="litemamo_whatsapp" value="<?php echo esc_attr( $options['whatsapp'] ?? $default_wa ); ?>" class="figma-full-input">
                        </div>
                        <div class="figma-social-row">
                            <label><?php esc_html_e( 'Twitter', 'lite-maintenance-mode' ); ?></label>
                            <input type="text" name="litemamo_twitter" value="<?php echo esc_url( $options['twitter'] ?? $default_tw ); ?>" class="figma-full-input">
                        </div>
                    </div>
                </div>

                <div class="litemamo-footer">
                    <input type="submit" name="litemamo_save" class="litemamo-save-btn" value="<?php esc_attr_e( 'SAVE CHANGES', 'lite-maintenance-mode' ); ?>">
                </div>
            </form>
        </div>
    </div>

    <script>
    jQuery(document).ready(function($) {
        var activeTab = localStorage.getItem('litemamo_active_tab');
        if (activeTab) {
            $('.nav-item').removeClass('active');
            $('.tab-content').removeClass('active');
            $('.nav-item[data-tab="' + activeTab + '"]').addClass('active');
            $('#' + activeTab).addClass('active');
        }

        $('.nav-item').on('click', function() {
            var targetTab = $(this).data('tab');
            $('.nav-item').removeClass('active');
            $(this).addClass('active');
            $('.tab-content').removeClass('active');
            $('#' + targetTab).addClass('active');
            localStorage.setItem('litemamo_active_tab', targetTab);
        });
    });
    </script>
    <?php
}