{% load static %}
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Settings – Subscribarr</title>
    <link rel="stylesheet" href="{% static 'css/settings.css' %}">
</head>

<body>
    <div class="wrap">
        <div class="topbar">
            <div style="display:flex; gap:8px; align-items:center;">
                <a href="/" class="btn">← Back</a>
                <a href="{% url 'settingspanel:subscriptions' %}" class="btn">👥 Subscriptions</a>
            </div>
            <div><strong>Settings</strong></div>
            <div></div>
        </div>

        {% if messages %}
        <div class="msgs">{% for m in messages %}<div class="msg">{{ m }}</div>{% endfor %}</div>
        {% endif %}

        <form method="post">
            {% csrf_token %}
            <div class="grid">
                <div class="card">
                    <h2>Jellyfin</h2>
                    <div class="row">
                        <label>Jellyfin Server URL</label>
                        {{ jellyfin_form.jellyfin_server_url }}
                        <div class="help">e.g., http://localhost:8096</div>
                    </div>
                    <div class="row">
                        <label>Jellyfin API Key</label>
                        {{ jellyfin_form.jellyfin_api_key }}
                        <div class="help">Admin API key from your Jellyfin settings</div>
                    </div>
                </div>

                <div class="card">
                    <h2>Sonarr & Radarr</h2>

                    <div class="row">
                        <label>Sonarr URL</label>
                        <div class="inline">
                            <div class="field">{{ arr_form.sonarr_url }}</div>
                            <div class="inline-actions">
                                <button class="btn" type="button" onclick="testConnection('sonarr', this)">Test Sonarr</button>
                                <span id="sonarrStatus" class="badge muted">—</span>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <label>Sonarr API Key</label>
                        {{ arr_form.sonarr_api_key }}
                    </div>


                    <div class="row">
                        <label>Radarr URL</label>
                        <div class="inline">
                            <div class="field">{{ arr_form.radarr_url }}</div>
                            <div class="inline-actions">
                                <button class="btn" type="button" onclick="testConnection('radarr', this)">Test Radarr</button>
                                <span id="radarrStatus" class="badge muted">—</span>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <label>Radarr API Key</label>
                        {{ arr_form.radarr_api_key }}
                    </div>

                    <div class="help">Click “Test …” to verify against <code>/api/v3/system/status</code>.</div>
                </div>

                <div class="card">
                    <h2>Mail server</h2>
                    <div class="row"><label>Host</label>{{ mail_form.mail_host }}</div>
                    <div class="row"><label>Port</label>{{ mail_form.mail_port }}</div>
                    <div class="row"><label>Security</label>{{ mail_form.mail_secure }}</div>
                    <div class="row"><label>User</label>{{ mail_form.mail_user }}</div>
                    <div class="row"><label>Password</label>{{ mail_form.mail_password }}</div>
                    <div class="row"><label>From</label>{{ mail_form.mail_from }}</div>
                </div>

                <div class="card">
                    <h2>Account</h2>
                    <div class="row"><label>Username</label>{{ account_form.username }}</div>
                    <div class="row"><label>Email</label>{{ account_form.email }}</div>
                    <div class="row"><label>New password</label>{{ account_form.new_password }}</div>
                    <div class="row"><label>Repeat password</label>{{ account_form.repeat_password }}</div>
                    <div class="help">Only UI – implementing password change later.</div>
                </div>
            </div>

            <div style="margin-top:16px">
                <button class="btn btn-primary" type="submit">Save</button>
            </div>
        </form>
    </div>

    <script>

        function testConnection(kind) {
            const url = document.querySelector(`input[name="${kind}_url"]`).value;
            const key = document.querySelector(`input[name="${kind}_api_key"]`).value;

            fetch(`/settings/test-connection/?kind=${kind}&url=${encodeURIComponent(url)}&key=${encodeURIComponent(key)}`)
                .then(r => r.json())
                .then(data => {
                    if (data.ok) {
            alert(kind + " connection successful!");
                    } else {
            alert(kind + " error: " + data.error);
                    }
                })
        .catch(err => alert(kind + " error: " + err));
        }

        function setBadge(kind, state, text, tooltip) {
            const el = document.getElementById(kind + "Status");
            if (!el) return;
            el.classList.remove("ok", "err", "muted");
            el.title = tooltip || "";               // full error text in tooltip
            if (state === "ok") {
                el.classList.add("ok");
                el.textContent = "Connected";
            } else if (state === "err") {
                el.classList.add("err");
                el.textContent = "Error";
            } else {
                el.classList.add("muted");
                el.textContent = "—";
            }
        }

        function testConnection(kind, btnEl) {
            const urlEl = document.querySelector(`input[name="${kind}_url"]`);
            const keyEl = document.querySelector(`input[name="${kind}_api_key"]`);
            const url = urlEl ? urlEl.value.trim() : "";
            const key = keyEl ? keyEl.value.trim() : "";

            setBadge(kind, "muted", "Testing…");
            if (btnEl) { btnEl.disabled = true; }

            fetch(`/settings/test-connection/?kind=${encodeURIComponent(kind)}&url=${encodeURIComponent(url)}&key=${encodeURIComponent(key)}`)
                .then(r => r.json())
                .then(data => {
                    if (data.ok) {
            setBadge(kind, "ok", "Connected", "");
                    } else {
            setBadge(kind, "err", "Error", data.error || "Unknown error");
                    }
                })
        .catch(err => setBadge(kind, "err", "Error", String(err)))
                .finally(() => { if (btnEl) btnEl.disabled = false; });
        }

    </script>

</body>

</html>