// Logs Page - Display Mihomo and App logs with tabs
import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
import { Empty } from "../components/empty.slint";
import { LogEntry } from "../types.slint";

export component LogsPage inherits Rectangle {
    in property <[LogEntry]> mihomo-logs;
    in property <[LogEntry]> app-logs;
    in-out property <string> active-tab: "mihomo";

    callback load-logs(string /* type: mihomo/app */);

    background: Theme.colors.background;

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

            HorizontalLayout {
                padding: SpacingSystem.spacing.s4;
                spacing: SpacingSystem.spacing.s4;
                alignment: space-between;

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

                // Tabs
                HorizontalLayout {
                    spacing: SpacingSystem.spacing.s1;

                    Rectangle {
                        width: 120px;
                        height: 32px;
                        background: active-tab == "mihomo" ? Theme.colors.primary : Theme.colors.muted;
                        border-radius: SpacingSystem.radius.md;

                        TouchArea {
                            clicked => {
                                active-tab = "mihomo";
                                root.load-logs("mihomo");
                            }
                        }

                        Text {
                            text: "Mihomo Logs";
                            font-size: Typography.sizes.sm;
                            font-weight: Typography.weights.medium;
                            color: active-tab == "mihomo" ? Theme.colors.primary-foreground : Theme.colors.muted-foreground;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                        }
                    }

                    Rectangle {
                        width: 100px;
                        height: 32px;
                        background: active-tab == "app" ? Theme.colors.primary : Theme.colors.muted;
                        border-radius: SpacingSystem.radius.md;

                        TouchArea {
                            clicked => {
                                active-tab = "app";
                                root.load-logs("app");
                            }
                        }

                        Text {
                            text: "App Logs";
                            font-size: Typography.sizes.sm;
                            font-weight: Typography.weights.medium;
                            color: active-tab == "app" ? Theme.colors.primary-foreground : Theme.colors.muted-foreground;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                        }
                    }
                }
            }
        }

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

            log-content := VerticalLayout {
                padding: SpacingSystem.spacing.s4;
                spacing: 0px;

                // Mihomo logs
                if active-tab == "mihomo": VerticalLayout {
                    spacing: 0px;

                    if mihomo-logs.length == 0: Empty {
                        height: 300px;
                        icon: "📝";
                        title: "No Logs";
                        description: "Mihomo logs will appear here";
                    }

                    for log[index] in mihomo-logs: Rectangle {
                        height: 24px;
                        background: mod(index, 2) == 0 ? Theme.colors.muted : transparent;

                        HorizontalLayout {
                            padding-left: SpacingSystem.spacing.s2;
                            padding-right: SpacingSystem.spacing.s2;
                            spacing: SpacingSystem.spacing.s2;

                            // Time
                            Text {
                                text: log.time;
                                font-size: Typography.sizes.xs;
                                color: Theme.colors.muted-foreground;
                                font-family: "monospace";
                                vertical-alignment: center;
                                width: 80px;
                            }

                            // Level
                            Text {
                                text: log.level;
                                font-size: Typography.sizes.xs;
                                font-weight: Typography.weights.bold;
                                color: log.level == "error" ? #ef4444 :
                                       log.level == "warn" ? #f59e0b :
                                       log.level == "info" ? #3b82f6 : Theme.colors.muted-foreground;
                                font-family: "monospace";
                                vertical-alignment: center;
                                width: 60px;
                            }

                            // Message
                            Text {
                                text: log.message;
                                font-size: Typography.sizes.xs;
                                color: Theme.colors.foreground;
                                font-family: "monospace";
                                vertical-alignment: center;
                                overflow: elide;
                            }
                        }
                    }
                }

                // App logs
                if active-tab == "app": VerticalLayout {
                    spacing: 0px;

                    if app-logs.length == 0: Empty {
                        height: 300px;
                        icon: "📝";
                        title: "No Logs";
                        description: "App logs will appear here";
                    }

                    for log[index] in app-logs: Rectangle {
                        height: 24px;
                        background: mod(index, 2) == 0 ? Theme.colors.muted : transparent;

                        HorizontalLayout {
                            padding-left: SpacingSystem.spacing.s2;
                            padding-right: SpacingSystem.spacing.s2;
                            spacing: SpacingSystem.spacing.s2;

                            // Time
                            Text {
                                text: log.time;
                                font-size: Typography.sizes.xs;
                                color: Theme.colors.muted-foreground;
                                font-family: "monospace";
                                vertical-alignment: center;
                                width: 80px;
                            }

                            // Level
                            Text {
                                text: log.level;
                                font-size: Typography.sizes.xs;
                                font-weight: Typography.weights.bold;
                                color: log.level == "error" ? #ef4444 :
                                       log.level == "warn" ? #f59e0b :
                                       log.level == "info" ? #3b82f6 : Theme.colors.muted-foreground;
                                font-family: "monospace";
                                vertical-alignment: center;
                                width: 60px;
                            }

                            // Message
                            Text {
                                text: log.message;
                                font-size: Typography.sizes.xs;
                                color: Theme.colors.foreground;
                                font-family: "monospace";
                                vertical-alignment: center;
                                overflow: elide;
                            }
                        }
                    }
                }
            }
        }
    }
}