{% extends "base.html" %}
{# M8 — 설정 페이지 (언어 / 테마 / 자동 시작). #}

{% block title %}{{ _("Settings") }} · {{ _("AssetCacheMCP") }}{% endblock %}

{% block content %}
<section class="settings-page" x-data="settingsForm()">
  <h1>{{ _("Settings") }}</h1>

  <form @submit.prevent="save">
    <fieldset>
      <legend>{{ _("Language") }}</legend>
      <label>
        <input type="radio" name="ui_language" value="ko"
               x-model="form.ui_language">
        {{ _("Korean") }} (한국어)
      </label>
      <label>
        <input type="radio" name="ui_language" value="en"
               x-model="form.ui_language">
        {{ _("English") }} (English)
      </label>
      <label>
        <input type="radio" name="ui_language" value="auto"
               x-model="form.ui_language">
        {{ _("Auto-detect") }}
      </label>
    </fieldset>

    <fieldset>
      <legend>{{ _("Theme") }}</legend>
      <label>
        <input type="radio" name="ui_theme" value="auto"
               x-model="form.ui_theme">
        {{ _("Auto (system)") }}
      </label>
      <label>
        <input type="radio" name="ui_theme" value="light"
               x-model="form.ui_theme">
        {{ _("Light") }}
      </label>
      <label>
        <input type="radio" name="ui_theme" value="dark"
               x-model="form.ui_theme">
        {{ _("Dark") }}
      </label>
    </fieldset>

    <fieldset>
      <legend>{{ _("Startup") }}</legend>
      <label>
        <input type="checkbox" x-model="form.autostart">
        {{ _("Start with Windows") }}
      </label>
      <small x-show="!autostartSupported">{{ _("Only available on Windows") }}</small>
    </fieldset>

    <button type="submit" :disabled="saving">
      <span x-show="!saving">{{ _("Save") }}</span>
      <span x-show="saving">{{ _("Saving...") }}</span>
    </button>
    <span x-show="error" class="error" x-text="error"></span>
  </form>
</section>

<script>
function settingsForm() {
    return {
        form: {
            ui_language: "{{ config.ui_language }}",
            ui_theme: "{{ config.ui_theme }}",
            autostart: {{ "true" if autostart_actual else "false" }},
        },
        saving: false,
        error: "",
        autostartSupported: navigator.userAgent.includes("Windows"),
        async save() {
            this.saving = true;
            this.error = "";
            try {
                const r = await fetch("/api/settings", {
                    method: "POST",
                    headers: {"Content-Type": "application/json"},
                    body: JSON.stringify(this.form),
                });
                if (!r.ok) {
                    const data = await r.json().catch(() => ({}));
                    this.error = data.error || `HTTP ${r.status}`;
                    return;
                }
                // localStorage 동기화 — theme.js 와 anti-flash 스크립트가 이 값을 본다.
                if (this.form.ui_theme === 'auto') {
                    localStorage.removeItem('assetcache_theme');
                } else {
                    localStorage.setItem('assetcache_theme', this.form.ui_theme);
                }
                window.location.reload();
            } catch (e) {
                this.error = String(e);
            } finally {
                this.saving = false;
            }
        },
    };
}
</script>
{% endblock %}