import hashlib
from functools import lru_cache
from typing import Any

from django.db import models
from django.middleware.csrf import get_token
from django.template.defaultfilters import floatformat
from django.templatetags.static import static
from django.urls import reverse
from django.utils.html import conditional_escape, escape
from django.utils.safestring import SafeText, mark_safe

from common.icons import get_icon
from common.utils import truncate
from games.models import Game, Purchase, Session

HTMLAttribute = tuple[str, str | int | bool]
HTMLTag = str

_COLOR_CLASSES = {
    "blue": "text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium",
    "red": "bg-red-700 dark:bg-red-600 dark:focus:ring-red-900 dark:hover:bg-red-700 focus:ring-red-300 hover:bg-red-800 text-white",
    "gray": "bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-600 dark:focus:ring-gray-700 dark:hover:bg-gray-700 dark:hover:text-white dark:text-gray-400 focus:ring-gray-100 hover:bg-gray-100 hover:text-blue-700 text-gray-900 border",
    "green": "bg-green-700 dark:bg-green-600 dark:focus:ring-green-800 dark:hover:bg-green-700 focus:ring-green-300 hover:bg-green-800 text-white",
}

_SIZE_CLASSES = {
    "xs": "px-3 py-2 text-xs shadow-xs",
    "sm": "px-3 py-2 text-sm",
    "base": "px-5 py-2.5 text-sm",
    "lg": "px-5 py-3 text-base",
    "xl": "px-6 py-3.5 text-base",
}


@lru_cache(maxsize=4096)
def _render_element(
    tag_name: str,
    attrs_key: tuple[tuple[str, str], ...],
    children_key: tuple[tuple[str, bool], ...],
) -> str:
    """Pure, memoized HTML builder behind `Component`.

    Inputs are fully hashable and fully determine the output, so identical
    elements are rendered once. `attrs_key` is (name, stringified value) pairs
    (attribute values are always escaped). `children_key` is (child, is_safe)
    pairs: SafeText children pass through, plain strings are escaped. The
    `is_safe` flag is part of the key on purpose — otherwise a safe ``"<b>"``
    and an unsafe ``"<b>"`` (equal as strings) would collide and one would
    render with the wrong escaping.
    """
    children_blob = "\n".join(
        child if is_safe else escape(child) for child, is_safe in children_key
    )
    if attrs_key:
        attributes_blob = " " + " ".join(
            f'{name}="{escape(value)}"' for name, value in attrs_key
        )
    else:
        attributes_blob = ""
    return f"<{tag_name}{attributes_blob}>{children_blob}</{tag_name}>"


def Component(
    attributes: list[HTMLAttribute] | None = None,
    children: list[HTMLTag] | HTMLTag | None = None,
    tag_name: str = "",
) -> SafeText:
    """Render an HTML element. Attribute values are always escaped; children are
    escaped unless they are `SafeText` (so nested components pass through),
    preventing accidental HTML injection. Rendering is memoized via
    `_render_element`."""
    attributes = attributes or []
    children = children or []
    if not tag_name:
        raise ValueError("tag_name is required.")
    if isinstance(children, str):
        children = [children]
    attrs_key = tuple((name, str(value)) for name, value in attributes)
    children_key = tuple((child, isinstance(child, SafeText)) for child in children)
    return mark_safe(_render_element(tag_name, attrs_key, children_key))


def randomid(seed: str = "", content: str = "", length: int = 10) -> str:
    if not seed and not content:
        return seed
    hash_input = f"{seed}:{content}" if seed else content
    content_hash = hashlib.sha1(hash_input.encode()).hexdigest()
    base = (
        content_hash[:length]
        if not seed
        else content_hash[: max(0, length - len(seed))]
    )
    return seed + base


def _popover_html(
    id: str,
    popover_content: str,
    wrapped_content: str = "",
    wrapped_classes: str = "",
    slot: str = "",
) -> SafeText:
    """Generate popover HTML using Component(tag_name=...).

    Single source of truth for popover HTML structure.
    Used by Popover() and the python_popover template tag bridge.
    """
    display_content = wrapped_content if wrapped_content else slot

    span = Component(
        tag_name="span",
        attributes=[
            ("data-popover-target", id),
            ("class", wrapped_classes),
        ],
        children=[display_content] if display_content else [],
    )

    popover_tooltip_class = (
        "absolute z-10 invisible inline-block text-sm text-white "
        "transition-opacity duration-300 bg-white border border-purple-200 "
        "rounded-lg shadow-xs opacity-0 dark:text-white dark:border-purple-600 "
        "dark:bg-purple-800"
    )

    div = Component(
        tag_name="div",
        attributes=[
            ("data-popover", ""),
            ("id", id),
            ("role", "tooltip"),
            ("class", popover_tooltip_class),
        ],
        children=[
            Component(
                tag_name="div",
                attributes=[("class", "px-3 py-2")],
                children=[popover_content],
            ),
            Component(tag_name="div", attributes=[("data-popper-arrow", "")]),
            mark_safe(  # nosec — intentional HTML comment for Tailwind JIT
                "<!-- for Tailwind CSS to generate decoration-dotted CSS "
                "from Python component -->"
            ),
            Component(
                tag_name="span",
                attributes=[("class", "hidden decoration-dotted")],
            ),
        ],
    )

    return mark_safe(span + "\n" + div)


def Popover(
    popover_content: str,
    wrapped_content: str = "",
    wrapped_classes: str = "",
    children: list[HTMLTag] | None = None,
    attributes: list[HTMLAttribute] | None = None,
    id: str = "",
) -> str:
    children = children or []
    if not wrapped_content and not children:
        raise ValueError("One of wrapped_content or children is required.")
    if not id:
        id = randomid(content=f"{wrapped_content}:{popover_content}:{wrapped_classes}")

    slot = mark_safe("\n".join(children))
    return _popover_html(
        id=id,
        popover_content=popover_content,
        wrapped_content=wrapped_content,
        wrapped_classes=wrapped_classes,
        slot=slot,
    )


def PopoverTruncated(
    input_string: str,
    popover_content: str = "",
    popover_if_not_truncated: bool = False,
    length: int = 30,
    ellipsis: str = "…",
    endpart: str = "",
) -> str:
    """
    Returns `input_string` truncated after `length` of characters
    and displays the untruncated text in a popover HTML element.
    The truncated text ends in `ellipsis`, and optionally
    an always-visible `endpart` can be specified.
    `popover_content` can be specified if:
    1. It needs to be always displayed regardless if text is truncated.
    2. It needs to differ from `input_string`.
    """
    if (truncated := truncate(input_string, length, ellipsis, endpart)) != input_string:
        return Popover(
            wrapped_content=truncated,
            popover_content=popover_content if popover_content else input_string,
        )
    else:
        if popover_content and popover_if_not_truncated:
            return Popover(
                wrapped_content=input_string,
                popover_content=popover_content if popover_content else "",
            )
        else:
            return input_string


def A(
    attributes: list[HTMLAttribute] | None = None,
    children: list[HTMLTag] | HTMLTag | None = None,
    url_name: str | None = None,
    href: str | None = None,
) -> SafeText:
    """
    Returns an anchor <a> tag.

    Accepts one of two mutually-exclusive URL specifications:
        - url_name: URL pattern name, resolved via reverse()
        - href: Literal path string passed through as-is
    """
    attributes = attributes or []
    children = children or []
    if url_name is not None and href is not None:
        raise ValueError("Provide exactly one of 'url_name' or 'href', not both.")

    additional_attributes = []
    if url_name is not None:
        additional_attributes = [("href", reverse(url_name))]
    elif href is not None:
        additional_attributes = [("href", href)]
    return Component(
        tag_name="a", attributes=attributes + additional_attributes, children=children
    )


def Button(
    attributes: list[HTMLAttribute] | None = None,
    children: list[HTMLTag] | HTMLTag | None = None,
    size: str = "base",
    icon: bool = False,
    color: str = "blue",
    type: str = "button",
    hx_get: str = "",
    hx_target: str = "",
    hx_swap: str = "",
    title: str = "",
    onclick: str = "",
    name: str = "",
) -> SafeText:
    attributes = attributes or []
    children = children or []

    # Separate custom class from other generic attributes
    custom_class = ""
    other_attrs: list[HTMLAttribute] = []
    for attr_name, attr_value in attributes:
        if attr_name == "class":
            custom_class = str(attr_value)
        else:
            other_attrs.append((attr_name, attr_value))

    # Build class string: custom class first, then base, color, size, icon
    class_parts: list[str] = []
    if custom_class:
        class_parts.append(custom_class)
    class_parts.append(
        "hover:cursor-pointer leading-5 focus:outline-hidden focus:ring-4 "
        "font-medium mb-2 me-2 rounded-base"
    )
    class_parts.append(_COLOR_CLASSES.get(color, _COLOR_CLASSES["blue"]))
    class_parts.append(_SIZE_CLASSES.get(size, _SIZE_CLASSES["base"]))
    if icon:
        class_parts.append("inline-flex text-center items-center gap-2")

    # Build the full attribute list for the button tag
    button_attrs: list[HTMLAttribute] = [
        ("type", type),
        ("class", " ".join(class_parts)),
    ]
    if hx_get:
        button_attrs.append(("hx-get", hx_get))
    if hx_target:
        button_attrs.append(("hx-target", hx_target))
    if hx_swap:
        button_attrs.append(("hx-swap", hx_swap))
    if title:
        button_attrs.append(("title", title))
    if onclick:
        button_attrs.append(("onclick", onclick))
    if name:
        button_attrs.append(("name", name))
    button_attrs.extend(other_attrs)

    return Component(
        tag_name="button",
        attributes=button_attrs,
        children=children,
    )


_GROUP_BUTTON_COLORS = {
    "gray": (
        "px-2 py-1 text-xs font-medium text-gray-900 bg-white border "
        "border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 "
        "focus:ring-2 focus:ring-blue-700 focus:text-blue-700 "
        "dark:bg-gray-800 dark:border-gray-700 dark:text-white "
        "dark:hover:text-white dark:hover:bg-gray-700 "
        "dark:focus:ring-blue-500 dark:focus:text-white"
    ),
    "red": (
        "px-2 py-1 text-xs font-medium text-gray-900 bg-white border "
        "border-gray-200 hover:bg-red-500 hover:text-white focus:z-10 "
        "focus:ring-2 focus:ring-blue-700 focus:text-blue-700 "
        "dark:bg-gray-800 dark:border-gray-700 dark:text-white "
        "dark:hover:text-white dark:hover:border-red-700 "
        "dark:hover:bg-red-700 dark:focus:ring-blue-500 dark:focus:text-white"
    ),
    "green": (
        "px-2 py-1 text-xs font-medium text-gray-900 bg-white border "
        "border-gray-200 hover:bg-green-500 hover:border-green-600 "
        "hover:text-white focus:z-10 focus:ring-2 focus:ring-green-700 "
        "focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 "
        "dark:text-white dark:hover:text-white dark:hover:border-green-700 "
        "dark:hover:bg-green-600 dark:focus:ring-green-500 "
        "dark:focus:text-white"
    ),
}


def _button_group_button(
    href: str,
    slot: str,
    color: str = "gray",
    title: str = "",
    hx_get: str = "",
    hx_target: str = "",
) -> SafeText:
    """Generate a single button-group button (inner <button> inside <a>)."""
    color_classes = _GROUP_BUTTON_COLORS.get(color, _GROUP_BUTTON_COLORS["gray"])

    a_attrs: list[HTMLAttribute] = [("href", href)]
    if hx_get:
        a_attrs.append(("hx-get", hx_get))
    if hx_target:
        a_attrs.append(("hx-target", hx_target))
    a_attrs.append(
        (
            "class",
            "[&:first-of-type_button]:rounded-s-lg "
            "[&:last-of-type_button]:rounded-e-lg",
        )
    )

    button = Component(
        tag_name="button",
        attributes=[
            ("type", "button"),
            ("title", title),
            ("class", color_classes + " hover:cursor-pointer"),
        ],
        children=[slot],
    )

    return Component(tag_name="a", attributes=a_attrs, children=[button])


def ButtonGroup(buttons: list[dict] | None = None) -> SafeText:
    """Generate a button group div.

    Each button dict accepts: href, slot (required), color, title, hx_get, hx_target.
    Empty dicts (no slot) are silently skipped — matching the template behavior
    for conditional buttons (e.g., end-session only when session is active).
    """
    buttons = buttons or []
    children: list[SafeText] = []
    for btn in buttons:
        if not btn or not btn.get("slot"):
            continue
        children.append(
            _button_group_button(
                href=btn.get("href", "#"),
                slot=btn["slot"],
                color=btn.get("color", "gray"),
                title=btn.get("title", ""),
                hx_get=btn.get("hx_get", ""),
                hx_target=btn.get("hx_target", ""),
            )
        )

    return Component(
        tag_name="div",
        attributes=[("class", "inline-flex rounded-md shadow-xs"), ("role", "group")],
        children=children,
    )


def Div(
    attributes: list[HTMLAttribute] | None = None,
    children: list[HTMLTag] | HTMLTag | None = None,
) -> SafeText:
    attributes = attributes or []
    children = children or []
    return Component(tag_name="div", attributes=attributes, children=children)


def Input(
    type: str = "text",
    attributes: list[HTMLAttribute] | None = None,
    children: list[HTMLTag] | HTMLTag | None = None,
) -> SafeText:
    attributes = attributes or []
    children = children or []
    return Component(
        tag_name="input", attributes=attributes + [("type", type)], children=children
    )


def CsrfInput(request) -> SafeText:
    """Hidden CSRF input, equivalent to the `{% csrf_token %}` template tag."""
    return mark_safe(
        f'<input type="hidden" name="csrfmiddlewaretoken" value="{get_token(request)}">'
    )


def ModuleScript(filename: str) -> SafeText:
    """A `<script type="module">` tag pointing at a static JS file."""
    return mark_safe(
        f'<script type="module" src="{static("js/" + filename)}"></script>'
    )


def AddForm(
    form,
    *,
    request,
    fields: SafeText | str | None = None,
    additional_row: SafeText | str = "",
    submit_class: str = "mt-3",
) -> SafeText:
    """Page body for the generic add/edit form (Python equivalent of add.html).

    `fields` overrides the default ``form.as_div()`` field markup (used by the
    session form, which lays out its fields manually). `additional_row` holds
    extra submit buttons rendered below the main Submit button. `submit_class`
    is applied to the main Submit button (the session form passes "" to match
    its original markup).
    """
    field_markup = fields if fields is not None else mark_safe(form.as_div())
    submit_attrs = [("class", submit_class)] if submit_class else []

    inner_form = Component(
        tag_name="form",
        attributes=[("method", "post"), ("enctype", "multipart/form-data")],
        children=[
            CsrfInput(request),
            field_markup,
            Div(children=[Button(submit_attrs, "Submit", type="submit")]),
            Div(
                [("class", "submit-button-container")],
                [additional_row] if additional_row else [],
            ),
        ],
    )

    return Div(
        [("id", "add-form"), ("class", "max-width-container")],
        [
            Div(
                [("id", "add-form"), ("class", "form-container max-w-xl mx-auto")],
                [inner_form],
            )
        ],
    )


def SearchField(
    search_string: str = "",
    id: str = "search_string",
    placeholder: str = "Search",
) -> SafeText:
    """Generate a search form with icon, input field, and submit button."""
    return Component(
        tag_name="form",
        attributes=[("class", "max-w-md")],
        children=[
            Component(
                tag_name="label",
                attributes=[
                    ("for", "search"),
                    ("class", "block mb-2.5 text-sm font-medium text-heading sr-only"),
                ],
                children=["Search"],
            ),
            Component(
                tag_name="div",
                attributes=[("class", "relative")],
                children=[
                    mark_safe(
                        '<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">'
                        '<svg class="w-4 h-4 text-body" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" '
                        'fill="none" viewBox="0 0 24 24">'
                        '<path stroke="currentColor" stroke-linecap="round" stroke-width="2" '
                        'd="m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"/>'
                        "</svg></div>"
                    ),
                    Component(
                        tag_name="input",
                        attributes=[
                            ("type", "search"),
                            ("id", id),
                            ("name", id),
                            ("value", search_string),
                            (
                                "class",
                                "block w-full p-3 ps-9 bg-neutral-secondary-medium "
                                "border border-default-medium text-heading text-sm "
                                "rounded-base focus:ring-brand focus:border-brand "
                                "shadow-xs placeholder:text-body",
                            ),
                            ("placeholder", placeholder),
                            ("required", ""),
                        ],
                    ),
                    Component(
                        tag_name="button",
                        attributes=[
                            ("type", "submit"),
                            (
                                "class",
                                "absolute end-1.5 bottom-1.5 text-white bg-brand "
                                "hover:bg-brand-strong box-border border border-transparent "
                                "focus:ring-4 focus:ring-brand-medium shadow-xs font-medium "
                                "leading-5 rounded text-xs px-3 py-1.5 focus:outline-none "
                                "cursor-pointer",
                            ),
                        ],
                        children=["Search"],
                    ),
                ],
            ),
        ],
    )


def GameLink(
    game_id: int,
    name: str = "",
    children: list[HTMLTag] | HTMLTag | None = None,
) -> SafeText:
    """Link to a game's detail page. Uses children (slot) if provided, otherwise name."""
    from django.urls import reverse

    children = children or []
    display = children if children else [name]
    link = reverse("games:view_game", args=[game_id])

    return Component(
        tag_name="span",
        attributes=[("class", "truncate-container")],
        children=[
            Component(
                tag_name="a",
                attributes=[
                    ("href", link),
                    ("class", "underline decoration-slate-500 sm:decoration-2"),
                ],
                children=display if isinstance(display, list) else [display],
            ),
        ],
    )


_STATUS_COLORS = {
    "u": "bg-gray-500",
    "p": "bg-orange-400",
    "f": "bg-green-500",
    "a": "bg-red-500",
    "r": "bg-purple-500",
}


def GameStatus(
    children: list[HTMLTag] | HTMLTag | None = None,
    status: str = "u",
    display: str = "",
    class_: str = "",
) -> SafeText:
    """Colored status dot with label. Status codes: u/p/f/a/r."""
    children = children or []
    outer_class = (
        f"{'flex' if display == 'flex' else 'inline-flex'} "
        "gap-2 items-center align-middle"
    )
    if class_:
        outer_class += f" {class_}"
    dot_color = _STATUS_COLORS.get(status, _STATUS_COLORS["u"])

    dot = Component(
        tag_name="span",
        attributes=[("class", f"rounded-xl w-3 h-3 {dot_color}")],
        children=["\xa0"],
    )

    return Component(
        tag_name="span",
        attributes=[("class", outer_class)],
        children=[dot] + (children if isinstance(children, list) else [children]),
    )


def PriceConverted(
    children: list[HTMLTag] | HTMLTag | None = None,
) -> SafeText:
    """Wrap content in a span that indicates the price was converted."""
    children = children or []
    return Component(
        tag_name="span",
        attributes=[
            ("title", "Price is a result of conversion and rounding."),
            ("class", "decoration-dotted underline"),
        ],
        children=children if isinstance(children, list) else [children],
    )


def H1(
    children: list[HTMLTag] | HTMLTag | None = None,
    badge: str = "",
) -> SafeText:
    """Heading with optional badge count."""
    children = children or []
    heading_class = "mb-4 text-3xl font-extrabold leading-none tracking-tight text-gray-900 dark:text-white"
    badge_html = ""

    if badge:
        heading_class = "flex items-center " + heading_class
        badge_html = Component(
            tag_name="span",
            attributes=[
                (
                    "class",
                    "bg-blue-100 text-blue-800 text-2xl font-semibold me-2 "
                    "px-2.5 py-0.5 rounded-sm dark:bg-blue-200 dark:text-blue-800 ms-2",
                ),
            ],
            children=[badge],
        )

    return Component(
        tag_name="h1",
        attributes=[("class", heading_class)],
        children=(children if isinstance(children, list) else [children])
        + ([badge_html] if badge_html else []),
    )


def Modal(
    modal_id: str,
    children: list[HTMLTag] | HTMLTag | None = None,
) -> SafeText:
    """Modal overlay with container. Content (form, buttons) goes in children."""
    children = children or []
    outer = Component(
        tag_name="div",
        attributes=[
            ("id", modal_id),
            (
                "class",
                "fixed inset-0 bg-black/70 dark:bg-gray-600/50 overflow-y-auto "
                "h-full w-full flex items-center justify-center",
            ),
        ],
        children=[
            Component(
                tag_name="div",
                attributes=[
                    (
                        "class",
                        "relative mx-auto p-5 border-accent border w-full max-w-md "
                        "shadow-lg/50 rounded-md bg-white dark:bg-gray-900",
                    ),
                ],
                children=(children if isinstance(children, list) else [children]),
            ),
        ],
    )
    return mark_safe(str(outer))


def TableTd(
    children: list[HTMLTag] | HTMLTag | None = None,
) -> SafeText:
    """Styled table cell."""
    children = children or []
    return Component(
        tag_name="td",
        attributes=[("class", "px-6 py-4 min-w-20-char max-w-20-char")],
        children=children if isinstance(children, list) else [children],
    )


def TableRow(data: dict | list | None = None) -> SafeText:
    """Generate a <tr> from a row data dict or list.

    Dict form: {"row_id": "...", "cell_data": [...], "hx_trigger": ..., ...}
    - first cell is <th>, rest <td>.
    List form: [...] — all cells are <td>.
    """
    if data is None:
        data = {}
    if isinstance(data, dict):
        row_id = data.get("row_id", "")
        cells = data.get("cell_data", [])
    else:
        row_id = ""
        cells = data

    tr_class = (
        "odd:bg-white dark:odd:bg-gray-900 even:bg-gray-50 "
        "dark:even:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 "
        "dark:hover:bg-gray-600 [&_a]:underline [&_a]:underline-offset-4 "
        "[&_a]:decoration-2 [&_td:last-child]:text-right"
    )
    tr_attrs: list[HTMLAttribute] = [("class", tr_class)]
    if row_id:
        tr_attrs.append(("id", row_id))
    if isinstance(data, dict):
        if data.get("hx_trigger"):
            tr_attrs.append(("hx-trigger", data["hx_trigger"]))
        if data.get("hx_get"):
            tr_attrs.append(("hx-get", data["hx_get"]))
        if data.get("hx_select"):
            tr_attrs.append(("hx-select", data["hx_select"]))
        if data.get("hx_swap"):
            tr_attrs.append(("hx-swap", data["hx_swap"]))

    cell_elements: list[SafeText] = []
    for i, cell in enumerate(cells):
        if i == 0:
            cell_elements.append(
                Component(
                    tag_name="th",
                    attributes=[
                        ("scope", "row"),
                        (
                            "class",
                            "px-6 py-4 font-medium text-gray-900 "
                            "whitespace-nowrap dark:text-white",
                        ),
                    ],
                    children=[cell],
                )
            )
        else:
            cell_elements.append(TableTd(children=[cell]))

    return Component(tag_name="tr", attributes=tr_attrs, children=cell_elements)


def Icon(
    name: str,
    attributes: list[HTMLAttribute] | None = None,
) -> SafeText:
    return mark_safe(get_icon(name))


def TableHeader(
    children: list[HTMLTag] | HTMLTag | None = None,
) -> SafeText:
    """Table caption."""
    children = children or []
    return Component(
        tag_name="caption",
        attributes=[
            (
                "class",
                "p-2 text-lg font-semibold rtl:text-left text-right "
                "text-gray-900 bg-white dark:text-white dark:bg-gray-900",
            ),
        ],
        children=children if isinstance(children, list) else [children],
    )


def _page_url(request, page) -> str:
    """Current querystring with `page` replaced (mirrors {% param_replace %})."""
    if request is None:
        return f"?page={page}"
    params = request.GET.copy()
    params["page"] = page
    return "?" + params.urlencode()


def _pagination_nav(page_obj, elided_page_range, request) -> str:
    pages_html = ""
    for page in elided_page_range:
        if page != page_obj.number:
            pages_html += (
                f'<li><a href="{_page_url(request, page)}" '
                'class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 '
                "bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 "
                "dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 "
                f'dark:hover:text-white">{conditional_escape(page)}</a></li>'
            )
        else:
            pages_html += (
                '<li><a aria-current="page" '
                'class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight '
                "text-white border bg-gray-400 border-gray-300 dark:bg-gray-900 dark:border-gray-700 "
                f'dark:text-gray-200">{conditional_escape(page)}</a></li>'
            )

    if page_obj.has_previous():
        prev_html = (
            f'<a href="{_page_url(request, page_obj.previous_page_number())}" '
            'class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 '
            "bg-white border border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 "
            "dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 "
            'dark:hover:text-white">Previous</a>'
        )
    else:
        prev_html = (
            '<a aria-current="page" class="cursor-not-allowed flex items-center justify-center '
            "px-3 h-8 leading-tight text-gray-300 bg-white border border-gray-300 rounded-s-lg "
            'dark:bg-gray-800 dark:border-gray-700 dark:text-gray-600">Previous</a>'
        )

    if page_obj.has_next():
        next_html = (
            f'<a href="{_page_url(request, page_obj.next_page_number())}" '
            'class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 '
            "bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 "
            "dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 "
            'dark:hover:text-white">Next</a>'
        )
    else:
        next_html = (
            '<a aria-current="page" class="cursor-not-allowed flex items-center justify-center '
            "px-3 h-8 leading-tight text-gray-300 bg-white border border-gray-300 rounded-e-lg "
            'dark:bg-gray-800 dark:border-gray-700 dark:text-gray-600">Next</a>'
        )

    return (
        '<nav class="flex items-center flex-col md:flex-row md:justify-between px-6 py-4 '
        'dark:bg-gray-900 sm:rounded-b-lg" aria-label="Table navigation">'
        '<span class="text-sm text-center font-normal text-gray-500 dark:text-gray-400 mb-4 '
        'md:mb-0 block w-full md:inline md:w-auto">'
        f'<span class="font-semibold text-gray-900 dark:text-white">{page_obj.start_index()}</span>—'
        f'<span class="font-semibold text-gray-900 dark:text-white">{page_obj.end_index()}</span> of '
        f'<span class="font-semibold text-gray-900 dark:text-white">{page_obj.paginator.count}</span></span>'
        '<ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8"><li>'
        f"{prev_html}{pages_html}{next_html}"
        "</li></ul></nav>"
    )


def SimpleTable(
    columns: list[str] | None = None,
    rows: list | None = None,
    header_action: SafeText | str | None = None,
    page_obj=None,
    elided_page_range=None,
    request=None,
) -> SafeText:
    """Paginated table. Python equivalent of the old simple_table.html."""
    columns = columns or []
    rows = rows or []

    header_html = ""
    if header_action:
        header_html = str(TableHeader(children=[header_action]))

    columns_html = "".join(
        f'<th scope="col" class="px-6 py-3">{conditional_escape(col)}</th>'
        for col in columns
    )
    rows_html = "".join(str(TableRow(data=row)) for row in rows)

    pagination_html = ""
    if page_obj and elided_page_range:
        pagination_html = _pagination_nav(page_obj, elided_page_range, request)

    return mark_safe(
        '<div class="shadow-md" hx-boost="false">'
        '<div class="relative overflow-x-auto sm:rounded-t-lg">'
        '<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">'
        f"{header_html}"
        '<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 '
        'dark:text-gray-400 max-sm:[&_th:not(:first-child):not(:last-child)]:hidden">'
        f"<tr>{columns_html}</tr></thead>"
        '<tbody class="dark:divide-y max-sm:[&_td:not(:first-child):not(:last-child)]:hidden">'
        f"{rows_html}</tbody></table></div>"
        f"{pagination_html}</div>"
    )


def paginated_table_content(
    data: dict,
    *,
    page_obj=None,
    elided_page_range=None,
    request=None,
) -> SafeText:
    """Standard list-page body: a max-width Div wrapping a SimpleTable.

    `data` is the table dict with keys ``columns``, ``rows`` and
    ``header_action`` (the same shape every list view already builds).
    """
    return Div(
        [
            (
                "class",
                "2xl:max-w-(--breakpoint-2xl) xl:max-w-(--breakpoint-xl) "
                "md:max-w-(--breakpoint-md) sm:max-w-(--breakpoint-sm) self-center",
            )
        ],
        [
            SimpleTable(
                columns=data["columns"],
                rows=data["rows"],
                header_action=data["header_action"],
                page_obj=page_obj,
                elided_page_range=elided_page_range,
                request=request,
            )
        ],
    )


def LinkedPurchase(purchase: Purchase) -> SafeText:
    link = reverse("games:view_purchase", args=[int(purchase.id)])
    link_content = ""
    popover_content = ""
    game_count = purchase.games.count()
    popover_if_not_truncated = False
    if game_count == 1:
        link_content += purchase.games.first().name
        popover_content = link_content
    if game_count > 1:
        if purchase.name:
            link_content += f"{purchase.name}"
            popover_content += f"<h1>{purchase.name}</h1><br>"
        else:
            link_content += f"{game_count} games"
            popover_if_not_truncated = True
        popover_content += f"""
        <ul class="list-disc list-inside">
            {"".join(f"<li>{game.name}</li>" for game in purchase.games.all())}
        </ul>
        """
    icon = (
        (purchase.platform.icon if purchase.platform else "unspecified")
        if game_count == 1
        else "unspecified"
    )
    if link_content == "":
        raise ValueError("link_content is empty!!")
    a_content = Div(
        [("class", "inline-flex gap-2 items-center")],
        [
            Icon(
                icon,
                [("title", "Multiple")],
            ),
            PopoverTruncated(
                input_string=link_content,
                popover_content=mark_safe(popover_content),
                popover_if_not_truncated=popover_if_not_truncated,
            ),
        ],
    )
    return A(href=link, children=[a_content])


def NameWithIcon(
    name: str = "",
    game: Game | None = None,
    session: Session | None = None,
    linkify: bool = True,
    emulated: bool = False,
) -> SafeText:
    _name, platform, final_emulated, create_link, link = _resolve_name_with_icon(
        name, game, session, linkify
    )

    content = Div(
        [("class", "inline-flex gap-2 items-center")],
        [
            Icon(
                platform.icon,
                [("title", platform.name)],
            )
            if platform
            else "",
            Icon("emulated", [("title", "Emulated")]) if final_emulated else "",
            PopoverTruncated(_name),
        ],
    )

    return (
        A(
            href=link,
            children=[content],
        )
        if create_link
        else content
    )


def _resolve_name_with_icon(
    name: str,
    game: Game | None,
    session: Session | None,
    linkify: bool,
) -> tuple[str, Any, bool, bool, str]:
    create_link = False
    link = ""
    platform = None
    final_emulated = False

    if session is not None:
        game = session.game
        platform = game.platform
        final_emulated = session.emulated
        if linkify:
            create_link = True
            link = reverse("games:view_game", args=[int(game.pk)])
    elif game is not None:
        platform = game.platform
        if linkify:
            create_link = True
            link = reverse("games:view_game", args=[int(game.pk)])

    _name = name or (game.name if game else "")

    return _name, platform, final_emulated, create_link, link


def PurchasePrice(purchase) -> SafeText:
    return Popover(
        popover_content=f"{floatformat(purchase.price)} {purchase.price_currency}",
        wrapped_content=f"{floatformat(purchase.converted_price)} {purchase.converted_currency}",
        wrapped_classes="underline decoration-dotted",
    )


def GameStatusSelector(game, game_statuses, csrf_token: str) -> SafeText:
    """Alpine.js dropdown to change a game's status."""
    options_html = "\n".join(
        f"<template x-if=\"status == '{value}'\">"
        f"{GameStatus(status=value, children=[label], display='flex')}"
        f"</template>"
        for value, label in game_statuses
    )
    list_items = "\n".join(
        f"<li><a href=\"#\" @click.prevent.stop=\"setStatus('{value}', '{label}'); open = false;\" "
        f'class="block px-4 py-2 dark:hover:text-white dark:hover:bg-gray-700 '
        f'dark:focus:ring-blue-500 dark:focus:text-white rounded-sm no-underline! border-0!" '
        f":class=\"{{'font-bold': status === '{value}'}}\">"
        f"{GameStatus(status=value, children=[label], display='flex', class_='text-slate-300')}"
        f"</a></li>"
        for value, label in game_statuses
    )

    return mark_safe(f"""
<div class="flex gap-2 items-center"
     x-data="{{
         status: '{game.status}',
         status_display: '{game.get_status_display()}',
         open: false,
         saving: false,
         setStatus(newStatus, newStatusDisplay) {{
             this.status = newStatus;
             this.status_display = newStatusDisplay;
             this.saving = true;
             fetchWithHtmxTriggers(`/api/games/{game.id}/status`, {{
                 method: 'PATCH',
                 headers: {{
                     'Content-Type': 'application/json',
                     'X-CSRFToken': '{csrf_token}'
                 }},
                 body: JSON.stringify({{ status: newStatus }})
             }})
             .then(() => {{
                 document.body.dispatchEvent(new CustomEvent('status-changed'));
             }})
             .catch(() => {{
                 console.error('Failed to update status');
             }})
             .finally(() => this.saving = false);
         }}
     }}">
    {_dropdown_button_html(options_html, list_items)}
</div>
""")


def SessionDeviceSelector(session, session_devices, csrf_token: str) -> SafeText:
    """Alpine.js dropdown to change a session's device."""
    device_id = session.device_id or "null"
    device_name = (session.device.name if session.device else "Unknown").replace(
        "'", "\\'"
    )

    list_items = "\n".join(
        f'<li><a href="#" @click.prevent.stop="setDevice({d.id}, \'{d.name.replace(chr(39), chr(92) + chr(39))}\'); open = false;" '
        f'class="block px-4 py-2 dark:hover:text-white dark:hover:bg-gray-700 '
        f'dark:focus:ring-blue-500 dark:focus:text-white rounded-sm no-underline! border-0!" '
        f":class=\"{{'font-bold': deviceId === {d.id}}}\">{d.name}</a></li>"
        for d in session_devices
    )

    return mark_safe(f"""
<div class="flex gap-2 items-center"
     x-data="{{
         originalDeviceId: {device_id},
         originalDeviceName: '{device_name}',
         deviceId: {device_id},
         deviceName: '{device_name}',
         open: false,
         saving: false,
         setDevice(newDeviceId, newDeviceName) {{
               this.deviceId = newDeviceId;
               this.deviceName = newDeviceName;
               this.saving = true;
                fetchWithHtmxTriggers(`/api/session/{session.id}/device`, {{
                    method: 'PATCH',
                    headers: {{
                        'Content-Type': 'application/json',
                        'X-CSRFToken': '{csrf_token}'
                    }},
                    body: JSON.stringify({{ device_id: newDeviceId }})
                }})
               .then((res) => {{
                   document.body.dispatchEvent(new CustomEvent('device-changed'));
               }})
               .catch(() => {{
                   this.deviceName = this.originalDeviceName;
                   this.deviceId = this.originalDeviceId;
                   console.error('Failed to update device');
               }})
               .finally(() => this.saving = false);
          }}
     }}">
    {
        _dropdown_button_html(
            '<span x-text="deviceName"></span>' + str(Icon("arrowdown")), list_items
        )
    }
</div>
""")


def _dropdown_button_html(button_content: str, list_items: str) -> str:
    """Shared dropdown button + list structure for Alpine.js selectors."""
    return (
        '<div class="inline-flex rounded-md shadow-2xs" role="group" @click.outside="open = false">'
        '<button type="button" @click="open = !open" '
        'class="relative px-4 py-2 text-sm font-medium bg-white border border-gray-200 '
        "rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 "
        "focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 "
        "dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 "
        'dark:focus:text-white align-middle hover:cursor-pointer">'
        f'<span class="flex flex-row gap-4 justify-between items-center">{button_content}</span>'
        '<div class="absolute top-[105%] left-0 w-full whitespace-nowrap z-10 text-sm '
        "font-medium bg-gray-800/20 backdrop-blur-lg rounded-md rounded-t-none border "
        'border-gray-200 dark:border-gray-700" x-show="open" style="display: none;">'
        '<ul class="[&_li:first-of-type_a]:rounded-none [&_li:last-of-type_a]:rounded-t-none">'
        f"{list_items}"
        "</ul>"
        "</div>"
        "</button>"
        "</div>"
    )


# ── Filter bar ─────────────────────────────────────────────────────────────


def FilterBar(
    filter_json: str = "",
    status_options: list[tuple[str, str]] | None = None,
    platform_options: list[tuple[int, str]] | None = None,
    preset_list_url: str = "",
    preset_save_url: str = "",
) -> "SafeText":
    """Render a collapsible filter bar with SelectableFilter widgets."""
    from games.models import Game, Platform

    if status_options is None:
        status_options = [(s.value, s.label) for s in Game.Status]
    if platform_options is None:
        platform_options = list(
            Platform.objects.order_by("name").values_list("id", "name")
        )

    existing: dict = {}
    if filter_json:
        try:
            import json

            existing = json.loads(filter_json)
        except (json.JSONDecodeError, TypeError):
            pass

    def _get_choice(field: str) -> tuple[list[str], list[str], str]:
        raw = existing.get(field, {})
        if not isinstance(raw, dict):
            return [], [], ""
        val = raw.get("value", [])
        excl = raw.get("excludes", [])
        mod = raw.get("modifier", "")
        if isinstance(val, str):
            val = [val]
        if isinstance(excl, str):
            excl = [excl]
        return [str(v) for v in (val or [])], [str(v) for v in (excl or [])], mod or ""

    status_sel, status_excl, status_mod = _get_choice("status")
    plat_sel, plat_excl, plat_mod = _get_choice("platform")
    plat_opts_str: list[tuple[str, str]] = [(str(k), v) for k, v in platform_options]

    def _mins_to_hrs(val):
        if val is None or val == "" or val == 0:
            return ""
        try:
            mins = int(val)
        except (TypeError, ValueError):
            return ""
        if mins == 0:
            return ""
        hrs = mins / 60
        return str(int(hrs)) if hrs == int(hrs) else f"{hrs:.1f}"

    year_rel = existing.get("year_released", {})
    year_min = str(year_rel.get("value", "")) if isinstance(year_rel, dict) else ""
    year_max = str(year_rel.get("value2", "")) if isinstance(year_rel, dict) else ""
    mastered_val = (
        existing.get("mastered", {}).get("value", False)
        if isinstance(existing.get("mastered"), dict)
        else False
    )
    playtime = existing.get("playtime_minutes", {})
    playtime_min = (
        _mins_to_hrs(playtime.get("value", "")) if isinstance(playtime, dict) else ""
    )
    playtime_max = (
        _mins_to_hrs(playtime.get("value2", "")) if isinstance(playtime, dict) else ""
    )

    # DB-backed ranges for sliders
    try:
        year_agg = Game.objects.aggregate(
            yr_min=models.Min("year_released"), yr_max=models.Max("year_released")
        )
    except Exception:
        year_agg = {}
    try:
        pt_agg = Game.objects.aggregate(pt_max=models.Max("playtime"))
    except Exception:
        pt_agg = {}
    yr_data_min = max(int(year_agg.get("yr_min") or 1970), 1970)
    yr_data_max = min(int(year_agg.get("yr_max") or 2030), 2030)
    pt_data_max = (
        int((pt_agg.get("pt_max") or 0).total_seconds() / 3600)
        if pt_agg.get("pt_max")
        else 200
    )

    form_id = "filter-bar-form"
    filter_input_id = "filter-json-input"

    def _number(label, name, value="", placeholder=""):
        return Component(
            tag_name="div",
            attributes=[("class", "flex flex-col gap-1")],
            children=[
                Component(
                    tag_name="label",
                    attributes=[
                        (
                            "class",
                            "text-xs font-medium text-body uppercase tracking-wide",
                        ),
                    ],
                    children=[label],
                ),
                Component(
                    tag_name="input",
                    attributes=[
                        ("type", "number"),
                        ("name", escape(name)),
                        ("id", escape(name)),
                        ("value", escape(value)),
                        ("placeholder", escape(placeholder)),
                        (
                            "class",
                            "block w-full rounded-base border border-default-medium "
                            "bg-neutral-secondary-medium text-sm text-heading p-2 "
                            "focus:ring-brand focus:border-brand",
                        ),
                    ],
                ),
            ],
        )

    def _range(cls, min_id, max_id, min_v, max_v, dmin, dmax, step="1"):
        mv = min_v or str(dmin)
        xv = max_v or str(dmax)
        return Component(
            tag_name="div",
            attributes=[("class", f"range-slider {cls} relative h-6 mt-1 mb-2")],
            children=[
                mark_safe(
                    f'<input type="range" class="range-min absolute w-full pointer-events-none '
                    f"appearance-none bg-transparent h-2 "
                    f""
                    f"[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 "
                    f"[&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full "
                    f"[&::-webkit-slider-thumb]:bg-brand [&::-webkit-slider-thumb]:cursor-pointer "
                    f'[&::-webkit-slider-thumb]:relative [&::-webkit-slider-thumb]:z-10" '
                    f'data-target="{min_id}" data-peer="{max_id}" '
                    f'min="{dmin}" max="{dmax}" value="{mv}" step="{step}">'
                    f'<input type="range" class="range-max absolute w-full pointer-events-none '
                    f"appearance-none bg-transparent h-2 "
                    f""
                    f"[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 "
                    f"[&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full "
                    f"[&::-webkit-slider-thumb]:bg-brand [&::-webkit-slider-thumb]:cursor-pointer "
                    f'[&::-webkit-slider-thumb]:relative [&::-webkit-slider-thumb]:z-20" '
                    f'data-target="{max_id}" data-peer="{min_id}" '
                    f'min="{dmin}" max="{dmax}" value="{xv}" step="{step}">'
                ),
            ],
        )

    return Component(
        tag_name="div",
        attributes=[("id", "filter-bar"), ("class", "mb-6")],
        children=[
            Component(
                tag_name="button",
                attributes=[
                    ("type", "button"),
                    (
                        "onclick",
                        "var b=document.getElementById('filter-bar-body');b.classList.toggle('hidden');if(!b.classList.contains('hidden')&&window.initRangeSliders)window.initRangeSliders()",
                    ),
                    (
                        "class",
                        "flex items-center gap-2 text-sm font-medium text-body "
                        "hover:text-heading mb-2",
                    ),
                ],
                children=[
                    mark_safe(
                        '<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" '
                        'stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" '
                        'd="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 '
                        "1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 "
                        '1.5 0 0 0-3 0m-9.75 0h9.75" /></svg>'
                    ),
                    "Filters",
                ],
            ),
            Component(
                tag_name="div",
                attributes=[
                    ("id", "filter-bar-body"),
                    (
                        "class",
                        "hidden border border-default-medium rounded-base p-4 "
                        "bg-neutral-secondary-medium/50",
                    ),
                ],
                children=[
                    Component(
                        tag_name="form",
                        attributes=[
                            ("id", form_id),
                            ("onsubmit", "return applyFilterBar(event)"),
                        ],
                        children=[
                            Component(
                                tag_name="input",
                                attributes=[
                                    ("type", "hidden"),
                                    ("id", filter_input_id),
                                    ("name", "filter"),
                                    ("value", escape(filter_json)),
                                ],
                            ),
                            Component(
                                tag_name="div",
                                attributes=[
                                    (
                                        "class",
                                        "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4",
                                    ),
                                ],
                                children=[
                                    Component(
                                        tag_name="div",
                                        attributes=[("class", "flex flex-col gap-1")],
                                        children=[
                                            Component(
                                                tag_name="label",
                                                attributes=[
                                                    (
                                                        "class",
                                                        "text-xs font-medium text-body uppercase tracking-wide",
                                                    ),
                                                ],
                                                children=["Status"],
                                            ),
                                            SelectableFilter(
                                                "status",
                                                status_options,
                                                status_sel,
                                                status_excl,
                                                status_mod,
                                                nullable=not Game._meta.get_field(
                                                    "status"
                                                ).has_default(),
                                            ),
                                        ],
                                    ),
                                    Component(
                                        tag_name="div",
                                        attributes=[("class", "flex flex-col gap-1")],
                                        children=[
                                            Component(
                                                tag_name="label",
                                                attributes=[
                                                    (
                                                        "class",
                                                        "text-xs font-medium text-body uppercase tracking-wide",
                                                    ),
                                                ],
                                                children=["Platform"],
                                            ),
                                            SelectableFilter(
                                                "platform",
                                                plat_opts_str,
                                                plat_sel,
                                                plat_excl,
                                                plat_mod,
                                                nullable=Game._meta.get_field(
                                                    "platform"
                                                ).null,
                                            ),
                                        ],
                                    ),
                                    _number(
                                        "Year Min",
                                        "filter-year-min",
                                        year_min,
                                        "e.g. 2020",
                                    ),
                                    _number(
                                        "Year Max",
                                        "filter-year-max",
                                        year_max,
                                        "e.g. 2024",
                                    ),
                                ],
                            ),
                            _range(
                                "year-range",
                                "filter-year-min",
                                "filter-year-max",
                                year_min,
                                year_max,
                                yr_data_min,
                                yr_data_max,
                            ),
                            Component(
                                tag_name="div",
                                attributes=[
                                    (
                                        "class",
                                        "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4",
                                    ),
                                ],
                                children=[
                                    _number(
                                        "Playtime Min (hrs)",
                                        "filter-playtime-min",
                                        playtime_min,
                                        "e.g. 1",
                                    ),
                                    _number(
                                        "Playtime Max (hrs)",
                                        "filter-playtime-max",
                                        playtime_max,
                                        "e.g. 100",
                                    ),
                                    Component(
                                        tag_name="div",
                                        attributes=[("class", "flex items-end pb-1")],
                                        children=[
                                            Component(
                                                tag_name="label",
                                                attributes=[
                                                    (
                                                        "class",
                                                        "flex items-center gap-2 text-sm text-heading",
                                                    ),
                                                ],
                                                children=[
                                                    Component(
                                                        tag_name="input",
                                                        attributes=[
                                                            ("type", "checkbox"),
                                                            ("name", "filter-mastered"),
                                                            ("value", "1"),
                                                            *(
                                                                [("checked", "true")]
                                                                if mastered_val
                                                                else []
                                                            ),
                                                            (
                                                                "class",
                                                                "rounded border-default-medium "
                                                                "bg-neutral-secondary-medium text-brand focus:ring-brand",
                                                            ),
                                                        ],
                                                    ),
                                                    "Mastered",
                                                ],
                                            ),
                                        ],
                                    ),
                                ],
                            ),
                            _range(
                                "playtime-range",
                                "filter-playtime-min",
                                "filter-playtime-max",
                                playtime_min or "0",
                                playtime_max or str(pt_data_max),
                                0,
                                pt_data_max,
                            ),
                            Component(
                                tag_name="div",
                                attributes=[
                                    ("class", "flex gap-3 items-center"),
                                ],
                                children=[
                                    Component(
                                        tag_name="button",
                                        attributes=[
                                            ("type", "submit"),
                                            (
                                                "class",
                                                "px-4 py-2 text-sm font-medium text-white bg-brand "
                                                "rounded-lg hover:bg-brand-strong focus:ring-4 "
                                                "focus:ring-brand-medium",
                                            ),
                                        ],
                                        children=["Apply"],
                                    ),
                                    Component(
                                        tag_name="button",
                                        attributes=[
                                            ("type", "button"),
                                            (
                                                "onclick",
                                                f"clearFilterBar('{form_id}', '{filter_input_id}')",
                                            ),
                                            (
                                                "class",
                                                "px-4 py-2 text-sm font-medium text-gray-900 bg-white "
                                                "border border-gray-200 rounded-lg hover:bg-gray-100 "
                                                "dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 "
                                                "dark:hover:bg-gray-700 dark:hover:text-white",
                                            ),
                                        ],
                                        children=["Clear"],
                                    ),
                                    Component(
                                        tag_name="span",
                                        attributes=[
                                            ("class", "flex gap-2 items-center"),
                                            ("id", "save-preset-area"),
                                        ],
                                        children=[
                                            Component(
                                                tag_name="input",
                                                attributes=[
                                                    ("type", "text"),
                                                    ("id", "preset-name-input"),
                                                    ("placeholder", "Preset name..."),
                                                    (
                                                        "class",
                                                        "hidden px-3 py-2 text-sm rounded-lg border "
                                                        "border-default-medium bg-neutral-secondary-medium "
                                                        "text-heading focus:ring-brand focus:border-brand",
                                                    ),
                                                ],
                                            ),
                                            Component(
                                                tag_name="button",
                                                attributes=[
                                                    ("type", "button"),
                                                    ("id", "save-preset-btn"),
                                                    (
                                                        "onclick",
                                                        "showPresetNameInput()",
                                                    ),
                                                    (
                                                        "class",
                                                        "px-4 py-2 text-sm font-medium text-gray-900 "
                                                        "bg-white border border-gray-200 rounded-lg "
                                                        "hover:bg-gray-100 dark:bg-gray-800 "
                                                        "dark:border-gray-600 dark:text-gray-400 "
                                                        "dark:hover:bg-gray-700 dark:hover:text-white",
                                                    ),
                                                ],
                                                children=["Save Preset"],
                                            ),
                                            Component(
                                                tag_name="button",
                                                attributes=[
                                                    ("type", "button"),
                                                    ("id", "confirm-save-preset-btn"),
                                                    (
                                                        "onclick",
                                                        f"savePreset('{form_id}', '{filter_input_id}', '{preset_save_url}')",
                                                    ),
                                                    (
                                                        "class",
                                                        "hidden px-4 py-2 text-sm font-medium text-white "
                                                        "bg-green-700 rounded-lg hover:bg-green-800 "
                                                        "focus:ring-4 focus:ring-green-300",
                                                    ),
                                                ],
                                                children=["Save"],
                                            ),
                                        ],
                                    ),
                                    Component(
                                        tag_name="div",
                                        attributes=[
                                            ("id", "preset-dropdown"),
                                            ("class", "relative"),
                                            ("data-preset-list-url", preset_list_url),
                                        ],
                                        children=[
                                            Component(
                                                tag_name="span",
                                                attributes=[
                                                    ("class", "text-sm text-body"),
                                                ],
                                                children=["Loading presets..."],
                                            ),
                                        ],
                                    ),
                                ],
                            ),
                        ],
                    ),
                ],
            ),
        ],
    )


# ── SelectableFilter widget ────────────────────────────────────────────────


def SelectableFilter(
    field_name: str,
    options: list[tuple[str, str]],
    selected: list[str] | None = None,
    excluded: list[str] | None = None,
    modifier: str = "",
    nullable: bool = True,
) -> "SafeText":
    """Stash-style selectable filter with search, include/exclude, modifier tags."""
    selected = selected or []
    excluded = excluded or []

    active_mod_html = ""
    inactive_mod_html = ""
    mod_opts = [("NOT_NULL", "(Any)")]
    if nullable:
        mod_opts.append(("IS_NULL", "(None)"))
    for mod_val, mod_label in mod_opts:
        if modifier == mod_val:
            active_mod_html = (
                f'<span class="sf-modifier-tag active" data-modifier="{mod_val}">'
                f"{mod_label}</span> "
            )
        else:
            inactive_mod_html += (
                f'<div class="sf-option sf-modifier-option" data-modifier="{mod_val}" '
                f'data-label="{mod_label}">'
                f'<span class="sf-option-label">{mod_label}</span></div>'
            )

    selected_html = ""
    for val in selected:
        label = _find_label(options, val)
        selected_html += (
            f'<span class="sf-tag" data-value="{escape(val)}" data-type="include">'
            f'<span class="sf-tag-text text-body">\u2713 {escape(label)}</span>'
            f'<button type="button" class="sf-remove">\u00d7</button></span> '
        )
    for val in excluded:
        label = _find_label(options, val)
        selected_html += (
            f'<span class="sf-tag sf-excluded" data-value="{escape(val)}" data-type="exclude">'
            f'<span class="sf-tag-text text-body">\u2717 {escape(label)}</span>'
            f'<button type="button" class="sf-remove">\u00d7</button></span> '
        )

    options_html = ""
    for val, label in options:
        options_html += (
            f'<div class="sf-option" data-value="{escape(val)}" data-label="{escape(label)}">'
            f'<span class="sf-option-label">{escape(label)}</span>'
            f'<span class="sf-option-buttons">'
            f'<button type="button" class="sf-btn-include" data-action="include" title="Include">+</button>'
            f'<button type="button" class="sf-btn-exclude" data-action="exclude" title="Exclude">\u2212</button>'
            f"</span></div>"
        )

    return Component(
        tag_name="div",
        attributes=[
            (
                "class",
                "sf-container border border-default-medium rounded-base bg-neutral-secondary-medium",
            ),
            ("data-selectable-filter", field_name),
            *([("data-modifier", modifier)] if modifier else []),
        ],
        children=[
            Component(
                tag_name="div",
                attributes=[
                    ("class", "sf-selected flex flex-wrap gap-1 p-2 min-h-[28px]"),
                ],
                children=[mark_safe(active_mod_html + selected_html)],
            ),
            Component(
                tag_name="input",
                attributes=[
                    ("type", "text"),
                    (
                        "class",
                        "sf-search block w-full border-0 border-t border-default-medium "
                        "bg-transparent text-sm text-heading p-2 focus:ring-0 focus:outline-hidden",
                    ),
                    ("placeholder", "Search\u2026"),
                ],
            ),
            Component(
                tag_name="div",
                attributes=[
                    ("class", "sf-options max-h-40 overflow-y-auto p-1 text-body"),
                ],
                children=[mark_safe(inactive_mod_html + options_html)],
            ),
        ],
    )


def _find_label(options: list[tuple[str, str]], value: str) -> str:
    for v, label in options:
        if str(v) == str(value):
            return label
    return value


def SessionFilterBar(filter_json="", preset_list_url="", preset_save_url=""):
    from games.models import Device, Game, Session

    game_opts = [
        (str(k), v) for k, v in Game.objects.order_by("name").values_list("id", "name")
    ]
    dev_opts = [
        (str(k), v)
        for k, v in Device.objects.order_by("name").values_list("id", "name")
    ]
    existing = {}
    if filter_json:
        try:
            import json

            existing = json.loads(filter_json)
        except Exception:
            pass

    def _gc(f):
        raw = existing.get(f, {})
        if not isinstance(raw, dict):
            return [], [], ""
        v = raw.get("value", [])
        e = raw.get("excludes", [])
        m = raw.get("modifier", "")
        if isinstance(v, str):
            v = [v]
        if isinstance(e, str):
            e = [e]
        return [str(x) for x in (v or [])], [str(x) for x in (e or [])], m or ""

    gs, ge, gm = _gc("game")
    ds, de, dm = _gc("device")

    def _mh(v):
        if v is None or v == "" or v == 0:
            return ""
        try:
            m = int(v)
        except:
            return ""
        if m == 0:
            return ""
        h = m / 60
        return str(int(h)) if h == int(h) else f"{h:.1f}"

    dur = existing.get("duration_minutes", {})
    dmin = _mh(dur.get("value", "")) if isinstance(dur, dict) else ""
    dmax = _mh(dur.get("value2", "")) if isinstance(dur, dict) else ""
    em = (
        existing.get("emulated", {}).get("value", False)
        if isinstance(existing.get("emulated"), dict)
        else False
    )
    ac = (
        existing.get("is_active", {}).get("value", False)
        if isinstance(existing.get("is_active"), dict)
        else False
    )
    try:
        a = Session.objects.aggregate(m=models.Max("duration_total"))
        ddm = max(
            int((a.get("m") or 0).total_seconds() / 3600) if a.get("m") else 200, 1
        )
    except Exception:
        ddm = 200

    fd, hd = "filter-bar-form", "filter-json-input"

    def _n(l, n, v="", p=""):
        return Component(
            tag_name="div",
            attributes=[("class", "flex flex-col gap-1")],
            children=[
                Component(
                    tag_name="label",
                    attributes=[
                        (
                            "class",
                            "text-xs font-medium text-body uppercase tracking-wide",
                        )
                    ],
                    children=[l],
                ),
                Component(
                    tag_name="input",
                    attributes=[
                        ("type", "number"),
                        ("name", escape(n)),
                        ("id", escape(n)),
                        ("value", escape(v)),
                        ("placeholder", escape(p)),
                        (
                            "class",
                            "block w-full rounded-base border border-default-medium bg-neutral-secondary-medium text-sm text-heading p-2 focus:ring-brand focus:border-brand",
                        ),
                    ],
                ),
            ],
        )

    def _r(cls, mi, mx, iv, xv, lo, hi, s="1"):
        return Component(
            tag_name="div",
            attributes=[
                ("class", f"range-slider {cls} relative h-10 mt-1 mb-2 select-none"),
                ("data-min", str(lo)),
                ("data-max", str(hi)),
                ("data-step", str(s)),
            ],
            children=[
                mark_safe(
                    '<div class="absolute top-1/2 -translate-y-1/2 w-full h-2 rounded-full bg-neutral-secondary-medium border border-default-medium"></div><div class="range-track-fill absolute top-1/2 -translate-y-1/2 h-2 bg-brand rounded-full" style="left:0;width:100%"></div>'
                    + f'<div class="range-handle-min absolute top-1/2 -translate-y-1/2 w-5 h-5 bg-brand rounded-full border-2 border-white shadow cursor-pointer hover:scale-110 transition-transform" data-target="{mi}" style="left:0"></div><div class="range-handle-max absolute top-1/2 -translate-y-1/2 w-5 h-5 bg-brand rounded-full border-2 border-white shadow cursor-pointer hover:scale-110 transition-transform" data-target="{mx}" style="left:100%"></div>'
                ),
            ],
        )

    return Component(
        tag_name="div",
        attributes=[("id", "filter-bar"), ("class", "mb-6")],
        children=[
            Component(
                tag_name="button",
                attributes=[
                    ("type", "button"),
                    (
                        "onclick",
                        "var b=document.getElementById('filter-bar-body');b.classList.toggle('hidden');if(!b.classList.contains('hidden')&&window.initRangeSliders)window.initRangeSliders()",
                    ),
                    (
                        "class",
                        "flex items-center gap-2 text-sm font-medium text-body hover:text-heading mb-2",
                    ),
                ],
                children=[
                    mark_safe(
                        '<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" /></svg>'
                    ),
                    "Filters",
                ],
            ),
            Component(
                tag_name="div",
                attributes=[
                    ("id", "filter-bar-body"),
                    (
                        "class",
                        "hidden border border-default-medium rounded-base p-4 bg-neutral-secondary-medium/50",
                    ),
                ],
                children=[
                    Component(
                        tag_name="form",
                        attributes=[
                            ("id", fd),
                            ("onsubmit", "return applyFilterBar(event)"),
                        ],
                        children=[
                            Component(
                                tag_name="input",
                                attributes=[
                                    ("type", "hidden"),
                                    ("id", hd),
                                    ("name", "filter"),
                                    ("value", escape(filter_json)),
                                ],
                            ),
                            Component(
                                tag_name="div",
                                attributes=[
                                    (
                                        "class",
                                        "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4",
                                    )
                                ],
                                children=[
                                    Component(
                                        tag_name="div",
                                        attributes=[("class", "flex flex-col gap-1")],
                                        children=[
                                            Component(
                                                tag_name="label",
                                                attributes=[
                                                    (
                                                        "class",
                                                        "text-xs font-medium text-body uppercase tracking-wide",
                                                    )
                                                ],
                                                children=["Game"],
                                            ),
                                            SelectableFilter(
                                                "game",
                                                game_opts,
                                                gs,
                                                ge,
                                                gm,
                                                nullable=not Game._meta.get_field(
                                                    "name"
                                                ).has_default(),
                                            ),
                                        ],
                                    ),
                                    Component(
                                        tag_name="div",
                                        attributes=[("class", "flex flex-col gap-1")],
                                        children=[
                                            Component(
                                                tag_name="label",
                                                attributes=[
                                                    (
                                                        "class",
                                                        "text-xs font-medium text-body uppercase tracking-wide",
                                                    )
                                                ],
                                                children=["Device"],
                                            ),
                                            SelectableFilter(
                                                "device",
                                                dev_opts,
                                                ds,
                                                de,
                                                dm,
                                                nullable=Session._meta.get_field(
                                                    "device"
                                                ).null,
                                            ),
                                        ],
                                    ),
                                    _n(
                                        "Duration Min (hrs)",
                                        "filter-playtime-min",
                                        dmin,
                                        "e.g. 0.5",
                                    ),
                                    _n(
                                        "Duration Max (hrs)",
                                        "filter-playtime-max",
                                        dmax,
                                        "e.g. 10",
                                    ),
                                ],
                            ),
                            _r(
                                "dur-range",
                                "filter-playtime-min",
                                "filter-playtime-max",
                                dmin or "0",
                                dmax or str(ddm),
                                0,
                                ddm,
                            ),
                            Component(
                                tag_name="div",
                                attributes=[("class", "flex gap-4 mb-4")],
                                children=[
                                    Component(
                                        tag_name="label",
                                        attributes=[
                                            (
                                                "class",
                                                "flex items-center gap-2 text-sm text-heading",
                                            )
                                        ],
                                        children=[
                                            Component(
                                                tag_name="input",
                                                attributes=[
                                                    ("type", "checkbox"),
                                                    ("name", "filter-emulated"),
                                                    ("value", "1"),
                                                    *(
                                                        [("checked", "true")]
                                                        if em
                                                        else []
                                                    ),
                                                    (
                                                        "class",
                                                        "rounded border-default-medium bg-neutral-secondary-medium text-brand focus:ring-brand",
                                                    ),
                                                ],
                                            ),
                                            "Emulated",
                                        ],
                                    ),
                                    Component(
                                        tag_name="label",
                                        attributes=[
                                            (
                                                "class",
                                                "flex items-center gap-2 text-sm text-heading",
                                            )
                                        ],
                                        children=[
                                            Component(
                                                tag_name="input",
                                                attributes=[
                                                    ("type", "checkbox"),
                                                    ("name", "filter-active"),
                                                    ("value", "1"),
                                                    *(
                                                        [("checked", "true")]
                                                        if ac
                                                        else []
                                                    ),
                                                    (
                                                        "class",
                                                        "rounded border-default-medium bg-neutral-secondary-medium text-brand focus:ring-brand",
                                                    ),
                                                ],
                                            ),
                                            "Active",
                                        ],
                                    ),
                                ],
                            ),
                            Component(
                                tag_name="div",
                                attributes=[("class", "flex gap-3 items-center")],
                                children=[
                                    Component(
                                        tag_name="button",
                                        attributes=[
                                            ("type", "submit"),
                                            (
                                                "class",
                                                "px-4 py-2 text-sm font-medium text-white bg-brand rounded-lg hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium",
                                            ),
                                        ],
                                        children=["Apply"],
                                    ),
                                    Component(
                                        tag_name="button",
                                        attributes=[
                                            ("type", "button"),
                                            (
                                                "onclick",
                                                f"clearFilterBar('{fd}', '{hd}')",
                                            ),
                                            (
                                                "class",
                                                "px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",
                                            ),
                                        ],
                                        children=["Clear"],
                                    ),
                                    Component(
                                        tag_name="span",
                                        attributes=[
                                            ("class", "flex gap-2 items-center"),
                                            ("id", "save-preset-area"),
                                        ],
                                        children=[
                                            Component(
                                                tag_name="input",
                                                attributes=[
                                                    ("type", "text"),
                                                    ("id", "preset-name-input"),
                                                    ("placeholder", "Preset name..."),
                                                    (
                                                        "class",
                                                        "hidden px-3 py-2 text-sm rounded-lg border border-default-medium bg-neutral-secondary-medium text-heading focus:ring-brand focus:border-brand",
                                                    ),
                                                ],
                                            ),
                                            Component(
                                                tag_name="button",
                                                attributes=[
                                                    ("type", "button"),
                                                    ("id", "save-preset-btn"),
                                                    (
                                                        "onclick",
                                                        "showPresetNameInput()",
                                                    ),
                                                    (
                                                        "class",
                                                        "px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",
                                                    ),
                                                ],
                                                children=["Save Preset"],
                                            ),
                                            Component(
                                                tag_name="button",
                                                attributes=[
                                                    ("type", "button"),
                                                    ("id", "confirm-save-preset-btn"),
                                                    (
                                                        "onclick",
                                                        f"savePreset('{fd}', '{hd}', '{preset_save_url}')",
                                                    ),
                                                    (
                                                        "class",
                                                        "hidden px-4 py-2 text-sm font-medium text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:ring-green-300",
                                                    ),
                                                ],
                                                children=["Save"],
                                            ),
                                        ],
                                    ),
                                    Component(
                                        tag_name="div",
                                        attributes=[
                                            ("id", "preset-dropdown"),
                                            ("class", "relative"),
                                            ("data-preset-list-url", preset_list_url),
                                        ],
                                        children=[
                                            Component(
                                                tag_name="span",
                                                attributes=[
                                                    ("class", "text-sm text-body")
                                                ],
                                                children=["Loading presets..."],
                                            )
                                        ],
                                    ),
                                ],
                            ),
                        ],
                    ),
                ],
            ),
        ],
    )


def PurchaseFilterBar(filter_json="", preset_list_url="", preset_save_url=""):
    from games.models import Game, Platform, Purchase

    game_opts = [
        (str(k), v) for k, v in Game.objects.order_by("name").values_list("id", "name")
    ]
    plat_opts = [
        (str(k), v)
        for k, v in Platform.objects.order_by("name").values_list("id", "name")
    ]
    type_opts = [(t[0], t[1]) for t in Purchase.TYPES]
    own_opts = [(t[0], t[1]) for t in Purchase.OWNERSHIP_TYPES]
    existing = {}
    if filter_json:
        try:
            import json

            existing = json.loads(filter_json)
        except Exception:
            pass

    def _gc(f):
        raw = existing.get(f, {})
        if not isinstance(raw, dict):
            return [], [], ""
        v = raw.get("value", [])
        e = raw.get("excludes", [])
        m = raw.get("modifier", "")
        if isinstance(v, str):
            v = [v]
        if isinstance(e, str):
            e = [e]
        return [str(x) for x in (v or [])], [str(x) for x in (e or [])], m or ""

    gs, ge, gm = _gc("games")
    ps, pe, pm = _gc("platform")
    ts, te, tm = _gc("type")
    os, oe, om = _gc("ownership_type")
    price = existing.get("price", {})
    pmin = str(price.get("value", "")) if isinstance(price, dict) else ""
    pmax = str(price.get("value2", "")) if isinstance(price, dict) else ""
    rf = (
        existing.get("is_refunded", {}).get("value", False)
        if isinstance(existing.get("is_refunded"), dict)
        else False
    )
    try:
        a = Purchase.objects.aggregate(lo=models.Min("price"), hi=models.Max("price"))
        plo, phi = int(a.get("lo") or 0), max(int(a.get("hi") or 100), 1)
    except Exception:
        plo, phi = 0, 100

    fd, hd = "filter-bar-form", "filter-json-input"

    def _n(l, n, v="", p=""):
        return Component(
            tag_name="div",
            attributes=[("class", "flex flex-col gap-1")],
            children=[
                Component(
                    tag_name="label",
                    attributes=[
                        (
                            "class",
                            "text-xs font-medium text-body uppercase tracking-wide",
                        )
                    ],
                    children=[l],
                ),
                Component(
                    tag_name="input",
                    attributes=[
                        ("type", "number"),
                        ("name", escape(n)),
                        ("id", escape(n)),
                        ("value", escape(v)),
                        ("placeholder", escape(p)),
                        (
                            "class",
                            "block w-full rounded-base border border-default-medium bg-neutral-secondary-medium text-sm text-heading p-2 focus:ring-brand focus:border-brand",
                        ),
                    ],
                ),
            ],
        )

    def _r(cls, mi, mx, iv, xv, lo, hi, s="1"):
        return Component(
            tag_name="div",
            attributes=[
                ("class", f"range-slider {cls} relative h-10 mt-1 mb-2 select-none"),
                ("data-min", str(lo)),
                ("data-max", str(hi)),
                ("data-step", str(s)),
            ],
            children=[
                mark_safe(
                    '<div class="absolute top-1/2 -translate-y-1/2 w-full h-2 rounded-full bg-neutral-secondary-medium border border-default-medium"></div><div class="range-track-fill absolute top-1/2 -translate-y-1/2 h-2 bg-brand rounded-full" style="left:0;width:100%"></div>'
                    + f'<div class="range-handle-min absolute top-1/2 -translate-y-1/2 w-5 h-5 bg-brand rounded-full border-2 border-white shadow cursor-pointer hover:scale-110 transition-transform" data-target="{mi}" style="left:0"></div><div class="range-handle-max absolute top-1/2 -translate-y-1/2 w-5 h-5 bg-brand rounded-full border-2 border-white shadow cursor-pointer hover:scale-110 transition-transform" data-target="{mx}" style="left:100%"></div>'
                ),
            ],
        )

    return Component(
        tag_name="div",
        attributes=[("id", "filter-bar"), ("class", "mb-6")],
        children=[
            Component(
                tag_name="button",
                attributes=[
                    ("type", "button"),
                    (
                        "onclick",
                        "var b=document.getElementById('filter-bar-body');b.classList.toggle('hidden');if(!b.classList.contains('hidden')&&window.initRangeSliders)window.initRangeSliders()",
                    ),
                    (
                        "class",
                        "flex items-center gap-2 text-sm font-medium text-body hover:text-heading mb-2",
                    ),
                ],
                children=[
                    mark_safe(
                        '<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" /></svg>'
                    ),
                    "Filters",
                ],
            ),
            Component(
                tag_name="div",
                attributes=[
                    ("id", "filter-bar-body"),
                    (
                        "class",
                        "hidden border border-default-medium rounded-base p-4 bg-neutral-secondary-medium/50",
                    ),
                ],
                children=[
                    Component(
                        tag_name="form",
                        attributes=[
                            ("id", fd),
                            ("onsubmit", "return applyFilterBar(event)"),
                        ],
                        children=[
                            Component(
                                tag_name="input",
                                attributes=[
                                    ("type", "hidden"),
                                    ("id", hd),
                                    ("name", "filter"),
                                    ("value", escape(filter_json)),
                                ],
                            ),
                            Component(
                                tag_name="div",
                                attributes=[
                                    (
                                        "class",
                                        "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4",
                                    )
                                ],
                                children=[
                                    Component(
                                        tag_name="div",
                                        attributes=[("class", "flex flex-col gap-1")],
                                        children=[
                                            Component(
                                                tag_name="label",
                                                attributes=[
                                                    (
                                                        "class",
                                                        "text-xs font-medium text-body uppercase tracking-wide",
                                                    )
                                                ],
                                                children=["Game"],
                                            ),
                                            SelectableFilter(
                                                "games",
                                                game_opts,
                                                gs,
                                                ge,
                                                gm,
                                                nullable=False,
                                            ),
                                        ],
                                    ),
                                    Component(
                                        tag_name="div",
                                        attributes=[("class", "flex flex-col gap-1")],
                                        children=[
                                            Component(
                                                tag_name="label",
                                                attributes=[
                                                    (
                                                        "class",
                                                        "text-xs font-medium text-body uppercase tracking-wide",
                                                    )
                                                ],
                                                children=["Platform"],
                                            ),
                                            SelectableFilter(
                                                "platform",
                                                plat_opts,
                                                ps,
                                                pe,
                                                pm,
                                                nullable=Purchase._meta.get_field(
                                                    "platform"
                                                ).null,
                                            ),
                                        ],
                                    ),
                                    Component(
                                        tag_name="div",
                                        attributes=[("class", "flex flex-col gap-1")],
                                        children=[
                                            Component(
                                                tag_name="label",
                                                attributes=[
                                                    (
                                                        "class",
                                                        "text-xs font-medium text-body uppercase tracking-wide",
                                                    )
                                                ],
                                                children=["Type"],
                                            ),
                                            SelectableFilter(
                                                "type",
                                                type_opts,
                                                ts,
                                                te,
                                                tm,
                                                nullable=not Purchase._meta.get_field(
                                                    "type"
                                                ).has_default(),
                                            ),
                                        ],
                                    ),
                                    Component(
                                        tag_name="div",
                                        attributes=[("class", "flex flex-col gap-1")],
                                        children=[
                                            Component(
                                                tag_name="label",
                                                attributes=[
                                                    (
                                                        "class",
                                                        "text-xs font-medium text-body uppercase tracking-wide",
                                                    )
                                                ],
                                                children=["Ownership"],
                                            ),
                                            SelectableFilter(
                                                "ownership_type",
                                                own_opts,
                                                os,
                                                oe,
                                                om,
                                                nullable=not Purchase._meta.get_field(
                                                    "ownership_type"
                                                ).has_default(),
                                            ),
                                        ],
                                    ),
                                ],
                            ),
                            Component(
                                tag_name="div",
                                attributes=[
                                    (
                                        "class",
                                        "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4",
                                    )
                                ],
                                children=[
                                    _n("Price Min", "filter-price-min", pmin, "0.00"),
                                    _n("Price Max", "filter-price-max", pmax, "100.00"),
                                    Component(
                                        tag_name="label",
                                        attributes=[
                                            (
                                                "class",
                                                "flex items-center gap-2 text-sm text-heading",
                                            )
                                        ],
                                        children=[
                                            Component(
                                                tag_name="input",
                                                attributes=[
                                                    ("type", "checkbox"),
                                                    ("name", "filter-refunded"),
                                                    ("value", "1"),
                                                    *(
                                                        [("checked", "true")]
                                                        if rf
                                                        else []
                                                    ),
                                                    (
                                                        "class",
                                                        "rounded border-default-medium bg-neutral-secondary-medium text-brand focus:ring-brand",
                                                    ),
                                                ],
                                            ),
                                            "Refunded",
                                        ],
                                    ),
                                ],
                            ),
                            _r(
                                "price-range",
                                "filter-price-min",
                                "filter-price-max",
                                pmin or str(plo),
                                pmax or str(phi),
                                plo,
                                phi,
                            ),
                            Component(
                                tag_name="div",
                                attributes=[("class", "flex gap-3 items-center")],
                                children=[
                                    Component(
                                        tag_name="button",
                                        attributes=[
                                            ("type", "submit"),
                                            (
                                                "class",
                                                "px-4 py-2 text-sm font-medium text-white bg-brand rounded-lg hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium",
                                            ),
                                        ],
                                        children=["Apply"],
                                    ),
                                    Component(
                                        tag_name="button",
                                        attributes=[
                                            ("type", "button"),
                                            (
                                                "onclick",
                                                f"clearFilterBar('{fd}', '{hd}')",
                                            ),
                                            (
                                                "class",
                                                "px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",
                                            ),
                                        ],
                                        children=["Clear"],
                                    ),
                                    Component(
                                        tag_name="span",
                                        attributes=[
                                            ("class", "flex gap-2 items-center"),
                                            ("id", "save-preset-area"),
                                        ],
                                        children=[
                                            Component(
                                                tag_name="input",
                                                attributes=[
                                                    ("type", "text"),
                                                    ("id", "preset-name-input"),
                                                    ("placeholder", "Preset name..."),
                                                    (
                                                        "class",
                                                        "hidden px-3 py-2 text-sm rounded-lg border border-default-medium bg-neutral-secondary-medium text-heading focus:ring-brand focus:border-brand",
                                                    ),
                                                ],
                                            ),
                                            Component(
                                                tag_name="button",
                                                attributes=[
                                                    ("type", "button"),
                                                    ("id", "save-preset-btn"),
                                                    (
                                                        "onclick",
                                                        "showPresetNameInput()",
                                                    ),
                                                    (
                                                        "class",
                                                        "px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",
                                                    ),
                                                ],
                                                children=["Save Preset"],
                                            ),
                                            Component(
                                                tag_name="button",
                                                attributes=[
                                                    ("type", "button"),
                                                    ("id", "confirm-save-preset-btn"),
                                                    (
                                                        "onclick",
                                                        f"savePreset('{fd}', '{hd}', '{preset_save_url}')",
                                                    ),
                                                    (
                                                        "class",
                                                        "hidden px-4 py-2 text-sm font-medium text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:ring-green-300",
                                                    ),
                                                ],
                                                children=["Save"],
                                            ),
                                        ],
                                    ),
                                    Component(
                                        tag_name="div",
                                        attributes=[
                                            ("id", "preset-dropdown"),
                                            ("class", "relative"),
                                            ("data-preset-list-url", preset_list_url),
                                        ],
                                        children=[
                                            Component(
                                                tag_name="span",
                                                attributes=[
                                                    ("class", "text-sm text-body")
                                                ],
                                                children=["Loading presets..."],
                                            )
                                        ],
                                    ),
                                ],
                            ),
                        ],
                    ),
                ],
            ),
        ],
    )