<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="Marechai.App.Presentation.Views.SettingsPage"
      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:vm="using:Marechai.App.Presentation.ViewModels"
      xmlns:utu="using:Uno.Toolkit.UI"
      mc:Ignorable="d"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid utu:SafeArea.Insets="VisibleBounds" Margin="16">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Header -->
        <TextBlock Grid.Row="0" 
                   Text="{Binding Title}"
                   Style="{ThemeResource TitleTextBlockStyle}"
                   Margin="0,0,0,24"/>

        <!-- Settings Content -->
        <ScrollViewer Grid.Row="1"
                      VerticalScrollBarVisibility="Auto">
            <StackPanel Spacing="24" MaxWidth="600" HorizontalAlignment="Left">
                
                <!-- Theme Section -->
                <StackPanel Spacing="8">
                    <TextBlock x:Uid="SettingsPage_ThemeSection_Header"
                               Text="Appearance"
                               Style="{ThemeResource SubtitleTextBlockStyle}"/>
                    
                    <TextBlock x:Uid="SettingsPage_ThemeSection_Description"
                               Text="Select your preferred color theme"
                               Style="{ThemeResource BodyTextBlockStyle}"
                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                               TextWrapping="Wrap"
                               Margin="0,0,0,8"/>

                    <!-- Brightness Theme Selector (Light/Dark/System) -->
                    <ComboBox x:Name="BrightnessThemeSelector"
                              x:Uid="SettingsPage_BrightnessThemeSelector"
                              Header="Brightness"
                              ItemsSource="{Binding AvailableThemes}"
                              SelectedItem="{Binding SelectedTheme, Mode=TwoWay}"
                              HorizontalAlignment="Stretch"
                              MinWidth="250"
                              Margin="0,0,0,12">
                        <ComboBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding DisplayName}" />
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                    </ComboBox>

                    <!-- Color Theme Selector (Default/Windows 3.11) -->
                    <ComboBox x:Name="ColorThemeSelector"
                              x:Uid="SettingsPage_ColorThemeSelector"
                              Header="Color Theme"
                              ItemsSource="{Binding AvailableColorThemes}"
                              SelectedItem="{Binding SelectedColorTheme, Mode=TwoWay}"
                              HorizontalAlignment="Stretch"
                              MinWidth="250">
                        <ComboBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding DisplayName}" />
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                    </ComboBox>
                </StackPanel>

                <!-- Placeholder for future settings sections -->
                <StackPanel Spacing="8">
                    <TextBlock x:Uid="SettingsPage_AboutSection_Header"
                               Text="About"
                               Style="{ThemeResource SubtitleTextBlockStyle}"/>
                    
                    <TextBlock x:Uid="SettingsPage_Version"
                               Text="Version 1.0"
                               Style="{ThemeResource BodyTextBlockStyle}"
                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
                </StackPanel>

            </StackPanel>
        </ScrollViewer>
    </Grid>
</Page>
