// ═══════════════════════════════════════════════════════════════════
//  NeonFloatingPanel — draggable, resizable floating window
// ═══════════════════════════════════════════════════════════════════
//
//  A non-modal floating panel with:
//   • Drag handle on the title bar.
//   • Resize grip on the bottom-right corner.
//   • Close X (gated by `closable`).
//   • Optional badge count next to the title.
//   • Position + size are `in-out` so the host can persist them
//     across sessions (write to disk after `position-changed` /
//     `size-changed` fires, restore on next boot).
//
//  Mounting pattern (in your app.slint):
//
//    if root.my-panel-visible: NeonFloatingPanel {
//        title: "Capa";
//        panel-x <=> root.my-panel-x;
//        panel-y <=> root.my-panel-y;
//        panel-width <=> root.my-panel-width;
//        panel-height <=> root.my-panel-height;
//        bound-w: root.width;
//        bound-h: root.height;
//        closed => { root.my-panel-visible = false; }
//        // Body
//        VerticalLayout { padding: 12px; ... }
//    }
//
//  Why drag is implemented inline (not via a library helper):
//  Slint's TouchArea exposes `mouse-x`/`mouse-y` in LOCAL coords.
//  The drag pattern stores grab-offset on `pointer-event(down)`
//  and updates panel-x/y on `moved` so motion is jitter-free even
//  when the panel itself moves under the cursor.
//
// ═══════════════════════════════════════════════════════════════════

import { Theme } from "../theme.slint";

export component NeonFloatingPanel inherits Rectangle {
    // ── Public state ─────────────────────────────────────────────
    /// Live position. Persist across sessions if you want the panel
    /// to remember where the user dragged it.
    in-out property <length> panel-x: 80px;
    in-out property <length> panel-y: 80px;
    /// Live size. `min-width` / `min-height` clamp resize.
    in-out property <length> panel-width: 480px;
    in-out property <length> panel-height: 360px;

    // ── Configuration ────────────────────────────────────────────
    in property <string> title: "";
    in property <string> badge: "";  // optional count next to title (e.g. "12")
    // Slint's Rectangle reserves `min-width` / `max-width` / etc as
    // layout-protocol properties — we can't override them. Use the
    // `panel-*` namespace for the user-visible clamps.
    in property <length> min-panel-width: 240px;
    in property <length> min-panel-height: 160px;
    in property <length> max-panel-width: 4000px;
    in property <length> max-panel-height: 4000px;
    /// Bounding box the panel must stay inside (typically root.width / root.height).
    in property <length> bound-w: 9999px;
    in property <length> bound-h: 9999px;
    in property <bool> closable: true;
    in property <bool> resizable: true;
    /// Title-bar accent. Defaults to neon-cyan; pass `Theme.neon-amber`
    /// for "warning" panels, `Theme.neon-red` for danger, etc.
    in property <color> accent-color: Theme.neon-cyan;

    // ── Callbacks ────────────────────────────────────────────────
    callback closed;
    callback position-changed;  // Fires after each successful drag move.
    callback size-changed;      // Fires after each successful resize move.

    // ── Render ───────────────────────────────────────────────────
    width: root.panel-width;
    height: root.panel-height;
    x: root.panel-x;
    y: root.panel-y;
    background: Theme.bg-elevated;
    border-radius: Theme.radius-lg;
    border-width: 1px;
    border-color: Theme.border;
    drop-shadow-blur: Theme.shadow-blur-lg;
    drop-shadow-color: #00000080;

    VerticalLayout {
        spacing: 0px;
        padding: 0px;

        // ── Title bar (drag handle) ──────────────────────────────
        Rectangle {
            height: 32px;
            background: Theme.bg-surface;
            border-top-left-radius: Theme.radius-lg;
            border-top-right-radius: Theme.radius-lg;

            // 1px bottom border to separate from body.
            Rectangle {
                height: 1px;
                width: 100%;
                background: Theme.border;
                y: parent.height - 1px;
            }

            drag-area := TouchArea {
                width: parent.width;
                height: parent.height;
                mouse-cursor: move;
                property <length> grab-x: 0px;
                property <length> grab-y: 0px;
                property <bool> dragging: false;
                pointer-event(e) => {
                    if (e.kind == PointerEventKind.down
                        && e.button == PointerEventButton.left)
                    {
                        self.grab-x = self.mouse-x;
                        self.grab-y = self.mouse-y;
                        self.dragging = true;
                    }
                    if (e.kind == PointerEventKind.up) {
                        self.dragging = false;
                    }
                }
                moved => {
                    if (self.dragging) {
                        root.panel-x = clamp(
                            root.panel-x + self.mouse-x - self.grab-x,
                            -root.panel-width + 80px,
                            root.bound-w - 80px,
                        );
                        root.panel-y = clamp(
                            root.panel-y + self.mouse-y - self.grab-y,
                            0px,
                            root.bound-h - 32px,
                        );
                        root.position-changed();
                    }
                }
            }

            HorizontalLayout {
                padding-left: Theme.sp-3;
                padding-right: Theme.sp-2;
                spacing: Theme.sp-2;

                // Accent dot — visual cue for which kind of panel this is.
                Rectangle {
                    width: 8px;
                    height: 8px;
                    border-radius: 4px;
                    background: root.accent-color;
                    y: (parent.height - self.height) / 2;
                }
                Text {
                    text: root.title;
                    font-size: Theme.font-base;
                    font-weight: 600;
                    color: Theme.text-primary;
                    horizontal-stretch: 1;
                    vertical-alignment: center;
                    overflow: elide;
                }
                if (root.badge != ""): Rectangle {
                    min-width: 22px;
                    height: 18px;
                    border-radius: 9px;
                    background: root.accent-color;
                    y: (parent.height - self.height) / 2;
                    Text {
                        text: root.badge;
                        font-size: Theme.font-xs;
                        font-weight: 700;
                        color: Theme.text-inverse;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                        width: parent.width;
                        height: parent.height;
                    }
                }
                if (root.closable): Rectangle {
                    width: 22px;
                    height: 22px;
                    border-radius: Theme.radius-sm;
                    background: close-touch.has-hover ? Theme.bg-hover : transparent;
                    y: (parent.height - self.height) / 2;
                    close-touch := TouchArea {
                        clicked => { root.closed(); }
                        accessible-role: button;
                        accessible-label: "Cerrar panel";
                    }
                    Text {
                        text: "×";
                        color: close-touch.has-hover ? root.accent-color : Theme.text-primary;
                        font-size: Theme.font-lg;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                        width: parent.width;
                        height: parent.height;
                    }
                }
            }
        }

        // ── Body — slot for caller content ───────────────────────
        Rectangle {
            background: Theme.bg-base;
            vertical-stretch: 1;
            border-bottom-left-radius: Theme.radius-lg;
            border-bottom-right-radius: Theme.radius-lg;
            clip: true;
            VerticalLayout {
                padding: 0px;
                spacing: 0px;
                @children
            }
        }
    }

    // ── Resize grip (bottom-right corner) ────────────────────────
    if (root.resizable): Rectangle {
        width: 14px;
        height: 14px;
        x: parent.width - self.width - 2px;
        y: parent.height - self.height - 2px;
        // Three short diagonal hash lines to suggest "resize
        // handle". Slint Rectangle has no rotation, so we offset
        // dots in a stair pattern that reads visually similar.
        Rectangle { x: 10px; y: 4px; width: 2px; height: 2px; background: Theme.text-dim; border-radius: 1px; }
        Rectangle { x: 6px;  y: 8px; width: 6px; height: 2px; background: Theme.text-dim; border-radius: 1px; }
        Rectangle { x: 2px;  y: 12px; width: 10px; height: 2px; background: Theme.text-dim; border-radius: 1px; }

        resize-touch := TouchArea {
            mouse-cursor: nwse-resize;
            property <length> grab-x: 0px;
            property <length> grab-y: 0px;
            property <bool> resizing: false;
            pointer-event(e) => {
                if (e.kind == PointerEventKind.down
                    && e.button == PointerEventButton.left)
                {
                    self.grab-x = self.mouse-x;
                    self.grab-y = self.mouse-y;
                    self.resizing = true;
                }
                if (e.kind == PointerEventKind.up) {
                    self.resizing = false;
                }
            }
            moved => {
                if (self.resizing) {
                    root.panel-width = clamp(
                        root.panel-width + self.mouse-x - self.grab-x,
                        root.min-panel-width,
                        min(root.max-panel-width, root.bound-w - root.panel-x),
                    );
                    root.panel-height = clamp(
                        root.panel-height + self.mouse-y - self.grab-y,
                        root.min-panel-height,
                        min(root.max-panel-height, root.bound-h - root.panel-y),
                    );
                    root.size-changed();
                }
            }
        }
    }
}
