<?xml version="1.0"
      encoding="utf-8"?>

<Page x:Class="Marechai.App.Presentation.Views.ComputersPage"
      x:Name="PageRoot"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:utu="using:Uno.Toolkit.UI"
      NavigationCacheMode="Required"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

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

        <!-- Header -->
        <utu:NavigationBar Grid.Row="0"
                           Content="{Binding Path=Title}">
            <utu:NavigationBar.MainCommand>
                <AppBarButton Icon="Back"
                              Label="Back"
                              Command="{Binding GoBackCommand}"
                              AutomationProperties.Name="Go back" />
            </utu:NavigationBar.MainCommand>
        </utu:NavigationBar>

        <!-- Content -->
        <ScrollViewer Grid.Row="1">
            <StackPanel Padding="16"
                        Spacing="24">

                <!-- Computer Count Display -->
                <StackPanel HorizontalAlignment="Center"
                            Spacing="8">
                    <TextBlock Text="{Binding ComputerCountText}"
                               TextAlignment="Center"
                               FontSize="18"
                               FontWeight="SemiBold"
                               Foreground="{ThemeResource SystemBaseMediumColor}" />
                    <TextBlock Text="{Binding ComputerCount}"
                               TextAlignment="Center"
                               FontSize="48"
                               FontWeight="Bold"
                               Foreground="{ThemeResource SystemAccentColor}" />
                </StackPanel>

                <!-- Loading State -->
                <StackPanel Visibility="{Binding IsLoading}"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                            Padding="32"
                            Spacing="16">
                    <ProgressRing IsActive="True"
                                  IsIndeterminate="True"
                                  Height="48"
                                  Width="48" />
                    <TextBlock Text="Loading..."
                               TextAlignment="Center"
                               FontSize="14" />
                </StackPanel>

                <!-- Error State -->
                <StackPanel Visibility="{Binding HasError}"
                            Padding="16"
                            Background="{ThemeResource SystemErrorBackgroundColor}"
                            CornerRadius="8"
                            Spacing="8">
                    <TextBlock Text="Error"
                               FontWeight="Bold"
                               Foreground="{ThemeResource SystemErrorTextForegroundColor}" />
                    <TextBlock Text="{Binding ErrorMessage}"
                               Foreground="{ThemeResource SystemErrorTextForegroundColor}"
                               TextWrapping="Wrap" />
                </StackPanel>

                <!-- Main Content (visible when loaded and no error) -->
                <StackPanel Visibility="{Binding IsDataLoaded}"
                            Spacing="24">

                    <!-- Letters Grid Section -->
                    <StackPanel Spacing="12">
                        <TextBlock Text="Browse by Letter"
                                   FontSize="16"
                                   FontWeight="SemiBold"
                                   Foreground="{ThemeResource SystemBaseMediumColor}" />
                        <ItemsRepeater ItemsSource="{Binding LettersList}"
                                       Layout="{StaticResource LettersGridLayout}">
                            <ItemsRepeater.ItemTemplate>
                                <DataTemplate>
                                    <Button Content="{Binding}"
                                            Command="{Binding DataContext.NavigateByLetterCommand, ElementName=PageRoot}"
                                            CommandParameter="{Binding}"
                                            Style="{StaticResource KeyboardKeyButtonStyle}" />
                                </DataTemplate>
                            </ItemsRepeater.ItemTemplate>
                        </ItemsRepeater>
                    </StackPanel>

                    <!-- Years Grid Section -->
                    <StackPanel Spacing="12">
                        <TextBlock Text="{Binding YearsGridTitle}"
                                   FontSize="16"
                                   FontWeight="SemiBold"
                                   Foreground="{ThemeResource SystemBaseMediumColor}" />
                        <ItemsRepeater ItemsSource="{Binding YearsList}"
                                       Layout="{StaticResource YearsGridLayout}">
                            <ItemsRepeater.ItemTemplate>
                                <DataTemplate>
                                    <Button Content="{Binding}"
                                            Command="{Binding DataContext.NavigateByYearCommand, ElementName=PageRoot}"
                                            CommandParameter="{Binding}"
                                            Style="{StaticResource KeyboardKeyButtonStyle}" />
                                </DataTemplate>
                            </ItemsRepeater.ItemTemplate>
                        </ItemsRepeater>
                    </StackPanel>

                    <!-- All Computers and Search Section -->
                    <StackPanel Spacing="12">
                        <Button Content="All Computers"
                                Padding="16,12"
                                HorizontalAlignment="Stretch"
                                FontSize="16"
                                FontWeight="SemiBold"
                                Command="{Binding NavigateAllComputersCommand}"
                                Style="{StaticResource AccentButtonStyle}" />

                        <!-- Search Field (placeholder for future implementation) -->
                        <TextBox PlaceholderText="Search computers..."
                                 Padding="12"
                                 IsEnabled="False"
                                 Opacity="0.5" />
                    </StackPanel>

                </StackPanel>

            </StackPanel>
        </ScrollViewer>

    </Grid>

    <Page.Resources>
        <!-- Keyboard Key Button Style (revised: more padding, simplified borders to avoid clipping, darker scheme) -->
        <Style x:Key="KeyboardKeyButtonStyle"
               TargetType="Button">
            <!-- Base appearance -->
            <Setter Property="Foreground"
                    Value="#1A1A1A" />
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0"
                                         EndPoint="0,1">
                        <GradientStop Color="#D6D6D6"
                                      Offset="0" />
                        <GradientStop Color="#C2C2C2"
                                      Offset="0.55" />
                        <GradientStop Color="#B0B0B0"
                                      Offset="1" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush"
                    Value="#7A7A7A" />
            <Setter Property="BorderThickness"
                    Value="1" />
            <Setter Property="CornerRadius"
                    Value="6" />
            <Setter Property="Padding"
                    Value="14,12" /> <!-- Increased vertical padding to prevent cutoff -->
            <Setter Property="Margin"
                    Value="4" />
            <Setter Property="FontFamily"
                    Value="Segoe UI" />
            <Setter Property="FontWeight"
                    Value="SemiBold" />
            <Setter Property="FontSize"
                    Value="15" />
            <Setter Property="HorizontalAlignment"
                    Value="Stretch" />
            <Setter Property="VerticalAlignment"
                    Value="Stretch" />
            <Setter Property="HorizontalContentAlignment"
                    Value="Center" />
            <Setter Property="VerticalContentAlignment"
                    Value="Center" />
            <Setter Property="MinWidth"
                    Value="52" />
            <Setter Property="MinHeight"
                    Value="52" /> <!-- Larger min height avoids clipping ascenders/descenders -->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <!-- Shadow (simple) -->
                            <Border x:Name="Shadow"
                                    CornerRadius="6"
                                    Background="#33000000"
                                    Margin="2,4,4,2" />
                            <!-- Key surface -->
                            <Border x:Name="KeyBorder"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    CornerRadius="{TemplateBinding CornerRadius}">
                                <!-- Inner highlight & content -->
                                <Grid>
                                    <Border CornerRadius="{TemplateBinding CornerRadius}"
                                            BorderBrush="#60FFFFFF"
                                            BorderThickness="1,1,0,0" />
                                    <Border CornerRadius="{TemplateBinding CornerRadius}"
                                            BorderBrush="#30000000"
                                            BorderThickness="0,0,1,1" />
                                    <ContentPresenter x:Name="ContentPresenter"
                                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                      Margin="0"
                                                      TextWrapping="NoWrap" />
                                </Grid>
                            </Border>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Target="KeyBorder.Background">
                                                <Setter.Value>
                                                    <LinearGradientBrush StartPoint="0,0"
                                                                         EndPoint="0,1">
                                                        <GradientStop Color="#E0E0E0"
                                                                      Offset="0" />
                                                        <GradientStop Color="#CFCFCF"
                                                                      Offset="0.55" />
                                                        <GradientStop Color="#BDBDBD"
                                                                      Offset="1" />
                                                    </LinearGradientBrush>
                                                </Setter.Value>
                                            </Setter>
                                            <Setter Target="KeyBorder.BorderBrush"
                                                    Value="#5F5F5F" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <VisualState.Setters>
                                            <Setter Target="KeyBorder.Background">
                                                <Setter.Value>
                                                    <LinearGradientBrush StartPoint="0,0"
                                                                         EndPoint="0,1">
                                                        <GradientStop Color="#9C9C9C"
                                                                      Offset="0" />
                                                        <GradientStop Color="#A8A8A8"
                                                                      Offset="0.55" />
                                                        <GradientStop Color="#B4B4B4"
                                                                      Offset="1" />
                                                    </LinearGradientBrush>
                                                </Setter.Value>
                                            </Setter>
                                            <Setter Target="KeyBorder.BorderBrush"
                                                    Value="#4A4A4A" />
                                            <Setter Target="KeyBorder.RenderTransform">
                                                <Setter.Value>
                                                    <TranslateTransform Y="2" />
                                                </Setter.Value>
                                            </Setter>
                                            <Setter Target="Shadow.Opacity"
                                                    Value="0.15" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <VisualState.Setters>
                                            <Setter Target="KeyBorder.Opacity"
                                                    Value="0.45" />
                                            <Setter Target="ContentPresenter.Foreground"
                                                    Value="#777777" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <VisualState.Setters>
                                            <Setter Target="KeyBorder.BorderBrush"
                                                    Value="#3A7AFE" />
                                            <Setter Target="KeyBorder.BorderThickness"
                                                    Value="2" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Responsive Grid Layouts -->
        <UniformGridLayout x:Key="LettersGridLayout"
                           ItemsStretch="Fill"
                           MinItemWidth="44"
                           MinItemHeight="44"
                           MaximumRowsOrColumns="13" />

        <UniformGridLayout x:Key="YearsGridLayout"
                           ItemsStretch="Fill"
                           MinItemWidth="54"
                           MinItemHeight="44"
                           MaximumRowsOrColumns="10" />

    </Page.Resources>

</Page>