<?php
$settings = array(
    'style' => get_option('scroll_to_top_style', 'circle'),
    'bg_color' => get_option('scroll_to_top_bg_color', '#333333'),
    'text_color' => get_option('scroll_to_top_text_color', '#ffffff'),
    'size' => get_option('scroll_to_top_size', 'medium'),
    'position' => get_option('scroll_to_top_position', 'bottom-right'),
    'show_mobile' => get_option('scroll_to_top_show_mobile', '1'),
);
?>

<div class="wrap">
    <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
    
    <form method="post" action="options.php">
        <?php settings_fields('scroll_to_top_options'); ?>
        
        <table class="form-table">
            <tr>
                <th scope="row">Button Style</th>
                <td>
                    <fieldset>
                        <label>
                            <input type="radio" name="scroll_to_top_style" value="circle" <?php checked($settings['style'], 'circle'); ?>>
                            Circle
                        </label><br>
                        <label>
                            <input type="radio" name="scroll_to_top_style" value="arrow" <?php checked($settings['style'], 'arrow'); ?>>
                            Arrow
                        </label><br>
                        <label>
                            <input type="radio" name="scroll_to_top_style" value="text" <?php checked($settings['style'], 'text'); ?>>
                            Text ("Top")
                        </label>
                    </fieldset>
                </td>
            </tr>
            
            <tr>
                <th scope="row">Background Color</th>
                <td>
                    <input type="color" name="scroll_to_top_bg_color" value="<?php echo esc_attr($settings['bg_color']); ?>" class="color-picker">
                </td>
            </tr>
            
            <tr>
                <th scope="row">Icon/Text Color</th>
                <td>
                    <input type="color" name="scroll_to_top_text_color" value="<?php echo esc_attr($settings['text_color']); ?>" class="color-picker">
                </td>
            </tr>
            
            <tr>
                <th scope="row">Button Size</th>
                <td>
                    <select name="scroll_to_top_size">
                        <option value="small" <?php selected($settings['size'], 'small'); ?>>Small</option>
                        <option value="medium" <?php selected($settings['size'], 'medium'); ?>>Medium</option>
                        <option value="large" <?php selected($settings['size'], 'large'); ?>>Large</option>
                    </select>
                </td>
            </tr>
            
            <tr>
                <th scope="row">Button Position</th>
                <td>
                    <select name="scroll_to_top_position">
                        <option value="bottom-right" <?php selected($settings['position'], 'bottom-right'); ?>>Bottom-Right</option>
                        <option value="bottom-left" <?php selected($settings['position'], 'bottom-left'); ?>>Bottom-Left</option>
                    </select>
                </td>
            </tr>
            
            <tr>
                <th scope="row">Show on Mobile</th>
                <td>
                    <label>
                        <input type="checkbox" name="scroll_to_top_show_mobile" value="1" <?php checked($settings['show_mobile'], '1'); ?>>
                        Show on mobile devices
                    </label>
                </td>
            </tr>
        </table>
        
        <?php submit_button('Save Settings'); ?>
    </form>
    
    <h2>Preview</h2>
    <div class="stt-preview-container">
        <div class="stt-preview-box">
            <p>Scroll down to see the button appear:</p>
            <div class="stt-preview-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div id="stt-preview-button" class="scroll-to-top-button" aria-label="Scroll to top">
                <span class="stt-button-content"></span>
            </div>
        </div>
    </div>
</div>
