{% extends "base.html" %}
{% block title %}Beállítások — Recept Importáló{% endblock %}

{% block content %}
<form method="POST" action="/settings">
    <div class="card">
        <h2>Mealie kapcsolat</h2>

        <label for="mealie_url">Mealie URL</label>
        <input type="url" id="mealie_url" name="mealie_url"
               value="{{ cfg.mealie_url }}"
               placeholder="https://mealie.example.com">

        <label for="mealie_api_key">API kulcs</label>
        <input type="password" id="mealie_api_key" name="mealie_api_key"
               value="{{ cfg.mealie_api_key }}"
               placeholder="Mealie API token">
        <p class="text-dim mb-2" style="font-size:0.85rem;">
            Az API kulcsot a Mealie felhasználói profilod alatt hozhatod létre:
            <em>Profil → API Tokenek</em>
        </p>

        <div class="flex">
            <button type="button" class="btn btn-secondary" id="testMealieBtn" onclick="testMealie()">
                Kapcsolat tesztelése
            </button>
            <span id="testMealieResult"></span>
        </div>
    </div>

    <div class="card">
        <h2>Tandoor kapcsolat</h2>

        <label for="tandoor_url">Tandoor URL</label>
        <input type="url" id="tandoor_url" name="tandoor_url"
               value="{{ cfg.tandoor_url }}"
               placeholder="https://recipes.example.com">

        <label for="tandoor_api_key">API kulcs</label>
        <input type="password" id="tandoor_api_key" name="tandoor_api_key"
               value="{{ cfg.tandoor_api_key }}"
               placeholder="Tandoor API token">
        <p class="text-dim mb-2" style="font-size:0.85rem;">
            Az API kulcsot a Tandoor-ban itt hozhatod létre:
            <em>Settings → API Browser → Auth Token</em>
        </p>

        <div class="flex">
            <button type="button" class="btn btn-secondary" id="testTandoorBtn" onclick="testTandoor()">
                Kapcsolat tesztelése
            </button>
            <span id="testTandoorResult"></span>
        </div>
    </div>

    <div class="card">
        <button type="submit" class="btn btn-primary">Mentés</button>
    </div>
</form>
{% endblock %}

{% block scripts %}
<script>
async function testMealie() {
    const btn = document.getElementById('testMealieBtn');
    const result = document.getElementById('testMealieResult');
    btn.disabled = true;
    result.innerHTML = '<span class="spinner"></span>';

    try {
        const form = new FormData();
        form.append('mealie_url', document.getElementById('mealie_url').value);
        form.append('mealie_api_key', document.getElementById('mealie_api_key').value);
        const resp = await fetch('/settings/test', { method: 'POST', body: form });
        const data = await resp.json();
        if (data.ok) {
            const v = data.data.version || '?';
            result.innerHTML = '<span class="text-success">✓ Kapcsolódva (Mealie v' + v + ')</span>';
        } else {
            result.innerHTML = '<span class="text-danger">✗ ' + data.error + '</span>';
        }
    } catch (e) {
        result.innerHTML = '<span class="text-danger">✗ Hálózati hiba</span>';
    }
    btn.disabled = false;
}

async function testTandoor() {
    const btn = document.getElementById('testTandoorBtn');
    const result = document.getElementById('testTandoorResult');
    btn.disabled = true;
    result.innerHTML = '<span class="spinner"></span>';

    try {
        const form = new FormData();
        form.append('tandoor_url', document.getElementById('tandoor_url').value);
        form.append('tandoor_api_key', document.getElementById('tandoor_api_key').value);
        const resp = await fetch('/settings/test-tandoor', { method: 'POST', body: form });
        const data = await resp.json();
        if (data.ok) {
            const v = data.data.version || '?';
            result.innerHTML = '<span class="text-success">✓ Kapcsolódva (Tandoor v' + v + ')</span>';
        } else {
            result.innerHTML = '<span class="text-danger">✗ ' + data.error + '</span>';
        }
    } catch (e) {
        result.innerHTML = '<span class="text-danger">✗ Hálózati hiba</span>';
    }
    btn.disabled = false;
}
</script>
{% endblock %}