<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Отзывы — WB Feedback</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" />
</head>
<body>

<nav class="topbar">
    <div class="topbar__inner">
        <a href="{{ url_for('index') }}" class="topbar__brand">
            <img src="{{ url_for('static', filename='wb2.png') }}" class="topbar__logo-img" alt="WB">
            <span class="topbar__name">Feedback</span>
        </a>
        <div class="topbar__nav">
            <a href="{{ url_for('index') }}" class="topbar__link active">Отзывы</a>
            <a href="{{ url_for('cabinet') }}" class="topbar__link">Кабинет</a>
            {% if current_user["is_admin"] %}
            <a href="{{ url_for('admin_panel') }}" class="topbar__link">Администратор</a>
            {% endif %}
        </div>
        <div class="topbar__user">
            <span class="topbar__username">{{ current_user["username"] }}</span>
            {% if active_token_name %}
                <span class="badge">{{ active_token_name }}</span>
            {% endif %}
            <a href="{{ url_for('logout') }}" class="btn-ghost">Выйти</a>
        </div>
    </div>
</nav>

<div class="page">

    {% if error_message %}
        <div class="alert alert-error">{{ error_message }}</div>
    {% endif %}
    {% if success_message %}
        <div class="alert alert-success">{{ success_message }}</div>
    {% endif %}

    <!-- Настройки автоответа -->
    <div class="card">
        <div class="section-header">
            <h2>Настройки автоответа</h2>
            <form method="post" action="{{ url_for('auto_reply_toggle') }}">
                <input type="hidden" name="enabled" value="{{ 0 if auto_reply_enabled else 1 }}">
                {% if auto_reply_enabled %}
                    <button type="submit" class="btn-stop">&#9646;&#9646; Стоп</button>
                {% else %}
                    <button type="submit" class="btn-start">&#9654; Старт</button>
                {% endif %}
            </form>
        </div>

        {% if auto_reply_enabled %}
            <div class="autoreply-status">
                <span class="status-dot status-dot--green"></span>
                <span>Автоответ активен</span>
                {% if api_cooldown_seconds_left and api_cooldown_seconds_left > 0 %}
                    &nbsp;·&nbsp; Следующий ответ через <span id="cooldown-counter" data-seconds="{{ api_cooldown_seconds_left }}">{{ api_cooldown_seconds_left }}</span> сек.
                {% endif %}
            </div>
        {% endif %}

        <form method="post" action="{{ url_for('auto_reply_settings') }}" id="settings-form">
            <fieldset {% if auto_reply_enabled %}disabled{% endif %} style="border:none;padding:0;margin:0">

            <!-- Звёзды -->
            <div class="settings-section">
                <div class="settings-label">На какие оценки отвечать</div>
                <div class="star-toggles">
                    {% for star in [1,2,3,4,5] %}
                    <label class="star-toggle star-toggle--{{ star }}">
                        <input type="checkbox" name="stars" value="{{ star }}"
                               {% if star in enabled_stars %}checked{% endif %}
                               onchange="updateColumns()">
                        <span>{{ star }}★</span>
                    </label>
                    {% endfor %}
                </div>
            </div>

            <!-- Фильтр типа отзывов -->
            <div class="settings-section">
                <div class="settings-label">Отвечать на отзывы</div>
                <div class="filter-options">
                    <label class="filter-option">
                        <input type="radio" name="filter_mode" value="no_text" {% if filter_mode == 'no_text' %}checked{% endif %}>
                        <span>Без основного текста <small>(достоинства/недостатки допустимы)</small></span>
                    </label>
                    <label class="filter-option">
                        <input type="radio" name="filter_mode" value="empty" {% if filter_mode == 'empty' %}checked{% endif %}>
                        <span>Полностью пустые <small>(нет текста, достоинств и недостатков)</small></span>
                    </label>
                    <label class="filter-option">
                        <input type="radio" name="filter_mode" value="all" {% if filter_mode == 'all' %}checked{% endif %}>
                        <span>Все отзывы <small>(независимо от наличия текста)</small></span>
                    </label>
                </div>
            </div>

            <!-- Динамические колонки пулов -->
            <div class="settings-section">
                <div class="settings-label">Шаблоны ответов</div>
                <div class="pool-columns" id="pool-columns">
                    {% for star in [1,2,3,4,5] %}
                    <div class="pool-col pool-col--{{ star }}" id="pool-col-{{ star }}" {% if star not in enabled_stars %}style="display:none"{% endif %}>
                        <div class="pool-col__header">
                            <span class="star-chip star-chip--{{ star }}">{{ star }}★</span>
                        </div>
                        <div class="pool-items" id="pool-items-{{ star }}"></div>
                        <textarea name="pool_{{ star }}_raw" id="pool-{{ star }}-hidden" hidden>{{ reply_pools[star] }}</textarea>
                        <button type="button" class="btn-add-item" onclick="addPoolItem('{{ star }}')">+ Добавить ответ</button>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <div style="margin-top:20px">
                <button type="submit">Сохранить настройки</button>
            </div>
            </fieldset>
        </form>
    </div>

    <!-- Очередь автоответов -->
    <div class="card">
        <div class="section-header">
            <h2>Очередь автоответов</h2>
            {% if auto_reply_queue %}
                <span class="badge">{{ auto_reply_queue|length }}</span>
            {% endif %}
        </div>
        {% if auto_reply_queue %}
            <div class="logs-table-wrap">
                <table class="logs-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>ID отзыва</th>
                            <th>Дата оценки</th>
                            <th>Оценка</th>
                            <th>Товар</th>
                            <th>Покупатель</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in auto_reply_queue %}
                            <tr>
                                <td>{{ loop.index }}</td>
                                <td><code style="font-size:0.72rem;color:var(--c-text-muted)">{{ item.get("id") or "—" }}</code></td>
                                <td>{{ item.get("review_created_at")|format_log_datetime if item.get("review_created_at") else "—" }}</td>
                                <td><span class="rating rating--{{ item.rating }}">{{ item.rating }}★</span></td>
                                <td>
                                    {{ item.get("product_name") or "—" }}
                                    {% if item.get("nm_id") %}
                                        <span class="tag-article">#{{ item.nm_id }}</span>
                                    {% endif %}
                                </td>
                                <td>{{ item.get("user_name") or "—" }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            {% if auto_reply_enabled and next_fetch_seconds_left > 0 %}
                <div class="empty-state">Очередь подгрузится через <span id="fetch-counter" data-seconds="{{ next_fetch_seconds_left }}">{{ next_fetch_seconds_left }}</span> сек.</div>
            {% elif auto_reply_enabled %}
                <div class="empty-state">Загрузка очереди…</div>
            {% else %}
                <div class="empty-state">Нажмите «Старт» для запуска автоответов.</div>
            {% endif %}
        {% endif %}
    </div>

    <!-- Журнал автоответов -->
    <div class="card">
        <div class="section-header">
            <h2>Журнал автоответов</h2>
            <span class="badge">последние 100</span>
        </div>
        {% if auto_reply_logs %}
            <div class="logs-table-wrap">
                <table class="logs-table">
                    <thead>
                        <tr>
                            <th>Дата лога</th>
                            <th>Дата оценки</th>
                            <th>Оценка</th>
                            <th>Товар</th>
                            <th>Покупатель</th>
                            <th>Текст отзыва</th>
                            <th>Статус</th>
                            <th>ID отзыва</th>
                            <th>Ответ</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for log in auto_reply_logs %}
                            <tr>
                                <td>{{ log["created_at"]|format_log_datetime }}</td>
                                <td>{{ log["review_created_at"]|format_log_datetime if log["review_created_at"] else "—" }}</td>
                                <td><span class="rating rating--{{ log['rating'] }}">{{ log["rating"] }}★</span></td>
                                <td>
                                    {{ log["product_name"] or "—" }}
                                    {% if log["nm_id"] %}
                                        <span class="tag-article">#{{ log["nm_id"] }}</span>
                                    {% endif %}
                                </td>
                                <td>{{ log["user_name"] or "—" }}</td>
                                <td>{{ log["review_text"] or "—" }}</td>
                                <td>
                                    {% if log["status"] == "sent" %}
                                        <span class="log-status--sent">✓ Отправлен</span>
                                    {% elif log["status"] == "skipped" %}
                                        <span class="log-status--skip">— Пропущен</span>
                                    {% else %}
                                        <span class="log-status--error">✗ Ошибка</span>
                                    {% endif %}
                                </td>
                                <td><code style="font-size:0.72rem;color:var(--c-text-muted)">{{ log["review_id"] or "—" }}</code></td>
                                <td>{{ log["reply_text"] or "—" }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="empty-state">Пока нет записей автоответа.</div>
        {% endif %}
    </div>


</div>

<!-- Нижняя навигация (мобайл) -->
<nav class="bottom-nav">
    <a href="{{ url_for('index') }}" class="bottom-nav__item active">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/>
            <rect x="9" y="3" width="6" height="4" rx="1"/>
            <line x1="9" y1="12" x2="15" y2="12"/>
            <line x1="9" y1="16" x2="13" y2="16"/>
        </svg>
        Отзывы
    </a>
    <a href="{{ url_for('cabinet') }}" class="bottom-nav__item">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
            <circle cx="12" cy="7" r="4"/>
        </svg>
        Кабинет
    </a>
    {% if current_user["is_admin"] %}
    <a href="{{ url_for('admin_panel') }}" class="bottom-nav__item">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
        </svg>
        Админ
    </a>
    {% endif %}
</nav>

<script>
// ── Tick-down helper ───────────────────────────────────────────────
function startCountdown(id, onZero) {
    const node = document.getElementById(id);
    if (!node) return;
    let s = parseInt(node.dataset.seconds || '0', 10);
    const tick = setInterval(() => {
        s--;
        if (s <= 0) { clearInterval(tick); if (onZero) onZero(); else node.textContent = '0'; return; }
        node.textContent = s;
    }, 1000);
    return { update: (v) => { s = v; node.textContent = v; } };
}

const cooldownCtrl = startCountdown('cooldown-counter');
const fetchCtrl    = startCountdown('fetch-counter', () => window.location.reload());

// ── Pool editor ────────────────────────────────────────────────────
function syncHidden(star) {
    const items = document.querySelectorAll(`#pool-items-${star} .pool-item-input`);
    const lines = [...items].map(i => i.value.trim()).filter(Boolean);
    const container = document.getElementById(`pool-items-${star}`);
    container.querySelectorAll('input[name="pool_' + star + '_item"]').forEach(e => e.remove());
    lines.forEach(line => {
        const inp = document.createElement('input');
        inp.type = 'hidden';
        inp.name = `pool_${star}_item`;
        inp.value = line;
        container.appendChild(inp);
    });
}

function addPoolItem(star, value = '') {
    const container = document.getElementById(`pool-items-${star}`);
    const row = document.createElement('div');
    row.className = 'pool-item';
    row.innerHTML = `<input type="text" class="pool-item-input" value="${value.replace(/"/g,'&quot;')}" placeholder="Текст ответа…"><button type="button" class="btn-delete-item" title="Удалить">✕</button>`;
    row.querySelector('.pool-item-input').addEventListener('input', () => syncHidden(star));
    row.querySelector('.btn-delete-item').addEventListener('click', () => { row.remove(); syncHidden(star); });
    container.appendChild(row);
    syncHidden(star);
}

function updateColumns() {
    [1,2,3,4,5].forEach(star => {
        const cb = document.querySelector(`input[name="stars"][value="${star}"]`);
        const col = document.getElementById(`pool-col-${star}`);
        if (col) col.style.display = cb && cb.checked ? '' : 'none';
    });
}

function initPool(star) {
    const hidden = document.getElementById(`pool-${star}-hidden`);
    if (!hidden) return;
    hidden.value.split('\n').map(l => l.trim()).filter(Boolean).forEach(line => addPoolItem(star, line));
}

document.getElementById('settings-form').addEventListener('submit', () => {
    [1,2,3,4,5].forEach(syncHidden);
});

[1,2,3,4,5].forEach(initPool);

// ── API polling ────────────────────────────────────────────────────
(() => {
    let lastLogId = null;
    const poll = async () => {
        try {
            const r = await fetch('/api/status');
            if (!r.ok) return;
            const data = await r.json();
            if (lastLogId === null) {
                lastLogId = data.last_log_id;
            } else if (data.last_log_id !== lastLogId) {
                window.location.reload();
            }
            if (cooldownCtrl && data.cooldown > 0) cooldownCtrl.update(data.cooldown);
            if (fetchCtrl && data.next_fetch_seconds > 0) fetchCtrl.update(data.next_fetch_seconds);
            if (data.next_fetch_seconds === 0 && data.queue_len === 0 && data.auto_reply_enabled) {
                window.location.reload();
            }
        } catch(e) {}
    };
    poll();
    setInterval(poll, 10000);
})();
</script>
</body>
</html>
