// AGENTS.md §9 empty state.
//
// Phase 7 C4: 翻译为简体中文。

export component EmptyState inherits Rectangle {
    callback test-notification();

    in property <color> glyph-color: #4ea1ff;
    in property <color> text-primary-color: #e6e6e6;
    in property <color> text-muted-color: #6a6a6a;
    in property <color> button-bg: #2f3035;
    in property <color> button-border: #3a3b40;
    in property <color> button-text: #e6e6e6;

    background: transparent;

    VerticalLayout {
        alignment: center;
        spacing: 16px;
        padding: 32px;

        // §9 ✦ glyph — 4-point star drawn with Path.
        Path {
            width: 48px;
            height: 48px;
            fill: glyph-color;
            commands: "M 24 0 L 28 20 L 48 24 L 28 28 L 24 48 L 20 28 L 0 24 L 20 20 Z";
        }

        Text {
            text: "暂时没有新消息";
            color: text-primary-color;
            font-size: 18px;
            font-weight: 600;
            horizontal-alignment: center;
        }

        Text {
            text: "新消息会自动\n出现在这里。";
            color: text-muted-color;
            font-size: 13px;
            horizontal-alignment: center;
            wrap: word-wrap;
        }

        Rectangle { height: 8px; }

        Rectangle {
            background: button-bg;
            border-color: button-border;
            border-width: 1px;
            border-radius: 6px;
            height: 36px;
            width: 160px;
            horizontal-stretch: 0;

            Text {
                x: (parent.width - self.width) / 2;
                y: (parent.height - self.height) / 2;
                text: "发送测试通知";
                color: button-text;
                font-size: 13px;
            }

            TouchArea {
                clicked => {
                    root.test-notification();
                }
            }
        }
    }
}