<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:c="using:Client.Avalonia.Converters"
             x:Class="Client.Avalonia.Views.ConnectionView">
  <UserControl.Resources>
    <c:BoolToColorConverter x:Key="BoolToColor" />
  </UserControl.Resources>
  <ScrollViewer>
    <StackPanel Margin="12" Spacing="12">
      <!-- 服务端配置卡片 -->
      <Border BorderBrush="{DynamicResource SystemControlForegroundBaseLowBrush}"
              BorderThickness="1" CornerRadius="6" Padding="14">
        <StackPanel Spacing="10">
          <!-- 卡片标题 -->
          <Grid ColumnDefinitions="6,*">
            <Border Grid.Column="0" Background="{DynamicResource SystemAccentColor}" CornerRadius="3" />
            <Label Grid.Column="1" FontWeight="Bold" FontSize="14" Margin="8,0,0,0"
                   VerticalAlignment="Center">服务端配置</Label>
          </Grid>

          <StackPanel Spacing="8">
            <Grid ColumnDefinitions="110,*">
              <Label Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center"
                     Margin="0,0,8,0">服务端地址:</Label>
              <TextBox Grid.Column="1" Text="{Binding ServerAddress}" Watermark="127.0.0.1" />
            </Grid>
            <Grid ColumnDefinitions="110,*">
              <Label Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center"
                     Margin="0,0,8,0">端口:</Label>
              <TextBox Grid.Column="1" Text="{Binding ServerPort}" Watermark="808" />
            </Grid>
            <Grid ColumnDefinitions="110,*">
              <Label Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center"
                     Margin="0,0,8,0">终端手机号:</Label>
              <TextBox Grid.Column="1" Text="{Binding Mobile}" Watermark="013800123456" />
            </Grid>
          </StackPanel>
        </StackPanel>
      </Border>

      <!-- 操作区 -->
      <Border BorderBrush="{DynamicResource SystemControlForegroundBaseLowBrush}"
              BorderThickness="1" CornerRadius="6" Padding="14">
        <StackPanel Spacing="8">
          <Grid ColumnDefinitions="6,*">
            <Border Grid.Column="0" Background="{DynamicResource SystemAccentColor}" CornerRadius="3" />
            <Label Grid.Column="1" FontWeight="Bold" FontSize="14" Margin="8,0,0,0"
                   VerticalAlignment="Center">操作</Label>
          </Grid>

          <StackPanel Orientation="Horizontal" Spacing="10">
            <Button Content="连接" Command="{Binding ConnectCommand}"
                    Background="{DynamicResource SystemAccentColor}" Foreground="White"
                    Padding="16,6" />
            <Button Content="断开" Command="{Binding DisconnectCommand}" Padding="16,6" />
            <Ellipse Width="14" Height="14"
                     Fill="{Binding IsConnected, Converter={StaticResource BoolToColor}}"
                     VerticalAlignment="Center" />
            <Label Content="{Binding StatusText}" VerticalAlignment="Center" FontSize="13" />
          </StackPanel>
        </StackPanel>
      </Border>

      <!-- 统计信息卡片 -->
      <Border BorderBrush="{DynamicResource SystemControlForegroundBaseLowBrush}"
              BorderThickness="1" CornerRadius="6" Padding="14">
        <StackPanel Spacing="10">
          <Grid ColumnDefinitions="6,*">
            <Border Grid.Column="0" Background="{DynamicResource SystemAccentColor}" CornerRadius="3" />
            <Label Grid.Column="1" FontWeight="Bold" FontSize="14" Margin="8,0,0,0"
                   VerticalAlignment="Center">统计信息</Label>
          </Grid>

          <StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Center">
            <Border BorderBrush="{DynamicResource SystemControlForegroundBaseLowBrush}"
                    BorderThickness="1" CornerRadius="6" Padding="14,10" MinWidth="100">
              <StackPanel HorizontalAlignment="Center" Spacing="4">
                <Label FontSize="22" FontWeight="Bold" HorizontalAlignment="Center"
                       Content="{Binding SentCount}" />
                <Label FontSize="11" Foreground="Gray" HorizontalAlignment="Center">已发送</Label>
              </StackPanel>
            </Border>
            <Border BorderBrush="{DynamicResource SystemControlForegroundBaseLowBrush}"
                    BorderThickness="1" CornerRadius="6" Padding="14,10" MinWidth="100">
              <StackPanel HorizontalAlignment="Center" Spacing="4">
                <Label FontSize="22" FontWeight="Bold" HorizontalAlignment="Center"
                       Content="{Binding ReceivedCount}" />
                <Label FontSize="11" Foreground="Gray" HorizontalAlignment="Center">已接收</Label>
              </StackPanel>
            </Border>
            <Border BorderBrush="{DynamicResource SystemControlForegroundBaseLowBrush}"
                    BorderThickness="1" CornerRadius="6" Padding="14,10" MinWidth="100">
              <StackPanel HorizontalAlignment="Center" Spacing="4">
                <Label FontSize="22" FontWeight="Bold" HorizontalAlignment="Center"
                       Content="{Binding ReconnectCount}" />
                <Label FontSize="11" Foreground="Gray" HorizontalAlignment="Center">重连次数</Label>
              </StackPanel>
            </Border>
          </StackPanel>
        </StackPanel>
      </Border>
    </StackPanel>
  </ScrollViewer>
</UserControl>