import { Theme, SpacingSystem, Typography } from "../theme/theme.slint";

export struct Connection {
    source: string,
    destination: string,
    protocol: string,
    upload: string,
    download: string,
    duration: string,
}

export component ConnectionsPage {
    in property <[Connection]> connections: [];
    
    VerticalLayout {
        padding: SpacingSystem.spacing.s4;
        spacing: SpacingSystem.spacing.s4;
        
        // Header
        Text {
            text: "Connections";
            color: Theme.colors.foreground;
            font-size: Typography.sizes.xl;
            font-weight: Typography.weights.bold;
        }
        
        // Connections List
        ScrollView {
            VerticalLayout {
                spacing: SpacingSystem.spacing.s2;
                
                for connection in root.connections: ConnectionItem {
                    connection-data: connection;
                }
            }
        }
    }
}

component ConnectionItem {
    in property <Connection> connection-data;
    
    private property <bool> hovered: false;
    
    height: 60px;
    
    states [
        hovered when root.hovered: {
            container.background: Theme.colors.muted.transparentize(0.5);
        }
    ]
    
    container := Rectangle {
        background: transparent;
        border-radius: SpacingSystem.radius.md;
        border-width: 1px;
        border-color: Theme.colors.border;
        
        animate background { duration: 150ms; }
        
        HorizontalLayout {
            padding: SpacingSystem.spacing.s3;
            spacing: SpacingSystem.spacing.s3;
            alignment: space-between;
            
            // Icon
            Rectangle {
                width: 40px;
                height: 40px;
                border-radius: SpacingSystem.radius.md;
                background: Theme.colors.primary.transparentize(0.9);
                
                Text {
                    text: "🔗";
                    font-size: Typography.sizes.lg;
                    horizontal-alignment: center;
                    vertical-alignment: center;
                }
            }
            
            // Connection Info
            VerticalLayout {
                spacing: SpacingSystem.spacing.s1;
                
                Text {
                    text: root.connection-data.source + " → " + root.connection-data.destination;
                    color: Theme.colors.foreground;
                    font-size: Typography.sizes.sm;
                    font-weight: Typography.weights.medium;
                    overflow: elide;
                }
                
                HorizontalLayout {
                    spacing: SpacingSystem.spacing.s3;
                    
                    Text {
                        text: root.connection-data.protocol;
                        color: Theme.colors.muted-foreground;
                        font-size: Typography.sizes.xs;
                    }
                    
                    Text {
                        text: "↑ " + root.connection-data.upload;
                        color: Theme.colors.primary;
                        font-size: Typography.sizes.xs;
                    }
                    
                    Text {
                        text: "↓ " + root.connection-data.download;
                        color: Theme.colors.secondary;
                        font-size: Typography.sizes.xs;
                    }
                }
            }
            
            // Duration
            Text {
                text: root.connection-data.duration;
                color: Theme.colmuted-foreground;
                font-size: Typography.sizes.xs;
                vertical-alignment: center;
            }
        }
        
        touch := TouchArea {
            moved => {
                root.hovered = self.has-hover;
            }
        }
    }
}