{% extends "base.html" %}

{% block title %}Settings · CalMiner{% endblock %}

{% block content %}
  <section class="page-header">
    <div>
      <h1>Settings</h1>
      <p class="page-subtitle">Configure platform defaults and administrative options.</p>
    </div>
  </section>
  <section class="settings-grid">
    <article class="settings-card">
      <h2>Currency Management</h2>
      <p>Manage available currencies, symbols, and default selections from the Currency Management page.</p>
      <a class="button-link" href="/ui/currencies">Go to Currency Management</a>
    </article>
    <article class="settings-card">
      <h2>Visual Theme</h2>
      <p>Adjust CalMiner theme colors and preview changes instantly.</p>
      <p class="settings-card-note">Changes save to the settings table and apply across the UI after submission. Environment overrides (if configured) remain read-only.</p>
    </article>
  </section>

  <section class="panel" id="theme-settings" data-api="/api/settings/css">
    <header class="panel-header">
      <div>
        <h2>Theme Colors</h2>
        <p class="chart-subtitle">Update global CSS variables to customize CalMiner&apos;s appearance.</p>
      </div>
    </header>
    <form id="theme-settings-form" class="form-grid color-form-grid" novalidate>
      {% for key, value in css_variables.items() %}
      {% set env_meta = css_env_override_meta.get(key) %}
      <label class="color-form-field{% if env_meta %} is-env-override{% endif %}" data-variable="{{ key }}">
        <span class="color-field-header">
          <span class="color-field-name">{{ key }}</span>
          <span class="color-field-default">Default: {{ css_defaults[key] }}</span>
        </span>
        <span class="color-field-helper" id="color-helper-{{ loop.index }}">Accepts hex, rgb(a), or hsl(a) values.</span>
        {% if env_meta %}
        <span class="color-env-flag">Managed via {{ env_meta.env_var }} (read-only)</span>
        {% endif %}
        <span class="color-input-row">
          <input
            type="text"
            name="{{ key }}"
            class="color-value-input"
            value="{{ value }}"
            autocomplete="off"
            aria-describedby="color-helper-{{ loop.index }}"
            {% if env_meta %}disabled aria-disabled="true" data-env-override="true"{% endif %}
          />
          <span class="color-preview" aria-hidden="true" style="background: {{ value }}"></span>
        </span>
      </label>
      {% endfor %}

      <div class="button-row">
        <button type="submit" class="btn primary">Save Theme</button>
        <button type="button" class="btn" id="theme-settings-reset">Reset to Defaults</button>
      </div>
    </form>
    {% from "partials/components.html" import feedback with context %}
    {{ feedback("theme-settings-feedback") }}
  </section>

  <section class="panel" id="theme-env-overrides">
    <header class="panel-header">
      <div>
        <h2>Environment Overrides</h2>
        <p class="chart-subtitle">The following CSS variables are controlled via environment variables and take precedence over database values.</p>
      </div>
    </header>
    {% if css_env_override_rows %}
    <div class="table-container env-overrides-table">
      <table aria-label="Environment-controlled theme variables">
        <thead>
          <tr>
            <th scope="col">CSS Variable</th>
            <th scope="col">Environment Variable</th>
            <th scope="col">Value</th>
          </tr>
        </thead>
        <tbody>
          {% for row in css_env_override_rows %}
          <tr>
            <td><code>{{ row.css_key }}</code></td>
            <td><code>{{ row.env_var }}</code></td>
            <td><code>{{ row.value }}</code></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="empty-state">No environment overrides configured.</p>
    {% endif %}
  </section>
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script id="theme-settings-data" type="application/json">
    {{ {
      "variables": css_variables,
      "defaults": css_defaults,
      "envOverrides": css_env_overrides,
      "envSources": css_env_override_rows
    } | tojson }}
  </script>
  <script src="/static/js/settings.js"></script>
{% endblock %}