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

{% block head %}
<style>
    .info-box {
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 1rem;
        margin-bottom: 1.5rem;
        font-size: 0.85rem;
        color: var(--text-dim);
        line-height: 1.6;
    }
    .info-box strong { color: var(--text); }
    .info-box code {
        background: var(--bg);
        padding: 0.15rem 0.4rem;
        border-radius: 4px;
        font-size: 0.8rem;
        color: var(--accent-light);
    }
</style>
{% endblock %}

{% block content %}
<div class="info-box">
    <strong>Külső vs. belső URL-ek</strong><br>
    Az itt megadott URL-ek a <strong>külső (böngészőből elérhető)</strong> címek —
    ezeket használja az importáló a receptekre mutató linkek generálásához.<br><br>
    Ha a Recept Importáló ugyanazon a Docker hálózaton fut, mint a Mealie/Tandoor,
    beállíthatsz <strong>belső URL-eket</strong> is a <code>docker-compose.yml</code>-ben
    környezeti változóként:<br>
    <code>MEALIE_INTERNAL_URL=http://mealie:9000</code><br>
    <code>TANDOOR_INTERNAL_URL=http://tandoor:8080</code><br><br>
    A belső URL-ek gyorsabb, közvetlen API-hívásokat tesznek lehetővé
    (elkerülve a reverse proxy-t / Cloudflare-t).
    Ha nincsenek megadva, a fenti külső URL-ek lesznek használva az API-hívásokhoz is.
</div>

<form method="POST" action="/settings">
    <div class="card">
        <h2>Mealie kapcsolat</h2>

        <label for="mealie_url">Mealie URL (külső)</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 (külső)</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 %}