import {
    VerticalBox,
    HorizontalBox,
} from "std-widgets.slint";
import { Button, LabeledInput } from "Components.slint";

export component ConnectPage inherits Window {
    width: 1920px;
    height: 1080px;
    title: "UNO!";
    
    in property <bool> is-connecting;

    callback request-connect(string, string, string);

    // 背景渐变 (从左上角的米色到右下角的淡粉色)
    Rectangle {
        background: @linear-gradient(135deg, #fdfbf7 0%, #f3e7e9 100%);
    }

    // 中心卡片
    Rectangle {
        width: 600px;
        height: 600px; // 根据内容高度调整
        background: #FDFBF8; // 略微区别于背景的米白色
        border-radius: 20px;

        // 简单的阴影模拟
        drop-shadow-blur: 20px;
        drop-shadow-color: #00000015;
        drop-shadow-offset-y: 4px;

        VerticalLayout {
            padding: 40px;
            spacing: 20px;
            alignment: center;

            // 标题区域
            VerticalLayout {
                spacing: 8px;
                alignment: center;

                Text {
                    text: "UNO";
                    font-size: 96px;
                    font-weight: 700;
                    color: #222222;
                    horizontal-alignment: center;
                }

                Text {
                    text: "连接至服务器以开始游戏";
                    font-size: 14px;
                    color: #666666;
                    horizontal-alignment: center;
                }
            }

            // 占位间隔
            Rectangle {
                height: 10px;
            }

            // 表单区域
            address-input := LabeledInput {
                label-text: "服务器地址";
                value: "localhost";
            }

            port-input := LabeledInput {
                label-text: "服务器端口";
                value: "10001";
                input-type: InputType.number;
            }

            name-input := LabeledInput {
                label-text: "玩家昵称";
                value: "Player";
            }

            // 底部按钮区域 (增加一点顶部间距)
            HorizontalLayout {
                padding-top: 10px;
                alignment: center;

                Button {
                    text: is-connecting ? "正在连接..." : "连接";
                    enabled: !is-connecting;
                    clicked => {
                        root.request-connect(address-input.value, port-input.value, name-input.value);
                    }
                }
            }
        }
    }
}