<UserControl x:Class="DMS.WPF.Views.DeviceDetailView"
             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"
             xmlns:hc="https://handyorg.github.io/handycontrol"
             d:DataContext="{d:DesignInstance vm:DeviceDetailViewModel}"
             mc:Ignorable="d"
             d:DesignHeight="600"
             d:DesignWidth="800">
    <UserControl.Resources>
        <!-- DataTemplate for VariableTable items in GridView -->
        <DataTemplate x:Key="VariableTableItemTemplate">
            <Border Background="{DynamicResource SystemControlBackgroundAltHighBrush}"
                    BorderBrush="{DynamicResource SystemControlHighlightBaseMediumLowBrush}"
                    BorderThickness="1"
                    CornerRadius="8"
                    Margin="5"
                    Padding="15">
                <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: Name and IsActive Toggle -->
                    <DockPanel Grid.Row="0" Margin="0,0,0,10">
                        <ui:ToggleSwitch DockPanel.Dock="Right"
                                         IsOn="{Binding IsActive}"
                                         OffContent="停用"
                                         OnContent="启用" />
                        <TextBlock Text="{Binding Name}"
                                   FontSize="18"
                                   FontWeight="SemiBold"
                                   VerticalAlignment="Center" />
                    </DockPanel>

                    <!-- Row 1: Description and ProtocolType -->
                    <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 Description}"
                                       Foreground="{DynamicResource SystemControlForegroundBaseMediumBrush}"
                                       TextTrimming="CharacterEllipsis" />
                        </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="协议: " />
                                <Run Text="{Binding Protocol}" />
                            </TextBlock>
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </Border>
        </DataTemplate>
    </UserControl.Resources>

    <ikw:SimpleStackPanel Spacing="10">
        <Border Margin="10" Padding="5">
            
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                
                <!-- 返回设备列表按钮 -->
                <Button Grid.Column="0" 
                        Command="{Binding NavigateToDevicesListCommand}"
                        Style="{StaticResource ButtonDefault}"
                        ToolTip="返回设备列表"
                        Margin="0,0,10,0">
                    <Button.Content>
                        <StackPanel Orientation="Horizontal">
                            <ui:FontIcon
                                Icon="{x:Static ui:SegoeFluentIcons.ArrowLeft8}" />
                        </StackPanel>
                    </Button.Content>
                </Button>
                
                <!-- Command Bar for Variable Tables -->
                <ui:CommandBar Grid.Column="1" DefaultLabelPosition="Right" IsOpen="False" VerticalAlignment="Top">
                    <ui:AppBarButton Command="{Binding AddVariableTableCommand}" Label="添加变量表">
                        <ui:AppBarButton.Icon>
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Add}" />
                        </ui:AppBarButton.Icon>
                    </ui:AppBarButton>
                    <ui:AppBarButton Command="{Binding EditVariableTableCommand}" Label="编辑变量表">
                        <ui:AppBarButton.Icon>
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Edit}" />
                        </ui:AppBarButton.Icon>
                    </ui:AppBarButton>
                    <ui:AppBarButton Command="{Binding DeleteVariableTableCommand}" Label="删除变量表">
                        <ui:AppBarButton.Icon>
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Delete}" />
                        </ui:AppBarButton.Icon>
                    </ui:AppBarButton>
                    <!-- Add more variable table-specific commands here if needed -->
                </ui:CommandBar>
            </Grid>
        </Border>
        
            <!-- Device Details Section -->
            <StackPanel Grid.Row="0" Margin="10">
                <TextBlock Text="{Binding  CurrentDevice.Name}" FontSize="24" FontWeight="Bold" Margin="0,0,0,5" />
                <TextBlock Text="{Binding CurrentDevice.Description}" FontSize="14" Foreground="{DynamicResource SystemControlForegroundBaseMediumBrush}" Margin="0,0,0,10" />
                <StackPanel Orientation="Horizontal" Margin="0,2">
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Connect}" VerticalAlignment="Center" Margin="0,0,8,0" FontSize="16" />
                    <TextBlock>
                        <Run Text="IP: " />
                        <Run Text="{Binding CurrentDevice.IpAddress}" />
                        <Run Text=" Port: " />
                        <Run Text="{Binding CurrentDevice.Port}" />
                    </TextBlock>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="0,2">
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.DeveloperTools}" VerticalAlignment="Center" Margin="0,0,8,0" FontSize="16" />
                    <TextBlock>
                        <Run Text="设备类型: " />
                        <Run Text="{Binding CurrentDevice.DeviceType}" />
                        <Run Text=" 协议类型: " />
                        <Run Text="{Binding CurrentDevice.Protocol}" />
                    </TextBlock>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="0,2">
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.StatusCircleCheckmark}" VerticalAlignment="Center" Margin="0,0,8,0" FontSize="16" />
                    <TextBlock>
                        <Run Text="激活状态: " />
                        <Run Text="{Binding CurrentDevice.IsActive}" />
                    </TextBlock>
                </StackPanel>
            </StackPanel>

            

            <!-- Variable Tables GridView -->
            <ui:GridView Grid.Row="1"
                         Margin="10,50,10,10"
                         IsItemClickEnabled="True"
                         SelectedItem="{Binding SelectedVariableTable}"
                         ItemsSource="{Binding CurrentDevice.VariableTables}"
                         ItemTemplate="{StaticResource VariableTableItemTemplate}"
                         SelectionMode="Single">
            <hc:Interaction.Triggers>
                <hc:EventTrigger EventName="MouseDoubleClick">
                    <hc:InvokeCommandAction Command="{Binding NavigateToVariableTableCommand}" />
                </hc:EventTrigger>
            </hc:Interaction.Triggers>
        </ui:GridView>
    </ikw:SimpleStackPanel>
</UserControl>