<UserControl x:Class="Ink_Canvas.Controls.CanvasMediaControl"
             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"
             x:Name="Root"
             mc:Ignorable="d"
             d:DesignWidth="480"
             d:DesignHeight="320"
             Focusable="False"
             SnapsToDevicePixels="True">
    <Border Background="#F71C1C1C"
            BorderBrush="#66000000"
            BorderThickness="1"
            CornerRadius="8">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition x:Name="PreviewRow" Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Grid x:Name="PreviewHost" ClipToBounds="True">
                <Border x:Name="AudioPlaceholder"
                        Background="#FF1C1C1C"
                        Visibility="Collapsed">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>

                        <!-- 音频图标和标题 - 固定在顶部 -->
                        <StackPanel Grid.Row="0"
                                    HorizontalAlignment="Center"
                                    Margin="0,12,0,4">
                            <TextBlock Text="♪"
                                       FontSize="36"
                                       HorizontalAlignment="Center"
                                       Foreground="#FFF5F5F5" />
                            <TextBlock x:Name="AudioTitleTextBlock"
                                       Margin="12,4,12,0"
                                       Foreground="#FFF5F5F5"
                                       FontSize="14"
                                       TextAlignment="Center"
                                       TextTrimming="CharacterEllipsis"
                                       MaxWidth="320" />
                        </StackPanel>

                        <!-- 单行歌词显示 - 紧贴底部控件区 -->
                        <StackPanel x:Name="LyricsPanel"
                                    Grid.Row="1"
                                    Visibility="Collapsed"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Bottom"
                                    Margin="8,4,8,6">
                            <TextBlock x:Name="LyricTextBlock"
                                       FontSize="15"
                                       Foreground="#FFF5F5F5"
                                       HorizontalAlignment="Center"
                                       TextAlignment="Center"
                                       TextTrimming="CharacterEllipsis"
                                       MaxWidth="460"
                                       ToolTip="LRC 歌词"/>
                            <!-- Karaoke triple: sung prefix (full white) + currently-singing char
                                 (in-word sweep: a horizontal LinearGradientBrush that walks
                                 from pending on the left to sung on the right of the glyph)
                                 + pending suffix (dimmer white). Each is a plain TextBlock
                                 containing a single Run for the active glyph. -->
                            <Grid x:Name="LyricPerCharHost"
                                  HorizontalAlignment="Center"
                                  MaxWidth="460"
                                  Visibility="Collapsed">
                                <StackPanel x:Name="LyricPerCharPanel"
                                            Orientation="Horizontal"
                                            HorizontalAlignment="Center"
                                            VerticalAlignment="Center">
                                    <TextBlock x:Name="LyricSungPrefix"
                                               FontSize="15"
                                               FontWeight="SemiBold"
                                               Foreground="#FFFFFFFF"/>
                                    <TextBlock x:Name="LyricActiveChar"
                                               FontSize="15"
                                               FontWeight="SemiBold"/>
                                    <TextBlock x:Name="LyricPendingSuffix"
                                               FontSize="15"
                                               FontWeight="SemiBold"
                                               Foreground="#66FFFFFF"/>
                                </StackPanel>
                            </Grid>
                            <TextBlock x:Name="LyricTranslationBlock"
                                       FontSize="12"
                                       Foreground="#CCFFFFFF"
                                       HorizontalAlignment="Center"
                                       TextTrimming="CharacterEllipsis"
                                       MaxWidth="460"
                                       Visibility="Collapsed"/>
                        </StackPanel>
                    </Grid>
                </Border>

                <MediaElement x:Name="Player"
                              LoadedBehavior="Manual"
                              UnloadedBehavior="Manual"
                              Stretch="Uniform"
                              MediaOpened="Player_MediaOpened"
                              MediaEnded="Player_MediaEnded" />
            </Grid>

            <Grid Grid.Row="1" Margin="12,10,12,12">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Slider x:Name="ProgressSlider"
                        Minimum="0"
                        Maximum="1"
                        Value="0"
                        PreviewMouseLeftButtonDown="ProgressSlider_PreviewMouseLeftButtonDown"
                        PreviewMouseLeftButtonUp="ProgressSlider_PreviewMouseLeftButtonUp"
                        LostMouseCapture="ProgressSlider_LostMouseCapture"
                        ValueChanged="ProgressSlider_ValueChanged" />

                <Grid Grid.Row="1" Margin="0,8,0,0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <Button x:Name="PlayPauseButton"
                            Grid.Column="0"
                            MinWidth="52"
                            Padding="10,4"
                            Foreground="White"
                            Click="PlayPauseButton_Click">
                        <Button.Template>
                            <ControlTemplate TargetType="Button">
                                <Border x:Name="Bd"
                                        Background="Transparent"
                                        CornerRadius="4"
                                        Padding="{TemplateBinding Padding}">
                                    <ContentPresenter HorizontalAlignment="Center"
                                                      VerticalAlignment="Center"/>
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter TargetName="Bd" Property="Background" Value="#22FFFFFF"/>
                                    </Trigger>
                                    <Trigger Property="IsPressed" Value="True">
                                        <Setter TargetName="Bd" Property="Background" Value="#44FFFFFF"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Button.Template>
                        <Path x:Name="PlayPauseIconPath"
                              Width="18"
                              Height="18"
                              Stretch="Uniform"
                              Fill="{Binding Foreground, RelativeSource={RelativeSource AncestorType=Button}}" />
                    </Button>

                    <TextBlock x:Name="TimeTextBlock"
                               Grid.Column="1"
                               Margin="10,0,0,0"
                               VerticalAlignment="Center"
                               Foreground="#FFF5F5F5"
                               Text="00:00 / 00:00" />

                    <TextBlock x:Name="SpeedLabelTextBlock"
                               Grid.Column="3"
                               Margin="12,0,6,0"
                               VerticalAlignment="Center"
                               Foreground="#FFF5F5F5" />

                    <ComboBox x:Name="SpeedComboBox"
                              Grid.Column="4"
                              Width="76"
                              SelectedIndex="1"
                              SelectionChanged="SpeedComboBox_SelectionChanged">
                        <ComboBoxItem Content="0.5x" Tag="0.5" />
                        <ComboBoxItem Content="1.0x" Tag="1.0" />
                        <ComboBoxItem Content="1.5x" Tag="1.5" />
                        <ComboBoxItem Content="2.0x" Tag="2.0" />
                    </ComboBox>

                    <TextBlock x:Name="VolumePercentText"
                               Grid.Column="5"
                               Margin="12,0,6,0"
                               VerticalAlignment="Center"
                               Foreground="#FFF5F5F5"
                               Text="60%" />

                    <Slider x:Name="VolumeSlider"
                            Grid.Column="6"
                            Width="90"
                            Minimum="0"
                            Maximum="1"
                            Value="0.6"
                            AutoToolTipPlacement="None"
                            ValueChanged="VolumeSlider_ValueChanged" />
                </Grid>
            </Grid>
        </Grid>
    </Border>
</UserControl>
