import { Theme } from "theme.slint";
import { GhostButton } from "widgets.slint";

// A destructive (red) action button, matching PrimaryButton's shape.
component DangerButton inherits Rectangle {
    in property <string> text;
    callback clicked();
    height: 30px;
    min-width: 80px;
    border-radius: Theme.radius-sm;
    background: touch.pressed ? #c44a4a : (touch.has-hover ? #ec6a6a : Theme.danger);
    animate background { duration: 120ms; }
    HorizontalLayout {
        height: parent.height;
        padding-left: 14px;
        padding-right: 14px;
        alignment: center;
        Text {
            height: parent.height;
            text: root.text;
            color: white;
            font-size: Theme.fs-md;
            font-weight: 600;
            horizontal-alignment: center;
            vertical-alignment: center;
        }
    }
    touch := TouchArea {
        mouse-cursor: pointer;
        clicked => { root.clicked(); }
    }
}

// In-app modal confirmation dialog, styled to match the rest of meatshell
// (a dark card over a dimmed backdrop, like SessionDialog).  Purely
// presentational: it emits `confirm` / `cancel` and the caller decides what
// to do.  Used for the irreversible SFTP delete (#28).
export component ConfirmDialog inherits Rectangle {
    in-out property <bool> is-open: false;
    in property <string> title: @tr("Please confirm");
    in property <string> message;
    in property <string> detail;                  // optional, e.g. the file path
    in property <string> confirm-label: @tr("Confirm");
    callback confirm();
    callback cancel();

    visible: is-open;
    background: #000000aa;

    // Backdrop click cancels.
    TouchArea {
        width: 100%;
        height: 100%;
        clicked => { root.cancel(); }
    }

    Rectangle {
        width: 380px;
        height: card.preferred-height;
        x: (parent.width - self.width) / 2;
        y: (parent.height - self.height) / 2;
        background: Theme.bg-panel;
        border-radius: Theme.radius-lg;
        border-width: 1px;
        border-color: Theme.border-strong;
        drop-shadow-blur: 24px;
        drop-shadow-color: #00000080;

        // Swallow clicks inside the card so they don't hit the backdrop.
        TouchArea { width: 100%; height: 100%; }

        card := VerticalLayout {
            padding: 20px;
            spacing: 12px;

            HorizontalLayout {
                spacing: 8px;
                Text {
                    text: "⚠";
                    color: Theme.danger;
                    font-size: Theme.fs-xl;
                    vertical-alignment: center;
                }
                Text {
                    text: root.title;
                    color: Theme.text-primary;
                    font-size: Theme.fs-xl;
                    font-weight: 600;
                    vertical-alignment: center;
                }
            }

            Text {
                text: root.message;
                color: Theme.text-secondary;
                font-size: Theme.fs-md;
                wrap: word-wrap;
            }

            if root.detail != "" : Text {
                text: root.detail;
                color: Theme.text-primary;
                font-family: Theme.font-mono;
                font-size: Theme.fs-sm;
                wrap: word-wrap;
            }

            HorizontalLayout {
                height: 30px;
                alignment: end;
                spacing: 8px;
                GhostButton {
                    text: @tr("Cancel");
                    clicked => { root.cancel(); }
                }
                DangerButton {
                    text: root.confirm-label;
                    clicked => { root.confirm(); }
                }
            }
        }
    }
}