{% extends 'admin/base.html' %}
{% block title %}{{ t('files.edit_title') }}{% endblock %}

{% block content %}
<div class="page-header">
    <h2>✏️ {{ t('files.edit_title') }}</h2>
    <p>{{ t('files.edit_subtitle') }}</p>
</div>

<div class="settings-section">
    <div class="edit-container">
        <!-- File Preview Panel -->
        <div class="file-preview-panel">
            <div class="file-icon-large file-type-icon" data-type="{{ file.get_extension() }}">
                <span class="file-emoji">{{ file.get_icon() }}</span>
                <span class="file-ext-badge">{{ file.get_type_label() }}</span>
            </div>

            <div class="form-group">
                <label>{{ t('files.file_url') }}</label>
                <div class="url-row">
                    <input type="text" class="url-input" value="/{{ file.download_slug }}" readonly id="fileUrl">
                    <button class="copy-btn" onclick="copyUrl()" title="{{ t('files.copy_url') }}">📋 {{ t('files.copy_url') }}</button>
                </div>
                <div class="help-text">{{ t('files.file_url_help') }}</div>
            </div>

            <div class="file-info">
                <strong>{{ t('files.filename') }}</strong> {{ file.original_filename or file.filename }}<br>
                {% if file.file_size %}<strong>{{ t('files.size') }}</strong> {{ file.human_size() }}<br>{% endif %}
                {% if file.mime_type %}<strong>{{ t('files.type') }}</strong> {{ file.mime_type }}<br>{% endif %}
                <strong>{{ t('files.uploaded') }}</strong> {{ file.uploaded_at|format_datetime }}
            </div>
        </div>

        <!-- Edit Form -->
        <form method="POST" class="edit-form-panel" data-inline-save>
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="hidden" name="return_to" value="{{ admin_back_value() }}">
            <div class="form-group">
                <label for="title">{{ t('files.title_field') }}</label>
                <input type="text" id="title" name="title" value="{{ file.title or '' }}">
            </div>
            
            <div class="form-group">
                <label for="description">{{ t('files.description_field') }}</label>
                <textarea id="description" name="description" rows="4">{{ file.description or '' }}</textarea>
            </div>
            
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">💾 {{ t('files.save_changes') }}</button>
                <a href="{{ admin_back_url('admin_files_list') }}" class="btn btn-secondary">{{ t('common.cancel') }}</a>
                <button type="button" class="btn btn-danger" onclick="checkUsageThenDelete('file', {{ file.id }}, document.getElementById('deleteForm'))">🗑️ {{ t('files.delete') }}</button>
            </div>
        </form>
        <form id="deleteForm" method="POST" action="{{ url_for('admin_files_delete', file_id=file.id) }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function copyUrl() {
    var input = document.getElementById('fileUrl');
    input.select();
    document.execCommand('copy');
    var btn = input.nextElementSibling;
    var originalText = btn.textContent;
    btn.textContent = '✅ {{ t("files.copied") }}';
    setTimeout(function() { btn.textContent = originalText; }, 1500);
}

async function checkUsageThenDelete(assetType, assetId, formEl) {
    try {
        const res = await fetch('/admin/api/check-usage', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ type: assetType, id: assetId })
        });
        const data = await res.json();
        
        var msg = '{{ t("files.delete_confirm") }}';
        
        if (data.count > 0) {
            msg = '{{ t("files.usage_warning") }}\n\n';
            data.usage.forEach(function(u) {
                var typeLabel = u.type.charAt(0).toUpperCase() + u.type.slice(1);
                msg += '• ' + typeLabel + ': ' + u.title + ' (' + u.fields.join(', ') + ')\n';
            });
            msg += '\n{{ t("files.usage_confirm_delete") }}';
        }
        
        if (confirm(msg)) {
            formEl.submit();
        }
    } catch (err) {
        if (confirm('{{ t("files.delete_confirm") }}')) {
            formEl.submit();
        }
    }
}
</script>
{% endblock %}