{% extends "layout.twig" %}

{% block title %}{{ editing ? t('protocols.edit_protocol') : t('protocols.create_protocol') }} - {{ parent() }}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">{{ editing ? t('protocols.edit_protocol') : t('protocols.create_protocol') }}</h1>
                    <p class="mt-2 text-gray-600">{{ editing ? t('protocols.edit_protocol_description') : t('protocols.create_protocol_description') }}</p>
                </div>
                <a href="/settings/protocols" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                    </svg>
                    {{ t('protocols.back_to_protocols') }}
                </a>
            </div>
        </div>

        <!-- Success/Error Messages -->
        {% if success %}
        <div class="mb-4 bg-green-50 border border-green-200 rounded-md p-4">
            <div class="flex">
                <svg class="w-5 h-5 text-green-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
                <p class="text-green-800">{{ success }}</p>
            </div>
        </div>
        {% endif %}

        {% if error %}
        <div class="mb-4 bg-red-50 border border-red-200 rounded-md p-4">
            <div class="flex">
                <svg class="w-5 h-5 text-red-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                </svg>
                <p class="text-red-800">{{ error }}</p>
            </div>
        </div>
        {% endif %}

        <!-- Protocol Form -->
        <form id="protocol-form" method="POST" action="/settings/protocols/save" class="space-y-6">
            {% if editing %}
            <input type="hidden" name="id" value="{{ editing.id }}">
            {% endif %}

            <!-- Basic Information -->
            <div class="bg-white shadow rounded-lg p-6">
                <h2 class="text-lg font-medium text-gray-900 mb-4">{{ t('protocols.basic_information') }}</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-2">{{ t('protocols.name_label') }} *</label>
                        <input type="text" id="name" name="name" value="{{ editing.name ?? '' }}" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <p class="mt-1 text-sm text-gray-500">{{ t('protocols.name_help') }}</p>
                    </div>
                    
                    <div>
                        <label for="slug" class="block text-sm font-medium text-gray-700 mb-2">{{ t('protocols.slug_label') }} *</label>
                        <input type="text" id="slug" name="slug" value="{{ editing.slug ?? '' }}" required pattern="[a-z0-9_-]+" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <p class="mt-1 text-sm text-gray-500">{{ t('protocols.slug_help') }}</p>
                    </div>
                </div>
                
                <div class="mt-6">
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-2">{{ t('common.description') }}</label>
                    <textarea id="description" name="description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">{{ editing.description ?? '' }}</textarea>
                    <p class="mt-1 text-sm text-gray-500">{{ t('protocols.description_help') }}</p>
                </div>
            </div>

            <!-- Installation Script -->
            <div class="bg-white shadow rounded-lg p-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-medium text-gray-900">{{ t('protocols.installation_script') }}</h2>
                    <button type="button" id="ai-help-btn" class="inline-flex items-center px-3 py-1 border border-purple-300 rounded-md text-sm font-medium text-purple-700 bg-white hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                        </svg>
                        {{ t('ai.get_ai_help') }}
                    </button>
                </div>
                
                <div>
                    <textarea id="install_script" name="install_script" rows="15" class="w-full px-3 py-2 border border-gray-300 rounded-md font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="#!/bin/bash&#10;# Installation script here">{{ editing.install_script ?? '' }}</textarea>
                    <p class="mt-1 text-sm text-gray-500">{{ t('protocols.install_script_help') }}</p>
                    <div class="mt-3 flex items-center space-x-2">
                        <button id="test-install-btn" type="button" class="inline-flex items-center px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4"/></svg>
                            {{ t('protocols.test_install') }}
                        </button>
                        <span class="text-xs text-gray-500">{{ t('protocols.testing_on_ubuntu22') }}</span>
                    </div>
                    <div id="test-install-result" class="mt-3 hidden">
                        <h3 class="text-sm font-medium text-gray-900">{{ t('protocols.test_result') }}</h3>
                        <pre id="test-install-output" class="mt-2 p-3 bg-gray-50 border border-gray-200 rounded text-xs whitespace-pre-wrap"></pre>
                        <h3 class="mt-3 text-sm font-medium text-gray-900">{{ t('protocols.client_output_preview') }}</h3>
                        <pre id="test-client-preview" class="mt-2 p-3 bg-gray-50 border border-gray-200 rounded text-xs whitespace-pre-wrap"></pre>
                    </div>
                </div>
            </div>

            <!-- Uninstallation Script -->
            <div class="bg-white shadow rounded-lg p-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-medium text-gray-900">{{ t('protocols.uninstallation_script') }}</h2>
                    <button type="button" class="ai-help-btn inline-flex items-center px-3 py-1 border border-purple-300 rounded-md text-sm font-medium text-purple-700 bg-white hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" data-target="uninstall">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                        </svg>
                        {{ t('ai.get_ai_help') }}
                    </button>
                </div>
                <div>
                    <textarea id="uninstall_script" name="uninstall_script" rows="12" class="w-full px-3 py-2 border border-gray-300 rounded-md font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="#!/bin/bash&#10;# Uninstallation script here">{{ editing.uninstall_script ?? '' }}</textarea>
                    <p class="mt-1 text-sm text-gray-500">{{ t('protocols.uninstall_script_help') }}</p>
                    <div class="mt-3 flex items-center space-x-2">
                        <button id="test-uninstall-btn" type="button" class="inline-flex items-center px-3 py-2 bg-red-600 text-white rounded hover:bg-red-700">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            {{ t('protocols.test_uninstall') }}
                        </button>
                        <span class="text-xs text-gray-500">{{ t('protocols.testing_on_ubuntu22') }}</span>
                    </div>
                    <div id="test-uninstall-result" class="mt-3 hidden">
                        <h3 class="text-sm font-medium text-gray-900">{{ t('protocols.test_result') }}</h3>
                        <pre id="test-uninstall-output" class="mt-2 p-3 bg-gray-50 border border-gray-200 rounded text-xs whitespace-pre-wrap"></pre>
                    </div>
                </div>
            </div>

            <!-- Output Template -->
            <div class="bg-white shadow rounded-lg p-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-medium text-gray-900">{{ t('protocols.output_template') }}</h2>
                    <button type="button" class="ai-help-btn inline-flex items-center px-3 py-1 border border-purple-300 rounded-md text-sm font-medium text-purple-700 bg-white hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" data-target="template">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                        </svg>
                        {{ t('ai.get_ai_help') }}
                    </button>
                </div>
                
                <div>
                    <textarea id="output_template" name="output_template" rows="10" class="w-full px-3 py-2 border border-gray-300 rounded-md font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="[Interface]&#10;PrivateKey = {{private_key}}&#10;Address = {{client_ip}}/32">{{ editing.output_template ?? '' }}</textarea>
                    <p class="mt-1 text-sm text-gray-500">{{ t('protocols.output_template_help') }}</p>
                </div>
                
                <div class="mt-4 p-4 bg-blue-50 rounded-md">
                    <h3 class="text-sm font-medium text-blue-900 mb-2">{{ t('protocols.available_variables') }}</h3>
                    <div class="text-sm text-blue-800 space-y-1">
                        <p><code>{{private_key}}</code> - {{ t('protocols.variable_private_key_help') }}</p>
                        <p><code>{{public_key}}</code> - {{ t('protocols.variable_public_key_help') }}</p>
                        <p><code>{{client_ip}}</code> - {{ t('protocols.variable_client_ip_help') }}</p>
                        <p><code>{{server_host}}</code> - {{ t('protocols.variable_server_host_help') }}</p>
                        <p><code>{{server_port}}</code> - {{ t('protocols.variable_server_port_help') }}</p>
                        <p><code>{{preshared_key}}</code> - {{ t('protocols.variable_preshared_key_help') }}</p>
                    </div>
                </div>
            </div>

            <!-- QR Code Template -->
            <div class="bg-white shadow rounded-lg p-6">
                <div class="flex justify-between items-center mb-4">
                    <div class="flex items-center">
                        <input type="checkbox" id="qr_section_toggle" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mr-3" checked>
                        <h2 class="text-lg font-medium text-gray-900">{{ t('protocols.qr_code_template') }}</h2>
                    </div>
                    <button type="button" class="ai-help-btn inline-flex items-center px-3 py-1 border border-purple-300 rounded-md text-sm font-medium text-purple-700 bg-white hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" data-target="qr_template">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                        </svg>
                        {{ t('ai.get_ai_help') }}
                    </button>
                </div>
                
                <div id="qr_section_content">
                    <div class="mb-4">
                        <label for="qr_code_format" class="block text-sm font-medium text-gray-700 mb-2">{{ t('protocols.qr_code_format') }}</label>
                        <select id="qr_code_format" name="qr_code_format" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="amnezia_compressed" {% if editing.qr_code_format == 'amnezia_compressed' %}selected{% endif %}>Amnezia Compressed (Default)</option>
                            <option value="raw" {% if editing.qr_code_format == 'raw' %}selected{% endif %}>Raw Content</option>
                            <option value="text" {% if editing.qr_code_format == 'text' %}selected{% endif %}>{{ t('protocols.qr_code_format_text') }}</option>
                        </select>
                        <p class="mt-1 text-sm text-gray-500">{{ t('protocols.qr_code_format_help') }}</p>
                    </div>

                    <div>
                        <textarea id="qr_code_template" name="qr_code_template" rows="10" class="w-full px-3 py-2 border border-gray-300 rounded-md font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="{&quot;last_config&quot;:{{last_config_json}}}">{{ editing.qr_code_template ?? '' }}</textarea>
                        <p class="mt-1 text-sm text-gray-500">{{ t('protocols.qr_code_template_help') }}</p>
                    </div>
                    
                    <div class="mt-4 p-4 bg-blue-50 rounded-md">
                        <h3 class="text-sm font-medium text-blue-900 mb-2">{{ t('protocols.available_variables') }}</h3>
                        <div class="text-sm text-blue-800 space-y-1">
                            <p><code>{{last_config_json}}</code> - {{ t('protocols.variable_last_config_json_help') }}</p>
                            <p>{{ t('protocols.plus_all_output_variables') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Password Generation -->
            <div class="bg-white shadow rounded-lg p-6">
                <h2 class="text-lg font-medium text-gray-900 mb-4">{{ t('protocols.password_generation') }}</h2>
                <div>
                    <textarea id="password_command" name="password_command" rows="6" class="w-full px-3 py-2 border rounded-md font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="echo \$(openssl rand -base64 12)">{{ editing.password_command ?? '' }}</textarea>
                    <p class="mt-1 text-sm text-gray-500">{{ t('protocols.password_command_help') }}</p>
                </div>
            </div>

            <!-- Settings -->
            <div class="bg-white shadow rounded-lg p-6">
                <h2 class="text-lg font-medium text-gray-900 mb-4">{{ t('common.settings') }}</h2>
                
                <div class="space-y-4">
                    <div class="flex items-center">
                        <input type="checkbox" id="ubuntu_compatible" name="ubuntu_compatible" value="1" {% if editing.ubuntu_compatible %}checked{% endif %} class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="ubuntu_compatible" class="ml-2 block text-sm text-gray-900">{{ t('protocols.ubuntu_compatible') }}</label>
                    </div>
                    
                    <div class="flex items-center">
                        <input type="checkbox" id="show_text_content" name="show_text_content" value="1" {% if editing.show_text_content %}checked{% endif %} class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="show_text_content" class="ml-2 block text-sm text-gray-900">{{ t('protocols.show_text_content') }}</label>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" id="is_active" name="is_active" value="1" {% if editing.is_active is not defined or editing.is_active %}checked{% endif %} class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="is_active" class="ml-2 block text-sm text-gray-900">{{ t('protocols.active_label') }}</label>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex justify-end space-x-3">
                <a href="/settings/protocols" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    {{ t('common.cancel') }}
                </a>
                <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    {{ editing ? t('protocols.update_protocol') : t('protocols.create_protocol') }}
                </button>
            </div>
        </form>
    </div>
</div>

<!-- AI Assistant Modal -->
<div id="ai-assistant-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-4xl shadow-lg rounded-md bg-white">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold text-gray-900">{{ t('ai.assistant') }}</h3>
            <button id="close-ai-modal" class="text-gray-400 hover:text-gray-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">{{ t('ai.select_model') }}</label>
            <select id="ai-model-select" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="openai/gpt-3.5-turbo">{{ t('ai.model_gpt35_turbo') }}</option>
                <option value="openai/gpt-4">{{ t('ai.model_gpt4') }}</option>
                <option value="anthropic/claude-3-haiku">{{ t('ai.model_claude3_haiku') }}</option>
                <option value="anthropic/claude-3-sonnet">{{ t('ai.model_claude3_sonnet') }}</option>
            </select>
            <div class="mt-2 flex items-center space-x-2">
                <input id="ai-model-custom" type="text" placeholder="{{ t('ai.custom_model_placeholder') }}" class="flex-1 px-3 py-2 border border-gray-300 rounded-md">
                <button id="ai-model-test-btn" type="button" class="px-3 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50">{{ t('ai.check_availability') }}</button>
            </div>
            <p class="mt-2 text-xs text-gray-500">
                <i class="fas fa-external-link-alt"></i>
                <a href="https://openrouter.ai/models" target="_blank" class="text-purple-600">openrouter.ai/models</a>
            </p>
            {% if not openrouter_key %}
            <div class="mt-3 p-3 bg-yellow-50 border border-yellow-200 rounded">
                <div class="flex items-center justify-between">
                    <span class="text-xs text-yellow-800">{{ t('settings.no_api_key') }}</span>
                    <a href="/settings#api" class="px-2 py-1 text-xs bg-purple-600 text-white rounded">{{ t('settings.enter_api_key') }}</a>
                </div>
            </div>
            {% endif %}
        </div>

        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">{{ t('ai.protocol_type') }}</label>
            <select id="ai-protocol-type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="">{{ t('ai.general_vpn') }}</option>
                <option value="wireguard">WireGuard</option>
                <option value="openvpn">OpenVPN</option>
                <option value="shadowsocks">Shadowsocks</option>
                <option value="cloak">Cloak</option>
                <option value="ikev2">IKEv2</option>
            </select>
        </div>

        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">{{ t('ai.describe_requirements') }}</label>
            <textarea id="ai-prompt" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="{{ t('ai.prompt_placeholder') }}"></textarea>
        </div>

        <div class="mb-4">
            <button id="generate-script-btn" class="w-full inline-flex justify-center items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
                {{ t('ai.generate_script') }}
            </button>
        </div>

        <div id="ai-loading" class="hidden text-center py-4">
            <div class="inline-flex items-center">
                <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-purple-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span>{{ t('ai.generating_script') }}</span>
            </div>
        </div>

        <div id="ai-result" class="hidden">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">{{ t('ai.generated_script') }}</label>
                <div class="bg-gray-900 text-green-400 p-4 rounded-md overflow-x-auto">
                    <pre id="generated-script" class="text-sm whitespace-pre-wrap"></pre>
                </div>
            </div>
            
            <div id="ai-suggestions" class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">{{ t('ai.suggestions') }}</label>
                <ul id="suggestions-list" class="list-disc list-inside space-y-1 text-sm text-gray-600"></ul>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">{{ t('common.compatibility') }}</label>
                <div id="ubuntu-compatibility" class="flex items-center"></div>
            </div>

            <div class="flex space-x-3">
                <button id="apply-to-current-btn" class="flex-1 inline-flex justify-center items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                    {{ t('ai.apply_to_current_protocol') }}
                </button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // AI Assistant Modal
    const aiModal = document.getElementById('ai-assistant-modal');
    const aiHelpBtns = document.querySelectorAll('.ai-help-btn');
    const closeAIModal = document.getElementById('close-ai-modal');
    const generateScriptBtn = document.getElementById('generate-script-btn');
    const aiLoading = document.getElementById('ai-loading');
    const aiResult = document.getElementById('ai-result');
    const applyToCurrentBtn = document.getElementById('apply-to-current-btn');
    const installScriptTextarea = document.getElementById('install_script');
    const uninstallScriptTextarea = document.getElementById('uninstall_script');
    const outputTemplateTextarea = document.getElementById('output_template');
    
    // QR Template Section Toggle
    const qrSectionToggle = document.getElementById('qr_section_toggle');
    const qrSectionContent = document.getElementById('qr_section_content');
    
    if (qrSectionToggle && qrSectionContent) {
        qrSectionToggle.addEventListener('change', function() {
            qrSectionContent.style.display = this.checked ? 'block' : 'none';
        });
    }
    
    let currentAiTarget = 'install'; // install, uninstall, template

    function showAIModal(target) {
        currentAiTarget = target || 'install';
        aiModal.classList.remove('hidden');
        aiResult.classList.add('hidden');
        aiLoading.classList.add('hidden');
        
        // Update modal title or prompt placeholder based on target if needed
        const promptArea = document.getElementById('ai-prompt');
        if (currentAiTarget === 'template') {
            promptArea.placeholder = "{{ t('ai.prompt_placeholder_template') }}";
        } else if (currentAiTarget === 'qr_template') {
            promptArea.placeholder = "{{ t('ai.prompt_placeholder_qr_template') }}";
        } else if (currentAiTarget === 'uninstall') {
            promptArea.placeholder = "{{ t('ai.prompt_placeholder_uninstall') }}";
        } else {
            promptArea.placeholder = "{{ t('ai.prompt_placeholder') }}";
        }
    }

    function hideAIModal() {
        aiModal.classList.add('hidden');
    }

    // Attach event listeners to all AI help buttons
    aiHelpBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const target = this.getAttribute('data-target') || 'install';
            showAIModal(target);
        });
    });
    
    // Also attach to the original ID if it exists (for backward compatibility or if I missed updating one)
    const originalAiBtn = document.getElementById('ai-help-btn');
    if (originalAiBtn) {
        originalAiBtn.addEventListener('click', function() {
            showAIModal('install');
        });
    }

    closeAIModal.addEventListener('click', hideAIModal);

    // Close modal when clicking outside
    aiModal.addEventListener('click', function(e) {
        if (e.target === aiModal) {
            hideAIModal();
        }
    });

    // Generate script with AI
    generateScriptBtn.addEventListener('click', async function() {
        const model = document.getElementById('ai-model-select').value;
        const customModel = document.getElementById('ai-model-custom').value.trim();
        const effectiveModel = customModel !== '' ? customModel : model;
        const protocolType = document.getElementById('ai-protocol-type').value;
        const prompt = document.getElementById('ai-prompt').value;

        if (!prompt.trim()) {
            alert('{{ t('ai.please_enter_requirements') }}');
            return;
        }

        aiLoading.classList.remove('hidden');
        generateScriptBtn.disabled = true;

        try {
            const response = await fetch('/api/ai/assist', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    prompt: prompt,
                    model: effectiveModel,
                    protocol_type: protocolType,
                    target: currentAiTarget
                })
            });

            const result = await response.json();

            if (result.success) {
                displayAIResult(result.data);
            } else {
                alert('{{ t('ai.error_generating_script') }}: ' + result.error);
            }
        } catch (error) {
            alert('{{ t('ai.error_generating_script') }}: ' + error.message);
        } finally {
            aiLoading.classList.add('hidden');
            generateScriptBtn.disabled = false;
        }
    });

    function displayAIResult(data) {
        document.getElementById('generated-script').textContent = data.script;
        
        const suggestionsList = document.getElementById('suggestions-list');
        suggestionsList.innerHTML = '';
        data.suggestions.forEach(suggestion => {
            const li = document.createElement('li');
            li.textContent = suggestion;
            suggestionsList.appendChild(li);
        });

        const compatibilityDiv = document.getElementById('ubuntu-compatibility');
        if (data.ubuntu_compatible) {
            compatibilityDiv.innerHTML = '<svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg><span class="text-green-700">Compatible with Ubuntu 22.04-24.04</span>';
        } else {
            compatibilityDiv.innerHTML = '<svg class="w-5 h-5 text-red-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg><span class="text-red-700">May not be compatible with Ubuntu 22.04-24.04</span>';
        }

        aiResult.classList.remove('hidden');
    }

    // Apply to current protocol
    applyToCurrentBtn.addEventListener('click', function() {
        const generatedScript = document.getElementById('generated-script').textContent;
        if (generatedScript && confirm('{{ t('ai.confirm_apply_script') }}')) {
            if (currentAiTarget === 'uninstall') {
                uninstallScriptTextarea.value = generatedScript;
            } else if (currentAiTarget === 'template') {
                outputTemplateTextarea.value = generatedScript;
            } else if (currentAiTarget === 'qr_template') {
                document.getElementById('qr_code_template').value = generatedScript;
            } else {
                installScriptTextarea.value = generatedScript;
            }
            hideAIModal();
        }
    });

    // Form validation
    document.getElementById('protocol-form').addEventListener('submit', function(e) {
        const name = document.getElementById('name').value.trim();
        const slug = document.getElementById('slug').value.trim();
        
        if (!name || !slug) {
            e.preventDefault();
            alert('{{ t('protocols.please_fill_required_fields') }}');
            return;
        }
        
        if (!/^[a-z0-9_-]+$/i.test(slug)) {
            e.preventDefault();
            alert('{{ t('protocols.invalid_slug_format') }}');
            return;
        }
    });

    // Auto-generate slug from name
    document.getElementById('name').addEventListener('blur', function() {
        const name = this.value.trim();
        const slugField = document.getElementById('slug');
        
        if (name && !slugField.value.trim()) {
            slugField.value = name.toLowerCase()
                .replace(/[^a-z0-9\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-')
                .replace(/^-|-$/g, '');
        }
    });

    // Test Install Script
    const testBtn = document.getElementById('test-install-btn');
    const testBox = document.getElementById('test-install-result');
    const testOut = document.getElementById('test-install-output');
    const clientPrev = document.getElementById('test-client-preview');
    
    if (testBtn) {
        testBtn.addEventListener('click', function() {
            const protocolId = {{ editing ? editing.id : 'null' }};
            if (!protocolId) {
                return;
            }
            testBtn.disabled = true;
            testBtn.classList.add('opacity-50');
            testOut.textContent = '';
            clientPrev.textContent = '';
            testBox.classList.remove('hidden');

            const appendCmd = (cmd) => {
                const line = document.createElement('div');
                line.className = 'text-xs text-gray-800';
                line.innerHTML = `<span class="text-blue-600">$</span> <code>${cmd}</code>`;
                testOut.appendChild(line);
            };
            const appendOut = (text) => {
                const pre = document.createElement('pre');
                pre.className = 'mt-1 p-2 bg-gray-100 border border-gray-200 rounded text-xs whitespace-pre-wrap';
                pre.textContent = text;
                testOut.appendChild(pre);
            };
            const setError = (msg) => {
                const err = document.createElement('div');
                err.className = 'mt-2 p-2 bg-red-50 border border-red-200 rounded text-xs text-red-700';
                err.textContent = msg;
                testOut.appendChild(err);
            };

            let es;
            try {
                es = new EventSource(`/api/protocols/${protocolId}/test-install/stream`);
            } catch (e) {
                es = null;
            }

            if (es) {
                es.onmessage = (e) => {
                    try {
                        const data = JSON.parse(e.data);
                        if (data.type === 'start') {
                            appendOut('{{ t('protocols.testing_on_ubuntu22') }}');
                        } else if (data.type === 'cmd') {
                            appendCmd(data.cmd);
                        } else if (data.type === 'out') {
                            appendOut(data.line);
                        } else if (data.type === 'cmd_done') {
                            if (data.rc !== 0) {
                                setError('Command failed');
                            }
                        } else if (data.type === 'preview') {
                            clientPrev.textContent = data.preview || '';
                        } else if (data.type === 'done') {
                            es.close();
                            testBtn.disabled = false;
                            testBtn.classList.remove('opacity-50');
                        } else if (data.type === 'error') {
                            setError(data.error || 'Unknown error');
                            es.close();
                            testBtn.disabled = false;
                            testBtn.classList.remove('opacity-50');
                        }
                    } catch (_) {}
                };
                es.onerror = () => {
                    es.close();
                    testBtn.disabled = false;
                    testBtn.classList.remove('opacity-50');
                    setError('Connection failed');
                };
            } else {
                // Fallback to non-stream if needed, but we implemented stream
                testBtn.disabled = false;
                testBtn.classList.remove('opacity-50');
            }
        });
    }
    
    // Test Uninstall Script
    const testUninstallBtn = document.getElementById('test-uninstall-btn');
    const testUninstallBox = document.getElementById('test-uninstall-result');
    const testUninstallOut = document.getElementById('test-uninstall-output');
    
    if (testUninstallBtn) {
        testUninstallBtn.addEventListener('click', function() {
            const protocolId = {{ editing ? editing.id : 'null' }};
            if (!protocolId) {
                return;
            }
            testUninstallBtn.disabled = true;
            testUninstallBtn.classList.add('opacity-50');
            testUninstallOut.textContent = '';
            testUninstallBox.classList.remove('hidden');

            const appendCmd = (cmd) => {
                const line = document.createElement('div');
                line.className = 'text-xs text-gray-800';
                line.innerHTML = `<span class="text-blue-600">$</span> <code>${cmd}</code>`;
                testUninstallOut.appendChild(line);
            };
            const appendOut = (text) => {
                const pre = document.createElement('pre');
                pre.className = 'mt-1 p-2 bg-gray-100 border border-gray-200 rounded text-xs whitespace-pre-wrap';
                pre.textContent = text;
                testUninstallOut.appendChild(pre);
            };
            const setError = (msg) => {
                const err = document.createElement('div');
                err.className = 'mt-2 p-2 bg-red-50 border border-red-200 rounded text-xs text-red-700';
                err.textContent = msg;
                testUninstallOut.appendChild(err);
            };

            let es;
            try {
                es = new EventSource(`/api/protocols/${protocolId}/test-uninstall/stream`);
            } catch (e) {
                es = null;
            }

            if (es) {
                es.onmessage = (e) => {
                    try {
                        const data = JSON.parse(e.data);
                        if (data.type === 'start') {
                            appendOut('{{ t('protocols.testing_on_ubuntu22') }}');
                        } else if (data.type === 'cmd') {
                            appendCmd(data.cmd);
                        } else if (data.type === 'out') {
                            appendOut(data.line);
                        } else if (data.type === 'cmd_done') {
                            if (data.rc !== 0) {
                                setError('Command failed');
                            }
                        } else if (data.type === 'done') {
                            es.close();
                            testUninstallBtn.disabled = false;
                            testUninstallBtn.classList.remove('opacity-50');
                        } else if (data.type === 'error') {
                            setError(data.error || 'Unknown error');
                            es.close();
                            testUninstallBtn.disabled = false;
                            testUninstallBtn.classList.remove('opacity-50');
                        }
                    } catch (_) {}
                };
                es.onerror = () => {
                    es.close();
                    testUninstallBtn.disabled = false;
                    testUninstallBtn.classList.remove('opacity-50');
                    setError('Connection failed');
                };
            }
        });
    }
});
</script>
{% endblock %}