{% extends "base.html" %}

{% block title %}{{ translations.translate_tool if translations else 'Subtitle Translation Tool' }}{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow-md p-6 mb-6 dark:bg-slate-800">
        <h1 class="text-2xl font-bold text-gray-900 mb-2 dark:text-white">{{ translations.translate_tool if translations else 'Subtitle Translation Tool' }}</h1>
        <p class="text-gray-600 dark:text-gray-300">
            {{ translations.translate_desc if translations else 'Translate subtitle files using AI models with customizable instructions.' }}
        </p>
        <a href="/" class="inline-flex items-center text-blue-600 hover:text-blue-800 mt-2 dark:text-blue-400 dark:hover:text-blue-300">
            <i class="fas fa-arrow-left mr-1"></i> {{ translations.back_to_home if translations else 'Back to Home' }}
        </a>
    </div>

    {% if error %}
    <div class="bg-red-50 border-l-4 border-red-400 p-4 mb-6 dark:bg-red-900/20 dark:border-red-700">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-exclamation-circle text-red-400 dark:text-red-500"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm text-red-700 dark:text-red-300">
                    {{ error }}
                </p>
            </div>
        </div>
    </div>
    {% endif %}

    <form method="post" class="bg-white rounded-lg shadow-md p-6 dark:bg-slate-800">
        <div class="mb-6">
            <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="srt_file">
                {{ translations.upload_srt_file if translations else 'Upload SRT File' }}
            </label>
            <div class="flex items-center">
                <label for="srt_file_upload" class="file-upload-label">
                    <i class="fas fa-upload mr-2"></i> {{ translations.choose_file if translations else 'Choose File' }}
                </label>
                <input type="file" id="srt_file_upload" name="srt_file_upload" class="file-upload-input" accept=".srt">
                <span id="file-name" class="ml-4 text-gray-500 dark:text-gray-400">{{ translations.no_file_chosen if translations else 'No file chosen' }}</span>
            </div>
            <textarea
                id="srt_file"
                name="srt_file"
                rows="10"
                class="form-input w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 mt-2 dark:bg-slate-700 dark:border-slate-600 dark:text-white"
                placeholder="{{ translations.paste_srt_content if translations else 'Paste your SRT content here or upload a file...' }}"
                required
            ></textarea>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ translations.paste_srt_desc if translations else 'Paste the content of your SRT file here' }}</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="instructions_file">
                    {{ translations.instructions_file if translations else 'Instructions File' }}
                </label>
                <select
                    id="instructions_file"
                    name="instructions_file"
                    class="form-input w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white"
                >
                    <option value="">{{ translations.default_instructions if translations else 'Default instructions' }}</option>
                    {% for file in instruction_files %}
                    <option value="{{ file }}">{{ file.name }}</option>
                    {% endfor %}
                </select>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ translations.instructions_file if translations else 'Select translation instructions (optional)' }}</p>
                <div class="mt-2">
                    <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="custom_instructions_file">
                        {{ translations.custom_instructions if translations else 'Or Upload Custom Instructions' }}
                    </label>
                    <div class="flex items-center">
                        <label for="custom_instructions_file" class="file-upload-label">
                            <i class="fas fa-upload mr-2"></i> {{ translations.choose_file if translations else 'Choose File' }}
                        </label>
                        <input type="file" id="custom_instructions_file" name="custom_instructions_file" class="file-upload-input" accept=".txt">
                        <span id="custom-instructions-file-name" class="ml-4 text-gray-500 dark:text-gray-400">{{ translations.no_file_chosen if translations else 'No file chosen' }}</span>
                    </div>
                </div>
            </div>

            <div>
                <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="chunk_size">
                    {{ translations.chunk_size if translations else 'Chunk Size' }}
                </label>
                <input
                    type="number"
                    id="chunk_size"
                    name="chunk_size"
                    value="30"
                    min="1"
                    class="form-input w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white"
                >
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ translations.chunk_size_desc if translations else 'Number of subtitle units per API request' }}</p>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6 items-center">
            <div>
                <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="provider">
                    {{ translations.get('provider', 'Model Provider') if translations else 'Model Provider' }}
                </label>
                <select
                    id="provider"
                    name="provider"
                    class="form-input w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white"
                    onchange="updateModelDefaults()"
                >
                    <option value="local">Local (OpenAI-compatible)</option>
                    <option value="openai">OpenAI</option>
                    <option value="anthropic">Anthropic</option>
                    <option value="gemini">Google Gemini</option>
                    <option value="databricks">Databricks</option>
                    <option value="other">Other (custom)</option>
                </select>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ translations.get('provider_desc', 'Select your LLM provider') if translations else 'Select your LLM provider' }}</p>
            </div>

            <div>
                <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="api_base">
                    {{ translations.api_base_url if translations else 'API Base URL' }}
                </label>
                <input
                    type="text"
                    id="api_base"
                    name="api_base"
                    value="http://localhost:8080"
                    class="form-input w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white"
                >
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ translations.api_base_url_desc if translations else 'API base URL (for self-hosted endpoints)' }}</p>
            </div>

            <div>
                <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="model_id">
                    {{ translations.model_id if translations else 'Model ID' }}
                </label>
                <input
                    type="text"
                    id="model_id"
                    name="model_id"
                    value="local-model"
                    class="form-input w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white"
                >
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ translations.model_id_desc if translations else 'Model identifier (e.g., gpt-4, claude-3-5-sonnet)' }}</p>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-1 gap-6 mb-6">
            <div>
                <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="api_key">
                    {{ translations.api_key if translations else 'API Key' }}
                </label>
                <div class="relative">
                    <input
                        type="password"
                        id="api_key"
                        name="api_key"
                        value="dummy-key"
                        class="form-input w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white pr-10"
                    >
                    <button type="button" id="toggle-api-key" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ translations.api_key_desc if translations else 'API key for authentication (use dummy-key for local)' }}</p>
            </div>
        </div>

        <div class="mb-6">
            <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="output_file">
                {{ translations.output_file_path if translations else 'Output File Path (Optional)' }}
            </label>
            <input
                type="text"
                id="output_file"
                name="output_file"
                class="form-input w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white"
                placeholder="{{ translations.output_file_path_desc if translations else 'Leave blank to auto-generate output filename' }}"
            >
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ translations.output_file_path_desc if translations else 'If left blank, output filename will be derived from input filename (e.g., input_translated.srt)' }}</p>
        </div>

        <div class="flex justify-end">
            <button
                type="submit"
                class="btn-primary text-white px-6 py-2 rounded-md font-medium hover:bg-blue-700 transition duration-200"
            >
                {{ translations.translate_subtitles if translations else 'Translate Subtitles' }}
            </button>
        </div>
    </form>

    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mt-6 dark:bg-blue-900/20 dark:border-blue-700">
        <h3 class="text-lg font-medium text-blue-800 mb-2 dark:text-blue-300">{{ translations.usage_examples if translations else 'Usage Examples' }}</h3>
        <ul class="list-disc pl-5 text-blue-700 space-y-1 dark:text-blue-300">
            <li>{{ translations.basic_translation if translations else 'Basic translation' }}: <code class="bg-blue-100 px-1 rounded dark:bg-blue-800/30">subtitle_translate.py input.srt</code></li>
            <li>{{ translations.custom_instructions_example if translations else 'Custom instructions' }}: <code class="bg-blue-100 px-1 rounded dark:bg-blue-800/30">subtitle_translate.py input.srt --instructions my_instructions.txt</code></li>
            <li>{{ translations.custom_chunk_size if translations else 'Custom chunk size' }}: <code class="bg-blue-100 px-1 rounded dark:bg-blue-800/30">subtitle_translate.py input.srt --chunk-size 30</code></li>
        </ul>
    </div>
</div>

<script>
    // File upload handling
    const fileInput = document.getElementById('srt_file_upload');
    const fileNameSpan = document.getElementById('file-name');
    const textArea = document.getElementById('srt_file');

    fileInput.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            const fileName = this.files[0].name;
            fileNameSpan.textContent = fileName;

            // Read file content
            const reader = new FileReader();
            reader.onload = function(e) {
                textArea.value = e.target.result;
            }
            reader.readAsText(this.files[0]);
        } else {
            fileNameSpan.textContent = 'No file chosen';
        }
    });

    // Custom instructions file upload handling
    const customInstructionsInput = document.getElementById('custom_instructions_file');
    const customInstructionsFileNameSpan = document.getElementById('custom-instructions-file-name');

    customInstructionsInput.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            const fileName = this.files[0].name;
            customInstructionsFileNameSpan.textContent = fileName;
        } else {
            customInstructionsFileNameSpan.textContent = 'No file chosen';
        }
    });

    // Toggle API key visibility
    const apiKeyInput = document.getElementById('api_key');
    const toggleApiKeyButton = document.getElementById('toggle-api-key');

    toggleApiKeyButton.addEventListener('click', function() {
        const type = apiKeyInput.getAttribute('type') === 'password' ? 'text' : 'password';
        apiKeyInput.setAttribute('type', type);
        this.innerHTML = type === 'password' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';
    });

    // Update model defaults based on provider selection
    function updateModelDefaults() {
        const provider = document.getElementById('provider').value;
        const apiBase = document.getElementById('api_base');
        const modelId = document.getElementById('model_id');
        const apiKey = document.getElementById('api_key');

        const defaults = {
            'local': { api_base: 'http://localhost:8080', model_id: 'local-model', api_key: 'dummy-key' },
            'openai': { api_base: '', model_id: 'gpt-5-2', api_key: '' },
            'anthropic': { api_base: '', model_id: 'claude-4-6-sonnet', api_key: '' },
            'gemini': { api_base: '', model_id: 'gemini/gemini-3-pro', api_key: '' },
            'databricks': { api_base: '', model_id: 'databricks/databricks-claude-4-6-sonnet', api_key: '' },
            'other': { api_base: '', model_id: '', api_key: '' }
        };

        if (defaults[provider]) {
            apiBase.value = defaults[provider].api_base;
            modelId.value = defaults[provider].model_id;
            apiKey.value = defaults[provider].api_key;
        }
    }
</script>
{% endblock %}