{% extends "base.html" %}
{% block title %}Ustawienia{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
  <h2 class="mb-2">⚙️ Ustawienia</h2>
  <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
</div>

{% include 'admin/_nav.html' %}

<form method="post" id="settings-form" data-unsaved-warning="true">
  <div class="card bg-dark text-white mb-4">
    <div class="card-header border-0">
      <strong>🔎 OCR — słowa kluczowe i czułość</strong>
    </div>
    <div class="card-body">
      <p class="small text-info mb-2">
        Dodaj lokalne frazy (CSV lub JSON), np.: <code>summe, gesamtbetrag, importe total</code>
      </p>
      <textarea
        class="form-control settings-ocr-textarea mb-3"
        name="ocr_keywords"
        rows="3"
        placeholder="suma, razem do zapłaty, total"
      >{{ current_ocr }}</textarea>

      <label for="ocr_sensitivity" class="form-label d-flex align-items-center gap-2">
        Poziom czułości OCR
        <span id="ocr_sens_badge" class="badge rounded-pill sens-badge">Średni</span>
        <span id="ocr_sens_value" class="small">({{ ocr_sensitivity }})</span>
      </label>
      <input
        type="range"
        class="form-range"
        min="1"
        max="10"
        step="1"
        name="ocr_sensitivity"
        id="ocr_sensitivity"
        value="{{ ocr_sensitivity }}"
      >
      <div class="small mt-1">
        <ul class="mb-2 ps-3">
          <li><strong>Zalecane:</strong> <code>5–7</code> (balans dokładności i stabilności).</li>
          <li><strong>Niskie (1–3):</strong> szybsze, mniejsza wykrywalność trudnych skanów.</li>
          <li><strong>Średnie (4–7):</strong> dobre na większość paragonów — <em>polecane</em>.</li>
          <li><strong>Wysokie (8–10):</strong> agresywne binaryzowanie — lepsze dla bladych skanów,
            ale większe ryzyko fałszywych trafień i wolniejsze działanie.</li>
        </ul>
        Tip: jeśli pojawiają się „dziwne” sumy — obniż o 1–2 poziomy.
      </div>
    </div>
  </div>

  <div class="card bg-dark text-white mb-4">
    <div class="card-header border-0 d-flex align-items-center justify-content-between">
      <strong>🎨 Kolory kategorii</strong>
      <button type="button" class="btn btn-outline-light btn-sm" id="reset-all">🔄 Wyczyść nadpisania</button>
    </div>

    <div class="card-body">
      <div class="row g-3" id="categories-grid">
        {% for c in categories %}
        {% set hex_override = overrides.get(c.id) %}
        {% set hex_auto = auto_colors[c.id] %}
        {% set hex_effective = effective_colors[c.id] %}
        <div class="col-12 col-md-6 col-lg-4">
          <div class="settings-category-card h-100">
            <div class="settings-category-header mb-2">
              <label class="form-label d-block mb-0 settings-category-name" for="color_{{ c.id }}">{{ c.name }}</label>
              <span class="badge settings-override-badge {{ 'text-bg-info' if hex_override else 'text-bg-secondary' }}" data-role="override-status">
                {{ 'Nadpisany' if hex_override else 'Domyślny' }}
              </span>
            </div>

            <input type="hidden" name="override_enabled_{{ c.id }}" value="{{ '1' if hex_override else '0' }}" class="override-enabled">

            <div class="settings-color-controls">
              <input
                type="color"
                class="form-control form-control-color category-color"
                id="color_{{ c.id }}"
                name="color_{{ c.id }}"
                value="{{ hex_effective }}"
                data-auto="{{ hex_auto }}"
                data-effective="{{ hex_effective }}"
                data-has-override="{{ '1' if hex_override else '0' }}"
                aria-label="Kolor kategorii {{ c.name }}"
              >

              <div class="settings-color-actions" role="group" aria-label="Akcje koloru">
                <button type="button"
                        class="btn btn-outline-light btn-sm reset-one"
                        data-target="color_{{ c.id }}">
                  🔄 Wyczyść nadpisanie
                </button>
                <button type="button"
                        class="btn btn-outline-light btn-sm use-default"
                        data-target="color_{{ c.id }}">
                  🎯 Ustaw kolor domyślny
                </button>
              </div>
            </div>

            <div class="color-indicators mt-3">
            <div class="indicator">
              <span class="badge text-bg-dark me-2">Efektywny</span>
              <span class="bar" data-kind="effective" style="background-color: {{ hex_effective }};"></span>
              <span class="hex hex-effective ms-2">{{ hex_effective|upper }}</span>
            </div>
            <div class="indicator mt-1">
              <span class="badge text-bg-light me-2">Domyślny</span>
              <span class="bar" data-kind="auto" style="background-color: {{ hex_auto }};"></span>
              <span class="hex hex-auto ms-2">{{ hex_auto|upper }}</span>
            </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>

  <div class="card bg-dark text-white mb-4">
    <div class="card-header border-0">
      <strong>🔐 Bezpieczeństwo</strong>
    </div>
    <div class="card-body">
      <label for="max_login_attempts" class="form-label">Limit błędnych logowań (hasło główne)</label>
      <input
        type="number"
        class="form-control"
        name="max_login_attempts"
        id="max_login_attempts"
        min="1"
        max="20"
        value="{{ max_login_attempts }}"
      >
      <div class="form-text text-muted">
        Po przekroczeniu limitu IP zostaje tymczasowo zablokowane.
      </div>
    </div>
  </div>

  <div class="mt-4 d-flex">
    <div class="btn-group" role="group" aria-label="Akcje ustawień">
      <button type="submit" class="btn btn-outline-light">💾 Zapisz</button>
      <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-light">❌ Anuluj</a>
    </div>
  </div>
</form>
{% endblock %}

{% block scripts %}
<link rel="stylesheet" href="{{ static_asset_url('static_bp.serve_css', 'admin_settings.css') }}">
<script src="{{ static_asset_url('static_bp.serve_js', 'admin_settings.js') }}"></script>
{% endblock %}