{#
  macros/interactive.html - Interactive UI component macros for APEP.
  Import with: {% from "apep/macros/interactive.html" import btn, hero_btn, download_btn,
                theme_switch, toast_container %}

  Macros:
    btn(label, variant, size, url, disabled)
    hero_btn(label, url, subtitle, variant)
    download_btn(label, file_path, variant)
    theme_switch(variant, position)
    toast_container(position)

  Author: sora7672
#}

{% from "apep/macros/helper.html" import alert %}


{#
  Renders a button or anchor using the APEP color component attribute system.
  No CSS classes. Colors via bgcolor/txtcolor/bordercolor from base_color_components.css.
  Hover via bgcolor-hover/txtcolor-hover/bordercolor-hover - no JS needed.

  Variants:
    primary   - yellow bg, dark text on hover darkens
    secondary - blue bg, light cream text, hover darkens
    ghost     - transparent bg + blue border, hover fills blue
    danger    - red bg, light text, hover darkens

  @param label    {string} - button text
  @param variant  {string} - "primary" | "secondary" | "ghost" | "danger", default "primary"
  @param size     {string} - "sm" | "md" | "lg", default "md"
  @param url      {string} - renders as <a href> when set and not disabled. Optional.
  @param disabled {bool}   - disables interaction. Forces <button> even with url. Default false.
#}
{% macro btn(label, variant="primary", size="md", url=None, disabled=False) %}
{% if not label %}
    {{ alert("btn: label is required", "Pass a non-empty string as the first argument.") }}
{% elif variant not in ["primary", "secondary", "ghost", "danger"] %}
    {{ alert("btn: invalid variant \"" ~ variant ~ "\"", "Allowed values: \"primary\", \"secondary\", \"ghost\", \"danger\".") }}
{% elif size not in ["sm", "md", "lg"] %}
    {{ alert("btn: invalid size \"" ~ size ~ "\"", "Allowed values: \"sm\", \"md\", \"lg\".") }}
{% else %}
{% set _pad   = {"sm":"var(--space-2) var(--space-4)","md":"var(--space-3) var(--space-6)","lg":"var(--space-4) var(--space-8)"}[size] %}
{% set _fsize = {"sm":"var(--font-size-xs)","md":"var(--font-size-sm)","lg":"var(--font-size-base)"}[size] %}
{# bg, txt, bdr, bg-hover, bdr-hover #}
{% set _v = {
    "primary":   ["primary",   "surface",      "primary",   "primary-dark",   "primary-dark"],
    "secondary": ["secondary", "text-inverted", "secondary", "secondary-dark", "secondary-dark"],
    "ghost":     ["bg",        "secondary",     "secondary", "bg",             "secondary-dark"],
    "danger":    ["danger",    "text-inverted", "danger",    "danger",         "danger"]
}[variant] %}
{% set _style = "display:inline-flex;align-items:center;justify-content:center;padding:" ~ _pad ~ ";font-family:var(--font-display);font-size:" ~ _fsize ~ ";font-weight:600;letter-spacing:var(--letter-spacing-wide);border:2px solid;border-radius:var(--radius-md);cursor:pointer;text-decoration:none;white-space:nowrap;box-sizing:border-box;transition:background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base);" %}
{% if url and not disabled %}
<a href="{{ url }}"
   bgcolor="{{ _v[0] }}" txtcolor="{{ _v[1] }}" bordercolor="{{ _v[2] }}"
   bgcolor-hover="{{ _v[3] }}" bordercolor-hover="{{ _v[4] }}"
   {% if variant == "ghost" %}txtcolor-hover="secondary-dark"{% endif %}
   style="{{ _style }}"
>{{ label }}</a>
{% else %}
<button type="button"
   bgcolor="{{ _v[0] }}" txtcolor="{{ _v[1] }}" bordercolor="{{ _v[2] }}"
   bgcolor-hover="{{ _v[3] }}" bordercolor-hover="{{ _v[4] }}"
   {% if variant == "ghost" %}txtcolor-hover="secondary-dark"{% endif %}
   style="{{ _style }}{% if disabled %}opacity:0.5;cursor:not-allowed;{% endif %}"
   {% if disabled %}disabled aria-disabled="true"{% endif %}
>{{ label }}</button>
{% endif %}
{% endif %}
{% endmacro %}


{#
  Renders a large call-to-action button with an optional subtitle line.
  Built from custom tags and color components - no extra CSS needed.
  Always renders as an anchor tag.

  @param label    {string} - main button text
  @param url      {string} - link target, default "#"
  @param subtitle {string} - small muted text rendered below the button. Optional.
  @param variant  {string} - "primary" | "secondary", default "primary"
#}
{% macro hero_btn(label, url="#", subtitle=None, variant="primary") %}
{% if not label %}
    {{ alert("hero_btn: label is required", "Pass a non-empty string as the first argument.") }}
{% elif variant not in ["primary", "secondary"] %}
    {{ alert("hero_btn: invalid variant \"" ~ variant ~ "\"", "Allowed values: \"primary\", \"secondary\".") }}
{% else %}
{% set _v = {
    "primary":   ["primary",   "surface",      "primary",   "primary-dark"],
    "secondary": ["secondary", "text-inverted", "secondary", "secondary-dark"]
}[variant] %}
<stack align="center" gap="sm">
    <a href="{{ url }}"
       bgcolor="{{ _v[0] }}" txtcolor="{{ _v[1] }}" bordercolor="{{ _v[2] }}"
       bgcolor-hover="{{ _v[3] }}" bordercolor-hover="{{ _v[3] }}"
       style="display:inline-flex;align-items:center;justify-content:center;padding:var(--space-4) var(--space-8);font-family:var(--font-display);font-size:var(--font-size-base);font-weight:600;letter-spacing:var(--letter-spacing-wide);border:2px solid;border-radius:var(--radius-md);cursor:pointer;text-decoration:none;white-space:nowrap;box-sizing:border-box;transition:background-color var(--transition-base),border-color var(--transition-base);"
    >{{ label }}</a>
    {% if subtitle %}
    <small txtcolor="text-muted">{{ subtitle }}</small>
    {% endif %}
</stack>
{% endif %}
{% endmacro %}


{#
  Renders a download button in one of three visual variants.
  The file_path is passed as a data attribute and handled by download-btn.js,
  which resolves the path under /downloads/ and triggers the browser download.

  @param label     {string} - displayed button text
  @param file_path {string} - path to the file, resolved under /downloads/ by download-btn.js
  @param variant   {string} - "default" | "icon" | "minimal", default "default"
                              default  - full button with filetype icon
                              icon     - compact icon + label, no wrapper
                              minimal  - underline link style with down arrow
#}
{% macro download_btn(label, file_path, variant="default") %}
{% if not label %}
    {{ alert("download_btn: label is required", "Pass a non-empty string as the first argument.") }}
{% elif not file_path %}
    {{ alert("download_btn: file_path is required", "Pass a valid file path as the second argument.") }}
{% elif variant not in ["default", "icon", "minimal"] %}
    {{ alert("download_btn: invalid variant \"" ~ variant ~ "\"", "Allowed values: \"default\", \"icon\", \"minimal\".") }}
{% else %}

{% if variant == "minimal" %}
<button class="download-btn-minimal" type="button" data-file-path="{{ file_path }}">
    <span class="download-btn-minimal-label">{{ label }}</span>
    <span class="download-btn-minimal-arrow">&#8595;</span>
    <span class="download-btn-minimal-error" aria-live="polite"></span>
</button>

{% elif variant == "icon" %}
<button class="download-btn-icon" type="button" data-file-path="{{ file_path }}">
    <span class="download-btn-icon-img"></span>
    <span class="download-btn-icon-label">{{ label }}</span>
    <span class="download-btn-icon-error" aria-live="polite"></span>
</button>

{% else %}
<div class="download-btn-wrapper">
    <button class="download-btn" type="button" data-file-path="{{ file_path }}">
        <span class="download-btn-icon-img"></span>
        <span class="download-btn-label">{{ label }}</span>
    </button>
    <span class="download-btn-error" aria-live="polite"></span>
</div>
{% endif %}

<script>ApepLoader.register("download-btn.css");</script>
<script>ApepLoader.register("download-btn.js", "blocking");</script>
{% endif %}
{% endmacro %}


{#
  Renders a light/dark theme toggle in one of three variants.
  theme-switch.js is loaded globally by the backend to prevent flash-of-wrong-theme.
  All variants are detected via querySelectorAll("[data-theme-btn]") or
  "[data-theme-checkbox]" - multiple variants on one page are supported.

  @param variant  {string} - "icon" | "slider" | "floating", default "icon"
                             icon     - plain button, place anywhere in layout
                             slider   - toggle slider with animated thumb
                             floating - fixed-position button
  @param position {string} - only used for variant "floating"
                             "top-left" | "top-right" | "bottom-left" | "bottom-right"
                             default "bottom-right"
#}
{% macro theme_switch(variant="floating", position="bottom-right") %}
{% if variant not in ["icon", "slider", "floating"] %}
    {{ alert("theme_switch: invalid variant \"" ~ variant ~ "\"", "Allowed values: \"icon\", \"slider\", \"floating\".") }}
{% elif variant == "floating" and position not in ["top-left", "top-right", "bottom-left", "bottom-right"] %}
    {{ alert("theme_switch: invalid position \"" ~ position ~ "\"", "Allowed values: \"top-left\", \"top-right\", \"bottom-left\", \"bottom-right\".") }}
{% else %}

{% if variant == "floating" %}
<div class="theme-switch-floating theme-switch-floating-{{ position }}">
    <button class="theme-switch-btn" data-theme-btn aria-label="Toggle theme">
        <span class="theme-switch-icon"></span>
    </button>
</div>

{% elif variant == "slider" %}
<label class="theme-switch-slider" aria-label="Toggle theme">
    <input type="checkbox" data-theme-checkbox class="theme-switch-input">
    <span class="theme-switch-track">
        <span class="theme-switch-thumb">
            <span class="theme-switch-icon"></span>
        </span>
    </span>
</label>

{% else %}
<button class="theme-switch-btn" data-theme-btn aria-label="Toggle theme">
    <span class="theme-switch-icon"></span>
</button>
{% endif %}

<script>ApepLoader.register("theme-switch.css");</script>
{% endif %}
{% endmacro %}


{#
  Renders the toast container. Place once per page, ideally before </body>.
  Toasts are injected and removed via toast.js (ApepToast.show()).

  @param position {string} - "top-right" | "top-left" | "bottom-right" | "bottom-left"
                             | "top-center" | "bottom-center", default "bottom-right"
#}
{% macro toast_container(position="bottom-right") %}
{% if position not in ["top-right", "top-left", "bottom-right", "bottom-left", "top-center", "bottom-center"] %}
    {{ alert("toast_container: invalid position \"" ~ position ~ "\"", "Allowed values: \"top-right\", \"top-left\", \"bottom-right\", \"bottom-left\", \"top-center\", \"bottom-center\".") }}
{% else %}
<div
    class="toast-container toast-container-{{ position }}"
    id="apep-toast-container"
    aria-live="polite"
    aria-atomic="false"
></div>
<script>ApepLoader.register("toast.css");</script>
<script>ApepLoader.register("toast.js", "defer");</script>
{% endif %}
{% endmacro %}