<?php
/**
 * Display Rules Tab
 *
 * @package Spin_Wheel
 */

// Exit if accessed directly
if (!defined('ABSPATH')) {
    exit;
}

// Variables in this template are scoped to the including render method (not truly
// global); the plugin's established "swp" prefix is part of its data schema and hook API.
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals
?>

<!-- Display Rules Section -->
<div class="swp-settings-section">
    <h2 class="swp-section-title">
        <span class="dashicons dashicons-visibility"></span>
        <?php esc_html_e('Display Rules', 'spin-wheel'); ?>
    </h2>

    <div class="swp-display-rules-grid">
        <!-- Left Column: Basic Display Rules -->
        <div class="swp-card">
            <div class="swp-card-body">

                <!-- Device Targeting -->
                <div class="swp-form-row">
                    <?php
                    swp_admin_field_label(
                        '',
                        __('Which devices will this wheel appear?', 'spin-wheel'),
                        __('Select which device types (desktop, tablet, mobile) are allowed to see this wheel. Keep at least one enabled.', 'spin-wheel')
                    );
                    ?>
                    <div class="swp-input-wrapper">
                        <div class="swp-device-toggles">
                            <label class="swp-toggle-label">
                                <input type="checkbox" name="swp_settings[device_desktop]" value="1"
                                    class="swp-toggle-input" <?php checked(isset($settings['device_desktop']) ? $settings['device_desktop'] : 1, 1); ?>>
                                <span class="swp-toggle-switch"></span>
                                <span class="swp-toggle-text"><?php esc_html_e('Desktop', 'spin-wheel'); ?></span>
                            </label>

                            <label class="swp-toggle-label">
                                <input type="checkbox" name="swp_settings[device_tablet]" value="1"
                                    class="swp-toggle-input" <?php checked(isset($settings['device_tablet']) ? $settings['device_tablet'] : 1, 1); ?>>
                                <span class="swp-toggle-switch"></span>
                                <span class="swp-toggle-text"><?php esc_html_e('Tablet', 'spin-wheel'); ?></span>
                            </label>

                            <label class="swp-toggle-label">
                                <input type="checkbox" name="swp_settings[device_mobile]" value="1"
                                    class="swp-toggle-input" <?php checked(isset($settings['device_mobile']) ? $settings['device_mobile'] : 1, 1); ?>>
                                <span class="swp-toggle-switch"></span>
                                <span class="swp-toggle-text"><?php esc_html_e('Mobile', 'spin-wheel'); ?></span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Display Mode -->
                <div class="swp-form-row">
                    <?php
                    swp_admin_field_label(
                        'swp_display_mode',
                        __('Display Mode', 'spin-wheel'),
                        __('Choose how the wheel should be displayed on the page: inline in the content or as a popup overlay.', 'spin-wheel'),
                        true
                    );
                    ?>
                    <div class="swp-input-wrapper">
                        <select name="swp_settings[display_mode]" id="swp_display_mode" class="swp-select">
                            <?php
                            /**
                             * Pro injects the Inline display-mode option here when the
                             * Spin Wheel Pro add-on is active.
                             *
                             * @param string $current Currently selected display mode.
                             */
                            do_action('swp_display_mode_options', isset($settings['display_mode']) ? $settings['display_mode'] : 'popup');
                            ?>
                            <option value="popup" <?php selected(isset($settings['display_mode']) ? $settings['display_mode'] : 'popup', 'popup'); ?>>
                                <?php esc_html_e('Popup/Modal (Overlay)', 'spin-wheel'); ?>
                            </option>
                        </select>
                    </div>
                </div>

                <!-- Display Trigger -->
                <div class="swp-form-row">
                    <?php
                    swp_admin_field_label(
                        'swp_display_trigger',
                        __('When to show the wheel?', 'spin-wheel'),
                        __('Controls the trigger that opens or reveals the wheel (load, delay, scroll, exit intent).', 'spin-wheel')
                    );
                    ?>
                    <div class="swp-input-wrapper">
                        <select name="swp_settings[display_trigger]" id="swp_display_trigger" class="swp-select">
                            <option value="page_load" <?php selected(isset($settings['display_trigger']) ? $settings['display_trigger'] : 'page_load', 'page_load'); ?>>
                                <?php esc_html_e('On Page Load', 'spin-wheel'); ?>
                            </option>
                            <option value="after_time" <?php selected(isset($settings['display_trigger']) ? $settings['display_trigger'] : '', 'after_time'); ?>>
                                <?php esc_html_e('After Time Delay', 'spin-wheel'); ?>
                            </option>
                            <option value="scroll" <?php selected(isset($settings['display_trigger']) ? $settings['display_trigger'] : '', 'scroll'); ?>>
                                <?php esc_html_e('After Scroll Percentage', 'spin-wheel'); ?>
                            </option>
                            <option value="exit_intent" <?php selected(isset($settings['display_trigger']) ? $settings['display_trigger'] : '', 'exit_intent'); ?>>
                                <?php esc_html_e('Exit Intent', 'spin-wheel'); ?>
                            </option>
                        </select>
                    </div>
                </div>

                <!-- Time Delay (After Time Delay) -->
                <div class="swp-form-row swp-trigger-field swp-trigger-after-time"
                    style="<?php echo (isset($settings['display_trigger']) && $settings['display_trigger'] === 'after_time') ? '' : 'display: none;'; ?>">
                    <?php
                    swp_admin_field_label(
                        'swp_time_delay',
                        __('Show wheel after visitor spends', 'spin-wheel'),
                        __('How long the visitor must stay on the page before the wheel appears (used when trigger is “After Time Delay”).', 'spin-wheel')
                    );
                    ?>
                    <div class="swp-input-wrapper">
                        <div class="swp-input-group">
                            <input type="number" name="swp_settings[time_delay]" id="swp_time_delay"
                                value="<?php echo esc_attr(isset($settings['time_delay']) ? $settings['time_delay'] : 0); ?>"
                                class="swp-input" min="0" step="1" style="max-width: 150px;">
                            <span class="swp-input-addon"><?php esc_html_e('Seconds', 'spin-wheel'); ?></span>
                        </div>
                    </div>
                </div>

                <!-- Scroll Percentage -->
                <div class="swp-form-row swp-trigger-field swp-trigger-scroll"
                    style="<?php echo (isset($settings['display_trigger']) && $settings['display_trigger'] === 'scroll') ? '' : 'display: none;'; ?>">
                    <?php
                    swp_admin_field_label(
                        'swp_scroll_percentage',
                        __('Show wheel after scrolling', 'spin-wheel'),
                        __('Show the wheel when the visitor scrolls to this percentage of the page height (50 = halfway down).', 'spin-wheel')
                    );
                    ?>
                    <div class="swp-input-wrapper">
                        <div class="swp-input-group">
                            <input type="number" name="swp_settings[time_delay]" id="swp_scroll_percentage"
                                value="<?php echo esc_attr(isset($settings['time_delay']) ? $settings['time_delay'] : 50); ?>"
                                class="swp-input" min="0" max="100" step="1" style="max-width: 150px;">
                            <span class="swp-input-addon">%</span>
                        </div>
                    </div>
                </div>

                <!-- Re-appear Delay -->
                <div class="swp-form-row">
                    <?php
                    swp_admin_field_label(
                        'swp_reappear_delay',
                        __('When the wheel should re-appear to the same visitor?', 'spin-wheel'),
                        __('After a visitor has seen the wheel, wait this many days before showing it again. Use 0 to allow it on every visit.', 'spin-wheel')
                    );
                    ?>
                    <div class="swp-input-wrapper">
                        <div class="swp-input-group">
                            <input type="number" name="swp_settings[reappear_delay]" id="swp_reappear_delay"
                                value="<?php echo esc_attr(isset($settings['reappear_delay']) ? $settings['reappear_delay'] : 0); ?>"
                                class="swp-input" min="0" step="1" style="max-width: 150px;">
                            <span class="swp-input-addon"><?php esc_html_e('Days', 'spin-wheel'); ?></span>
                        </div>
                    </div>
                </div>

                <!-- Date Range -->
                <div class="swp-form-row">
                    <?php
                    swp_admin_field_label(
                        '',
                        __('When the wheel will be show / hide?', 'spin-wheel'),
                        __('Optional schedule: the wheel only displays between the start and end dates (site timezone).', 'spin-wheel')
                    );
                    ?>
                    <div class="swp-input-wrapper">
                        <div class="swp-date-range">
                            <div class="swp-date-field">
                                <label class="swp-sub-label"><?php esc_html_e('Start Date', 'spin-wheel'); ?></label>
                                <input type="date" name="swp_settings[start_date]"
                                    value="<?php echo esc_attr(isset($settings['start_date']) ? $settings['start_date'] : ''); ?>"
                                    class="swp-input">
                            </div>
                            <div class="swp-date-field">
                                <label class="swp-sub-label"><?php esc_html_e('End Date', 'spin-wheel'); ?></label>
                                <input type="date" name="swp_settings[end_date]"
                                    value="<?php echo esc_attr(isset($settings['end_date']) ? $settings['end_date'] : ''); ?>"
                                    class="swp-input">
                            </div>
                        </div>
                        <p class="swp-hint swp-time-display">
                            <span class="dashicons dashicons-clock"></span>
                            <?php
                            /* translators: %s: current date and time */
                            printf(esc_html__('Your Time: %s', 'spin-wheel'), esc_html(date_i18n(get_option('date_format') . ' ' . get_option('time_format')))); ?>
                        </p>
                    </div>
                </div>

            </div>
        </div>

        <!-- Right Column: Advanced Conditions -->
        <div class="swp-card">
            <div class="swp-card-body">
                <div class="swp-section-header" style="margin-bottom: 15px;">
                    <h3 class="swp-card-subtitle" style="margin: 0;">
                        <span class="dashicons dashicons-admin-generic" style="color: #f0b429;"></span>
                        <?php esc_html_e('Advanced Conditions', 'spin-wheel'); ?>
                    </h3>
                    <button type="button" id="swp-add-condition" class="button button-secondary">
                        <span class="dashicons dashicons-plus-alt"></span>
                        <?php esc_html_e('Add Condition', 'spin-wheel'); ?>
                    </button>
                </div>
                <p class="swp-hint">
                    <?php esc_html_e('(Optional) Set advanced conditions for displaying the wheel. All conditions must be met for the wheel to display.', 'spin-wheel'); ?>
                </p>

                <div id="swp-conditions-list" class="swp-conditions-list">
                    <?php
                    $advanced_conditions = isset($settings['advanced_conditions']) && is_array($settings['advanced_conditions']) ? $settings['advanced_conditions'] : [];

                    if (!empty($advanced_conditions)):
                        foreach ($advanced_conditions as $index => $condition):
                            ?>
                            <div class="swp-condition-row" data-index="<?php echo esc_attr( $index ); ?>">
                                <div class="swp-condition-fields">
                                    <select name="swp_settings[advanced_conditions][<?php echo esc_attr( $index ); ?>][type]"
                                        class="swp-select swp-condition-type">
                                        <option value=""><?php esc_html_e('Select Type', 'spin-wheel'); ?></option>
                                        <option value="user_status" <?php selected($condition['type'] ?? '', 'user_status'); ?>>
                                            <?php esc_html_e('User Status', 'spin-wheel'); ?>
                                        </option>
                                        <option value="user_role" <?php selected($condition['type'] ?? '', 'user_role'); ?>>
                                            <?php esc_html_e('User Role', 'spin-wheel'); ?>
                                        </option>
                                        <option value="page" <?php selected($condition['type'] ?? '', 'page'); ?>>
                                            <?php esc_html_e('Page', 'spin-wheel'); ?>
                                        </option>
                                    </select>

                                    <select name="swp_settings[advanced_conditions][<?php echo esc_attr( $index ); ?>][operator]"
                                        class="swp-select swp-condition-operator">
                                        <option value="is" <?php selected($condition['operator'] ?? '', 'is'); ?>>
                                            <?php esc_html_e('Is', 'spin-wheel'); ?>
                                        </option>
                                        <option value="is_not" <?php selected($condition['operator'] ?? '', 'is_not'); ?>>
                                            <?php esc_html_e('Is Not', 'spin-wheel'); ?>
                                        </option>
                                    </select>

                                    <select name="swp_settings[advanced_conditions][<?php echo esc_attr( $index ); ?>][value]"
                                        class="swp-select swp-condition-value">
                                        <?php
                                        $type = $condition['type'] ?? '';
                                        if ($type === 'user_status'):
                                            ?>
                                            <option value="logged_in" <?php selected($condition['value'] ?? '', 'logged_in'); ?>>
                                                <?php esc_html_e('Logged In', 'spin-wheel'); ?>
                                            </option>
                                            <option value="logged_out" <?php selected($condition['value'] ?? '', 'logged_out'); ?>>
                                                <?php esc_html_e('Logged Out', 'spin-wheel'); ?>
                                            </option>
                                            <?php
                                        elseif ($type === 'user_role'):
                                            $roles = wp_roles()->get_names();
                                            foreach ($roles as $role_key => $role_name):
                                                ?>
                                                <option value="<?php echo esc_attr($role_key); ?>" <?php selected($condition['value'] ?? '', $role_key); ?>><?php echo esc_html($role_name); ?></option>
                                                <?php
                                            endforeach;
                                        elseif ($type === 'page'):
                                            $pages = get_pages(['number' => 100]);
                                            foreach ($pages as $page):
                                                ?>
                                                <option value="<?php echo esc_attr($page->ID); ?>" <?php selected($condition['value'] ?? '', $page->ID); ?>><?php echo esc_html($page->post_title); ?></option>
                                                <?php
                                            endforeach;
                                        else:
                                            ?>
                                            <option value=""><?php esc_html_e('Select value', 'spin-wheel'); ?></option>
                                        <?php endif; ?>
                                    </select>
                                </div>

                                <button type="button" class="swp-remove-condition"
                                    title="<?php esc_html_e('Remove Condition', 'spin-wheel'); ?>">
                                    <span class="dashicons dashicons-trash"></span>
                                </button>
                            </div>
                            <?php
                        endforeach;
                    endif;
                    ?>
                </div>

            </div>
        </div>
    </div>
</div>