<UserControl x:Class="Ink_Canvas.Windows.PPTTimeCapsule"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:Converter="clr-namespace:Ink_Canvas.Converter"
             mc:Ignorable="d"
             d:DesignHeight="60" d:DesignWidth="200">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="DigitResources.xaml" />
            </ResourceDictionary.MergedDictionaries>
            
            <!-- 小时滚动动画：新时间从上方滚入 -->
            <Storyboard x:Key="HourScrollAnimation" x:Name="HourScrollStoryboard">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HourContentTransform"
                                               Storyboard.TargetProperty="(TranslateTransform.Y)">
                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="-40">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <ExponentialEase EasingMode="EaseOut"/>
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                    <EasingDoubleKeyFrame KeyTime="00:00:00.25" Value="0">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <ExponentialEase EasingMode="EaseOut"/>
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HourPanel"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <ExponentialEase EasingMode="EaseOut"/>
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                    <EasingDoubleKeyFrame KeyTime="00:00:00.25" Value="1">
                    </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            
            <!-- 分钟滚动动画：新时间从上方滚入 -->
            <Storyboard x:Key="MinuteScrollAnimation" x:Name="MinuteScrollStoryboard">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MinuteContentTransform"
                                               Storyboard.TargetProperty="(TranslateTransform.Y)">
                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="-40">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <ExponentialEase EasingMode="EaseOut"/>
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                    <EasingDoubleKeyFrame KeyTime="00:00:00.25" Value="0">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <ExponentialEase EasingMode="EaseOut"/>
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MinutePanel"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <ExponentialEase EasingMode="EaseOut"/>
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                    <EasingDoubleKeyFrame KeyTime="00:00:00.25" Value="1">
                    </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            
            <!-- 胶囊伸长动画 -->
            <Storyboard x:Key="CapsuleExpandAnimation" x:Name="CapsuleExpandStoryboard">
                <DoubleAnimation Storyboard.TargetName="MainCapsule"
                                 Storyboard.TargetProperty="(FrameworkElement.Width)"
                                 Duration="0:0:0.6">
                    <DoubleAnimation.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>
            
            <!-- 胶囊缩短动画 -->
            <Storyboard x:Key="CapsuleShrinkAnimation" x:Name="CapsuleShrinkStoryboard">
                <DoubleAnimation Storyboard.TargetName="MainCapsule"
                                 Storyboard.TargetProperty="(FrameworkElement.Width)"
                                 Duration="0:0:0.8">
                    <DoubleAnimation.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.2"/>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>
            
            <!-- 冒号闪动动画：1秒完成一次完整闪动 -->
            <Storyboard x:Key="ColonBlinkAnimation" x:Name="ColonBlinkStoryboard" RepeatBehavior="Forever">
                <DoubleAnimation Storyboard.TargetName="ColonDisplay"
                                 Storyboard.TargetProperty="(UIElement.Opacity)"
                                 From="1.0"
                                 To="0.3"
                                 Duration="0:0:0.5"
                                 AutoReverse="True">
                    <DoubleAnimation.EasingFunction>
                        <SineEase EasingMode="EaseInOut"/>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>
        </ResourceDictionary>
    </UserControl.Resources>
    
    <Grid>
        <!-- 主胶囊容器 -->
        <Border x:Name="MainCapsule"
                CornerRadius="8"
                Padding="16,8"
                Width="120"
                Cursor="Hand"
                MouseLeftButtonDown="MainCapsule_MouseLeftButtonDown"
                MouseMove="MainCapsule_MouseMove"
                MouseLeftButtonUp="MainCapsule_MouseLeftButtonUp">
            <Border.RenderTransform>
                <TranslateTransform x:Name="CapsuleDragTransform"/>
            </Border.RenderTransform>
            <Border.Background>
                <SolidColorBrush x:Name="CapsuleBackgroundBrush" Color="#CCFFFFFF"/>
            </Border.Background>
            <Border.Effect>
                <DropShadowEffect BlurRadius="8" ShadowDepth="0" Opacity="0.2" Color="Black"/>
            </Border.Effect>
            
            <StackPanel x:Name="ContentPanel" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                <!-- 时间显示区域 -->
                <StackPanel x:Name="TimeDisplayPanel" Orientation="Horizontal" VerticalAlignment="Center">
                    <!-- 小时部分 -->
                    <Border x:Name="HourContainer" ClipToBounds="True" Height="18" VerticalAlignment="Center">
                        <StackPanel x:Name="HourPanel" Orientation="Horizontal" VerticalAlignment="Center">
                            <StackPanel.RenderTransform>
                                <TranslateTransform x:Name="HourContentTransform"/>
                            </StackPanel.RenderTransform>
                            <Path x:Name="Hour1Display" 
                                  Data="{StaticResource Digit0}" 
                                  Fill="#FF000000" 
                                  Width="14" Height="18" 
                                  HorizontalAlignment="Center" 
                                  VerticalAlignment="Center"
                                  Stretch="Uniform" 
                                  Margin="0,0,2,0"/>
                            <Path x:Name="Hour2Display" 
                                  Data="{StaticResource Digit0}" 
                                  Fill="#FF000000" 
                                  Width="14" Height="18" 
                                  HorizontalAlignment="Center" 
                                  VerticalAlignment="Center"
                                  Stretch="Uniform" 
                                  Margin="0,0,2,0"/>
                        </StackPanel>
                    </Border>
                    
                    <!-- 冒号 -->
                    <TextBlock x:Name="ColonDisplay" Text=":" FontSize="16" FontWeight="Bold" 
                               Foreground="#FF000000" VerticalAlignment="Center" Margin="0,0,2,0"
                               LineHeight="16" LineStackingStrategy="BlockLineHeight"/>
                    
                    <!-- 分钟部分 -->
                    <Border x:Name="MinuteContainer" ClipToBounds="True" Height="18" VerticalAlignment="Center">
                        <StackPanel x:Name="MinutePanel" Orientation="Horizontal" VerticalAlignment="Center">
                            <StackPanel.RenderTransform>
                                <TranslateTransform x:Name="MinuteContentTransform"/>
                            </StackPanel.RenderTransform>
                            <Path x:Name="Minute1Display" 
                                  Data="{StaticResource Digit0}" 
                                  Fill="#FF000000" 
                                  Width="14" Height="18" 
                                  HorizontalAlignment="Center" 
                                  VerticalAlignment="Center"
                                  Stretch="Uniform" 
                                  Margin="0,0,2,0"/>
                            <Path x:Name="Minute2Display" 
                                  Data="{StaticResource Digit0}" 
                                  Fill="#FF000000" 
                                  Width="14" Height="18" 
                                  HorizontalAlignment="Center" 
                                  VerticalAlignment="Center"
                                  Stretch="Uniform" 
                                  Margin="0,0,0,0"/>
                        </StackPanel>
                    </Border>
                </StackPanel>
                
                <!-- 倒计时显示区域（动态显示） -->
                <StackPanel x:Name="CountdownPanel" Orientation="Horizontal" VerticalAlignment="Center" 
                           Visibility="Collapsed" Margin="8,0,0,0">
                    <TextBlock x:Name="CountdownText" Text="00:00" FontSize="20" FontWeight="Bold" 
                               Foreground="#80000000" VerticalAlignment="Center"/>
                </StackPanel>
            </StackPanel>
        </Border>
    </Grid>
</UserControl>

