// AGENTS.md §54 modals. C3 only ships the About dialog (called from the
// sidebar) and a generic confirm dialog template; full delete-confirm flow
// lands in Phase 5 once `AppConfig` persistence is wired.

export component AboutDialog inherits Dialog {
    in property <string> version-string: "v0.1.0";
    in property <string> build-date: "2026-09-19";

    // Theme-aware color tokens (Dark defaults; C4 will widen).
    in property <color> bg-color: #28292d;
    in property <color> text-primary-color: #e6e6e6;
    in property <color> text-secondary-color: #a0a0a0;
    in property <color> accent-color: #4ea1ff;
    in property <color> button-bg: #2f3035;
    in property <color> button-border: #3a3b40;

    title: "About Gotify Client";
    background: bg-color;

    VerticalLayout {
        padding: 24px;
        spacing: 12px;
        width: 360px;

        Text {
            text: "Windows Gotify Client (Rust)";
            color: text-primary-color;
            font-size: 16px;
            font-weight: 700;
        }
        Text {
            text: version-string;
            color: accent-color;
            font-size: 13px;
        }
        Text {
            text: "Built " + build-date;
            color: text-secondary-color;
            font-size: 11px;
        }
        Rectangle { height: 8px; }
        Text {
            text: "Lightweight, modern, Windows-native Gotify\ndesktop client. Phase 2 of 8.";
            color: text-secondary-color;
            font-size: 12px;
            wrap: word-wrap;
        }
        Rectangle { height: 12px; }

        // OK button.
        Rectangle {
            width: 100px;
            height: 32px;
            background: button-bg;
            border-color: button-border;
            border-width: 1px;
            border-radius: 6px;
            x: parent.width - self.width;

            Text {
                x: (parent.width - self.width) / 2;
                y: (parent.height - self.height) / 2;
                text: "Close";
                color: text-primary-color;
                font-size: 12px;
            }
            TouchArea {
                clicked => {
                    root.close();
                }
            }
        }
    }
}

export component ConfirmDialog inherits Dialog {
    in property <string> title-text: "Confirm";
    in property <string> message: "Are you sure?";
    in property <string> confirm-label: "Confirm";
    in property <string> cancel-label: "Cancel";

    callback confirmed();
    callback cancelled();

    in property <color> bg-color: #28292d;
    in property <color> text-primary-color: #e6e6e6;
    in property <color> text-secondary-color: #a0a0a0;
    in property <color> danger-color: #f44336;
    in property <color> button-bg: #2f3035;
    in property <color> button-border: #3a3b40;

    title: title-text;
    background: bg-color;

    VerticalLayout {
        padding: 24px;
        spacing: 16px;
        width: 360px;

        Text {
            text: message;
            color: text-primary-color;
            font-size: 13px;
            wrap: word-wrap;
        }

        HorizontalLayout {
            spacing: 12px;

            Rectangle { horizontal-stretch: 1; }

            Rectangle {
                width: 90px;
                height: 32px;
                background: button-bg;
                border-color: button-border;
                border-width: 1px;
                border-radius: 6px;
                Text {
                    x: (parent.width - self.width) / 2;
                    y: (parent.height - self.height) / 2;
                    text: cancel-label;
                    color: text-primary-color;
                    font-size: 12px;
                }
                TouchArea {
                    clicked => {
                        root.cancelled();
                        root.close();
                    }
                }
            }
            Rectangle {
                width: 90px;
                height: 32px;
                background: danger-color;
                border-radius: 6px;
                Text {
                    x: (parent.width - self.width) / 2;
                    y: (parent.height - self.height) / 2;
                    text: confirm-label;
                    color: #ffffff;
                    font-size: 12px;
                    font-weight: 600;
                }
                TouchArea {
                    clicked => {
                        root.confirmed();
                        root.close();
                    }
                }
            }
        }
    }
}