<?php
/**
 * Widget Appearance Modal (shared between slide-edit and wizard)
 *
 * @package SlideMind
 * @since 2.9.0
 */

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

$sm_settings = get_option('slidemind_settings', []);
$default_color         = $sm_settings['widget_color']         ?? '#4f46e5';
$default_ai_color      = $sm_settings['widget_ai_color']      ?? '#f1f5f9';
$default_theme         = $sm_settings['widget_theme']         ?? 'light';
$default_show_header   = $sm_settings['widget_show_header']   ?? '1';
$default_ai_text_color = $sm_settings['widget_ai_text_color'] ?? '';
$default_border_radius = $sm_settings['widget_border_radius'] ?? 12;
?>

<!-- Hidden inputs for form submission -->
<input type="hidden" name="widget_color" value="<?php echo esc_attr($widget_color ?? ''); ?>">
<input type="hidden" name="widget_ai_color" value="<?php echo esc_attr($widget_ai_color ?? ''); ?>">
<input type="hidden" name="widget_theme" value="<?php echo esc_attr($widget_theme ?? ''); ?>">
<input type="hidden" name="widget_show_header" value="<?php echo esc_attr($widget_show_header ?? ''); ?>">
<input type="hidden" name="widget_title" value="<?php echo esc_attr($widget_title ?? ''); ?>">
<input type="hidden" name="widget_ai_text_color" value="<?php echo esc_attr($widget_ai_text_color ?? ''); ?>">
<input type="hidden" name="widget_border_radius" value="<?php echo esc_attr($widget_border_radius ?? ''); ?>">

<!-- Widget Appearance Modal -->
<div class="sm-modal-overlay" id="sm-widget-appearance-modal">
    <div class="sm-modal" style="max-width: 640px;">
        <div class="sm-modal-header">
            <h2><?php esc_html_e('Customize widget', 'slidemind'); ?></h2>
            <button type="button" class="sm-modal-close">&times;</button>
        </div>

        <div class="sm-modal-body" style="display: flex; gap: 24px; align-items: flex-start;">
            <!-- Controls -->
            <div style="flex: 1; min-width: 0;">
                <div class="sm-form-group" style="margin-bottom: 16px;">
                    <label class="sm-form-label"><?php esc_html_e('Accent color', 'slidemind'); ?></label>
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <input type="color" id="sma-color" value="<?php echo esc_attr($default_color); ?>" style="width: 40px; height: 32px; border: 1px solid var(--sm-gray-300); border-radius: 4px; cursor: pointer; padding: 2px;">
                        <code id="sma-color-hex" style="font-size: 13px;"><?php echo esc_html($default_color); ?></code>
                        <button type="button" class="sm-btn sm-btn-sm" id="sma-reset-color" title="<?php esc_attr_e('Reset', 'slidemind'); ?>" style="padding: 2px 6px; font-size: 12px;">&#8635;</button>
                    </div>
                    <p class="sm-form-help"><?php esc_html_e('Header, buttons, and user message bubbles.', 'slidemind'); ?></p>
                </div>

                <div class="sm-form-group" style="margin-bottom: 16px;">
                    <label class="sm-form-label"><?php esc_html_e('AI bubble color', 'slidemind'); ?></label>
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <input type="color" id="sma-ai-color" value="<?php echo esc_attr($default_ai_color); ?>" style="width: 40px; height: 32px; border: 1px solid var(--sm-gray-300); border-radius: 4px; cursor: pointer; padding: 2px;">
                        <code id="sma-ai-color-hex" style="font-size: 13px;"><?php echo esc_html($default_ai_color); ?></code>
                        <button type="button" class="sm-btn sm-btn-sm" id="sma-reset-ai-color" title="<?php esc_attr_e('Reset', 'slidemind'); ?>" style="padding: 2px 6px; font-size: 12px;">&#8635;</button>
                    </div>
                    <p class="sm-form-help"><?php esc_html_e('AI response message bubbles. Applies regardless of theme.', 'slidemind'); ?></p>
                </div>

                <div class="sm-form-group" style="margin-bottom: 16px;">
                    <label class="sm-form-label" for="sma-theme"><?php esc_html_e('Theme', 'slidemind'); ?></label>
                    <select id="sma-theme" class="sm-form-select" style="max-width: 160px;">
                        <option value="light"><?php esc_html_e('Light', 'slidemind'); ?></option>
                        <option value="dark"><?php esc_html_e('Dark', 'slidemind'); ?></option>
                    </select>
                </div>

                <div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sm-gray-200);"></div>

                <div class="sm-form-group" style="margin-bottom: 16px;">
                    <label class="sm-form-label">
                        <input type="checkbox" id="sma-show-header" checked>
                        <?php esc_html_e('Show header', 'slidemind'); ?>
                    </label>
                    <p class="sm-form-help"><?php esc_html_e('Uncheck to hide the title bar.', 'slidemind'); ?></p>
                </div>

                <div class="sm-form-group" id="sma-title-group" style="margin-bottom: 16px;">
                    <label class="sm-form-label" for="sma-title"><?php esc_html_e('Header title', 'slidemind'); ?></label>
                    <input type="text" id="sma-title" class="sm-form-input" value="" placeholder="<?php esc_attr_e('Slide title (default)', 'slidemind'); ?>">
                    <p class="sm-form-help"><?php esc_html_e('Custom title for the widget header. Leave empty to use the slide title.', 'slidemind'); ?></p>
                </div>

                <div class="sm-form-group" style="margin-bottom: 16px;">
                    <label class="sm-form-label"><?php esc_html_e('AI text color', 'slidemind'); ?></label>
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <input type="color" id="sma-ai-text-color" value="#1e293b" style="width: 40px; height: 32px; border: 1px solid var(--sm-gray-300); border-radius: 4px; cursor: pointer; padding: 2px;">
                        <code id="sma-ai-text-color-hex" style="font-size: 13px;">#1e293b</code>
                        <button type="button" class="sm-btn sm-btn-sm" id="sma-reset-ai-text-color" title="<?php esc_attr_e('Reset', 'slidemind'); ?>" style="padding: 2px 6px; font-size: 12px;">&#8635;</button>
                    </div>
                    <p class="sm-form-help"><?php esc_html_e('Text inside AI bubbles. Adjust for contrast with the AI bubble color.', 'slidemind'); ?></p>
                </div>

                <div class="sm-form-group" style="margin-bottom: 16px;">
                    <label class="sm-form-label" for="sma-border-radius"><?php esc_html_e('Border radius', 'slidemind'); ?></label>
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <input type="number" id="sma-border-radius" class="sm-form-input" value="12" min="0" max="24" style="width: 70px;">
                        <span style="font-size: 13px; color: var(--sm-gray-500);">px</span>
                    </div>
                    <p class="sm-form-help"><?php esc_html_e('Roundness of message bubbles.', 'slidemind'); ?></p>
                </div>

                <p class="sm-form-help" style="font-style: italic; color: var(--sm-gray-500);">
                    <?php esc_html_e('Leave empty to use global defaults from Settings.', 'slidemind'); ?>
                </p>
            </div>

            <!-- Preview -->
            <div id="sma-preview" data-theme="light" style="width: 220px; height: 320px; border-radius: 12px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--sm-gray-200); display: flex; flex-direction: column; font-family: system-ui, sans-serif; font-size: 12px;">
                <!-- Preview header -->
                <div id="sma-preview-header" style="padding: 10px 12px; color: #fff; font-weight: 600; font-size: 13px; flex-shrink: 0;">
                    SlideMind
                </div>
                <!-- Preview messages -->
                <div id="sma-preview-body" style="flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden;">
                    <div id="sma-preview-ai-bubble" style="align-self: flex-start; padding: 8px 10px; border-radius: 10px 10px 10px 3px; max-width: 80%; color: #1e293b; font-size: 12px;">
                        <?php esc_html_e('Hello! How can I help?', 'slidemind'); ?>
                    </div>
                    <div id="sma-preview-user-bubble" style="align-self: flex-end; padding: 8px 10px; border-radius: 10px 10px 3px 10px; max-width: 80%; color: #fff; font-size: 12px;">
                        <?php esc_html_e('Tell me more', 'slidemind'); ?>
                    </div>
                </div>
                <!-- Preview input -->
                <div id="sma-preview-input" style="padding: 8px 10px; border-top: 1px solid #e2e8f0; display: flex; gap: 6px; flex-shrink: 0;">
                    <div style="flex: 1; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 8px; font-size: 11px; color: #94a3b8;">
                        <?php esc_html_e('Your message...', 'slidemind'); ?>
                    </div>
                    <div id="sma-preview-send" style="width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; flex-shrink: 0;">
                        &#10148;
                    </div>
                </div>
            </div>
        </div>

        <div class="sm-modal-footer" style="display: flex; gap: 8px; justify-content: flex-end;">
            <button type="button" class="sm-btn sm-btn-secondary" id="sma-reset-all">
                <?php esc_html_e('Reset to defaults', 'slidemind'); ?>
            </button>
            <button type="button" class="sm-btn sm-btn-primary" id="sma-apply">
                <?php esc_html_e('Apply', 'slidemind'); ?>
            </button>
        </div>
    </div>
</div>

<?php
wp_add_inline_script(
	'slidemind-admin-app',
	'window.smaDefaults = ' . wp_json_encode(
		[
			'color'        => $default_color,
			'aiColor'      => $default_ai_color,
			'theme'        => $default_theme,
			'showHeader'   => $default_show_header,
			'aiTextColor'  => $default_ai_text_color,
			'borderRadius' => (int) $default_border_radius,
		]
	) . ';',
	'before'
);
?>
