{% extends "base.html" %}

{% block title %}Настройки — Тексты бота{% endblock %}
{% block title_header %}Настройки · Тексты бота{% endblock %}

{% block content %}
<style>
  .settings-texts-wrap { display: flex; flex-direction: column; gap: 1.1rem; }
  .settings-texts-banner {
    border-radius: 10px; border: 1px solid rgba(180, 83, 9, 0.45);
    background: rgba(69, 26, 3, 0.35); color: #fde68a; font-size: 13px;
    padding: 10px 12px; line-height: 1.45;
  }
  .settings-texts-h2 {
    font-size: 1.05rem; font-weight: 650; color: #f8fafc; margin: 0 0 8px 0;
    display: flex; align-items: center; gap: 8px;
  }
  .settings-text-card {
    border-radius: 12px; border: 1px solid rgba(71, 85, 105, 0.45);
    background: rgba(15, 23, 42, 0.72); padding: 8px 10px; margin-bottom: 6px;
  }
  .settings-text-card:last-child { margin-bottom: 0; }
  .settings-text-card-head {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    gap: 6px; margin-bottom: 6px;
  }
  .settings-text-meta .cmd { font-family: ui-monospace, monospace; font-size: 13px; font-weight: 600; color: #fda4af; margin: 0; }
  .settings-text-meta .desc { font-size: 13px; color: #94a3b8; margin: 4px 0 0 0; line-height: 1.4; }
  .settings-text-meta .vars { font-size: 11px; color: #64748b; margin: 4px 0 0 0; line-height: 1.35; }
  .settings-text-preview {
    margin: 0; padding: 6px 10px; border-radius: 8px;
    background: rgba(2, 6, 23, 0.85); border: 1px solid rgba(51, 65, 85, 0.7);
    font-size: 13px; line-height: 1.45; color: #e2e8f0;
    white-space: pre-wrap; word-break: break-word;
    overflow-y: auto;
    min-height: 1.45em;
    max-height: calc(var(--preview-lines, 1) * 1.45em + 12px);
  }
  .settings-text-preview.is-placeholder {
    min-height: 1.45em; max-height: none;
  }
  .settings-text-preview.from-code {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(12, 74, 110, 0.2);
  }
  .settings-text-source {
    font-size: 11px; margin-bottom: 6px;
  }
  .emoji-insert-bar {
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
    margin-bottom: 6px;
  }
  .emoji-insert-bar button {
    font-size: 1.1rem; line-height: 1; padding: 2px 6px;
    border-radius: 6px; border: 1px solid rgba(71, 85, 105, 0.8);
    background: rgba(15, 23, 42, 0.9); cursor: pointer;
  }
  .emoji-insert-bar button:hover { background: rgba(51, 65, 85, 0.9); }
  .settings-text-foot {
    margin-top: 6px; display: flex; flex-wrap: wrap; gap: 10px 14px;
    font-size: 11px; color: #64748b;
  }
</style>
<div class="settings-texts-wrap">
    <div class="flex flex-wrap items-center gap-2 text-sm mb-1">
        <a href="{{ url_for('settings.settings_list', section='basic') }}" class="text-slate-400 hover:text-white inline-flex items-center gap-1">
            <i class="bi bi-gear-fill"></i> Настройки
        </a>
        <span class="text-slate-600">/</span>
        <span class="text-slate-300">Тексты бота</span>
    </div>
    <div class="settings-texts-banner">
        <strong>Важно:</strong> поддерживается разметка <code class="text-amber-200">HTML</code> (как в Telegram). Изменения сохраняются в таблицу
        <code class="text-amber-200">bot_message</code> и подхватываются ботом при следующем чтении из БД (reply-меню — до ~1 с кэша).
        Эмодзи: кнопки под полем или стандартная панель ОС (Windows <kbd>Win</kbd>+<kbd>.</kbd>).
    </div>

    {% for sec in text_sections %}
    <div>
        <h2 class="settings-texts-h2">
            <i class="bi bi-chat-left-quote text-sky-400"></i>
            {{ sec.title }}
        </h2>
        <div>
            {% for it in sec['items'] %}
            {% set row = messages_by_command.get(it.command) %}
            <div class="settings-text-card">
                <div class="settings-text-card-head">
                    <div class="settings-text-meta min-w-0 flex-1">
                        <p class="cmd">{{ it.command }}</p>
                        <p class="desc">{{ it.description }}</p>
                        {% if it.variables %}
                        <p class="vars">Переменные: {{ it.variables }}</p>
                        {% endif %}
                    </div>
                    <button type="button"
                            class="btn btn-sm btn-outline-light shrink-0 text-edit-btn"
                            data-command="{{ it.command }}"
                            title="Редактировать">
                        <i class="bi bi-pencil-square"></i>
                    </button>
                </div>
                {% set ns = namespace() %}
                {% set ns.use_db = row and row.is_enable and (row.text or '')|trim %}
                {% if ns.use_db %}
                  {% set preview_text = row.text[:1200] ~ ('…' if row.text|length > 1200 else '') %}
                  {% set preview_class = 'settings-text-preview' %}
                  {% set source_lbl = 'Показано из БД (активно в боте)' %}
                {% else %}
                  {% set preview_text = (text_preview_defaults.get(it.command) or '')[:1200] %}
                  {% if (text_preview_defaults.get(it.command) or '')|length > 1200 %}{% set preview_text = preview_text ~ '…' %}{% endif %}
                  {% set preview_class = 'settings-text-preview from-code' %}
                  {% if row %}
                    {% set source_lbl = 'В боте — значение из кода (запись в БД выкл., текст пустой или не используется)' %}
                  {% else %}
                    {% set source_lbl = 'В боте — значение из кода (записи в БД ещё нет)' %}
                  {% endif %}
                {% endif %}
                {% set preview_lines = (preview_text or ' ').count('\n') + 1 %}
                <div class="settings-text-source text-slate-400">
                  <i class="bi bi-info-circle"></i> {{ source_lbl }}
                </div>
                {% if preview_text and preview_text|string|trim %}
                <div class="{{ preview_class }}" style="--preview-lines: {{ preview_lines }};">{{- preview_text -}}</div>
                {% else %}
                <div class="settings-text-preview is-placeholder from-code">
                  <span class="text-slate-400">Для этого ключа в коде нет отдельной строки — сценарий без текста или только из БД.</span>
                </div>
                {% endif %}
                {% if row %}
                <div class="settings-text-foot">
                    <span>{% if row.is_enable %}<i class="bi bi-check-circle text-emerald-400"></i> запись в БД: вкл.{% else %}<i class="bi bi-pause-circle text-amber-400"></i> запись в БД: выкл.{% endif %}</span>
                    {% if row.image_path %}
                    <span><i class="bi bi-image"></i> {{ row.image_path }}</span>
                    {% endif %}
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}

    {% if extra_messages %}
    <div>
        <h2 class="settings-texts-h2">
            <i class="bi bi-three-dots text-slate-400"></i>
            Другие сообщения в базе (не в каталоге)
        </h2>
        <p class="text-slate-400 text-sm mb-2" style="margin-top:-4px;">Ключи не из каталога (кастомные или устаревшие).</p>
        <div>
            {% for row in extra_messages %}
            <div class="settings-text-card" style="background: rgba(15, 23, 42, 0.55);">
                <div class="settings-text-card-head" style="margin-bottom:6px;">
                    <span class="font-mono text-rose-300 text-sm">{{ row.command }}</span>
                    <button type="button" class="btn btn-sm btn-outline-light text-edit-btn" data-command="{{ row.command }}">
                        <i class="bi bi-pencil-square"></i>
                    </button>
                </div>
                {% set ex_use_db = row.is_enable and (row.text or '')|trim %}
                {% if ex_use_db %}
                  {% set ex_prev = row.text[:400] ~ ('…' if row.text|length > 400 else '') %}
                  {% set ex_class = 'settings-text-preview' %}
                  {% set ex_src = 'Из БД (активно)' %}
                {% else %}
                  {% set ex_prev = (text_preview_defaults.get(row.command) or '')[:400] %}
                  {% if (text_preview_defaults.get(row.command) or '')|length > 400 %}{% set ex_prev = ex_prev ~ '…' %}{% endif %}
                  {% set ex_class = 'settings-text-preview from-code' %}
                  {% set ex_src = 'Сейчас в боте — из кода или пусто' %}
                {% endif %}
                <div class="settings-text-source text-slate-500" style="font-size:11px;margin-bottom:4px;">{{ ex_src }}</div>
                {% set ex_lines = (ex_prev or ' ').count('\n') + 1 %}
                <div class="{{ ex_class }}" style="--preview-lines: {{ ex_lines }};">{{- ex_prev -}}</div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <div class="flex flex-wrap gap-2 pt-1">
        <a href="{{ url_for('messages.messages_list') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-table me-1"></i> Все сообщения таблицей
        </a>
        <a href="{{ url_for('settings.settings_list', section='basic') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-gear me-1"></i> Основные настройки
        </a>
    </div>
</div>

<div class="modal fade" id="textEditModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content bg-gray-900 text-white border border-slate-600">
            <div class="modal-header border-slate-700">
                <h5 class="modal-title">Редактирование текста</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="textEditForm" class="space-y-3">
                    <div>
                        <label class="form-label text-slate-300">Ключ (command)</label>
                        <input type="text" class="form-control bg-slate-950 border-slate-600 text-white" name="command" readonly>
                    </div>
                    <div>
                        <label class="form-label text-slate-300">Текст</label>
                        <div class="emoji-insert-bar text-slate-400" id="emojiInsertBar" title="Вставить в позицию курсора">
                            <span class="me-1" style="font-size:11px;">Эмодзи:</span>
                        </div>
                        <textarea class="form-control bg-slate-950 border-slate-600 text-white font-mono text-sm" name="text" id="textEditTextarea" rows="1" required></textarea>
                    </div>
                    <div>
                        <label class="form-label text-slate-300">Путь к изображению (необязательно)</label>
                        <input type="text" class="form-control bg-slate-950 border-slate-600 text-white" name="image_path">
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="is_enable" id="textIsEnable" checked>
                        <label class="form-check-label text-slate-300" for="textIsEnable">Активно</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer border-slate-700">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-primary" id="textSaveBtn">Сохранить</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function() {
    const initial = {{ messages_by_command | tojson }};
    const editorDefaults = {{ text_editor_defaults | tojson }};
    const modalEl = document.getElementById('textEditModal');
    const modal = new bootstrap.Modal(modalEl);
    const form = document.getElementById('textEditForm');
    const textTa = document.getElementById('textEditTextarea');
    const emojiBar = document.getElementById('emojiInsertBar');
    let currentCommand = null;
    let existsInDb = false;

    const EMOJI_PRESET = ['👋','✅','❌','🔥','💳','🎉','🎁','📩','🌐','⚙️','🔑','🛡️','💬','🆘','📋','💰','📢','🔗','🚀','⭐','🔍','🔙','⬅️','◀️','🇷🇺','🇬🇧','📱','💻','✨','🆓','🤝','👤','🪙','🔵','🕵️‍♂️','🎫','💵','❓','ℹ️','⚠️','🤖','⌛','💡','👇','🤝'];
    EMOJI_PRESET.forEach(function(ch) {
        const b = document.createElement('button');
        b.type = 'button';
        b.textContent = ch;
        b.addEventListener('click', function() { insertAtCursor(textTa, ch); });
        emojiBar.appendChild(b);
    });

    function insertAtCursor(ta, text) {
        if (!ta) return;
        const start = ta.selectionStart;
        const end = ta.selectionEnd;
        const v = ta.value || '';
        ta.value = v.slice(0, start) + text + v.slice(end);
        const pos = start + text.length;
        ta.selectionStart = ta.selectionEnd = pos;
        ta.focus();
        fitTextareaRows(ta);
    }

    function fitTextareaRows(ta) {
        if (!ta) return;
        const v = ta.value || '';
        const n = v.split('\n').length;
        ta.rows = Math.min(Math.max(n, 1), 48);
    }

    textTa.addEventListener('input', function() { fitTextareaRows(textTa); });

    document.querySelectorAll('.text-edit-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            currentCommand = this.getAttribute('data-command');
            existsInDb = !!(initial && initial[currentCommand]);
            form.command.value = currentCommand;
            form.command.readOnly = true;
            const r = existsInDb ? initial[currentCommand] : null;
            const fallback = (editorDefaults && editorDefaults[currentCommand]) || '';
            if (r) {
                const raw = r.text != null ? String(r.text) : '';
                form.text.value = raw.trim() ? raw : fallback;
                form.image_path.value = r.image_path || '';
                form.is_enable.checked = !!r.is_enable;
            } else {
                form.text.value = fallback;
                form.image_path.value = '';
                form.is_enable.checked = true;
            }
            fitTextareaRows(textTa);
            modal.show();
        });
    });

    document.getElementById('textSaveBtn').addEventListener('click', async function() {
        if (!form.checkValidity()) {
            form.classList.add('was-validated');
            return;
        }
        const body = {
            command: form.command.value,
            text: form.text.value,
            image_path: form.image_path.value || null,
            is_enable: form.is_enable.checked
        };
        const url = existsInDb
            ? '/admin/messages/edit/' + encodeURIComponent(currentCommand)
            : '/admin/messages/create';
        try {
            const res = await fetch(url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(body)
            });
            const data = await res.json();
            if (!res.ok || data.error) throw new Error(data.error || res.statusText);
            modal.hide();
            window.location.reload();
        } catch (e) {
            alert('Ошибка сохранения: ' + e.message);
        }
    });
})();
</script>
{% endblock %}