<?php
/**
 * Styling page for AD Pro Forms
 *
 * @package ADProForms
 */

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

class ADPF_Styling {

    private static $instance = null;

    public static function get_instance() {
        if (null === self::$instance) {
            self::$instance = new self();
        }
        return self::$instance;
    }

    private function __construct() {
        add_action('admin_menu', array($this, 'add_styling_page'), 10);
        add_action('admin_post_adpf_save_styling', array($this, 'handle_save'));
        add_action('admin_enqueue_scripts', array($this, 'enqueue_assets'));
    }

    public function add_styling_page() {
        add_submenu_page(
            'ad-pro-forms-menu',
            __('Styling', 'ad-pro-forms'),
            __('Styling', 'ad-pro-forms'),
            'manage_options',
            'adpf-styling',
            array($this, 'render_page')
        );
    }

    public function handle_save() {
        if (!current_user_can('manage_options')) {
            wp_die(esc_html__('You do not have sufficient permissions to access this page.', 'ad-pro-forms'));
        }

        check_admin_referer('adpf_save_styling', 'adpf_styling_nonce');

        $settings = self::get_defaults();

        $color_keys = array('primary_color', 'text_color', 'label_color', 'border_color', 'success_color', 'error_color');
        foreach ($color_keys as $key) {
            if (isset($_POST[$key])) {
                $val = sanitize_hex_color(wp_unslash($_POST[$key]));
                if ($val) {
                    $settings[$key] = $val;
                }
            }
        }

        $numeric_bounds = array(
            'border_radius' => array('min' => 0,  'max' => 32),
            'field_gap'     => array('min' => 0,  'max' => 60),
            'field_padding' => array('min' => 4,  'max' => 32),
            'font_size'     => array('min' => 10, 'max' => 28),
        );
        foreach ($numeric_bounds as $key => $bounds) {
            if (isset($_POST[$key])) {
                $settings[$key] = max($bounds['min'], min($bounds['max'], absint($_POST[$key])));
            }
        }

        if (isset($_POST['label_position']) && in_array(sanitize_key(wp_unslash($_POST['label_position'])), array('above', 'inside'), true)) {
            $settings['label_position'] = sanitize_key(wp_unslash($_POST['label_position']));
        }

        update_option('adpf_styling_settings', $settings);

        wp_safe_redirect(add_query_arg(array('page' => 'adpf-styling', 'saved' => '1'), admin_url('admin.php')));
        exit;
    }

    public static function get_defaults() {
        return array(
            'primary_color'  => '#2271b1',
            'text_color'     => '#333333',
            'label_color'    => '#333333',
            'border_color'   => '#dddddd',
            'success_color'  => '#00a32a',
            'error_color'    => '#d63638',
            'border_radius'  => 4,
            'field_gap'      => 24,
            'field_padding'  => 12,
            'font_size'      => 16,
            'label_position' => 'above',
        );
    }

    public static function get_settings() {
        return wp_parse_args(get_option('adpf_styling_settings', array()), self::get_defaults());
    }

    public function enqueue_assets($hook) {
        if (strpos($hook, 'adpf-styling') === false) {
            return;
        }

        wp_enqueue_style('wp-color-picker');
        wp_enqueue_script('wp-color-picker');

        wp_add_inline_script('wp-color-picker', '
            jQuery(document).ready(function($) {
                $(".adpf-color-picker").wpColorPicker();

                $(".adpf-range-input").on("input", function() {
                    var unit = $(this).data("unit") || "";
                    $(this).next(".adpf-range-display").text($(this).val() + unit);
                });

                $("input[name=\'label_position\']").on("change", function() {
                    $(".adpf-toggle-option").removeClass("adpf-toggle-active");
                    $(this).closest(".adpf-toggle-option").addClass("adpf-toggle-active");
                });
            });
        ');
    }

    public function render_page() {
        if (!current_user_can('manage_options')) {
            return;
        }

        $settings    = self::get_settings();
        $upgrade_url = adpf_get_upgrade_url();
        // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- read-only display flag
        $saved = isset($_GET['saved']) && sanitize_key(wp_unslash($_GET['saved'])) === '1';
        ?>
        <div class="wrap adpf-settings-wrap adpf-ui">
            <h1 class="adpf-page-heading"><?php echo esc_html__('Styling', 'ad-pro-forms'); ?></h1>

            <?php if ($saved) : ?>
                <div class="notice notice-success is-dismissible"><p><?php echo esc_html__('Styling saved.', 'ad-pro-forms'); ?></p></div>
            <?php endif; ?>

            <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>">
                <?php wp_nonce_field('adpf_save_styling', 'adpf_styling_nonce'); ?>
                <input type="hidden" name="action" value="adpf_save_styling" />

                <!-- Colors -->
                <div class="adpf-card">
                    <div class="adpf-card-header">
                        <div class="adpf-card-header-icon"><span class="dashicons dashicons-art"></span></div>
                        <div class="adpf-card-header-text">
                            <h3><?php echo esc_html__('Colors', 'ad-pro-forms'); ?></h3>
                            <p><?php echo esc_html__('Set the main colors used across all your forms.', 'ad-pro-forms'); ?></p>
                        </div>
                    </div>
                    <div class="adpf-styling-grid">
                        <?php
                        $this->color_field('primary_color', __('Button & Accent Color', 'ad-pro-forms'), $settings['primary_color'], __('Used for the submit button and field focus rings.', 'ad-pro-forms'));
                        $this->color_field('text_color',    __('Text Color', 'ad-pro-forms'),            $settings['text_color'],    __('Color of text entered inside form fields.', 'ad-pro-forms'));
                        $this->color_field('label_color',   __('Label Color', 'ad-pro-forms'),           $settings['label_color'],   __('Color of field labels shown above inputs.', 'ad-pro-forms'));
                        $this->color_field('border_color',  __('Border Color', 'ad-pro-forms'),          $settings['border_color'],  __('Default border color of input fields.', 'ad-pro-forms'));
                        $this->color_field('success_color', __('Success Color', 'ad-pro-forms'),         $settings['success_color'], __('Background of the success message shown after submission.', 'ad-pro-forms'));
                        $this->color_field('error_color',   __('Error Color', 'ad-pro-forms'),           $settings['error_color'],   __('Color of error messages and invalid field borders.', 'ad-pro-forms'));
                        ?>
                    </div>
                    <div class="adpf-card-footer">
                        <button type="submit" class="adpf-btn adpf-btn-orange"><?php echo esc_html__('Save Changes', 'ad-pro-forms'); ?></button>
                    </div>
                </div>

                <!-- Layout -->
                <div class="adpf-card">
                    <div class="adpf-card-header">
                        <div class="adpf-card-header-icon"><span class="dashicons dashicons-layout"></span></div>
                        <div class="adpf-card-header-text">
                            <h3><?php echo esc_html__('Layout', 'ad-pro-forms'); ?></h3>
                            <p><?php echo esc_html__('Control the spacing and shape of your form fields.', 'ad-pro-forms'); ?></p>
                        </div>
                    </div>
                    <div class="adpf-styling-grid">
                        <?php
                        $this->range_field('border_radius', __('Border Radius', 'ad-pro-forms'), $settings['border_radius'], 0, 32, 'px', __('Roundness of input fields and the submit button.', 'ad-pro-forms'));
                        $this->range_field('field_padding', __('Field Padding', 'ad-pro-forms'), $settings['field_padding'], 4, 32, 'px', __('Inner padding inside each input field.', 'ad-pro-forms'));
                        $this->range_field('field_gap',     __('Field Spacing', 'ad-pro-forms'), $settings['field_gap'],     0, 60, 'px', __('Vertical gap between form fields.', 'ad-pro-forms'));
                        ?>
                    </div>
                    <div class="adpf-card-footer">
                        <button type="submit" class="adpf-btn adpf-btn-orange"><?php echo esc_html__('Save Changes', 'ad-pro-forms'); ?></button>
                    </div>
                </div>

                <!-- Typography -->
                <div class="adpf-card">
                    <div class="adpf-card-header">
                        <div class="adpf-card-header-icon"><span class="dashicons dashicons-editor-textcolor"></span></div>
                        <div class="adpf-card-header-text">
                            <h3><?php echo esc_html__('Typography', 'ad-pro-forms'); ?></h3>
                            <p><?php echo esc_html__('Basic text and label settings for your forms.', 'ad-pro-forms'); ?></p>
                        </div>
                    </div>
                    <div class="adpf-styling-grid">
                        <?php $this->range_field('font_size', __('Field Font Size', 'ad-pro-forms'), $settings['font_size'], 10, 28, 'px', __('Font size of text inside input fields.', 'ad-pro-forms')); ?>

                        <div class="adpf-styling-field">
                            <label class="adpf-styling-label"><?php echo esc_html__('Label Position', 'ad-pro-forms'); ?></label>
                            <p class="adpf-styling-hint"><?php echo esc_html__('Show labels above fields, or inside as placeholder text.', 'ad-pro-forms'); ?></p>
                            <div class="adpf-toggle-group">
                                <label class="adpf-toggle-option <?php echo $settings['label_position'] === 'above' ? 'adpf-toggle-active' : ''; ?>">
                                    <input type="radio" name="label_position" value="above" <?php checked($settings['label_position'], 'above'); ?> />
                                    <span class="dashicons dashicons-arrow-up-alt"></span>
                                    <?php echo esc_html__('Above', 'ad-pro-forms'); ?>
                                </label>
                                <label class="adpf-toggle-option <?php echo $settings['label_position'] === 'inside' ? 'adpf-toggle-active' : ''; ?>">
                                    <input type="radio" name="label_position" value="inside" <?php checked($settings['label_position'], 'inside'); ?> />
                                    <span class="dashicons dashicons-edit"></span>
                                    <?php echo esc_html__('Inside (Placeholder)', 'ad-pro-forms'); ?>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="adpf-card-footer">
                        <button type="submit" class="adpf-btn adpf-btn-orange"><?php echo esc_html__('Save Changes', 'ad-pro-forms'); ?></button>
                    </div>
                </div>

            </form>

            <!-- Pro locked section -->
            <div class="adpf-about-pro-card">
                <p class="adpf-pro-eyebrow"><span class="dashicons dashicons-star-filled"></span><?php echo esc_html__('Pro Styling Features', 'ad-pro-forms'); ?></p>
                <h3 class="adpf-about-pro-title"><?php echo esc_html__('Unlock the full styling panel', 'ad-pro-forms'); ?></h3>
                <p class="adpf-about-pro-subtitle"><?php echo esc_html__('The Pro version gives you complete control over every visual detail of your forms.', 'ad-pro-forms'); ?></p>
                <ul class="adpf-pro-feature-grid">
                    <li class="adpf-pro-feature-item">
                        <span class="adpf-pfi-icon"><span class="dashicons dashicons-admin-appearance"></span></span>
                        <div><strong><?php echo esc_html__('Custom Font Family', 'ad-pro-forms'); ?></strong><span><?php echo esc_html__('Use any web or system font across all your forms.', 'ad-pro-forms'); ?></span></div>
                    </li>
                    <li class="adpf-pro-feature-item">
                        <span class="adpf-pfi-icon"><span class="dashicons dashicons-image-rotate"></span></span>
                        <div><strong><?php echo esc_html__('Field & Container Backgrounds', 'ad-pro-forms'); ?></strong><span><?php echo esc_html__('Custom background colors for fields and the form container.', 'ad-pro-forms'); ?></span></div>
                    </li>
                    <li class="adpf-pro-feature-item">
                        <span class="adpf-pfi-icon"><span class="dashicons dashicons-editor-bold"></span></span>
                        <div><strong><?php echo esc_html__('Advanced Typography', 'ad-pro-forms'); ?></strong><span><?php echo esc_html__('Label size, weight, spacing, and explanation text size.', 'ad-pro-forms'); ?></span></div>
                    </li>
                    <li class="adpf-pro-feature-item">
                        <span class="adpf-pfi-icon"><span class="dashicons dashicons-editor-justify"></span></span>
                        <div><strong><?php echo esc_html__('Container Styling', 'ad-pro-forms'); ?></strong><span><?php echo esc_html__('Add borders, padding, and backdrop blur to the form container.', 'ad-pro-forms'); ?></span></div>
                    </li>
                    <li class="adpf-pro-feature-item">
                        <span class="adpf-pfi-icon"><span class="dashicons dashicons-button"></span></span>
                        <div><strong><?php echo esc_html__('Button Customization', 'ad-pro-forms'); ?></strong><span><?php echo esc_html__('Fine-tune button padding, font weight, and size independently.', 'ad-pro-forms'); ?></span></div>
                    </li>
                    <li class="adpf-pro-feature-item">
                        <span class="adpf-pfi-icon"><span class="dashicons dashicons-visibility"></span></span>
                        <div><strong><?php echo esc_html__('Backdrop Blur', 'ad-pro-forms'); ?></strong><span><?php echo esc_html__('Apply a glass-morphism blur effect to the form background.', 'ad-pro-forms'); ?></span></div>
                    </li>
                </ul>
                <div class="adpf-pro-cta-row">
                    <a href="<?php echo esc_url($upgrade_url); ?>" class="button adpf-btn-pro-upgrade" target="_blank" rel="noopener noreferrer">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span><?php echo esc_html__('Get Pro Now', 'ad-pro-forms'); ?></span>
                    </a>
                    <span class="adpf-pro-guarantee"><?php echo esc_html__('30-day money-back guarantee', 'ad-pro-forms'); ?></span>
                </div>
            </div>

        </div>
        <?php
        $this->render_footer();
    }

    private function color_field($name, $label, $value, $hint = '') {
        ?>
        <div class="adpf-styling-field">
            <label class="adpf-styling-label" for="<?php echo esc_attr($name); ?>"><?php echo esc_html($label); ?></label>
            <input
                type="text"
                id="<?php echo esc_attr($name); ?>"
                name="<?php echo esc_attr($name); ?>"
                value="<?php echo esc_attr($value); ?>"
                class="adpf-color-picker"
                data-default-color="<?php echo esc_attr($value); ?>"
            />
            <?php if ($hint) : ?>
                <p class="adpf-styling-hint"><?php echo esc_html($hint); ?></p>
            <?php endif; ?>
        </div>
        <?php
    }

    private function range_field($name, $label, $value, $min, $max, $unit = 'px', $hint = '') {
        ?>
        <div class="adpf-styling-field">
            <label class="adpf-styling-label" for="<?php echo esc_attr($name); ?>"><?php echo esc_html($label); ?></label>
            <?php if ($hint) : ?>
                <p class="adpf-styling-hint"><?php echo esc_html($hint); ?></p>
            <?php endif; ?>
            <div class="adpf-range-wrapper">
                <input
                    type="range"
                    id="<?php echo esc_attr($name); ?>"
                    name="<?php echo esc_attr($name); ?>"
                    value="<?php echo esc_attr($value); ?>"
                    min="<?php echo esc_attr($min); ?>"
                    max="<?php echo esc_attr($max); ?>"
                    class="adpf-range-input"
                    data-unit="<?php echo esc_attr($unit); ?>"
                />
                <span class="adpf-range-display"><?php echo esc_html($value . $unit); ?></span>
            </div>
        </div>
        <?php
    }

    private function render_footer() {
        ?>
        <div class="adpf-footer-branding" style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #dcdcde; text-align: center; color: #646970; font-size: 13px;">
            <?php echo esc_html__('AD Pro Forms plugin created by', 'ad-pro-forms'); ?>
            <a href="http://altaydagistan.com/" target="_blank" rel="noopener noreferrer" style="color: #ff7120; text-decoration: none;">Altay Dagistan</a> -
            <a href="http://altaydagistan.com/" target="_blank" rel="noopener noreferrer" style="color: #ff7120; text-decoration: none;">altaydagistan.com</a>
        </div>
        <?php
    }
}