import { Theme } from "../theme.slint";
import { IconChevronLeft, IconChevronRight } from "icons.slint";

/// NeonPagination — page navigation with numbered buttons
export component NeonPagination {
    in property <int> total-pages;
    in-out property <int> current-page: 1;
    in property <bool> enabled: true;
    callback page-changed(int);

    // Compute visible page window (5 pages around current)
    property <int> half-window: 2;
    property <int> window-start: (root.current-page - root.half-window).max(1);
    property <int> window-end: (root.window-start + 4).min(root.total-pages);
    property <int> adj-start: (root.window-end - 4).max(1);

    HorizontalLayout {
        spacing: Theme.sp-1;
        alignment: center;

        // Previous
        Rectangle {
            width: 28px; height: 28px; border-radius: Theme.radius-sm;
            background: prev.has-hover ? Theme.bg-hover : transparent;
            IconChevronLeft { color: root.enabled ? Theme.text-muted : Theme.text-dim; size: 14px; x: 7px; y: 7px; }
            prev := TouchArea {
                clicked => { if (root.enabled && root.current-page > 1) { root.current-page -= 1; root.page-changed(root.current-page); } }
                enabled: root.enabled && root.current-page > 1;
                mouse-cursor: MouseCursor.pointer;
            }
        }

        // Page numbers — 5 fixed slots with visibility
        Rectangle {
            width: 28px; height: 28px; border-radius: Theme.radius-sm;
            visible: 1 >= root.adj-start && 1 <= root.window-end;
            background: root.current-page == 1 ? Theme.neon-cyan : (p1.has-hover ? Theme.bg-hover : transparent);
            Text { text: 1; font-size: Theme.font-xs;
                color: root.current-page == 1 ? Theme.text-inverse : (root.enabled ? Theme.text-muted : Theme.text-dim);
                horizontal-alignment: center; vertical-alignment: center; }
            p1 := TouchArea { clicked => { if (root.enabled) { root.current-page = 1; root.page-changed(1); } } enabled: root.enabled && 1 >= root.adj-start; mouse-cursor: MouseCursor.pointer; }
        }
        Rectangle {
            width: 28px; height: 28px; border-radius: Theme.radius-sm;
            visible: 2 >= root.adj-start && 2 <= root.window-end;
            background: root.current-page == 2 ? Theme.neon-cyan : (p2.has-hover ? Theme.bg-hover : transparent);
            Text { text: 2; font-size: Theme.font-xs;
                color: root.current-page == 2 ? Theme.text-inverse : (root.enabled ? Theme.text-muted : Theme.text-dim);
                horizontal-alignment: center; vertical-alignment: center; }
            p2 := TouchArea { clicked => { if (root.enabled) { root.current-page = 2; root.page-changed(2); } } enabled: root.enabled && 2 >= root.adj-start; mouse-cursor: MouseCursor.pointer; }
        }
        Rectangle {
            width: 28px; height: 28px; border-radius: Theme.radius-sm;
            visible: 3 >= root.adj-start && 3 <= root.window-end;
            background: root.current-page == 3 ? Theme.neon-cyan : (p3.has-hover ? Theme.bg-hover : transparent);
            Text { text: 3; font-size: Theme.font-xs;
                color: root.current-page == 3 ? Theme.text-inverse : (root.enabled ? Theme.text-muted : Theme.text-dim);
                horizontal-alignment: center; vertical-alignment: center; }
            p3 := TouchArea { clicked => { if (root.enabled) { root.current-page = 3; root.page-changed(3); } } enabled: root.enabled && 3 >= root.adj-start; mouse-cursor: MouseCursor.pointer; }
        }
        Rectangle {
            width: 28px; height: 28px; border-radius: Theme.radius-sm;
            visible: 4 >= root.adj-start && 4 <= root.window-end;
            background: root.current-page == 4 ? Theme.neon-cyan : (p4.has-hover ? Theme.bg-hover : transparent);
            Text { text: 4; font-size: Theme.font-xs;
                color: root.current-page == 4 ? Theme.text-inverse : (root.enabled ? Theme.text-muted : Theme.text-dim);
                horizontal-alignment: center; vertical-alignment: center; }
            p4 := TouchArea { clicked => { if (root.enabled) { root.current-page = 4; root.page-changed(4); } } enabled: root.enabled && 4 >= root.adj-start; mouse-cursor: MouseCursor.pointer; }
        }
        Rectangle {
            width: 28px; height: 28px; border-radius: Theme.radius-sm;
            visible: 5 >= root.adj-start && 5 <= root.window-end;
            background: root.current-page == 5 ? Theme.neon-cyan : (p5.has-hover ? Theme.bg-hover : transparent);
            Text { text: 5; font-size: Theme.font-xs;
                color: root.current-page == 5 ? Theme.text-inverse : (root.enabled ? Theme.text-muted : Theme.text-dim);
                horizontal-alignment: center; vertical-alignment: center; }
            p5 := TouchArea { clicked => { if (root.enabled) { root.current-page = 5; root.page-changed(5); } } enabled: root.enabled && 5 >= root.adj-start; mouse-cursor: MouseCursor.pointer; }
        }

        // Next
        Rectangle {
            width: 28px; height: 28px; border-radius: Theme.radius-sm;
            background: next.has-hover ? Theme.bg-hover : transparent;
            IconChevronRight { color: root.enabled ? Theme.text-muted : Theme.text-dim; size: 14px; x: 7px; y: 7px; }
            next := TouchArea {
                clicked => { if (root.enabled && root.current-page < root.total-pages) { root.current-page += 1; root.page-changed(root.current-page); } }
                enabled: root.enabled && root.current-page < root.total-pages;
                mouse-cursor: MouseCursor.pointer;
            }
        }
    }
}

/// NeonBreadcrumbs — inline breadcrumb navigation
export component NeonBreadcrumbs {
    in property <[string]> items;
    in property <bool> enabled: true;
    callback navigated(int);

    HorizontalLayout {
        spacing: 2px;
        alignment: start;
        for item[idx] in root.items : HorizontalLayout {
            spacing: 2px;
            alignment: center;
            Text {
                text: item;
                font-size: Theme.font-xs;
                color: idx == root.items.length - 1 ? Theme.neon-cyan : (root.enabled ? Theme.text-muted : Theme.text-dim);
                font-weight: idx == root.items.length - 1 ? 600 : 400;
                vertical-alignment: center;
            }
            if (idx < root.items.length - 1) : Text {
                text: "/";
                font-size: Theme.font-xs;
                color: Theme.text-dim;
                vertical-alignment: center;
            }
            TouchArea {
                clicked => { if (root.enabled) { root.navigated(idx); } }
                enabled: root.enabled;
                mouse-cursor: root.enabled ? MouseCursor.pointer : MouseCursor.default;
            }
        }
    }
}
