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

function webability_acwg_render_design_page() {
    $o = webability_acwg_get_options();
    $positions = [
        'top-left'     => 'Top Left',
        'top-right'    => 'Top Right',
        'center-left'  => 'Center Left',
        'center-right' => 'Center Right',
        'bottom-left'  => 'Bottom Left',
        'bottom-right' => 'Bottom Right',
    ];
    // Normalize legacy position values
    if (!isset($positions[$o['position']])) {
        $o['position'] = 'bottom-right';
    }
    // Normalize icon type
    if (!isset($o['icon_type']) || !isset($icon_types[$o['icon_type']])) {
        $o['icon_type'] = 'm-full';
    }
    $languages = [
        'en' => 'English',
        'es' => 'Spanish',
        'fr' => 'French',
        'de' => 'German',
        'pt' => 'Portuguese',
        'it' => 'Italian',
        'nl' => 'Dutch',
        'pl' => 'Polish',
        'ru' => 'Russian',
        'ja' => 'Japanese',
        'ko' => 'Korean',
        'zh' => 'Chinese',
        'ar' => 'Arabic',
        'he' => 'Hebrew',
        'hi' => 'Hindi',
        'auto' => 'Auto-detect',
    ];
    $sizes = [
        'small'  => 'Small',
        'medium' => 'Medium',
        'large'  => 'Large',
    ];
    $colors = ['#2563eb','#7c3aed','#059669','#dc2626','#d97706','#0891b2','#4f46e5','#1e1e1e'];
    $icon_types = [
        'm-full'    => 'Full Widget',
        'm-compact' => 'Compact Widget',
        'hidden'    => 'Custom Trigger',
    ];
    ?>
    <div id="webability-design" class="wa-design-wrap">
        <form method="post" action="options.php" id="wa-design-form">
            <?php settings_fields('webability_settings'); ?>
            <input type="hidden" name="<?php echo esc_attr(WEBABILITY_ACWG_OPT_KEY); ?>[enabled]" value="<?php echo esc_attr($o['enabled']); ?>">
            <input type="hidden" name="<?php echo esc_attr(WEBABILITY_ACWG_OPT_KEY); ?>[exclude_logged]" value="<?php echo esc_attr($o['exclude_logged']); ?>">

            <div class="wa-design-grid">
                <!-- Left: Settings -->
                <div class="wa-design-settings">
                    <!-- Position -->
                    <div class="wa-design-card">
                        <h3 class="wa-design-card-title">Position</h3>
                        <div class="wa-position-grid">
                            <?php foreach ($positions as $val => $label): ?>
                            <label class="wa-position-cell <?php echo $o['position'] === $val ? 'wa-position-active' : ''; ?>">
                                <input type="radio" name="<?php echo esc_attr(WEBABILITY_ACWG_OPT_KEY); ?>[position]" value="<?php echo esc_attr($val); ?>" <?php checked($o['position'], $val); ?>>
                                <span class="wa-position-dot" data-pos="<?php echo esc_attr($val); ?>"></span>
                                <span class="wa-position-label"><?php echo esc_html($label); ?></span>
                            </label>
                            <?php endforeach; ?>
                        </div>
                        <div class="wa-offset-row">
                            <label class="wa-offset-field">
                                <span>Offset X</span>
                                <input type="number" name="<?php echo esc_attr(WEBABILITY_ACWG_OPT_KEY); ?>[offset_x]" value="<?php echo esc_attr($o['offset_x']); ?>" min="-999" max="999">
                                <span class="wa-offset-unit">px</span>
                            </label>
                            <label class="wa-offset-field">
                                <span>Offset Y</span>
                                <input type="number" name="<?php echo esc_attr(WEBABILITY_ACWG_OPT_KEY); ?>[offset_y]" value="<?php echo esc_attr($o['offset_y']); ?>" min="-999" max="999">
                                <span class="wa-offset-unit">px</span>
                            </label>
                        </div>
                    </div>

                    <input type="hidden" name="<?php echo esc_attr(WEBABILITY_ACWG_OPT_KEY); ?>[widget_color]" value="<?php echo esc_attr($o['widget_color']); ?>">

                    <!-- Size & Language -->
                    <div class="wa-design-card wa-design-card-split">
                        <div class="wa-design-half">
                            <h3 class="wa-design-card-title">Size</h3>
                            <div class="wa-size-options">
                                <?php foreach ($sizes as $val => $label): ?>
                                <label class="wa-size-option <?php echo $o['trigger_size'] === $val ? 'wa-size-active' : ''; ?>">
                                    <input type="radio" name="<?php echo esc_attr(WEBABILITY_ACWG_OPT_KEY); ?>[trigger_size]" value="<?php echo esc_attr($val); ?>" <?php checked($o['trigger_size'], $val); ?>>
                                    <span><?php echo esc_html($label); ?></span>
                                </label>
                                <?php endforeach; ?>
                            </div>
                        </div>
                        <div class="wa-design-half">
                            <h3 class="wa-design-card-title">Language</h3>
                            <select name="<?php echo esc_attr(WEBABILITY_ACWG_OPT_KEY); ?>[language]" class="wa-select" aria-label="Widget language">
                                <?php foreach ($languages as $val => $label): ?>
                                <option value="<?php echo esc_attr($val); ?>" <?php selected($o['language'], $val); ?>><?php echo esc_html($label); ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>

                    <!-- Trigger Icon -->
                    <div class="wa-design-card">
                        <h3 class="wa-design-card-title">Trigger Icon</h3>
                        <div class="wa-icon-type-options">
                            <?php foreach ($icon_types as $val => $label): ?>
                            <label class="wa-icon-type-option <?php echo $o['icon_type'] === $val ? 'wa-icon-type-active' : ''; ?>">
                                <input type="radio" name="<?php echo esc_attr(WEBABILITY_ACWG_OPT_KEY); ?>[icon_type]" value="<?php echo esc_attr($val); ?>" <?php checked($o['icon_type'], $val); ?>>
                                <span class="wa-icon-type-label"><?php echo esc_html($label); ?></span>
                                <?php if ($val === 'm-full'): ?>
                                <img src="<?php echo esc_url(WEBABILITY_WIDGET_URL . 'assets/full_widget_icon.svg'); ?>" alt="Full Widget" width="32" height="32">
                                <?php elseif ($val === 'm-compact'): ?>
                                <span class="wa-icon-type-badge wa-badge-compact">Site Accessibility</span>
                                <?php else: ?>
                                <span class="wa-icon-type-badge wa-badge-hidden">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                </span>
                                <?php endif; ?>
                            </label>
                            <?php endforeach; ?>
                        </div>
                        <div class="wa-custom-trigger-info" id="wa-custom-trigger-info" style="display:<?php echo $o['icon_type'] === 'hidden' ? 'block' : 'none'; ?>;">
                            <h4 class="wa-design-card-title">How Custom Trigger Works</h4>
                            <p>With custom trigger mode, no widget icon appears on your site. Instead, add this onclick to any button or element to open the widget:</p>
                            <code class="wa-snippet">onclick="document.querySelector('.asw-menu-btn')?.click()"</code>
                            <p class="wa-design-card-desc">Perfect for integrating with your existing navigation, help buttons, or any custom UI elements.</p>
                        </div>
                    </div>
                </div>

                <!-- Right: Live Preview -->
                <div class="wa-design-preview">
                    <div class="wa-preview-card">
                        <h3 class="wa-design-card-title">Preview</h3>
                        <div class="wa-preview-browser">
                            <div class="wa-preview-toolbar">
                                <span class="wa-preview-dot wa-dot-red"></span>
                                <span class="wa-preview-dot wa-dot-yellow"></span>
                                <span class="wa-preview-dot wa-dot-green"></span>
                                <span class="wa-preview-url">yoursite.com</span>
                            </div>
                            <div class="wa-preview-viewport" id="wa-preview-viewport">
                                <div class="wa-preview-content">
                                    <div class="wa-preview-header"></div>
                                    <div class="wa-preview-block wa-preview-block-lg"></div>
                                    <div class="wa-preview-block-row">
                                        <div class="wa-preview-block wa-preview-block-sm"></div>
                                        <div class="wa-preview-block wa-preview-block-sm"></div>
                                        <div class="wa-preview-block wa-preview-block-sm"></div>
                                    </div>
                                    <div class="wa-preview-block wa-preview-block-md"></div>
                                </div>
                                <div class="wa-preview-widget-btn" id="wa-preview-btn" data-position="<?php echo esc_attr($o['position']); ?>" data-icon-type="<?php echo esc_attr($o['icon_type']); ?>">
                                    <img src="<?php echo esc_url(WEBABILITY_WIDGET_URL . 'assets/full_widget_icon.svg'); ?>" alt="Widget" width="44" height="44">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wa-design-actions">
                <?php submit_button(__('Save Design', 'webability-accessibility-widget'), 'primary', 'submit', false); ?>
            </div>
        </form>
    </div>
    <?php
}
