{% extends "base.html" %}

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

{% block content %}
<style>
    .btn-spinner {
        display: none;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.35);
        border-top-color: var(--accent-2);
        margin-right: 8px;
        animation: spin 0.9s linear infinite;
    }

    .btn-loading .btn-spinner {
        display: inline-block;
    }

    .btn-loading .btn-label {
        opacity: 0.7;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .screen-blocker {
        position: fixed;
        inset: 0;
        background: rgba(7, 18, 18, 0.72);
        backdrop-filter: blur(4px);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

    .screen-blocker.active {
        display: flex;
    }

    .blocker-card {
        background: rgba(15, 76, 90, 0.95);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 24px 28px;
        display: flex;
        align-items: center;
        gap: 14px;
        color: var(--text);
        font-weight: 600;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    }

    .blocker-spinner {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 3px solid rgba(255, 255, 255, 0.25);
        border-top-color: var(--accent-2);
        animation: spin 0.9s linear infinite;
    }

    .forge-stepper {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin: 18px 0 26px;
    }

    .forge-step {
        background: rgba(13, 46, 52, 0.65);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 12px 14px;
        text-align: left;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 10px;
        position: relative;
        overflow: hidden;
    }

    .forge-step::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(255, 140, 0, 0.12), transparent 60%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .forge-step.active {
        border-color: rgba(255, 215, 0, 0.6);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    }

    .forge-step.active::after {
        opacity: 1;
    }

    .forge-step span {
        z-index: 1;
    }

    .forge-dropzone {
        border: 2px dashed rgba(255, 215, 0, 0.5);
        border-radius: 16px;
        padding: 18px;
        background: rgba(10, 40, 46, 0.55);
        transition: border-color 0.2s ease, background 0.2s ease;
        display: grid;
        gap: 12px;
    }

    .forge-dropzone.dragover {
        border-color: var(--accent);
        background: rgba(20, 74, 86, 0.75);
    }

    .dropzone-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .media-list {
        max-height: 180px;
        overflow-y: auto;
        background: rgba(0, 0, 0, 0.18);
        border-radius: 12px;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .media-item {
        display: flex;
        justify-content: space-between;
        font-size: 0.82rem;
        padding: 6px 0;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    }

    .media-item:last-child {
        border-bottom: none;
    }

    .cover-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 12px;
        margin-top: 12px;
    }

    .cover-card {
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(0, 0, 0, 0.25);
        cursor: pointer;
        transition: transform 0.2s ease, border-color 0.2s ease;
    }

    .cover-card.active {
        border-color: var(--accent-2);
        transform: translateY(-2px);
    }

    .cover-card img {
        width: 100%;
        height: 96px;
        object-fit: cover;
        display: block;
    }

    .cover-label {
        padding: 8px 10px;
        font-size: 0.75rem;
        color: var(--muted);
    }

    .nfo-preview {
        background: rgba(0, 0, 0, 0.35);
        border-radius: 14px;
        padding: 14px;
        font-family: "Consolas", "Courier New", monospace;
        font-size: 0.78rem;
        white-space: pre-wrap;
        border: 1px solid rgba(255, 255, 255, 0.08);
        max-height: 280px;
        overflow-y: auto;
    }

    .forge-progress {
        height: 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.1);
        overflow: hidden;
        margin-top: 8px;
    }

    .forge-progress-bar {
        height: 100%;
        width: 0;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        transition: width 0.2s ease;
    }

    .toast-stack {
        position: fixed;
        bottom: 24px;
        right: 24px;
        display: grid;
        gap: 10px;
        z-index: 10000;
    }

    .toast {
        background: rgba(255, 140, 0, 0.95);
        color: #1b0f00;
        padding: 12px 16px;
        border-radius: 12px;
        font-weight: 600;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
        animation: toastIn 0.25s ease;
    }

    @keyframes toastIn {
        from { transform: translateY(10px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
</style>
<div class="screen-blocker" id="forge-blocker" aria-hidden="true">
    <div class="blocker-card">
        <span class="blocker-spinner" aria-hidden="true"></span>
        <span data-i18n="forge.blocker_text">{{ t('forge.blocker_text') }}</span>
    </div>
</div>
<section class="section">
    <h2 data-i18n="forge.title">{{ t('forge.title') }}</h2>
    <p class="stat-label" data-i18n="forge.subtitle">{{ t('forge.subtitle') }}</p>
    <div class="forge-stepper" id="forge-stepper">
        <div class="forge-step active" data-step="upload"><span>Upload</span></div>
        <div class="forge-step" data-step="metadata"><span>Metadata</span></div>
        <div class="forge-step" data-step="forge"><span>Forge Torrent</span></div>
        <div class="forge-step" data-step="blast"><span>Sign &amp; Blast</span></div>
    </div>
    <form id="forge-form">
        <div class="field">
            <label>Media Dropzone</label>
            <div class="forge-dropzone" id="media-dropzone">
                <div class="stat-label">Плъзнете файлове тук или използвайте бутона за избор.</div>
                <div class="dropzone-actions">
                    <button class="btn secondary" type="button" id="media-browse">Добави файлове</button>
                    <button class="btn secondary" type="button" id="media-clear">Изчисти</button>
                </div>
                <input type="file" id="media-drop-input" multiple style="display:none">
                <div class="media-list" id="media-list"></div>
            </div>
        </div>
        <div class="field">
            <label for="title" data-i18n="forge.fields.title">{{ t('forge.fields.title') }}</label>
            <input type="text" id="title" name="title" required>
        </div>
        <div class="field">
            <label for="description" data-i18n="forge.fields.description">{{ t('forge.fields.description') }}</label>
            <div class="field-row textarea">
                <textarea id="description" name="description" data-import="text" data-import-accept=".md,.markdown,.txt" required></textarea>
                <button type="button" class="icon-overlay tooltip" data-import-button data-tip="{{ t('forge.fields.description_import_tip') }}" aria-label="Import markdown">
                    &#8679;
                </button>
            </div>
            <div class="stat-label" data-i18n="forge.fields.description_import_hint">{{ t('forge.fields.description_import_hint') }}</div>
        </div>

    <div class="grid two">
        <div class="field">
            <label for="torrent-file" data-i18n="forge.fields.torrent_file">{{ t('forge.fields.torrent_file') }}</label>
            <div class="field-row">
                <input type="text" id="torrent-file" placeholder="{{ t('forge.fields.torrent_file_placeholder') }}">
                <button type="button" class="btn secondary" id="torrent-browse" data-i18n="forge.fields.browse">{{ t('forge.fields.browse') }}</button>
            </div>
            <input type="file" id="torrent-file-input" style="display:none">
            <div class="stat-label" data-i18n="forge.fields.torrent_file_hint">{{ t('forge.fields.torrent_file_hint') }}</div>
        </div>

        <div class="field">
            <label for="torrent-folder" data-i18n="forge.fields.torrent_folder">{{ t('forge.fields.torrent_folder') }}</label>
            <div class="field-row">
                <input type="text" id="torrent-folder" placeholder="{{ t('forge.fields.torrent_folder_placeholder') }}">
                <button type="button" class="btn secondary" id="torrent-folder-browse" data-i18n="forge.fields.browse">{{ t('forge.fields.browse') }}</button>
            </div>
            <input type="file" id="torrent-folder-input" style="display:none" webkitdirectory directory>
            <div class="stat-label" data-i18n="forge.fields.torrent_folder_hint">{{ t('forge.fields.torrent_folder_hint') }}</div>
        </div>
    </div>

        <div class="field">
            <label>Cover Selector</label>
            <div class="stat-label">Изберете корица от наличните изображения.</div>
            <div class="cover-grid" id="cover-grid"></div>
        </div>

        <div class="actions">
            <button class="btn secondary" type="button" id="torrent-create">
                <span class="btn-spinner" id="torrent-spinner" aria-hidden="true"></span>
                <span class="btn-label" data-i18n="forge.fields.create_torrent">{{ t('forge.fields.create_torrent') }}</span>
            </button>
        </div>

        <div class="field">
            <label for="torrent-path" data-i18n="forge.fields.torrent_path">{{ t('forge.fields.torrent_path') }}</label>
            <input type="text" id="torrent-path" name="torrent_path" readonly>
        </div>
        <div class="field">
            <label>Forge Progress</label>
            <div class="forge-progress">
                <div class="forge-progress-bar" id="forge-progress-bar"></div>
            </div>
        </div>
        <input type="hidden" id="media-source-path" name="media_source_path">

        <div class="field">
            <label for="magnet" data-i18n="forge.fields.magnet">{{ t('forge.fields.magnet') }}</label>
            <div class="field-row">
                <input type="text" id="magnet" name="magnet">
                <button class="btn secondary" type="button" id="magnet-copy" data-i18n="forge.fields.magnet_copy">{{ t('forge.fields.magnet_copy') }}</button>
            </div>
        </div>

        <div class="grid two">
            <div class="field">
                <label for="publisher" data-i18n="forge.fields.publisher">{{ t('forge.fields.publisher') }}</label>
                <input type="text" id="publisher" name="publisher" value="{{ identity_alias }}">
            </div>
            <div class="field">
                <label for="cover_image" data-i18n="forge.fields.cover">{{ t('forge.fields.cover') }}
                    <span class="info-badge tooltip" data-tip="{{ t('forge.fields.cover_tip') }}">i</span>
                </label>
                <div class="field-row">
                    <input type="text" id="cover_image" name="cover_image" placeholder="{{ t('forge.fields.cover_placeholder') }}">
                    <button type="button" class="btn secondary" id="cover-browse" data-i18n="forge.fields.cover_browse">{{ t('forge.fields.cover_browse') }}</button>
                </div>
                <input type="file" id="cover-file-input" name="cover_file" accept="image/*,video/webm,video/mp4,video/*" style="display:none">
                <div class="stat-label" data-i18n="forge.fields.cover_hint">{{ t('forge.fields.cover_hint') }}</div>
            </div>
        </div>

        <div class="grid two">
            <div class="field">
                <label for="subs">Subs</label>
                <input type="text" id="subs" name="subs" placeholder="bg, en">
            </div>
            <div class="field">
                <label for="audio_stream">Audio Stream</label>
                <input type="text" id="audio_stream" name="audio_stream" placeholder="BG 5.1, EN 2.0">
            </div>
        </div>
        <div class="field">
            <label for="video_embed">Video Embed (Optional)</label>
            <input type="text" id="video_embed" name="video_embed" placeholder="https://...">
        </div>

        <div class="field">
            <label for="info" data-i18n="forge.fields.info">{{ t('forge.fields.info') }}</label>
            <textarea id="info" name="info"></textarea>
        </div>
        <div class="field">
            <label>NFO Live Preview</label>
            <pre class="nfo-preview" id="nfo-preview"></pre>
        </div>

        <div class="field">
            <label for="master-passphrase">Master Passphrase</label>
            <input type="password" id="master-passphrase" autocomplete="off" placeholder="Само за финалния подпис">
        </div>

        <div class="actions">
            <button class="btn" type="submit" id="forge-submit" data-i18n="forge.fields.submit">{{ t('forge.fields.submit') }}</button>
        </div>
        <p class="stat-label" id="forge-hint"></p>
    </form>
</section>

<div class="toast-stack" id="toast-stack"></div>

<div class="modal" id="fs-modal">
    <div class="modal-card">
        <div class="grid two">
            <div>
                <div class="stat-label" data-i18n="forge.modal.current_path">{{ t('forge.modal.current_path') }}</div>
                <div class="mono" id="fs-current">—</div>
            </div>
            <div class="actions" style="justify-content:flex-end;">
                <button class="btn secondary" type="button" id="fs-up" data-i18n="forge.modal.up">{{ t('forge.modal.up') }}</button>
                <button class="btn secondary" type="button" id="fs-refresh" data-i18n="forge.modal.refresh">{{ t('forge.modal.refresh') }}</button>
                <button class="btn secondary" type="button" id="fs-close" data-i18n="forge.modal.close">{{ t('forge.modal.close') }}</button>
            </div>
        </div>
        <div class="modal-list" id="fs-list"></div>
        <div class="actions" style="justify-content:space-between;">
            <div>
                <div class="stat-label" id="fs-selected" data-i18n="forge.modal.selected">{{ t('forge.modal.selected') }}: —</div>
                <label class="stat-label" style="display:flex; align-items:center; gap:6px; margin-top:6px;">
                    <input type="checkbox" id="fs-default" />
                    <span data-i18n="forge.modal.use_default">{{ t('forge.modal.use_default') }}</span>
                </label>
            </div>
            <div class="actions">
                <button class="btn secondary" type="button" id="fs-select-current" data-i18n="forge.modal.use_current">{{ t('forge.modal.use_current') }}</button>
                <button class="btn" type="button" id="fs-choose" data-i18n="forge.modal.select">{{ t('forge.modal.select') }}</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const forgeForm = document.getElementById('forge-form');
    const forgeSubmit = document.getElementById('forge-submit');
    const forgeHint = document.getElementById('forge-hint');

    const i18nFallback = {
        vaultLocked: "{{ t('forge.notices.vault_locked') }}",
        vaultCheckFailed: "{{ t('forge.notices.vault_check_failed') }}",
        loadCellFailed: "{{ t('forge.notices.load_cell_failed') }}",
        loadCellError: "{{ t('forge.notices.load_cell_error') }}",
        loadedExisting: "{{ t('forge.notices.loaded_existing') }}",
        selectSource: "{{ t('forge.notices.select_source') }}",
        createTorrentStart: "{{ t('forge.notices.create_torrent_start') }}",
        createTorrentFailed: "{{ t('forge.notices.create_torrent_failed') }}",
        torrentCreated: "{{ t('forge.notices.torrent_created') }}",
        createTorrentError: "{{ t('forge.notices.create_torrent_error') }}",
        signSubmitStart: "{{ t('forge.notices.sign_submit_start') }}",
        autoTorrentFailed: "{{ t('forge.notices.auto_torrent_failed') }}",
        submitFailed: "{{ t('forge.notices.submit_failed') }}",
        submitSuccess: "{{ t('forge.notices.submit_success') }}",
        serverDisconnect: "{{ t('forge.notices.server_disconnect') }}",
        coverSelected: "{{ t('forge.notices.cover_selected') }}",
        fsLoadFailed: "{{ t('forge.notices.fs_load_failed') }}",
        fsLoadError: "{{ t('forge.notices.fs_load_error') }}",
        copyPathSuccess: "{{ t('forge.notices.copy_path_success') }}",
        copyPathFailed: "{{ t('forge.notices.copy_path_failed') }}",
        magnetMissing: "{{ t('forge.notices.magnet_missing') }}",
        magnetCopied: "{{ t('forge.notices.magnet_copied') }}",
        modalSelected: "{{ t('forge.modal.selected') }}"
    };
    let i18n = { ...i18nFallback };
    const getText = (key, fallbackValue) => {
        if (window.GNOMENALL_UI && typeof window.GNOMENALL_UI.translate === 'function') {
            return window.GNOMENALL_UI.translate(key);
        }
        return fallbackValue;
    };
    const refreshI18n = () => {
        i18n = {
            vaultLocked: getText('forge.notices.vault_locked', i18nFallback.vaultLocked),
            vaultCheckFailed: getText('forge.notices.vault_check_failed', i18nFallback.vaultCheckFailed),
            loadCellFailed: getText('forge.notices.load_cell_failed', i18nFallback.loadCellFailed),
            loadCellError: getText('forge.notices.load_cell_error', i18nFallback.loadCellError),
            loadedExisting: getText('forge.notices.loaded_existing', i18nFallback.loadedExisting),
            selectSource: getText('forge.notices.select_source', i18nFallback.selectSource),
            createTorrentStart: getText('forge.notices.create_torrent_start', i18nFallback.createTorrentStart),
            createTorrentFailed: getText('forge.notices.create_torrent_failed', i18nFallback.createTorrentFailed),
            torrentCreated: getText('forge.notices.torrent_created', i18nFallback.torrentCreated),
            createTorrentError: getText('forge.notices.create_torrent_error', i18nFallback.createTorrentError),
            signSubmitStart: getText('forge.notices.sign_submit_start', i18nFallback.signSubmitStart),
            autoTorrentFailed: getText('forge.notices.auto_torrent_failed', i18nFallback.autoTorrentFailed),
            submitFailed: getText('forge.notices.submit_failed', i18nFallback.submitFailed),
            submitSuccess: getText('forge.notices.submit_success', i18nFallback.submitSuccess),
            serverDisconnect: getText('forge.notices.server_disconnect', i18nFallback.serverDisconnect),
            coverSelected: getText('forge.notices.cover_selected', i18nFallback.coverSelected),
            fsLoadFailed: getText('forge.notices.fs_load_failed', i18nFallback.fsLoadFailed),
            fsLoadError: getText('forge.notices.fs_load_error', i18nFallback.fsLoadError),
            copyPathSuccess: getText('forge.notices.copy_path_success', i18nFallback.copyPathSuccess),
            copyPathFailed: getText('forge.notices.copy_path_failed', i18nFallback.copyPathFailed),
            magnetMissing: getText('forge.notices.magnet_missing', i18nFallback.magnetMissing),
            magnetCopied: getText('forge.notices.magnet_copied', i18nFallback.magnetCopied),
            modalSelected: getText('forge.modal.selected', i18nFallback.modalSelected)
        };
    };
    refreshI18n();
    if (window.GNOMENALL_UI) {
        window.GNOMENALL_UI.onLocaleChange = refreshI18n;
    }

    const formatText = (template, values = {}) => {
        let result = template || '';
        Object.entries(values).forEach(([key, value]) => {
            result = result.replace(`{${key}}`, value);
        });
        return result;
    };

    const torrentFileInput = document.getElementById('torrent-file-input');
    const torrentFileField = document.getElementById('torrent-file');
    const torrentBrowse = document.getElementById('torrent-browse');
    const torrentFolderInput = document.getElementById('torrent-folder-input');
    const torrentFolderField = document.getElementById('torrent-folder');
    const torrentFolderBrowse = document.getElementById('torrent-folder-browse');
    const fsModal = document.getElementById('fs-modal');
    const fsList = document.getElementById('fs-list');
    const fsCurrent = document.getElementById('fs-current');
    const fsSelected = document.getElementById('fs-selected');
    const fsUp = document.getElementById('fs-up');
    const fsRefresh = document.getElementById('fs-refresh');
    const fsClose = document.getElementById('fs-close');
    const fsChoose = document.getElementById('fs-choose');
    const fsDefault = document.getElementById('fs-default');
    const fsSelectCurrent = document.getElementById('fs-select-current');
    let fsMode = 'file';
    let fsPath = '';
    let fsParent = '';
    let fsSelectedPath = '';
    const torrentCreate = document.getElementById('torrent-create');
    const torrentSpinner = document.getElementById('torrent-spinner');
    const forgeBlocker = document.getElementById('forge-blocker');
    const magnetOutput = document.getElementById('magnet');
    const magnetCopy = document.getElementById('magnet-copy');
    const coverBrowse = document.getElementById('cover-browse');
    const coverFileInput = document.getElementById('cover-file-input');
    const mediaDropzone = document.getElementById('media-dropzone');
    const mediaDropInput = document.getElementById('media-drop-input');
    const mediaList = document.getElementById('media-list');
    const mediaBrowse = document.getElementById('media-browse');
    const mediaClear = document.getElementById('media-clear');
    const coverGrid = document.getElementById('cover-grid');
    const nfoPreview = document.getElementById('nfo-preview');
    const stepper = document.getElementById('forge-stepper');
    const progressBar = document.getElementById('forge-progress-bar');
    const toastStack = document.getElementById('toast-stack');
    const masterPassphrase = document.getElementById('master-passphrase');
    let mediaFiles = [];

    const showToast = (message) => {
        if (!toastStack || !message) return;
        const node = document.createElement('div');
        node.className = 'toast';
        node.textContent = message;
        toastStack.appendChild(node);
        setTimeout(() => {
            node.remove();
        }, 3200);
    };

    const formatBytes = (value) => {
        const bytes = Number(value) || 0;
        if (bytes < 1024) return `${bytes} B`;
        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
        if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
        return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
    };

    const updateVaultState = async () => {
        try {
            const response = await fetch('/api/vault/status');
            const vault = await response.json();
            if (vault.state === 'LOCKED') {
                forgeSubmit.disabled = true;
                forgeHint.textContent = i18n.vaultLocked;
            } else {
                forgeSubmit.disabled = false;
                forgeHint.textContent = '';
            }
        } catch (err) {
            forgeHint.textContent = i18n.vaultCheckFailed;
        }
    };

    const setStepperState = (step, active) => {
        if (!stepper) return;
        const node = stepper.querySelector(`[data-step="${step}"]`);
        if (!node) return;
        if (active) {
            node.classList.add('active');
        } else {
            node.classList.remove('active');
        }
    };

    const updateStepper = () => {
        const hasMedia = mediaFiles.length > 0;
        const hasMetadata = Boolean(document.getElementById('description').value.trim());
        const hasTorrent = Boolean(document.getElementById('torrent-path').value.trim() || magnetOutput.value.trim());
        setStepperState('upload', hasMedia);
        setStepperState('metadata', hasMetadata);
        setStepperState('forge', hasTorrent);
        setStepperState('blast', false);
    };

    const renderMediaList = () => {
        if (!mediaList) return;
        const files = mediaFiles.slice();
        if (!files.length) {
            mediaList.innerHTML = '<div class="stat-label">Няма добавени файлове.</div>';
            return;
        }
        mediaList.innerHTML = files
            .map((file) => {
                return `
                    <div class="media-item">
                        <span>${file.name}</span>
                        <span>${formatBytes(file.size)}</span>
                    </div>
                `;
            })
            .join('');
    };

    let previewTimer = null;
    const updateNfoPreview = () => {
        if (!nfoPreview) return;
        if (previewTimer) {
            clearTimeout(previewTimer);
        }
        previewTimer = setTimeout(async () => {
            const files = mediaFiles.slice();
            const payload = {
                title: document.getElementById('title').value.trim(),
                category: document.getElementById('info').value.trim() ? 'Info' : 'Uncategorized',
                message: document.getElementById('description').value.trim(),
                public_key: document.getElementById('publisher').value.trim() || 'Unknown',
                files: files.map((file) => ({ name: file.name, size: file.size }))
            };
            try {
                const response = await fetch('/api/forge/nfo_preview', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                });
                const data = await response.json();
                if (!response.ok) {
                    showToast(data.error || 'Грешка при NFO преглед');
                    return;
                }
                nfoPreview.textContent = data.preview || '';
            } catch (err) {
                showToast('Грешка при NFO преглед');
            }
        }, 240);
    };

    const loadCoverGallery = async () => {
        if (!coverGrid) return;
        try {
            const response = await fetch('/api/forge/covers');
            const data = await response.json();
            if (!response.ok || !data.covers) {
                return;
            }
            coverGrid.innerHTML = data.covers.map((cover) => {
                return `
                    <div class="cover-card" data-cover="${cover.url}">
                        <img src="${cover.url}" alt="${cover.name}">
                        <div class="cover-label">${cover.name}</div>
                    </div>
                `;
            }).join('');
        } catch (err) {
            return;
        }
    };

    const loadExistingCell = async () => {
        const params = new URLSearchParams(window.location.search);
        const itemId = params.get('item_id');
        if (!itemId) return;

        try {
            const response = await fetch(`/api/items/${itemId}`);
            const item = await response.json();
            if (!response.ok) {
                window.GNOMENALL_UI.pushLocalNotice('error', item.error || i18n.loadCellFailed);
                return;
            }
            let data = item.data || {};
            if (typeof data === 'string') {
                try {
                    data = JSON.parse(data);
                } catch {
                    data = {};
                }
            }
            document.getElementById('title').value = data.title || '';
            document.getElementById('description').value = data.description || '';
            document.getElementById('publisher').value = data.publisher || '';
            document.getElementById('info').value = data.info || '';
            document.getElementById('cover_image').value = data.cover_image || data.cover_source_url || '';
            if (data.magnet) {
                magnetOutput.value = data.magnet;
            }

            const cellResponse = await fetch(`/api/library/${itemId}/cell`);
            const cellData = await cellResponse.json();
            if (cellResponse.ok && cellData.local_paths) {
                const mediaPath = cellData.local_paths.media_source_path || '';
                document.getElementById('media-source-path').value = mediaPath;
                if (mediaPath) {
                    if (cellData.local_paths.media_torrent_path) {
                        document.getElementById('torrent-path').value = cellData.local_paths.media_torrent_path;
                    }
                }
            }

            window.GNOMENALL_UI.pushLocalNotice('info', i18n.loadedExisting);
            updateStepper();
            updateNfoPreview();
        } catch (err) {
            window.GNOMENALL_UI.pushLocalNotice('error', i18n.loadCellError);
        }
    };

    const createTorrentFromSource = async () => {
        const file = torrentFileInput.files && torrentFileInput.files[0];
        const folderFiles = torrentFolderInput.files && torrentFolderInput.files.length
            ? Array.from(torrentFolderInput.files)
            : [];
        const source = resolveSourcePath();
        if (!file && !folderFiles.length && !source.path) {
            window.GNOMENALL_UI.pushLocalNotice('error', i18n.selectSource);
            showToast(i18n.selectSource);
            return null;
        }
        torrentCreate.disabled = true;
        forgeSubmit.disabled = true;
        torrentCreate.classList.add('btn-loading');
        let progress = 12;
        let progressTimer = null;
        if (progressBar) {
            progressBar.style.width = '12%';
            progressTimer = setInterval(() => {
                progress = Math.min(85, progress + Math.random() * 8);
                progressBar.style.width = `${progress}%`;
            }, 220);
        }
        if (torrentSpinner) torrentSpinner.setAttribute('aria-hidden', 'false');
        if (forgeBlocker) {
            forgeBlocker.classList.add('active');
            forgeBlocker.setAttribute('aria-hidden', 'false');
        }
        window.GNOMENALL_UI.pushLocalNotice('info', i18n.createTorrentStart);
        const formData = new FormData();
        if (source.path) {
            formData.append('source_path', source.path);
            formData.append('source_kind', source.kind);
        } else if (file) {
            formData.append('file', file);
        } else {
            folderFiles.forEach((entry) => formData.append('folder_files', entry));
        }
        try {
            const response = await fetch('/api/forge/create_torrent', {
                method: 'POST',
                body: formData
            });
            const data = await response.json();
            if (!response.ok) {
                window.GNOMENALL_UI.pushLocalNotice('error', data.error || i18n.createTorrentFailed);
                showToast(data.error || i18n.createTorrentFailed);
                return null;
            }
            magnetOutput.value = data.magnet || '';
            const torrentPathField = document.getElementById('torrent-path');
            if (torrentPathField) torrentPathField.value = data.torrent_path || '';
            document.getElementById('media-source-path').value = source.path || '';
            window.GNOMENALL_UI.pushLocalNotice('success', i18n.torrentCreated);
            updateStepper();
            return data;
        } catch (err) {
            window.GNOMENALL_UI.pushLocalNotice('error', i18n.createTorrentError);
            showToast(i18n.createTorrentError);
            return null;
        } finally {
            torrentCreate.disabled = false;
            forgeSubmit.disabled = false;
            torrentCreate.classList.remove('btn-loading');
            if (progressTimer) clearInterval(progressTimer);
            if (progressBar) progressBar.style.width = '100%';
            if (torrentSpinner) torrentSpinner.setAttribute('aria-hidden', 'true');
            if (forgeBlocker) {
                forgeBlocker.classList.remove('active');
                forgeBlocker.setAttribute('aria-hidden', 'true');
            }
        }
    };

    forgeForm.addEventListener('submit', async (event) => {
        event.preventDefault();
        forgeSubmit.disabled = true;
        window.GNOMENALL_UI.pushLocalNotice('info', i18n.signSubmitStart);
        const passphrase = masterPassphrase ? masterPassphrase.value.trim() : '';
        try {
            const vaultResponse = await fetch('/api/vault/status');
            const vault = await vaultResponse.json();
            if (vault.state === 'LOCKED') {
                if (!passphrase) {
                    showToast(i18n.vaultLocked);
                    forgeSubmit.disabled = false;
                    return;
                }
                const unlockResponse = await fetch('/api/vault/unlock', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ passphrase })
                });
                const unlockData = await unlockResponse.json();
                if (!unlockResponse.ok) {
                    showToast(unlockData.error || i18n.vaultLocked);
                    forgeSubmit.disabled = false;
                    return;
                }
            }
        } catch (err) {
            showToast(i18n.vaultCheckFailed);
            forgeSubmit.disabled = false;
            return;
        } finally {
            if (masterPassphrase) {
                masterPassphrase.value = '';
            }
        }
        const source = resolveSourcePath();
        document.getElementById('media-source-path').value = source.path || '';

        const torrentPathField = document.getElementById('torrent-path');
        const hasTorrent = (torrentPathField && torrentPathField.value.trim()) || magnetOutput.value.trim();
        if (!hasTorrent && source.path) {
            const created = await createTorrentFromSource();
            if (!created) {
                window.GNOMENALL_UI.pushLocalNotice('error', i18n.autoTorrentFailed);
                showToast(i18n.autoTorrentFailed);
                forgeSubmit.disabled = false;
                return;
            }
        }

        try {
            const response = await fetch('/api/forge/submit', {
                method: 'POST',
                body: new FormData(forgeForm)
            });
            const data = await response.json();
            if (!response.ok) {
                window.GNOMENALL_UI.pushLocalNotice('error', data.error || i18n.submitFailed);
                showToast(data.error || i18n.submitFailed);
            } else {
                window.GNOMENALL_UI.pushLocalNotice('success', i18n.submitSuccess);
                forgeForm.reset();
                window.location.href = '/';
            }
        } catch (err) {
            window.GNOMENALL_UI.pushLocalNotice('error', i18n.serverDisconnect);
            showToast(i18n.serverDisconnect);
        } finally {
            await updateVaultState();
        }
    });

    if (coverBrowse) {
        coverBrowse.addEventListener('click', () => coverFileInput.click());
    }
    if (coverFileInput) {
        coverFileInput.addEventListener('change', () => {
            const file = coverFileInput.files && coverFileInput.files[0];
            if (file) {
                document.getElementById('cover_image').value = file.name;
                const sizeMb = (file.size / (1024 * 1024)).toFixed(2);
                window.GNOMENALL_UI.pushLocalNotice(
                    'info',
                    formatText(i18n.coverSelected, { name: file.name, size: sizeMb })
                );
                updateNfoPreview();
            }
        });
    }

    if (mediaBrowse) {
        mediaBrowse.addEventListener('click', () => mediaDropInput.click());
    }
    if (mediaClear) {
        mediaClear.addEventListener('click', () => {
            if (mediaDropInput) {
                mediaDropInput.value = '';
            }
            mediaFiles = [];
            renderMediaList();
            updateStepper();
            updateNfoPreview();
        });
    }
    if (mediaDropInput) {
        mediaDropInput.addEventListener('change', () => {
            mediaFiles = mediaDropInput.files ? Array.from(mediaDropInput.files) : [];
            renderMediaList();
            updateStepper();
            updateNfoPreview();
        });
    }
    if (mediaDropzone) {
        mediaDropzone.addEventListener('dragover', (event) => {
            event.preventDefault();
            mediaDropzone.classList.add('dragover');
        });
        mediaDropzone.addEventListener('dragleave', () => {
            mediaDropzone.classList.remove('dragover');
        });
        mediaDropzone.addEventListener('drop', (event) => {
            event.preventDefault();
            mediaDropzone.classList.remove('dragover');
            if (event.dataTransfer && event.dataTransfer.files) {
                mediaFiles = Array.from(event.dataTransfer.files);
                try {
                    const transfer = new DataTransfer();
                    mediaFiles.forEach((file) => transfer.items.add(file));
                    mediaDropInput.files = transfer.files;
                } catch (err) {
                    // ignore assignment failures
                }
                renderMediaList();
                updateStepper();
                updateNfoPreview();
            }
        });
    }

    if (coverGrid) {
        coverGrid.addEventListener('click', (event) => {
            const card = event.target.closest('.cover-card');
            if (!card) return;
            const url = card.dataset.cover || '';
            if (!url) return;
            document.getElementById('cover_image').value = url;
            coverGrid.querySelectorAll('.cover-card').forEach((node) => node.classList.remove('active'));
            card.classList.add('active');
            updateNfoPreview();
        });
    }

    ['title', 'description', 'info', 'publisher', 'subs', 'audio_stream', 'video_embed']
        .forEach((id) => {
            const field = document.getElementById(id);
            if (field) {
                field.addEventListener('input', () => {
                    updateStepper();
                    updateNfoPreview();
                });
            }
        });

    const triggerFilePicker = () => torrentFileInput.click();
    const triggerFolderPicker = () => torrentFolderInput.click();

    const openFsBrowser = async (mode) => {
        fsMode = mode;
        fsSelectedPath = '';
        fsSelected.textContent = `${i18n.modalSelected}: —`;
        await loadFsList('');
        fsSelectCurrent.style.display = mode === 'folder' ? 'inline-flex' : 'none';
        fsModal.classList.add('open');
    };

    const closeFsBrowser = () => {
        fsModal.classList.remove('open');
    };

    const loadFsList = async (path) => {
        try {
            const response = await fetch(`/api/fs/list?path=${encodeURIComponent(path || '')}`);
            const data = await response.json();
            if (!response.ok) {
                window.GNOMENALL_UI.pushLocalNotice('error', data.error || i18n.fsLoadFailed);
                return;
            }
            fsPath = data.path || '';
            fsParent = data.parent || '';
            fsCurrent.textContent = fsPath || '—';
            if (fsPath) {
                fetch('/api/fs/remember', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ path: fsPath })
                }).catch(() => {});
            }
            fsList.innerHTML = '';

            if (data.parent) {
                const up = document.createElement('div');
                up.className = 'modal-item';
                up.textContent = '..';
                up.addEventListener('click', () => loadFsList(data.parent));
                fsList.appendChild(up);
            }

            (data.dirs || []).forEach((dir) => {
                const item = document.createElement('div');
                item.className = 'modal-item';
                item.textContent = `📁 ${dir.name}`;
                item.addEventListener('click', () => loadFsList(dir.path));
                fsList.appendChild(item);
            });

            (data.files || []).forEach((file) => {
                const item = document.createElement('div');
                item.className = 'modal-item';
                item.textContent = `📄 ${file.name}`;
                item.addEventListener('click', () => {
                    fsSelectedPath = file.path;
                    fsSelected.textContent = `${i18n.modalSelected}: ${file.path}`;
                    document.querySelectorAll('.modal-item').forEach((el) => el.classList.remove('selected'));
                    item.classList.add('selected');
                });
                fsList.appendChild(item);
            });
        } catch (err) {
            window.GNOMENALL_UI.pushLocalNotice('error', i18n.fsLoadError);
        }
    };

    torrentBrowse.addEventListener('click', () => openFsBrowser('file'));
    torrentFolderBrowse.addEventListener('click', () => openFsBrowser('folder'));
    torrentFileField.addEventListener('dblclick', () => openFsBrowser('file'));
    torrentFolderField.addEventListener('dblclick', () => openFsBrowser('folder'));

    const applyTitle = (value) => {
        if (!value) return;
        const titleField = document.getElementById('title');
        if (!titleField.value.trim()) {
            titleField.value = value;
        }
    };

    const resolveSourcePath = () => {
        const fileValue = torrentFileField.value.trim();
        const folderValue = torrentFolderField.value.trim();
        const isPath = (value) => value.includes('\\') || value.includes('/') || value.includes(':');
        if (folderValue && isPath(folderValue)) return { path: folderValue, kind: 'folder' };
        if (fileValue && isPath(fileValue)) return { path: fileValue, kind: 'file' };
        return { path: '', kind: '' };
    };

    const tryCopyToClipboard = async (value) => {
        if (!value) return;
        try {
            await navigator.clipboard.writeText(value);
            window.GNOMENALL_UI.pushLocalNotice('success', i18n.copyPathSuccess);
        } catch (err) {
            window.GNOMENALL_UI.pushLocalNotice('error', i18n.copyPathFailed);
        }
    };

    torrentFileInput.addEventListener('change', async () => {
        const file = torrentFileInput.files && torrentFileInput.files[0];
        if (file) {
            if (!torrentFileField.value.trim()) {
                torrentFileField.value = file.name;
            }
            torrentFolderField.value = '';
            applyTitle(file.name);
            localStorage.setItem('gnm:last:file', file.name);
            await tryCopyToClipboard(torrentFileField.value.trim());
        }
    });

    torrentFolderInput.addEventListener('change', async () => {
        const files = torrentFolderInput.files;
        if (files && files.length) {
            const relPath = files[0].webkitRelativePath || files[0].name;
            const folderName = relPath.split('/')[0];
            if (!torrentFolderField.value.trim()) {
                torrentFolderField.value = folderName;
            }
            torrentFileField.value = '';
            applyTitle(folderName);
            localStorage.setItem('gnm:last:folder', folderName);
            await tryCopyToClipboard(torrentFolderField.value.trim());
        }
    });

    fsClose.addEventListener('click', closeFsBrowser);
    fsUp.addEventListener('click', () => loadFsList(fsParent));
    fsRefresh.addEventListener('click', () => loadFsList(fsPath));
    fsSelectCurrent.addEventListener('click', () => {
        if (!fsPath) return;
        fsSelectedPath = fsPath;
        fsSelected.textContent = `${i18n.modalSelected}: ${fsPath}`;
    });
    fsChoose.addEventListener('click', async () => {
        if (!fsSelectedPath && fsMode === 'folder') {
            fsSelectedPath = fsPath;
        }
        if (!fsSelectedPath) {
            window.GNOMENALL_UI.pushLocalNotice('error', i18n.selectSource);
            return;
        }
        if (fsDefault && fsDefault.checked) {
            fetch('/api/fs/preferred', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ path: fsSelectedPath })
            }).catch(() => {});
        }
        if (fsMode === 'file') {
            torrentFileField.value = fsSelectedPath;
            torrentFolderField.value = '';
            const parts = fsSelectedPath.split(/\\|\//);
            applyTitle(parts[parts.length - 1]);
        } else {
            torrentFolderField.value = fsSelectedPath;
            torrentFileField.value = '';
            const parts = fsSelectedPath.split(/\\|\//);
            applyTitle(parts[parts.length - 1]);
        }
        await tryCopyToClipboard(fsSelectedPath);
        closeFsBrowser();
    });

    torrentCreate.addEventListener('click', async () => {
        await createTorrentFromSource();
    });

    magnetCopy.addEventListener('click', async () => {
        if (!magnetOutput.value) {
            window.GNOMENALL_UI.pushLocalNotice('error', i18n.magnetMissing);
            showToast(i18n.magnetMissing);
            return;
        }
        await navigator.clipboard.writeText(magnetOutput.value);
        window.GNOMENALL_UI.pushLocalNotice('success', i18n.magnetCopied);
    });

    renderMediaList();
    updateStepper();
    updateNfoPreview();
    loadCoverGallery();
    updateVaultState();
    loadExistingCell();
</script>
{% endblock %}