<ui:Page xmlns:props="clr-namespace:Ink_Canvas.Properties" x:Class="Ink_Canvas.Windows.SettingsViews.Pages.StoragePage"
      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"
      xmlns:local="clr-namespace:Ink_Canvas.Windows.SettingsViews.Pages"
      xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
      xmlns:ikw="http://schemas.inkore.net/lib/ui/wpf"
      xmlns:sys="clr-namespace:System;assembly=mscorlib"
      mc:Ignorable="d"
      Title="{x:Static props:StorageStrings.Storage_Title}">

    <ScrollViewer PanningMode="VerticalFirst">
        <Grid Margin="59,0,59,0">
            <FrameworkElement.Resources>
                <sys:Double x:Key="SettingsCardSpacing">4</sys:Double>
                <Style x:Key="SettingsSectionHeaderTextBlockStyle"
                    BasedOn="{StaticResource BodyStrongTextBlockStyle}"
                    TargetType="TextBlock">
                    <Style.Setters>
                        <Setter Property="Margin" Value="1,30,0,6" />
                    </Style.Setters>
                </Style>
            </FrameworkElement.Resources>

            <ikw:SimpleStackPanel MaxWidth="1000"
                HorizontalAlignment="Stretch"
                Spacing="{StaticResource SettingsCardSpacing}">

                <TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}"
                           Text="{x:Static props:StorageStrings.Storage_Title}" />

                <!-- 概览卡片 -->
                <Border Background="{DynamicResource {x:Static ui:ThemeKeys.LayerFillColorDefaultBrushKey}}"
                        BorderBrush="{DynamicResource {x:Static ui:ThemeKeys.CardStrokeColorDefaultBrushKey}}"
                        CornerRadius="4" BorderThickness="1" Padding="20,16">
                    <ikw:SimpleStackPanel Spacing="12">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <ikw:SimpleStackPanel Orientation="Vertical" Spacing="2">
                                <TextBlock Text="{x:Static props:StorageStrings.Storage_TotalUsage}" FontSize="13"
                                           Foreground="{DynamicResource TextFillColorSecondaryBrush}"/>
                                <TextBlock x:Name="TotalSizeTextBlock" Text="—"
                                           FontSize="28" FontWeight="SemiBold"/>
                            </ikw:SimpleStackPanel>
                            <ikw:SimpleStackPanel Grid.Column="1" Orientation="Vertical"
                                                  Spacing="2" HorizontalAlignment="Right">
                                <TextBlock Text="{x:Static props:StorageStrings.Storage_DiskPercent}" FontSize="13"
                                           Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                                           HorizontalAlignment="Right"/>
                                <TextBlock x:Name="DiskPercentTextBlock" Text="—"
                                           FontSize="20" FontWeight="SemiBold"
                                           HorizontalAlignment="Right"/>
                            </ikw:SimpleStackPanel>
                        </Grid>

                        <!-- 横向占比柱状图 -->
                        <Border x:Name="UsageBarBorder" Height="14" CornerRadius="2"
                                Background="{DynamicResource ControlStrokeColorDefaultBrush}"
                                ClipToBounds="True">
                            <Border.OpacityMask>
                                <VisualBrush>
                                    <VisualBrush.Visual>
                                        <Border Background="Black" CornerRadius="2"
                                                Width="{Binding ActualWidth, ElementName=UsageBarBorder}"
                                                Height="{Binding ActualHeight, ElementName=UsageBarBorder}"/>
                                    </VisualBrush.Visual>
                                </VisualBrush>
                            </Border.OpacityMask>
                            <Grid x:Name="UsageStackedBar">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="BarCoreCol" Width="0*"/>
                                    <ColumnDefinition x:Name="BarLogsCol" Width="0*"/>
                                    <ColumnDefinition x:Name="BarInkCol" Width="0*"/>
                                    <ColumnDefinition x:Name="BarBackupsCol" Width="0*"/>
                                    <ColumnDefinition x:Name="BarCustomCol" Width="0*"/>
                                    <ColumnDefinition x:Name="BarPluginsCol" Width="0*"/>
                                    <ColumnDefinition x:Name="BarUpdateCol" Width="0*"/>
                                    <ColumnDefinition x:Name="BarThemeCol" Width="0*"/>
                                    <ColumnDefinition x:Name="BarOtherCol" Width="0*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Rectangle Grid.Column="0" Fill="#3B82F6"/>
                                <Rectangle Grid.Column="1" Fill="#10B981"/>
                                <Rectangle Grid.Column="2" Fill="#F59E0B"/>
                                <Rectangle Grid.Column="3" Fill="#8B5CF6"/>
                                <Rectangle Grid.Column="4" Fill="#EC4899"/>
                                <Rectangle Grid.Column="5" Fill="#06B6D4"/>
                                <Rectangle Grid.Column="6" Fill="#EF4444"/>
                                <Rectangle Grid.Column="7" Fill="#A855F7"/>
                                <Rectangle Grid.Column="8" Fill="#6B7280"/>
                            </Grid>
                        </Border>

                        <!-- 图例 -->
                        <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="14">
                            <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="6">
                                <Border Width="10" Height="10" CornerRadius="2" Background="#3B82F6"/>
                                <TextBlock Text="{x:Static props:StorageStrings.Storage_Legend_Core}" FontSize="12"/>
                            </ikw:SimpleStackPanel>
                            <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="6">
                                <Border Width="10" Height="10" CornerRadius="2" Background="#10B981"/>
                                <TextBlock Text="{x:Static props:StorageStrings.Storage_Logs_Header}" FontSize="12"/>
                            </ikw:SimpleStackPanel>
                            <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="6">
                                <Border Width="10" Height="10" CornerRadius="2" Background="#F59E0B"/>
                                <TextBlock Text="{x:Static props:StorageStrings.Storage_Legend_Ink}" FontSize="12"/>
                            </ikw:SimpleStackPanel>
                            <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="6">
                                <Border Width="10" Height="10" CornerRadius="2" Background="#8B5CF6"/>
                                <TextBlock Text="{x:Static props:StorageStrings.Storage_Legend_Backups}" FontSize="12"/>
                            </ikw:SimpleStackPanel>
                            <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="6">
                                <Border Width="10" Height="10" CornerRadius="2" Background="#EC4899"/>
                                <TextBlock Text="{x:Static props:StorageStrings.Storage_Legend_Custom}" FontSize="12"/>
                            </ikw:SimpleStackPanel>
                            <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="6">
                                <Border Width="10" Height="10" CornerRadius="2" Background="#06B6D4"/>
                                <TextBlock Text="{x:Static props:StorageStrings.Storage_Plugins_Header}" FontSize="12"/>
                            </ikw:SimpleStackPanel>
                            <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="6">
                                <Border Width="10" Height="10" CornerRadius="2" Background="#EF4444"/>
                                <TextBlock Text="{x:Static props:StorageStrings.Storage_Legend_Update}" FontSize="12"/>
                            </ikw:SimpleStackPanel>
                            <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="6">
                                <Border Width="10" Height="10" CornerRadius="2" Background="#A855F7"/>
                                <TextBlock Text="{x:Static props:StorageStrings.Storage_Legend_Theme}" FontSize="12"/>
                            </ikw:SimpleStackPanel>
                            <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="6">
                                <Border Width="10" Height="10" CornerRadius="2" Background="#6B7280"/>
                                <TextBlock Text="{x:Static props:StorageStrings.Storage_Legend_Other}" FontSize="12"/>
                            </ikw:SimpleStackPanel>
                        </ikw:SimpleStackPanel>
                    </ikw:SimpleStackPanel>
                </Border>

                <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="8" Margin="0,8,0,0">
                    <Button x:Name="BtnRefresh" Content="{x:Static props:StorageStrings.Storage_Refresh}" Click="BtnRefresh_Click"/>
                    <Button x:Name="BtnOpenAppFolder" Content="{x:Static props:StorageStrings.Storage_OpenAppFolder}" Click="BtnOpenAppFolder_Click"/>
                </ikw:SimpleStackPanel>

                <TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}"
                           Text="{x:Static props:StorageStrings.Storage_CategoryDetails}" />

                <!-- 核心文件 -->
                <ui:SettingsExpander x:Name="CoreExpander"
                                     Header="{x:Static props:StorageStrings.Storage_Legend_Core}"
                                     Description="{x:Static props:StorageStrings.Storage_Core_Desc}"
                                     IsExpanded="True">
                    <ui:SettingsExpander.HeaderIcon>
                        <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Settings}"/>
                    </ui:SettingsExpander.HeaderIcon>
                    <TextBlock x:Name="CoreSizeText" Text="—" FontWeight="SemiBold" VerticalAlignment="Center"/>
                    <ui:SettingsExpander.Items>
                        <ui:SettingsCard Description="{x:Static props:StorageStrings.Storage_Core_NotCleanable}"/>
                    </ui:SettingsExpander.Items>
                </ui:SettingsExpander>

                <!-- 日志 -->
                <ui:SettingsCard x:Name="LogsExpander"
                                 Header="{x:Static props:StorageStrings.Storage_Logs_Header}"
                                 Description="{x:Static props:StorageStrings.Storage_Logs_Desc}">
                    <ui:SettingsCard.HeaderIcon>
                        <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.OpenFile}"/>
                    </ui:SettingsCard.HeaderIcon>
                    <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="12" VerticalAlignment="Center">
                        <TextBlock x:Name="LogsSizeText" Text="—" FontWeight="SemiBold" VerticalAlignment="Center"/>
                        <Button x:Name="BtnCleanLogs" Content="{x:Static props:StorageStrings.Storage_Clean}" Click="BtnCleanLogs_Click"/>
                    </ikw:SimpleStackPanel>
                </ui:SettingsCard>

                <!-- 墨迹 -->
                <ui:SettingsCard x:Name="InkExpander"
                                 Header="{x:Static props:StorageStrings.Storage_Legend_Ink}"
                                 Description="{x:Static props:StorageStrings.Storage_Ink_Desc}">
                    <ui:SettingsCard.HeaderIcon>
                        <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Edit}"/>
                    </ui:SettingsCard.HeaderIcon>
                    <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="12" VerticalAlignment="Center">
                        <TextBlock x:Name="InkSizeText" Text="—" FontWeight="SemiBold" VerticalAlignment="Center"/>
                        <Button x:Name="BtnCleanInk" Content="{x:Static props:StorageStrings.Storage_Clean}" Click="BtnCleanInk_Click"/>
                    </ikw:SimpleStackPanel>
                </ui:SettingsCard>

                <!-- 备份 -->
                <ui:SettingsCard x:Name="BackupsExpander"
                                 Header="{x:Static props:StorageStrings.Storage_Legend_Backups}"
                                 Description="{x:Static props:StorageStrings.Storage_Backups_Desc}">
                    <ui:SettingsCard.HeaderIcon>
                        <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Cloud}"/>
                    </ui:SettingsCard.HeaderIcon>
                    <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="12" VerticalAlignment="Center">
                        <TextBlock x:Name="BackupsSizeText" Text="—" FontWeight="SemiBold" VerticalAlignment="Center"/>
                        <Button x:Name="BtnCleanBackups" Content="{x:Static props:StorageStrings.Storage_Clean}" Click="BtnCleanBackups_Click"/>
                    </ikw:SimpleStackPanel>
                </ui:SettingsCard>

                <!-- 自定义文件 -->
                <ui:SettingsExpander x:Name="CustomExpander"
                                     Header="{x:Static props:StorageStrings.Storage_Legend_Custom}"
                                     Description="{x:Static props:StorageStrings.Storage_Custom_Desc}"
                                     IsExpanded="True">
                    <ui:SettingsExpander.HeaderIcon>
                        <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Photo}"/>
                    </ui:SettingsExpander.HeaderIcon>
                    <TextBlock x:Name="CustomSizeText" Text="—" FontWeight="SemiBold" VerticalAlignment="Center"/>
                    <ui:SettingsExpander.Items>
                        <ui:SettingsCard Description="{x:Static props:StorageStrings.Storage_Custom_Hint}"/>
                    </ui:SettingsExpander.Items>
                </ui:SettingsExpander>

                <!-- 插件 -->
                <ui:SettingsExpander x:Name="PluginsExpander"
                                     Header="{x:Static props:StorageStrings.Storage_Legend_Plugins}"
                                     Description="{x:Static props:StorageStrings.Storage_Plugins_Desc}"
                                     IsExpanded="True">
                    <ui:SettingsExpander.HeaderIcon>
                        <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Puzzle}"/>
                    </ui:SettingsExpander.HeaderIcon>
                    <TextBlock x:Name="PluginsSizeText" Text="—" FontWeight="SemiBold" VerticalAlignment="Center"/>
                    <ui:SettingsExpander.Items>
                        <ui:SettingsCard Description="{x:Static props:StorageStrings.Storage_Plugins_Hint}"/>
                    </ui:SettingsExpander.Items>
                </ui:SettingsExpander>

                <!-- 自动更新 -->
                <ui:SettingsCard x:Name="UpdateExpander"
                                 Header="{x:Static props:StorageStrings.Storage_Legend_Update}"
                                 Description="{x:Static props:StorageStrings.Storage_Update_Desc}">
                    <ui:SettingsCard.HeaderIcon>
                        <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Sync}"/>
                    </ui:SettingsCard.HeaderIcon>
                    <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="12" VerticalAlignment="Center">
                        <TextBlock x:Name="UpdateSizeText" Text="—" FontWeight="SemiBold" VerticalAlignment="Center"/>
                        <Button x:Name="BtnCleanUpdate" Content="{x:Static props:StorageStrings.Storage_Clean}" Click="BtnCleanUpdate_Click"/>
                    </ikw:SimpleStackPanel>
                </ui:SettingsCard>

                <!-- 主题 -->
                <ui:SettingsExpander x:Name="ThemeExpander"
                                     Header="{x:Static props:StorageStrings.Storage_Legend_Theme}"
                                     Description="{x:Static props:StorageStrings.Storage_Theme_Desc}"
                                     IsExpanded="True">
                    <ui:SettingsExpander.HeaderIcon>
                        <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Color}"/>
                    </ui:SettingsExpander.HeaderIcon>
                    <TextBlock x:Name="ThemeSizeText" Text="—" FontWeight="SemiBold" VerticalAlignment="Center"/>
                    <ui:SettingsExpander.Items>
                        <ui:SettingsCard Description="{x:Static props:StorageStrings.Storage_Theme_Hint}">
                            <Button x:Name="BtnCleanTheme" Content="{x:Static props:StorageStrings.Storage_Clean}" Click="BtnCleanTheme_Click"/>
                        </ui:SettingsCard>
                    </ui:SettingsExpander.Items>
                </ui:SettingsExpander>

                <!-- 其他 -->
                <ui:SettingsCard x:Name="OtherExpander"
                                 Header="{x:Static props:StorageStrings.Storage_Legend_Other}"
                                 Description="{x:Static props:StorageStrings.Storage_Other_Desc}">
                    <ui:SettingsCard.HeaderIcon>
                        <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.More}"/>
                    </ui:SettingsCard.HeaderIcon>
                    <TextBlock x:Name="OtherSizeText" Text="—" FontWeight="SemiBold" VerticalAlignment="Center"/>
                </ui:SettingsCard>

                <Rectangle Height="48" />

            </ikw:SimpleStackPanel>
        </Grid>
    </ScrollViewer>
</ui:Page>
