// AGENTS.md §54 modals.
//
// Phase 7 C4: 翻译为简体中文。

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

    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;
    in property <color> backdrop-color: #000000;

    callback close-dialog();

    background: transparent;

    Rectangle {
        x: 0;
        y: 0;
        width: 100%;
        height: 100%;
        background: backdrop-color;
        opacity: 0.55;
        TouchArea {
            clicked => {
                root.close-dialog();
            }
        }
    }

    Rectangle {
        x: (parent.width - self.width) / 2;
        y: (parent.height - self.height) / 2;
        width: 380px;
        height: 280px;
        background: bg-color;
        border-color: button-border;
        border-width: 1px;
        border-radius: 12px;

        VerticalLayout {
            padding: 24px;
            spacing: 10px;

            Text {
                text: "Windows Gotify 客户端（Rust 重写版）";
                color: text-primary-color;
                font-size: 16px;
                font-weight: 700;
            }
            Text {
                text: version-string;
                color: accent-color;
                font-size: 13px;
            }
            Text {
                text: "构建于 " + build-date;
                color: text-secondary-color;
                font-size: 11px;
            }
            Rectangle { height: 8px; }
            Text {
                text: "轻量、现代、Windows 原生 Gotify\n桌面客户端。Phase 1–8 全部完成。";
                color: text-secondary-color;
                font-size: 12px;
                wrap: word-wrap;
            }
            Rectangle { height: 8px; }

            HorizontalLayout {
                alignment: end;
                Rectangle {
                    width: 100px;
                    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: "关闭";
                        color: text-primary-color;
                        font-size: 12px;
                    }
                    TouchArea {
                        clicked => {
                            root.close-dialog();
                        }
                    }
                }
            }
        }
    }
}

export component ConfirmDialog inherits Rectangle {
    in property <string> title-text: "确认";
    in property <string> message: "确定吗？";
    in property <string> confirm-label: "确认";
    in property <string> cancel-label: "取消";

    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;
    in property <color> backdrop-color: #000000;

    background: transparent;

    Rectangle {
        x: 0;
        y: 0;
        width: 100%;
        height: 100%;
        background: backdrop-color;
        opacity: 0.55;
        TouchArea {
            clicked => {
                root.cancelled();
            }
        }
    }

    Rectangle {
        x: (parent.width - self.width) / 2;
        y: (parent.height - self.height) / 2;
        width: 380px;
        height: 180px;
        background: bg-color;
        border-color: button-border;
        border-width: 1px;
        border-radius: 12px;

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

            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();
                        }
                    }
                }
                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();
                        }
                    }
                }
            }
        }
    }
}