<UserControl x:Class="NavisworksTransport.UI.WPF.Views.MediaControlBar"
             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"
             mc:Ignorable="d" 
             d:DesignHeight="60" d:DesignWidth="600">
    
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/TransportPlugin;component/src/UI/WPF/Resources/MediaControlIcons.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>

    <!-- 媒体控制条主容器 -->
    <Border Background="#FF2D2D30" 
            BorderBrush="#FF3F3F46" 
            BorderThickness="1" 
            CornerRadius="4"
            MouseEnter="OnMouseEnter"
            GotFocus="OnGotFocus">
        <Grid Margin="10,8">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            
            <!-- 播放控制按钮行 -->
            <StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,0,0,8">
                
                <!-- 快退10帧 << -->
                <Button x:Name="FastBackwardButton"
                        Command="{Binding FastBackwardCommand}"
                        Style="{StaticResource MediaControlButtonStyle}"
                        ToolTip="快退10帧 (Shift+←)">
                    <Path Data="{StaticResource FastBackwardIcon}"
                          Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"
                          Width="14" Height="14"
                          Stretch="Uniform"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"/>
                </Button>
                
                <!-- 上一帧 <| -->
                <Button x:Name="StepBackwardButton"
                        Command="{Binding StepBackwardCommand}"
                        Style="{StaticResource MediaControlButtonStyle}"
                        ToolTip="上一帧 (←)">
                    <Path Data="{StaticResource StepBackwardIcon}"
                          Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"
                          Width="12" Height="12"
                          Stretch="Uniform"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"/>
                </Button>
                
                <!-- 反向播放 ◀ -->
                <Button x:Name="ReversePlayButton"
                        Command="{Binding PlayReverseCommand}"
                        ToolTip="反向播放">
                    <Button.Style>
                        <Style BasedOn="{StaticResource MediaControlButtonStyle}" TargetType="Button">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsPlayingReverse}" Value="True">
                                    <Setter Property="Background" Value="#FF4472C4"/>
                                    <Setter Property="BorderBrush" Value="#FF5A82D4"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                    <Path Data="{StaticResource ReversePlayIcon}"
                          Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"
                          Width="12" Height="12"
                          Stretch="Uniform"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"
                          RenderTransformOrigin="0.5,0.5">
                        <Path.RenderTransform>
                            <ScaleTransform ScaleX="-1" ScaleY="1"/>
                        </Path.RenderTransform>
                    </Path>
                </Button>
                
                <!-- 暂停 || (居中位置) -->
                <Button x:Name="PauseButton"
                        Command="{Binding PauseAnimationCommand}"
                        IsEnabled="{Binding CanPauseAnimation}"
                        Style="{StaticResource MediaControlButtonStyle}"
                        ToolTip="暂停 (Space)">
                    <Path Data="{StaticResource PauseIcon}"
                          Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"
                          Width="12" Height="12"
                          Stretch="Uniform"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"/>
                </Button>
                
                <!-- 正向播放 ▶ -->
                <Button x:Name="PlayButton"
                        Command="{Binding PlayForwardCommand}"
                        ToolTip="播放">
                    <Button.Style>
                        <Style BasedOn="{StaticResource MediaControlButtonStyle}" TargetType="Button">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsPlayingForward}" Value="True">
                                    <Setter Property="Background" Value="#FF4472C4"/>
                                    <Setter Property="BorderBrush" Value="#FF5A82D4"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                    <Path Data="{StaticResource PlayIcon}"
                          Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"
                          Width="12" Height="12"
                          Stretch="Uniform"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"/>
                </Button>
                
                <!-- 下一帧 |> -->
                <Button x:Name="StepForwardButton"
                        Command="{Binding StepForwardCommand}"
                        Style="{StaticResource MediaControlButtonStyle}"
                        ToolTip="下一帧 (→)">
                    <Path Data="{StaticResource StepForwardIcon}"
                          Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"
                          Width="12" Height="12"
                          Stretch="Uniform"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"/>
                </Button>
                
                <!-- 快进10帧 >> -->
                <Button x:Name="FastForwardButton"
                        Command="{Binding FastForwardCommand}"
                        Style="{StaticResource MediaControlButtonStyle}"
                        ToolTip="快进10帧 (Shift+→)">
                    <Path Data="{StaticResource FastForwardIcon}"
                          Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"
                          Width="14" Height="14"
                          Stretch="Uniform"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"/>
                </Button>
                
                <!-- 停止 ■ (最右侧) -->
                <Button x:Name="StopButton"
                        Command="{Binding StopAnimationCommand}"
                        IsEnabled="{Binding CanStopAnimation}"
                        Style="{StaticResource StopButtonStyle}"
                        ToolTip="停止"
                        Margin="12,2,2,2">
                    <Path Data="{StaticResource StopIcon}"
                          Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"
                          Width="12" Height="12"
                          Stretch="Uniform"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"/>
                </Button>
                
            </StackPanel>
            
            <!-- 时间轴和时间显示行 -->
            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <!-- 左侧信息区 -->
                <StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,0,10,0">
                    <TextBlock Text="{Binding CurrentTimeDisplay}"
                               Style="{StaticResource TimeDisplayStyle}"
                               MinWidth="40"
                               TextAlignment="Right"/>
                </StackPanel>

                <!-- 中央时间轴区（居中） -->
                <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Center">
                    <Slider x:Name="TimelineSlider"
                            Value="{Binding TimelinePosition, Mode=TwoWay}"
                            Minimum="0"
                            Maximum="{Binding TimelineDuration}"
                            Style="{StaticResource TimelineSliderStyle}"
                            Width="200"
                            TickFrequency="1"
                            IsSnapToTickEnabled="True"
                            ToolTip="点击或拖动跳转到指定位置"/>
                </StackPanel>

                <!-- 右侧信息区 -->
                <StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Left" Margin="5,0,0,0">
                    <TextBlock Text="{Binding TotalTimeDisplay}"
                               Style="{StaticResource TimeDisplayStyle}"
                               MinWidth="40"/>
                    <TextBlock Text="{Binding FrameInfoDisplay}"
                               Style="{StaticResource TimeDisplayStyle}"
                               Foreground="#FF999999"
                               FontSize="10"
                               MinWidth="40"
                               TextAlignment="Left"
                               Margin="5,0,5,0"/>
                </StackPanel>

            </Grid>
        </Grid>
    </Border>
</UserControl>
