{% extends "base.html" %}
{% set active_page = "settings" %}
{% block title %}Settings — ZP Remote{% endblock %}
{% block page_title %}Settings{% endblock %}

{% block content %}
<div class="space-y-6 max-w-2xl">

    <!-- Connection Status -->
    <div class="bg-slate-800 border border-slate-700 rounded-xl p-5">
        <h3 class="font-semibold text-white mb-4">
            <i class="fas fa-plug text-blue-400 mr-2"></i>Connection
        </h3>
        <div class="space-y-3">
            <div class="flex justify-between py-2 border-b border-slate-700">
                <span class="text-sm text-slate-400">База данных</span>
                <span class="text-xs text-slate-300 font-mono">{{ db_path }}</span>
            </div>
            <div class="flex justify-between py-2 border-b border-slate-700">
                <span class="text-sm text-slate-400">Папка проекта</span>
                <span class="text-xs text-slate-300 font-mono">{{ base_dir }}</span>
            </div>
            <div class="flex justify-between py-2 border-b border-slate-700">
                <span class="text-sm text-slate-400">Статус ZennoPoster</span>
                {% if zp_connected %}
                <span class="text-green-400 text-sm">
                    <i class="fas fa-circle text-xs mr-1"></i>
                    Connected ({{ tasks_count }} tasks)
                </span>
                {% else %}
                <span class="text-red-400 text-sm">
                    <i class="fas fa-circle text-xs mr-1"></i>
                    No data from ZP
                </span>
                {% endif %}
            </div>
            <div class="flex justify-between py-2">
                <span class="text-sm text-slate-400">Commands dir</span>
                <span class="text-xs text-slate-300 font-mono">{{ base_dir }}\commands\</span>
            </div>
        </div>
        <button onclick="checkHealth()"
                class="mt-4 px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white
                       rounded-lg text-sm transition-colors">
            <i class="fas fa-stethoscope mr-1"></i>Test Connection
        </button>
        <a href="/api/debug" target="_blank"
           class="ml-2 px-5 py-2 bg-slate-700 hover:bg-slate-600 text-slate-300
                  rounded-lg text-sm transition-colors inline-block">
            <i class="fas fa-bug mr-1"></i>Debug Info
        </a>
    </div>

    <!-- ZP Controller Setup -->
    <div class="bg-slate-800 border border-slate-700 rounded-xl p-5">
        <h3 class="font-semibold text-white mb-4">
            <i class="fas fa-info-circle text-yellow-400 mr-2"></i>
            Настройка ZennoPoster Контроллера
        </h3>
        <ol class="space-y-2 text-sm text-slate-400 list-decimal list-inside">
            <li>Откройте <span class="text-white font-medium">ProjectMaker</span></li>
            <li>Создайте новый проект</li>
            <li>Добавьте действие
                <span class="text-white font-medium">"Свой C# код"</span>
            </li>
            <li>Вставьте код из
                <span class="font-mono text-blue-400">zp_templates/controller.cs</span>
            </li>
            <li>Убедитесь что
                <span class="font-mono text-green-400">projectDir</span>
                =
                <span class="font-mono text-yellow-400">{{ base_dir }}</span>
            </li>
            <li>Запустите в ZennoPoster
                <span class="text-white">(1 поток, бесконечный цикл)</span>
            </li>
        </ol>
    </div>

    <!-- Phone Access -->
    <div class="bg-slate-800 border border-slate-700 rounded-xl p-5">
        <h3 class="font-semibold text-white mb-4">
            <i class="fas fa-mobile-alt text-green-400 mr-2"></i>
            Доступ с телефона (та же Wi-Fi сеть)
        </h3>
        <div class="bg-slate-900 rounded-lg p-3 font-mono text-sm text-green-400"
             id="phone-url">
            Определяем...
        </div>
        <p class="text-xs text-slate-500 mt-2">
            Узнайте IP вашего ПК: Win+R → cmd → ipconfig → IPv4 Address
        </p>
    </div>

    <!-- About -->
    <div class="bg-slate-800 border border-slate-700 rounded-xl p-5">
        <h3 class="font-semibold text-white mb-3">
            <i class="fas fa-code text-slate-400 mr-2"></i>About
        </h3>
        <div class="text-sm text-slate-500 space-y-1">
            <p>ZP Remote Control v1.0.0</p>
            <p>FastAPI + Jinja2 + TailwindCSS</p>
        </div>
    </div>

</div>
{% endblock %}

{% block scripts %}
<script>
// Показываем URL для телефона
document.getElementById('phone-url').textContent =
    'http://' + window.location.hostname + ':8000';

async function checkHealth() {
    const btn = event.currentTarget;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>Checking...';

    try {
        const r = await fetch('/api/health');
        const d = await r.json();
        if (d.zp_connected) {
            showToast('success', `ZP подключён! Задач: ${d.tasks_count}`);
        } else {
            showToast('error', d.message);
        }
    } catch(e) {
        showToast('error', 'Ошибка: ' + e.message);
    }

    btn.disabled = false;
    btn.innerHTML = '<i class="fas fa-stethoscope mr-1"></i>Test Connection';
}
</script>
{% endblock %}