// Home Page - Dashboard with profile info and quick settings
import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
import { Container } from "../layouts/container.slint";
import { Badge } from "../components/badge.slint";
import { Button } from "../components/button.slint";
import { Profile, SettingItem } from "../types.slint";

export component HomePage inherits Rectangle {
    in property <Profile> current-profile;
    in property <[SettingItem]> quick-settings;

    callback load-home-data();
    callback toggle-setting(string /* key */, bool /* value */);

    background: Theme.colors.background;

    VerticalLayout {
        // Fixed header
        Rectangle {
            height: 48px;
            background: Theme.colors.background;

            HorizontalLayout {
                padding: SpacingSystem.spacing.s4;

                Text {
                    text: "Home";
                    font-size: Typography.sizes.xl;
                    font-weight: Typography.weights.bold;
                    color: Theme.colors.foreground;
                    vertical-alignment: center;
                }
            }
        }

        // Scrollable content
        Flickable {
            viewport-height: content-layout.preferred-height + SpacingSystem.spacing.s4 * 2;

            content-layout := VerticalLayout {
                padding: SpacingSystem.spacing.s4;
                spacing: SpacingSystem.spacing.s4;

                // Profile Card
                Container {
                    VerticalLayout {
                        padding: SpacingSystem.spacing.s4;
                        spacing: SpacingSystem.spacing.s4;

                        // Header with icon and name
                        HorizontalLayout {
                            spacing: SpacingSystem.spacing.s3;
                            alignment: space-between;

                            HorizontalLayout {
                                spacing: SpacingSystem.spacing.s3;

                                // Icon
                                Rectangle {
                                    width: 48px;
                                    height: 48px;
                                    background: Theme.colors.primary;
                                    border-radius: SpacingSystem.radius.lg;

                                    Text {
                                        text: "☁";
                                        font-size: 28px;
                                        horizontal-alignment: center;
                                        vertical-alignment: center;
                                    }
                                }

                                // Profile info
                                VerticalLayout {
                                    spacing: SpacingSystem.spacing.s1;

                                    Text {
                                        text: current-profile.name;
                                        font-size: Typography.sizes.lg;
                                        font-weight: Typography.weights.bold;
                                        color: Theme.colors.foreground;
                                    }

                                    HorizontalLayout {
                                        spacing: SpacingSystem.spacing.s2;

                                        Text {
                                            text: "🌍";
                                            font-size: Typography.sizes.xs;
                                        }

                                        Text {
                                            text: current-profile.type;
                                            font-size: Typography.sizes.xs;
                                            color: Theme.colors.muted-foreground;
                                        }

                                        Badge {
                                            text: "Vmess";
                                            variant: "outline";
                                        }

                                        Badge {
                                            text: "UDP";
                                            variant: "outline";
                                        }
                                    }
                                }
                            }

                            // Refresh button
                            Button {
                                text: "🔄";
                                variant: "ghost";
                                size: "sm";
                            }
                        }

                        // Divider
                        Rectangle {
                            height: 1px;
                            background: Theme.colors.border;
                        }

                        // Stats grid
                        HorizontalLayout {
                            spacing: SpacingSystem.spacing.s6;

                            // Usage
                            VerticalLayout {
                                spacing: SpacingSystem.spacing.s1;
                                horizontal-stretch: 1;

                                HorizontalLayout {
                                    spacing: SpacingSystem.spacing.s2;

                                    Text {
                                        text: "☁";
                                        font-size: Typography.sizes.xs;
                                        color: Theme.colors.muted-foreground;
                                    }

                                    Text {
                                        text: "已使用 / 总量";
                                        font-size: Typography.sizes.xs;
                                        color: Theme.colors.muted-foreground;
                                    }
                                }

                                Text {
                                    text: current-profile.usage;
                                    font-size: Typography.sizes.sm;
                                    font-weight: Typography.weights.medium;
                                    color: Theme.colors.foreground;
                                }
                            }

                            // Expire date
                            VerticalLayout {
                                spacing: SpacingSystem.spacing.s1;
                                horizontal-stretch: 1;

                                HorizontalLayout {
                                    spacing: SpacingSystem.spacing.s2;

                                    Text {
                                        text: "✓";
                                        font-size: Typography.sizes.xs;
                                        color: Theme.colors.muted-foreground;
                                    }

                                    Text {
                                        text: "到期时间";
                                        font-size: Typography.sizes.xs;
                                        color: Theme.colors.muted-foreground;
                                    }
                                }

                                Text {
                                    text: current-profile.expire-at;
                                    font-size: Typography.sizes.sm;
                                    font-weight: Typography.weights.medium;
                                    color: Theme.colors.foreground;
                                }
                            }

                            // Updated date
                            VerticalLayout {
                                spacing: SpacingSystem.spacing.s1;
                                horizontal-stretch: 1;

                                HorizontalLayout {
                                    spacing: SpacingSystem.spacing.s2;

                                    Text {
                                        text: "🕐";
                                        font-size: Typography.sizes.xs;
                                        color: Theme.colors.muted-foreground;
                                    }

                                    Text {
                                        text: "更新时间";
                                        font-size: Typography.sizes.xs;
                                        color: Theme.colors.muted-foreground;
                                    }
                                }

                                Text {
                                    text: current-profile.updated-at;
                                    font-size: Typography.sizes.sm;
                                    font-weight: Typography.weights.medium;
                                    color: Theme.colors.foreground;
                                }
                            }
                        }
                    }
                }

                // Location Card (placeholder)
                Container {
                    VerticalLayout {
                        padding: SpacingSystem.spacing.s4;
                        spacing: SpacingSystem.spacing.s3;

                        Text {
                            text: "位置信息";
                            font-size: Typography.sizes.base;
                            font-weight: Typography.weights.semibold;
                            color: Theme.colors.foreground;
                        }

                        HorizontalLayout {
                            spacing: SpacingSystem.spacing.s3;

                            Text {
                                text: "🌍";
                                font-size: 32px;
                            }

                            VerticalLayout {
                                spacing: SpacingSystem.spacing.s1;

                                Text {
                                    text: "当前位置: 日本 东京";
                                    font-size: Typography.sizes.sm;
                                    color: Theme.colors.foreground;
                                }

                                Text {
                                    text: "IP: 192.168.1.1";
                                    font-size: Typography.sizes.xs;
                                    color: Theme.colors.muted-foreground;
                                }
                            }
                        }
                    }
                }

                // Quick Settings Card
                Container {
                    VerticalLayout {
                        padding: SpacingSystem.spacing.s4;
                        spacing: SpacingSystem.spacing.s3;

                        Text {
                            text: "快捷设置";
                            font-size: Typography.sizes.base;
                            font-weight: Typography.weights.semibold;
                            color: Theme.colors.foreground;
                        }

                        // Quick settings grid
                        HorizontalLayout {
                            spacing: SpacingSystem.spacing.s3;

                            // System Proxy
                            Rectangle {
                                horizontal-stretch: 1;
                                height: 80px;
                                background: Theme.colors.muted;
                                border-radius: SpacingSystem.radius.md;

                                VerticalLayout {
                                    padding: SpacingSystem.spacing.s3;
                                    spacing: SpacingSystem.spacing.s2;
                                    alignment: center;

                                    Text {
                                        text: "🌐";
                                        font-size: 24px;
                                        horizontal-alignment: center;
                                    }

                                    Text {
                                        text: "系统代理";
                                        font-size: Typography.sizes.xs;
                                        color: Theme.colors.foreground;
                                        horizontal-alignment: center;
                                    }
                                }

                                TouchArea {
                                    clicked => {
                                        root.toggle-setting("system-proxy", true);
                                    }
                                }
                            }

                            // TUN Mode
                            Rectangle {
                                horizontal-stretch: 1;
                                height: 80px;
                                background: Theme.colors.muted;
                                border-radius: SpacingSystem.radius.md;

                                VerticalLayout {
                                    padding: SpacingSystem.spacing.s3;
                                    spacing: SpacingSystem.spacing.s2;
                                    alignment: center;

                                    Text {
                                        text: "🔧";
                                        font-size: 24px;
                                        horizontal-alignment: center;
                                    }

                                    Text {
                                        text: "TUN 模式";
                                        font-size: Typography.sizes.xs;
                                        color: Theme.colors.foreground;
                                        horizontal-alignment: center;
                                    }
                                }

                                TouchArea {
                                    clicked => {
                                        root.toggle-setting("tun-mode", true);
                                    }
                                }
                            }

                            // Allow LAN
                            Rectangle {
                                horizontal-stretch: 1;
                                height: 80px;
                                background: Theme.colors.muted;
                                border-radius: SpacingSystem.radius.md;

                                VerticalLayout {
                                    padding: SpacingSystem.spacing.s3;
                                    spacing: SpacingSystem.spacing.s2;
                                    alignment: center;

                                    Text {
                                        text: "📡";
                                        font-size: 24px;
                                        horizontal-alignment: center;
                                    }

                                    Text {
                                        text: "允许局域网";
                                        font-size: Typography.sizes.xs;
                                        color: Theme.colors.foreground;
                                        horizontal-alignment: center;
                                    }
                                }

                                TouchArea {
                                    clicked => {
                                        root.toggle-setting("allow-lan", true);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}