{% extends "base.html" %}

{% block title %}Gnomenall Forte | Vault{% endblock %}

{% block content %}
<section class="section">
    <h2>{{ t('vault.title') }}</h2>
    <p class="stat-label">{{ t('vault.subtitle') }}</p>

    <div class="header-stats" style="margin-top: 16px;">
        <div class="stat-card">
            <div class="stat-label">{{ t('vault.status') }}</div>
            <div class="stat-value" id="vault-status">Зарежда се...</div>
            <div class="chip" id="vault-chip">—</div>
        </div>
        <div class="stat-card">
            <div class="stat-label">{{ t('vault.keys') }}</div>
            <div class="stat-value" id="vault-credentials-count">0</div>
            <div class="mono" id="vault-credentials-meta">—</div>
            <div class="stat-label" id="vault-last-updated">{{ t('vault.last_updated') }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-label">{{ t('vault.quick_action') }}</div>
            <div class="actions" style="margin-top: 8px;">
                <button class="btn secondary" type="button" id="quick-unlock">{{ t('vault.unlock') }}</button>
                <button class="btn secondary" type="button" id="quick-lock">{{ t('vault.lock') }}</button>
            </div>
        </div>
    </div>
</section>

<section class="section" id="vault-uninitialized" style="display:none;">
    <h2>{{ t('vault.uninitialized_title') }}</h2>
    <p class="stat-label">{{ t('vault.uninitialized_subtitle') }}</p>
    <div class="field">
        <label for="init-password">{{ t('vault.master_password') }}</label>
        <input type="password" id="init-password" placeholder="{{ t('vault.master_password') }}">
    </div>
    <div class="field">
        <label for="init-password-confirm">{{ t('vault.confirm_password') }}</label>
        <input type="password" id="init-password-confirm" placeholder="{{ t('vault.confirm_password') }}">
    </div>
    <div class="actions">
        <button class="btn" type="button" id="vault-init">{{ t('vault.init_button') }}</button>
    </div>
</section>

<section class="section" id="vault-locked" style="display:none;">
    <h2>{{ t('vault.locked_title') }}</h2>
    <p class="stat-label">{{ t('vault.locked_subtitle') }}</p>
    <div class="field">
        <label for="unlock-password">{{ t('vault.master_password') }}</label>
        <input type="password" id="unlock-password" placeholder="{{ t('vault.master_password') }}">
    </div>
    <div class="actions">
        <button class="btn" type="button" id="vault-unlock">{{ t('vault.unlock') }}</button>
    </div>
</section>

<section class="section" id="vault-unlocked" style="display:none;">
    <h2>{{ t('vault.manage_keys') }}</h2>
    <div class="grid two">
        <div>
            <div class="stat-label">{{ t('vault.stored_keys') }}</div>
            <div id="credentials-list" class="card-list"></div>
        </div>
        <div>
            <h3>{{ t('vault.add_new_key') }}</h3>
            <div class="field">
                <label for="credential-type">{{ t('vault.key_type') }}</label>
                <select id="credential-type">
                    <option value="lexica_api">Lexica API</option>
                    <option value="telegram_bot">Telegram Bot</option>
                    <option value="smtp_email">SMTP Email</option>
                </select>
            </div>
            <div class="field">
                <label for="credential-value">{{ t('vault.value') }}</label>
                <input type="password" id="credential-value" placeholder="{{ t('vault.value') }}">
            </div>
            <div class="field">
                <label for="credential-password">{{ t('vault.master_password_short') }}</label>
                <input type="password" id="credential-password" placeholder="{{ t('vault.master_password_short') }}">
            </div>
            <div class="actions">
                <button class="btn" type="button" id="credential-add">{{ t('vault.add_key') }}</button>
                <button class="btn secondary" type="button" id="vault-lock">{{ t('vault.lock_vault') }}</button>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block scripts %}
<script>
    const vaultStrings = {
        noKeys: "{{ t('vault.no_keys') }}",
        lastUpdatedEmpty: "{{ t('vault.last_updated') }}",
        lastKeyPrefix: "{{ t('vault.last_key_prefix') }}",
        statusError: "{{ t('vault.messages.status_error') }}",
        keysError: "{{ t('vault.messages.keys_error') }}",
        initMissing: "{{ t('vault.messages.init_missing') }}",
        initMismatch: "{{ t('vault.messages.init_mismatch') }}",
        initFailed: "{{ t('vault.messages.init_failed') }}",
        initSuccess: "{{ t('vault.messages.init_success') }}",
        initError: "{{ t('vault.messages.init_error') }}",
        unlockMissing: "{{ t('vault.messages.unlock_missing') }}",
        unlockFailed: "{{ t('vault.messages.unlock_failed') }}",
        unlockSuccess: "{{ t('vault.messages.unlock_success') }}",
        unlockError: "{{ t('vault.messages.unlock_error') }}",
        addMissing: "{{ t('vault.messages.add_missing') }}",
        addFailed: "{{ t('vault.messages.add_failed') }}",
        addSuccess: "{{ t('vault.messages.add_success') }}",
        addError: "{{ t('vault.messages.add_error') }}",
        lockFailed: "{{ t('vault.messages.lock_failed') }}",
        lockSuccess: "{{ t('vault.messages.lock_success') }}",
        lockError: "{{ t('vault.messages.lock_error') }}",
        quickUnlock: "{{ t('vault.messages.quick_unlock') }}"
    };
    const statusEl = document.getElementById('vault-status');
    const chipEl = document.getElementById('vault-chip');
    const sectionUninit = document.getElementById('vault-uninitialized');
    const sectionLocked = document.getElementById('vault-locked');
    const sectionUnlocked = document.getElementById('vault-unlocked');
    const credentialsList = document.getElementById('credentials-list');
    const credentialCount = document.getElementById('vault-credentials-count');
    const credentialMeta = document.getElementById('vault-credentials-meta');
    const lastUpdated = document.getElementById('vault-last-updated');

    const renderVaultState = (state) => {
        sectionUninit.style.display = state === 'UNINITIALIZED' ? 'block' : 'none';
        sectionLocked.style.display = state === 'LOCKED' ? 'block' : 'none';
        sectionUnlocked.style.display = state === 'UNLOCKED' ? 'block' : 'none';
        statusEl.textContent = state;
        chipEl.textContent = state === 'LOCKED' ? '🔒 LOCKED' : state === 'UNINITIALIZED' ? '⚠️ UNINITIALIZED' : '🔓 UNLOCKED';
        chipEl.classList.toggle('locked', state === 'LOCKED');
        chipEl.classList.toggle('unlocked', state === 'UNLOCKED');
    };

    const loadCredentials = async () => {
        try {
            const response = await fetch('/api/vault/credentials');
            const data = await response.json();
            const creds = data.credentials || [];
            credentialCount.textContent = String(creds.length);
            if (creds.length) {
                const last = creds[creds.length - 1];
                const label = last.credential_type || last.type || last.name || '—';
                const created = last.created_at ? new Date(last.created_at) : null;
                const createdLabel = created && !isNaN(created.getTime())
                    ? created.toLocaleString()
                    : '—';
                credentialMeta.textContent = `${vaultStrings.lastKeyPrefix}${label}`;
                lastUpdated.textContent = `${vaultStrings.lastUpdatedEmpty.replace('—', createdLabel)}`;
            } else {
                credentialMeta.textContent = '—';
                lastUpdated.textContent = vaultStrings.lastUpdatedEmpty;
            }
            if (!creds.length) {
                credentialsList.innerHTML = `<div class="stat-label">${vaultStrings.noKeys}</div>`;
                return;
            }
            credentialsList.innerHTML = creds.map((c) => `
                <div class="section" style="margin-bottom: 10px;">
                    <div class="stat-value">${c.credential_type || c.type || c.name}</div>
                    <div class="stat-label">ID: ${c.id || '—'}</div>
                    <div class="stat-label">Създаден: ${c.created_at || '—'}</div>
                </div>
            `).join('');
        } catch (err) {
            window.GNOMENALL_UI.pushLocalNotice('error', vaultStrings.keysError);
        }
    };

    const refreshVault = async () => {
        try {
            const response = await fetch('/api/vault/status');
            const data = await response.json();
            renderVaultState(data.state || 'UNINITIALIZED');
            if (data.state === 'UNLOCKED') {
                await loadCredentials();
            }
        } catch (err) {
            window.GNOMENALL_UI.pushLocalNotice('error', vaultStrings.statusError);
        }
    };

    document.getElementById('vault-init').addEventListener('click', async () => {
        const pw = document.getElementById('init-password').value.trim();
        const confirm = document.getElementById('init-password-confirm').value.trim();
        if (!pw || !confirm) {
            window.GNOMENALL_UI.pushLocalNotice('error', vaultStrings.initMissing);
            return;
        }
        if (pw !== confirm) {
            window.GNOMENALL_UI.pushLocalNotice('error', vaultStrings.initMismatch);
            return;
        }
        try {
            const response = await fetch('/api/vault/setup', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ master_password: pw })
            });
            const data = await response.json();
            if (!response.ok) {
                window.GNOMENALL_UI.pushLocalNotice('error', data.error || vaultStrings.initFailed);
            } else {
                window.GNOMENALL_UI.pushLocalNotice('success', data.message || vaultStrings.initSuccess);
                await refreshVault();
            }
        } catch (err) {
            window.GNOMENALL_UI.pushLocalNotice('error', vaultStrings.initError);
        }
    });

    document.getElementById('vault-unlock').addEventListener('click', async () => {
        const pw = document.getElementById('unlock-password').value.trim();
        if (!pw) {
            window.GNOMENALL_UI.pushLocalNotice('error', vaultStrings.unlockMissing);
            return;
        }
        try {
            const response = await fetch('/api/vault/unlock', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ master_password: pw })
            });
            const data = await response.json();
            if (!response.ok) {
                window.GNOMENALL_UI.pushLocalNotice('error', data.error || vaultStrings.unlockFailed);
            } else {
                window.GNOMENALL_UI.pushLocalNotice('success', data.message || vaultStrings.unlockSuccess);
                await refreshVault();
            }
        } catch (err) {
            window.GNOMENALL_UI.pushLocalNotice('error', vaultStrings.unlockError);
        }
    });

    document.getElementById('credential-add').addEventListener('click', async () => {
        const credentialType = document.getElementById('credential-type').value;
        const credentialValue = document.getElementById('credential-value').value.trim();
        const masterPassword = document.getElementById('credential-password').value.trim();
        if (!credentialValue || !masterPassword) {
            window.GNOMENALL_UI.pushLocalNotice('error', vaultStrings.addMissing);
            return;
        }
        try {
            const response = await fetch('/api/vault/credentials', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    credential_type: credentialType,
                    credential_value: credentialValue,
                    master_password: masterPassword
                })
            });
            const data = await response.json();
            if (!response.ok) {
                window.GNOMENALL_UI.pushLocalNotice('error', data.error || vaultStrings.addFailed);
            } else {
                window.GNOMENALL_UI.pushLocalNotice('success', data.message || vaultStrings.addSuccess);
                document.getElementById('credential-value').value = '';
                document.getElementById('credential-password').value = '';
                await refreshVault();
            }
        } catch (err) {
            window.GNOMENALL_UI.pushLocalNotice('error', vaultStrings.addError);
        }
    });

    document.getElementById('vault-lock').addEventListener('click', async () => {
        try {
            const response = await fetch('/api/vault/lock', { method: 'POST' });
            const data = await response.json();
            if (!response.ok) {
                window.GNOMENALL_UI.pushLocalNotice('error', data.error || vaultStrings.lockFailed);
            } else {
                window.GNOMENALL_UI.pushLocalNotice('success', data.message || vaultStrings.lockSuccess);
                await refreshVault();
            }
        } catch (err) {
            window.GNOMENALL_UI.pushLocalNotice('error', vaultStrings.lockError);
        }
    });

    document.getElementById('quick-unlock').addEventListener('click', () => {
        const target = document.getElementById('unlock-password');
        if (target) target.focus();
        window.GNOMENALL_UI.pushLocalNotice('info', vaultStrings.quickUnlock);
    });

    document.getElementById('quick-lock').addEventListener('click', async () => {
        try {
            const response = await fetch('/api/vault/lock', { method: 'POST' });
            const data = await response.json();
            if (!response.ok) {
                window.GNOMENALL_UI.pushLocalNotice('error', data.error || vaultStrings.lockFailed);
            } else {
                window.GNOMENALL_UI.pushLocalNotice('success', data.message || vaultStrings.lockSuccess);
                await refreshVault();
            }
        } catch (err) {
            window.GNOMENALL_UI.pushLocalNotice('error', vaultStrings.lockError);
        }
    });

    refreshVault();

    const unlockInput = document.getElementById('unlock-password');
    if (unlockInput) {
        unlockInput.addEventListener('keydown', (event) => {
            if (event.key === 'Enter') {
                event.preventDefault();
                document.getElementById('vault-unlock').click();
            }
        });
    }

    const initConfirm = document.getElementById('init-password-confirm');
    if (initConfirm) {
        initConfirm.addEventListener('keydown', (event) => {
            if (event.key === 'Enter') {
                event.preventDefault();
                document.getElementById('vault-init').click();
            }
        });
    }
</script>
{% endblock %}