<UserControl x:Class="AppTunnel.Views.HistoryTabView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ScrollViewer VerticalScrollBarVisibility="Auto" Padding="0,6,0,0">
        <StackPanel HorizontalAlignment="Stretch" Margin="10,0">

        <!-- History Header -->
        <Border Style="{StaticResource CardPanel}" BorderBrush="#22E8803A">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <StackPanel Grid.Row="0" Grid.Column="0">
                    <TextBlock Text="📜 تاریخچه اتصالات" FontSize="14" FontWeight="SemiBold"
                               Foreground="{StaticResource TextPrimaryBrush}"/>
                    <TextBlock Text="سوابق اتصال و مصرف تونل"
                               Foreground="{StaticResource TextSecondaryBrush}"
                               FontSize="10" Margin="0,2,0,0"/>
                </StackPanel>

                <Button Grid.Row="0" Grid.Column="1" Style="{StaticResource DangerButton}"
                        Content="پاک کردن"
                        Command="{Binding ClearHistoryCommand}"
                        FontSize="10" Padding="10,5"/>

                <!-- Total History Data Summary -->
                <Border Grid.Row="1" Grid.ColumnSpan="2"
                        Background="#15E07820" BorderBrush="#22E8803A" BorderThickness="1" CornerRadius="9"
                        Padding="12,8" Margin="0,10,0,0">
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"
                                FlowDirection="LeftToRight">
                        <TextBlock Text="مجموع مصرف تونل: " FontSize="11"
                                   Foreground="{StaticResource TextSecondaryBrush}"
                                   FlowDirection="RightToLeft"/>
                        <TextBlock Text="{Binding TotalHistoryData}" FontSize="13"
                                   FontWeight="Bold"
                                   Foreground="{StaticResource WarningBrush}"/>
                    </StackPanel>
                </Border>
            </Grid>
        </Border>

        <!-- History List -->
        <Border Style="{StaticResource CardPanel}" BorderBrush="#18FFFFFF">
            <StackPanel>
                <ItemsControl ItemsSource="{Binding ConnectionHistory}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border Background="#12FFFFFF" BorderBrush="#10FFFFFF" BorderThickness="1" CornerRadius="9"
                                    Padding="12,9" Margin="0,3">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>

                                    <StackPanel Grid.Column="0">
                                        <!-- Profile name and server -->
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{Binding ProfileName}"
                                                       FontSize="13" FontWeight="SemiBold"
                                                       Foreground="{StaticResource TextPrimaryBrush}"/>
                                            <TextBlock Text=" → " 
                                                       Foreground="{StaticResource TextSecondaryBrush}"
                                                       FontSize="11" VerticalAlignment="Center"/>
                                            <TextBlock Text="{Binding ServerAddress}"
                                                       FontSize="11"
                                                       Foreground="{StaticResource AccentBrush}"
                                                       FlowDirection="LeftToRight"/>
                                        </StackPanel>

                                        <!-- Date and time -->
                                        <StackPanel Orientation="Horizontal" Margin="0,4,0,0"
                                                    FlowDirection="LeftToRight">
                                            <TextBlock Text="🕐 " FontSize="11"/>
                                            <TextBlock Text="{Binding ConnectedAt, StringFormat={}{0:yyyy/MM/dd HH:mm}}"
                                                       Foreground="{StaticResource TextSecondaryBrush}"
                                                       FontSize="11"/>
                                        </StackPanel>

                                        <!-- Duration and data -->
                                        <StackPanel Orientation="Horizontal" Margin="0,3,0,0"
                                                    FlowDirection="LeftToRight">
                                            <TextBlock Text="⏱ " FontSize="11"/>
                                            <TextBlock Text="{Binding DurationText}"
                                                       Foreground="{StaticResource SuccessBrush}"
                                                       FontSize="11"/>
                                            <TextBlock Text="  •  📊 تونل " FontSize="11"
                                                       Foreground="{StaticResource TextSecondaryBrush}"/>
                                            <TextBlock Text="{Binding TotalDataText}"
                                                       Foreground="{StaticResource WarningBrush}"
                                                       FontSize="11"/>
                                        </StackPanel>

                                        <!-- Sent/Received breakdown -->
                                        <StackPanel Orientation="Horizontal" Margin="0,3,0,0"
                                                    FlowDirection="LeftToRight">
                                            <TextBlock Text="↑ " Foreground="#E07820" FontSize="10"/>
                                            <TextBlock Text="{Binding SentText}"
                                                       Foreground="#E07820" FontSize="10"/>
                                            <TextBlock Text="  ↓ " Foreground="#4CAF50" FontSize="10"/>
                                            <TextBlock Text="{Binding ReceivedText}"
                                                       Foreground="#4CAF50" FontSize="10"/>
                                        </StackPanel>
                                    </StackPanel>
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>

                <!-- Empty state -->
                <TextBlock Text="هنوز اتصالی ثبت نشده است."
                           Foreground="{StaticResource TextSecondaryBrush}"
                           FontSize="12" HorizontalAlignment="Center"
                           Margin="0,22">
                    <TextBlock.Style>
                        <Style TargetType="TextBlock">
                            <Setter Property="Visibility" Value="Collapsed"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding ConnectionHistory.Count}" Value="0">
                                    <Setter Property="Visibility" Value="Visible"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                </TextBlock>
            </StackPanel>
        </Border>
    </StackPanel>
    </ScrollViewer>
</UserControl>
