<Window x:Class="XP.Hardware.Detector.Views.DetectorImageWindow"
        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:prism="http://prismlibrary.com/"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:loc="clr-namespace:XP.Common.Localization.Extensions;assembly=XP.Common"
        mc:Ignorable="d"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="{loc:Localization Detector_ImageWindowTitle}"
        Height="750" Width="850"
        MinHeight="550" MinWidth="650"
        WindowStartupLocation="CenterOwner"
        Background="White">

    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <!-- 左侧：图像区域 | Left: Image area -->
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="8"/>
            <!-- 右侧：控制面板 | Right: Control panel -->
            <ColumnDefinition Width="200"/>
        </Grid.ColumnDefinitions>

        <!-- ========== 左侧主区域 ========== -->
        <Grid Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="8"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <!-- 图像显示区域 | Image display area -->
            <Border Grid.Row="0" BorderBrush="#E0E0E0" BorderThickness="1" Background="#1A1A1A">
                <Viewbox Stretch="Uniform">
                    <Image Source="{Binding ImageSource}"
                           RenderOptions.BitmapScalingMode="NearestNeighbor"
                           RenderOptions.EdgeMode="Aliased"
                           Stretch="Uniform"/>
                </Viewbox>
            </Border>

            <!-- 底部状态栏 | Bottom status bar -->
            <Grid Grid.Row="2">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="12"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <!-- 采集状态指示灯 | Acquisition status indicator -->
                <StackPanel Grid.Column="0" Orientation="Horizontal">
                    <Ellipse Width="10" Height="10" Margin="0 0 6 0" VerticalAlignment="Center">
                        <Ellipse.Style>
                            <Style TargetType="Ellipse">
                                <Setter Property="Fill" Value="#9E9E9E"/>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IsAcquiring}" Value="True">
                                        <Setter Property="Fill" Value="#4CAF50"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Ellipse.Style>
                    </Ellipse>
                    <TextBlock FontSize="12" Foreground="#616161" VerticalAlignment="Center">
                        <TextBlock.Style>
                            <Style TargetType="TextBlock">
                                <Setter Property="Text" Value="{loc:Localization Detector_StatusIdle}"/>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IsAcquiring}" Value="True">
                                        <Setter Property="Text" Value="{loc:Localization Detector_Status_Acquiring}"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </TextBlock.Style>
                    </TextBlock>
                </StackPanel>

                <!-- 操作状态消息 | Operation status message -->
                <TextBlock Grid.Column="2" Text="{Binding StatusMessage}"
                           FontSize="11" Foreground="#9E9E9E" VerticalAlignment="Center"
                           TextTrimming="CharacterEllipsis"/>

                <!-- 图像信息 | Image info -->
                <TextBlock Grid.Column="3" Text="{Binding ImageInfo}"
                           FontSize="12" Foreground="#616161" VerticalAlignment="Center"/>
            </Grid>
        </Grid>

        <!-- ========== 右侧控制面板 ========== -->
        <Grid Grid.Column="2">
            <Grid.RowDefinitions>
                <!-- 连接控制 | Connection control -->
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="12"/>
                <!-- 探测器信息 | Detector info -->
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="12"/>
                <!-- 采集控制 | Acquisition control -->
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <!-- 连接控制区 | Connection control section -->
            <Border Grid.Row="0" BorderBrush="#E0E0E0" BorderThickness="1" CornerRadius="4" Padding="10">
                <StackPanel>
                    <!-- 连接状态指示 | Connection status indicator -->
                    <StackPanel Orientation="Horizontal" Margin="0 0 0 8">
                        <Ellipse Width="10" Height="10" Margin="0 0 6 0" VerticalAlignment="Center"
                                 Fill="{Binding ConnectionStatusColor}"/>
                        <TextBlock FontSize="12" Foreground="#424242" VerticalAlignment="Center">
                            <TextBlock.Style>
                                <Style TargetType="TextBlock">
                                    <Setter Property="Text" Value="{loc:Localization Detector_Disconnected}"/>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsConnected}" Value="True">
                                            <Setter Property="Text" Value="{loc:Localization Detector_Connected}"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>
                    </StackPanel>

                    <!-- 连接/断开按钮 | Connect/Disconnect buttons -->
                    <telerik:RadButton Content="{loc:Localization Detector_ConnectButton}"
                                       Command="{Binding ConnectCommand}"
                                       Height="32" Margin="0 0 0 4" HorizontalAlignment="Stretch"
                                       telerik:StyleManager.Theme="Crystal">
                        <telerik:RadButton.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="White"/>
                                <GradientStop Color="#FF77E062" Offset="1"/>
                            </LinearGradientBrush>
                        </telerik:RadButton.Background>
                    </telerik:RadButton>

                    <telerik:RadButton Content="{loc:Localization Detector_DisconnectButton}"
                                       Command="{Binding DisconnectCommand}"
                                       Height="32" HorizontalAlignment="Stretch"
                                       telerik:StyleManager.Theme="Crystal">
                        <telerik:RadButton.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="White"/>
                                <GradientStop Color="#FFFFA1A1" Offset="1"/>
                            </LinearGradientBrush>
                        </telerik:RadButton.Background>
                    </telerik:RadButton>
                </StackPanel>
            </Border>
            <!-- 探测器信息区 | Detector info section -->
            <Border Grid.Row="2" BorderBrush="#E0E0E0" BorderThickness="1" CornerRadius="4" Padding="10">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="4"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="4"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="4"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="4"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <!-- 类型 | Type -->
                    <TextBlock Grid.Row="0" Grid.Column="0"
                               Text="{loc:Localization Detector_TypeLabel}"
                               FontSize="12" Foreground="#757575" VerticalAlignment="Center"/>
                    <TextBlock Grid.Row="0" Grid.Column="1"
                               Text="{Binding DetectorTypeText}"
                               FontSize="12" Foreground="#212121" VerticalAlignment="Center"
                               HorizontalAlignment="Right"/>

                    <!-- 型号 | Model -->
                    <TextBlock Grid.Row="2" Grid.Column="0"
                               Text="{loc:Localization Detector_ModelLabel}"
                               FontSize="12" Foreground="#757575" VerticalAlignment="Center"/>
                    <TextBlock Grid.Row="2" Grid.Column="1"
                               Text="{Binding DetectorModel}"
                               FontSize="12" Foreground="#212121" VerticalAlignment="Center"
                               HorizontalAlignment="Right" TextTrimming="CharacterEllipsis"/>

                    <!-- 分辨率 | Resolution -->
                    <TextBlock Grid.Row="4" Grid.Column="0"
                               Text="{loc:Localization Detector_ResolutionLabel}"
                               FontSize="12" Foreground="#757575" VerticalAlignment="Center"/>
                    <TextBlock Grid.Row="4" Grid.Column="1"
                               Text="{Binding DetectorResolution}"
                               FontSize="12" Foreground="#212121" VerticalAlignment="Center"
                               HorizontalAlignment="Right"/>

                    <!-- 像素尺寸 | Pixel size -->
                    <TextBlock Grid.Row="6" Grid.Column="0"
                               Text="{loc:Localization Detector_PixelSizeLabel}"
                               FontSize="12" Foreground="#757575" VerticalAlignment="Center"/>
                    <TextBlock Grid.Row="6" Grid.Column="1"
                               Text="{Binding DetectorPixelSize}"
                               FontSize="12" Foreground="#212121" VerticalAlignment="Center"
                               HorizontalAlignment="Right"/>

                    <!-- 状态 | Status -->
                    <TextBlock Grid.Row="8" Grid.Column="0"
                               Text="{loc:Localization Detector_StatusLabel}"
                               FontSize="12" Foreground="#757575" VerticalAlignment="Center"/>
                    <TextBlock Grid.Row="8" Grid.Column="1"
                               Text="{Binding DetectorStatusText}"
                               FontSize="12" Foreground="#212121" VerticalAlignment="Center"
                               HorizontalAlignment="Right"/>
                </Grid>
            </Border>

            <!-- 采集控制区 | Acquisition control section -->
            <Border Grid.Row="4" BorderBrush="#E0E0E0" BorderThickness="1" CornerRadius="4" Padding="10">
                <StackPanel>
                    <telerik:RadButton Content="{loc:Localization Detector_StartAcquisitionButton}"
                                       Command="{Binding StartAcquisitionCommand}"
                                       Height="32" Margin="0 0 0 4" HorizontalAlignment="Stretch"
                                       telerik:StyleManager.Theme="Crystal">
                        <telerik:RadButton.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="White"/>
                                <GradientStop Color="#FF77E062" Offset="1"/>
                            </LinearGradientBrush>
                        </telerik:RadButton.Background>
                    </telerik:RadButton>

                    <telerik:RadButton Content="{loc:Localization Detector_StopAcquisitionButton}"
                                       Command="{Binding StopAcquisitionCommand}"
                                       Height="32" Margin="0 0 0 4" HorizontalAlignment="Stretch"
                                       telerik:StyleManager.Theme="Crystal">
                        <telerik:RadButton.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="White"/>
                                <GradientStop Color="#FFFFA1A1" Offset="1"/>
                            </LinearGradientBrush>
                        </telerik:RadButton.Background>
                    </telerik:RadButton>

                    <telerik:RadButton Content="{loc:Localization Detector_SingleFrameButton}"
                                       Command="{Binding SingleFrameCommand}"
                                       Height="32" HorizontalAlignment="Stretch"
                                       telerik:StyleManager.Theme="Crystal">
                        <telerik:RadButton.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="White"/>
                                <GradientStop Color="#FF62B8E0" Offset="1"/>
                            </LinearGradientBrush>
                        </telerik:RadButton.Background>
                    </telerik:RadButton>

                    <Separator Margin="0,8,0,4"/>

                    <telerik:RadButton Content="{loc:Localization Detector_SaveImageButton}"
                                       Command="{Binding SaveImageCommand}"
                                       Height="32" Margin="0 4 0 0" HorizontalAlignment="Stretch"
                                       telerik:StyleManager.Theme="Crystal"/>
                </StackPanel>
            </Border>
        </Grid>
    </Grid>
</Window>