{% extends "layout.twig" %}

{% block title %}{{ t('menu.settings') }} - {{ app_name }}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">{{ t('menu.settings') }}</h1>
        <p class="mt-2 text-sm text-gray-600">{{ t('settings.description') }}</p>
    </div>

    {% if success %}
    <div class="mb-4 bg-green-50 border-l-4 border-green-400 p-4">
        <div class="flex">
            <i class="fas fa-check-circle text-green-400 mt-0.5"></i>
            <p class="ml-3 text-sm text-green-700">{{ success }}</p>
        </div>
    </div>
    {% endif %}

    {% if error %}
    <div class="mb-4 bg-red-50 border-l-4 border-red-400 p-4">
        <div class="flex">
            <i class="fas fa-exclamation-circle text-red-400 mt-0.5"></i>
            <p class="ml-3 text-sm text-red-700">{{ error }}</p>
        </div>
    </div>
    {% endif %}

    <!-- Tabs -->
    <div class="mb-6 border-b border-gray-200">
        <nav class="-mb-px flex space-x-8">
            <a href="#" onclick="showTab('profile'); return false;" id="tab-profile" 
               class="tab-link border-purple-500 text-purple-600 py-4 px-1 border-b-2 font-medium text-sm">
                <i class="fas fa-user mr-2"></i>Profile
            </a>
            <a href="#" onclick="showTab('api'); return false;" id="tab-api"
               class="tab-link border-transparent text-gray-500 hover:text-gray-700 py-4 px-1 border-b-2 font-medium text-sm">
                <i class="fas fa-key mr-2"></i>{{ t('settings.api_keys') }}
            </a>
            <a href="#" onclick="showTab('translations'); return false;" id="tab-translations"
               class="tab-link border-transparent text-gray-500 hover:text-gray-700 py-4 px-1 border-b-2 font-medium text-sm">
                <i class="fas fa-language mr-2"></i>Translations
            </a>
            {% if user.role == 'admin' %}
            <a href="#" onclick="showTab('users'); return false;" id="tab-users"
               class="tab-link border-transparent text-gray-500 hover:text-gray-700 py-4 px-1 border-b-2 font-medium text-sm">
                <i class="fas fa-users mr-2"></i>Users
            </a>
            {% endif %}
        </nav>
    </div>

    <!-- Profile Tab -->
    <div id="content-profile" class="tab-content">
        <div class="bg-white shadow rounded-lg">
            <div class="px-6 py-5 border-b border-gray-200">
                <h2 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-lock mr-2 text-purple-600"></i>Change Password
                </h2>
            </div>
            <div class="px-6 py-5">
                <form method="POST" action="/settings/change-password">
                    <div class="space-y-4 max-w-md">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Current Password</label>
                            <input type="password" name="current_password" required
                                   class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">New Password</label>
                            <input type="password" name="new_password" required minlength="6"
                                   class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
                            <p class="mt-1 text-xs text-gray-500">Minimum 6 characters</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
                            <input type="password" name="confirm_password" required minlength="6"
                                   class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
                        </div>
                        <button type="submit" class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700">
                            <i class="fas fa-save mr-2"></i>Change Password
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- API Tab -->
    <div id="content-api" class="tab-content hidden">
        <div class="bg-white shadow rounded-lg">
            <div class="px-6 py-5 border-b border-gray-200">
                <h2 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-key mr-2 text-purple-600"></i>{{ t('settings.api_keys') }}
                </h2>
            </div>
            <div class="px-6 py-5">
                {% if openrouter_key %}
                <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-md">
                    <div class="flex items-center justify-between">
                        <div>
                            <i class="fas fa-check-circle text-green-600 mr-2"></i>
                            <span class="text-sm font-medium text-green-900">API Key Configured</span>
                        </div>
                        <code class="text-xs text-green-700 bg-green-100 px-2 py-1 rounded">
                            {{ openrouter_key[:15] }}...{{ openrouter_key[-4:] }}
                        </code>
                    </div>
                </div>
                {% else %}
                <div class="mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-md">
                    <i class="fas fa-exclamation-triangle text-yellow-600 mr-2"></i>
                    <span class="text-sm text-yellow-800">No API key configured. Auto-translation will not work.</span>
                </div>
                {% endif %}
                
                <form method="POST" action="/settings/api-key">
                    <div class="max-w-md">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            OpenRouter API Key <span class="text-gray-500 font-normal">({{ t('settings.for_translation') }})</span>
                        </label>
                        <input type="text" name="api_key" placeholder="sk-or-v1-..." value="{{ openrouter_key }}" 
                               class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
                        <p class="mt-2 text-xs text-gray-500">
                            <i class="fas fa-info-circle"></i> {{ t('settings.get_key_at') }} 
                            <a href="https://openrouter.ai/keys" target="_blank" class="text-purple-600">openrouter.ai/keys</a>
                        </p>
                        <input type="hidden" name="service" value="openrouter">
                        <button type="submit" class="mt-4 px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700">
                            <i class="fas fa-save mr-2"></i>{{ openrouter_key ? t('form.update') : t('form.save') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Translations Tab -->
    <div id="content-translations" class="tab-content hidden">
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-6 py-5 border-b border-gray-200">
                <h2 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-language mr-2 text-purple-600"></i>{{ t('settings.translation_status') }}
                </h2>
            </div>
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ t('settings.language') }}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ t('settings.progress') }}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ t('settings.actions') }}</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for stat in translation_stats %}
                    <tr>
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                <span class="text-2xl mr-3">{{ getFlag(stat.code) }}</span>
                                <div>
                                    <div class="text-sm font-medium">{{ stat.name }}</div>
                                    <div class="text-xs text-gray-500">({{ stat.code }})</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            {% set percent = (stat.translated_count / stat.total_count * 100)|round %}
                            <div class="flex items-center">
                                <div class="w-full bg-gray-200 rounded-full h-2 mr-2">
                                    <div class="bg-purple-600 h-2 rounded-full" style="width: {{ percent }}%"></div>
                                </div>
                                <span class="text-sm">{{ percent }}%</span>
                            </div>
                            <div class="text-xs text-gray-500 mt-1">{{ stat.translated_count }} / {{ stat.total_count }}</div>
                        </td>
                        <td class="px-6 py-4 text-sm">
                            {% if stat.code != 'en' and stat.translated_count < stat.total_count %}
                            <button onclick="translateLanguage('{{ stat.code }}')" class="text-purple-600 hover:text-purple-900">
                                <i class="fas fa-robot mr-1"></i>{{ t('settings.auto_translate') }}
                            </button>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Users Tab -->
    {% if user.role == 'admin' %}
    <div id="content-users" class="tab-content hidden">
        <div class="bg-white shadow rounded-lg mb-6">
            <div class="px-6 py-5 border-b border-gray-200">
                <h2 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-user-plus mr-2 text-purple-600"></i>Add User
                </h2>
            </div>
            <div class="px-6 py-5">
                <form method="POST" action="/settings/add-user">
                    <div class="grid grid-cols-2 gap-4 max-w-2xl">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
                            <input type="text" name="name" required class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                            <input type="email" name="email" required class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
                            <input type="password" name="password" required minlength="6" class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Role</label>
                            <select name="role" class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
                                <option value="user">User</option>
                                <option value="admin">Administrator</option>
                            </select>
                        </div>
                    </div>
                    <button type="submit" class="mt-4 px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700">
                        <i class="fas fa-user-plus mr-2"></i>Add User
                    </button>
                </form>
            </div>
        </div>

        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-6 py-5 border-b border-gray-200">
                <h2 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-users mr-2 text-purple-600"></i>All Users
                </h2>
            </div>
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Role</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Created</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for u in users %}
                    <tr>
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                <i class="fas fa-user-circle text-gray-400 text-lg mr-2"></i>
                                <span class="text-sm font-medium">{{ u.name }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-500">{{ u.email }}</td>
                        <td class="px-6 py-4">
                            {% if u.role == 'admin' %}
                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800">Admin</span>
                            {% else %}
                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">User</span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-500">{{ u.created_at|date('Y-m-d') }}</td>
                        <td class="px-6 py-4 text-sm">
                            {% if u.id != user.id %}
                            <form method="POST" action="/settings/delete-user/{{ u.id }}" class="inline" onsubmit="return confirm('Delete {{ u.name }}?')">
                                <button type="submit" class="text-red-600 hover:text-red-900">
                                    <i class="fas fa-trash"></i> Delete
                                </button>
                            </form>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
</div>

<script>
function showTab(tab) {
    document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
    document.querySelectorAll('.tab-link').forEach(el => {
        el.classList.remove('border-purple-500', 'text-purple-600');
        el.classList.add('border-transparent', 'text-gray-500');
    });
    document.getElementById('content-' + tab).classList.remove('hidden');
    const link = document.getElementById('tab-' + tab);
    link.classList.remove('border-transparent', 'text-gray-500');
    link.classList.add('border-purple-500', 'text-purple-600');
    
    // Save active tab to URL hash
    window.location.hash = tab;
}

// Restore active tab on page load
document.addEventListener('DOMContentLoaded', function() {
    const hash = window.location.hash.substring(1);
    if (hash && document.getElementById('tab-' + hash)) {
        showTab(hash);
    }
});

function translateLanguage(lang) {
    if (!confirm('{{ t('settings.confirm_translate') }}')) return;
    const button = event.target.closest('button');
    const originalText = button.innerHTML;
    button.disabled = true;
    button.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> {{ t('form.processing') }}';
    
    fetch('/api/auth/token', { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, body: 'email=admin@amnez.ia&password=admin123' })
    .then(r => r.json())
    .then(auth => fetch('/api/translations/auto-translate', {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + auth.token},
        body: JSON.stringify({language: lang})
    }))
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            alert('{{ t('settings.translation_complete') }}: ' + data.stats.translated + '/' + data.stats.total);
            location.reload();
        } else {
            alert('{{ t('message.error') }}: ' + (data.error || 'Unknown error'));
            button.disabled = false;
            button.innerHTML = originalText;
        }
    })
    .catch(err => {
        alert('{{ t('message.error') }}: ' + err.message);
        button.disabled = false;
        button.innerHTML = originalText;
    });
}
</script>
{% endblock %}