// Connections Page - Display active connections list
import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
import { Item } from "../components/item.slint";
import { Empty } from "../components/empty.slint";
import { Connection } from "../types.slint";

export component ConnectionsPage inherits Rectangle {
    in property <[Connection]> connections;

    callback load-connections();

    background: Theme.colors.background;

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

            HorizontalLayout {
                padding: SpacingSystem.spacing.s4;

                Text {
                    text: "Connections";
                    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.s2;

                // Empty state
                if connections.length == 0: Empty {
                    height: 300px;
                    icon: "🔗";
                    title: "No Active Connections";
                    description: "Connections will appear here when active";
                }

                // Connection list
                for connection in connections: Item {
                    icon: "✓";
                    title: connection.host;
                    description: "Process: " + connection.process + " | Rule: " + connection.rule + " | ↑ " + connection.upload + " ↓ " + connection.download;
                }
            }
        }
    }
}