<UserControl x:Class="DMS.WPF.Views.MqttsView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
             xmlns:ikw="http://schemas.inkore.net/lib/ui/wpf"
             xmlns:vm="clr-namespace:DMS.WPF.ViewModels"
             d:DataContext="{d:DesignInstance vm:MqttsViewModel}"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="300">
    <UserControl.Resources>
        <DataTemplate x:Key="MqttItemTemplate">
            <Border BorderBrush="{DynamicResource SystemControlHighlightBaseMediumLowBrush}"
                    BorderThickness="1"
                    CornerRadius="8"
                    Margin="5"
                    Padding="15">
                <Border.Style>
                    <Style TargetType="Border">
                        <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundAltHighBrush}" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsConnect}" Value="True">
                                <Setter Property="Background" Value="LightGreen" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
                <Border.Effect>
                    <DropShadowEffect ShadowDepth="1"
                                      Color="Black"
                                      Opacity="0.1"
                                      BlurRadius="5" />
                </Border.Effect>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <!--  Row 0: Header with Name and ToggleSwitch  -->
                    <DockPanel Grid.Row="0"
                               Margin="0,0,0,10">
                        <ui:ToggleSwitch DockPanel.Dock="Right"
                                         IsOn="{Binding IsActive}"
                                         OffContent="停止"
                                         OnContent="启动" />
                        <TextBlock Text="{Binding ServerName}"
                                   FontSize="20"
                                   FontWeight="SemiBold"
                                   VerticalAlignment="Center" />
                    </DockPanel>

                    <!--  Row 1: Details with Icons  -->
                    <StackPanel Grid.Row="1"
                                Margin="0,0,0,10">
                        <StackPanel Orientation="Horizontal"
                                    Margin="0,2">
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Info}"
                                         VerticalAlignment="Center"
                                         Margin="0,0,8,0"
                                         FontSize="14" />
                            <TextBlock Text="{Binding MessageFormat}"
                                       Foreground="{DynamicResource SystemControlForegroundBaseMediumBrush}"
                                       TextTrimming="CharacterEllipsis" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal"
                                    Margin="0,2">
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Connect}"
                                         VerticalAlignment="Center"
                                         Margin="0,0,8,0"
                                         FontSize="14" />
                            <TextBlock>
                                <Run Text="{Binding ServerUrl, FallbackValue='127.0.0.1'}" />
                                <Run Text=":" />
                                <Run Text="{Binding Port, FallbackValue='1883'}" />
                            </TextBlock>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal"
                                    Margin="0,2">
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.DeveloperTools}"
                                         VerticalAlignment="Center"
                                         Margin="0,0,8,0"
                                         FontSize="14" />
                            <TextBlock>
                                <Run Text="未指定平台" />
                            </TextBlock>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal"
                                    Margin="0,2">
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Contact}"
                                         VerticalAlignment="Center"
                                         Margin="0,0,8,0"
                                         FontSize="14" />
                            <TextBlock Text="{Binding ClientId}" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal"
                                    Margin="0,2">
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.OtherUser}"
                                         VerticalAlignment="Center"
                                         Margin="0,0,8,0"
                                         FontSize="14" />
                            <TextBlock Text="{Binding Username}" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal"
                                    Margin="0,2">
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Lock}"
                                         VerticalAlignment="Center"
                                         Margin="0,0,8,0"
                                         FontSize="14" />
                            <TextBlock Text="{Binding Password}" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal"
                                    Margin="0,2">
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Send}"
                                         VerticalAlignment="Center"
                                         Margin="0,0,8,0"
                                         FontSize="14" />
                            <TextBlock Text="{Binding PublishTopic}" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal"
                                    Margin="0,2">
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.SubscriptionAdd}"
                                         VerticalAlignment="Center"
                                         Margin="0,0,8,0"
                                         FontSize="14" />
                            <TextBlock Text="{Binding SubscribeTopic}" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal"
                                    Margin="0,2">
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Calendar}"
                                         VerticalAlignment="Center"
                                         Margin="0,0,8,0"
                                         FontSize="14" />
                            <TextBlock Text="{Binding ConnectedAt}" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal"
                                    Margin="0,2">
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Message}"
                                         VerticalAlignment="Center"
                                         Margin="0,0,8,0"
                                         FontSize="14" />
                            <TextBlock Text="{Binding MessageFormat}" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal"
                                    Margin="0,2">
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.FavoriteStar}"
                                         VerticalAlignment="Center"
                                         Margin="0,0,8,0"
                                         FontSize="14" />
                            <!-- IsDefault 属性未在 ViewModel 中定义，已移除绑定 -->
                            <TextBlock Text="未设置默认" />
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </Border>
        </DataTemplate>
    </UserControl.Resources>

    <StackPanel>
        <!-- 操作菜单栏 -->
        <ui:CommandBar DefaultLabelPosition="Right"
                       IsOpen="False">
            <!-- 添加MQTT -->
            <ui:AppBarButton Command="{Binding AddMqttCommand}"
                             Label="添加MQTT">
                <ui:AppBarButton.Icon>
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Add}" />
                </ui:AppBarButton.Icon>
            </ui:AppBarButton>
            <!-- 编辑MQTT -->
            <ui:AppBarButton Command="{Binding EditMqttCommand}"
                             Label="编辑MQTT">
                <ui:AppBarButton.Icon>
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Edit}" />
                </ui:AppBarButton.Icon>
            </ui:AppBarButton>
            <!-- 删除MQTT -->
            <ui:AppBarButton Command="{Binding DeleteMqttCommand}"
                             Label="删除MQTT">
                <ui:AppBarButton.Icon>
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Delete}" />
                </ui:AppBarButton.Icon>
            </ui:AppBarButton>
            <!-- 查看详情 -->
            <ui:AppBarButton Command="{Binding NavigateToMqttDetailCommand}"
                             Label="查看详情">
                <ui:AppBarButton.Icon>
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Document}" />
                </ui:AppBarButton.Icon>
            </ui:AppBarButton>
            <ui:AppBarButton x:Name="ShareButton"
                             Label="Share">
                <ui:AppBarButton.Icon>
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Share}" />
                </ui:AppBarButton.Icon>
            </ui:AppBarButton>
            <ui:CommandBar.SecondaryCommands>
                <ui:AppBarButton x:Name="SettingsButton"
                                 Icon="Setting"
                                 Label="Settings" />
            </ui:CommandBar.SecondaryCommands>
        </ui:CommandBar>


        <ui:GridView x:Name="BasicGridView"
                     Margin="20"
                     IsItemClickEnabled="True"
                     SelectedItem="{Binding SelectedMqtt }"
                     ItemsSource="{Binding Mqtts}"
                     ItemTemplate="{StaticResource MqttItemTemplate}"
                     SelectionMode="Single" />
    </StackPanel>

</UserControl>