{% extends 'admin/_layout.html.twig' %}

{% set active_nav = 'articles' %}

{% block title %}{{ mode == 'new' ? 'admin.articles.new_title'|trans : 'admin.articles.edit_title'|trans }}{% endblock %}

{% block admin_content %}
    <div style="max-width: 940px; margin: 0 auto;">
        <a href="{{ path('admin_articles_index') }}" class="back-link">{{ 'admin.articles.back'|trans }}</a>

        <div class="card">
            <h1 class="card-title">{{ mode == 'new' ? 'admin.articles.new_title'|trans : 'admin.articles.edit_title'|trans }}</h1>

            {% if mode == 'edit' and article.imageUrl %}
                <img src="{{ article.imageUrl }}" alt="" class="adm__thumb" style="width:96px;height:96px;margin-bottom:1rem;">
            {% endif %}

            {{ form_errors(form) }}
            {{ form_start(form, {attr: {class: 'adm__form', novalidate: 'novalidate'}}) }}
                {{ form_row(form.title) }}
                {{ form_row(form.category) }}
                {{ form_row(form.tags) }}
                <script type="application/json" id="existing-tags-data">{{ existingTags|map(t => t.name)|json_encode|raw }}</script>
                {{ form_row(form.summary) }}
                {{ plugin_hook('article_editor', {textarea_id: 'article_summary'}) }}
                {{ form_row(form.body) }}
                {{ plugin_hook('article_editor', {textarea_id: 'article_body'}) }}
                {{ form_row(form.imageFile, {help: mode == 'edit' ? 'admin.articles.image_help_edit'|trans : 'admin.articles.image_help_new'|trans}) }}
                <div class="image-dropzone" id="image-dropzone" tabindex="0" role="button" aria-label="Seleccionar o arrastrar una imagen">
                    <p class="image-dropzone__hint">Arrastra una imagen aquí o haz clic para seleccionarla</p>
                    <div class="image-dropzone__preview" hidden>
                        <img class="image-dropzone__preview-img" alt="">
                        <span class="image-dropzone__filename"></span>
                    </div>
                </div>
                {% if mode == 'edit' %}
                    {{ plugin_hook('article_references_field', {article: article}) }}
                    {{ plugin_hook('article_meta_field', {article: article}) }}
                    {{ plugin_hook('article_seo_analysis', {article: article}) }}
                    <a href="{{ path('admin_articles_preview', {id: article.id}) }}" target="_blank" rel="noopener" class="adm__btn adm__btn--ghost adm__btn--block">{{ 'admin.articles.preview'|trans }}</a>
                {% endif %}
                <button type="submit" class="adm__btn adm__btn--primary adm__btn--block">{{ 'common.save'|trans }}</button>
            {{ form_end(form) }}
        </div>
    </div>

    <style>
        .tags-autocomplete {
            position: fixed;
            z-index: 1000;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 6px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
            max-height: 220px;
            overflow-y: auto;
        }

        .tags-autocomplete__item {
            padding: .4rem .7rem;
            font-size: .85rem;
            cursor: pointer;
        }

        .tags-autocomplete__item:hover,
        .tags-autocomplete__item--active {
            background: #f5f5f5;
        }

        .image-dropzone {
            margin-top: -.5rem;
            margin-bottom: 1rem;
            padding: 1.5rem;
            border: 2px dashed #ccc;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            transition: border-color .15s, background .15s;
        }

        .image-dropzone:hover,
        .image-dropzone:focus {
            border-color: #e63946;
            outline: none;
        }

        .image-dropzone--active {
            border-color: #e63946;
            background: #fff5f5;
        }

        .image-dropzone__hint {
            margin: 0;
            color: #888;
            font-size: .85rem;
        }

        .image-dropzone__preview {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .75rem;
        }

        .image-dropzone__preview-img {
            max-width: 80px;
            max-height: 80px;
            border-radius: 6px;
            object-fit: cover;
        }

        .image-dropzone__filename {
            font-size: .85rem;
            color: #333;
            word-break: break-all;
        }
    </style>

    <script>
    (function () {
        var input = document.getElementById('{{ form.tags.vars.id }}');
        var dataScript = document.getElementById('existing-tags-data');
        if (!input || !dataScript) {
            return;
        }

        var names = JSON.parse(dataScript.textContent);

        var dropdown = document.createElement('div');
        dropdown.className = 'tags-autocomplete';
        dropdown.hidden = true;
        document.body.appendChild(dropdown);

        function currentSegment() {
            var parts = input.value.split(',');
            return parts[parts.length - 1].trim();
        }

        function applySuggestion(name) {
            var parts = input.value.split(',');
            parts[parts.length - 1] = ' ' + name;
            input.value = parts.join(',').replace(/^\s+/, '') + ', ';
            hide();
            input.focus();
        }

        function hide() {
            dropdown.hidden = true;
        }

        function render() {
            var segment = currentSegment().toLowerCase();
            if (!segment) {
                hide();
                return;
            }

            var matches = names.filter(function (name) {
                return name.toLowerCase().indexOf(segment) === 0 && name.toLowerCase() !== segment;
            }).slice(0, 8);

            if (matches.length === 0) {
                hide();
                return;
            }

            dropdown.innerHTML = matches.map(function (name) {
                return '<div class="tags-autocomplete__item">' + name.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</div>';
            }).join('');

            var rect = input.getBoundingClientRect();
            dropdown.style.left = rect.left + 'px';
            dropdown.style.top = rect.bottom + 'px';
            dropdown.style.width = rect.width + 'px';
            dropdown.hidden = false;
        }

        input.addEventListener('input', render);

        input.addEventListener('blur', function () {
            setTimeout(hide, 150);
        });

        dropdown.addEventListener('mousedown', function (e) {
            var item = e.target.closest('.tags-autocomplete__item');
            if (!item) {
                return;
            }
            e.preventDefault();
            applySuggestion(item.textContent);
        });
    })();

    (function () {
        var input = document.getElementById('{{ form.imageFile.vars.id }}');
        var dropzone = document.getElementById('image-dropzone');
        if (!input || !dropzone) {
            return;
        }

        input.style.display = 'none';

        var hint = dropzone.querySelector('.image-dropzone__hint');
        var preview = dropzone.querySelector('.image-dropzone__preview');
        var previewImg = dropzone.querySelector('.image-dropzone__preview-img');
        var filenameLabel = dropzone.querySelector('.image-dropzone__filename');

        function showFile(file) {
            if (!file) {
                hint.hidden = false;
                preview.hidden = true;
                return;
            }

            hint.hidden = true;
            preview.hidden = false;
            filenameLabel.textContent = file.name;

            if (file.type && file.type.indexOf('image/') === 0) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    previewImg.src = e.target.result;
                };
                reader.readAsDataURL(file);
            } else {
                previewImg.removeAttribute('src');
            }
        }

        dropzone.addEventListener('click', function () {
            input.click();
        });

        dropzone.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                input.click();
            }
        });

        input.addEventListener('change', function () {
            showFile(input.files[0] || null);
        });

        ['dragenter', 'dragover'].forEach(function (evt) {
            dropzone.addEventListener(evt, function (e) {
                e.preventDefault();
                e.stopPropagation();
                dropzone.classList.add('image-dropzone--active');
            });
        });

        ['dragleave', 'drop'].forEach(function (evt) {
            dropzone.addEventListener(evt, function (e) {
                e.preventDefault();
                e.stopPropagation();
                dropzone.classList.remove('image-dropzone--active');
            });
        });

        dropzone.addEventListener('drop', function (e) {
            var files = e.dataTransfer.files;
            if (files && files.length > 0) {
                input.files = files;
                showFile(files[0]);
            }
        });

        if (input.files && input.files[0]) {
            showFile(input.files[0]);
        }
    })();
    </script>
{% endblock %}