<?xml version="1.0" encoding="utf-8" ?>
<!--import pt Components namesapace ca sa putem refolosi componente (this some DRY shit)
    asta e syntaxa: xmlns:controls="clr-namespace:TechTitans.Views.Components"-->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:custom="clr-namespace:TechTitans.Views.Components"
             x:Class="TechTitans.Views.AnalystPage"
             Title="AnalystPage">
    <VerticalStackLayout Margin="15,0">
        <StackLayout Orientation="Horizontal">
            <StackLayout Padding="10">
                <Picker Title="Select Month:" x:Name="MonthPicker" SelectedIndex="0" >
                    <Picker.ItemsSource>
                        <x:Array Type="{x:Type x:Int32}">
                            <x:Int32>1</x:Int32>
                            <x:Int32>2</x:Int32>
                            <x:Int32>3</x:Int32>
                            <x:Int32>4</x:Int32>
                            <x:Int32>5</x:Int32>
                            <x:Int32>6</x:Int32>
                            <x:Int32>7</x:Int32>
                            <x:Int32>8</x:Int32>
                            <x:Int32>9</x:Int32>
                            <x:Int32>10</x:Int32>
                            <x:Int32>11</x:Int32>
                            <x:Int32>12</x:Int32>
                        </x:Array>
                    </Picker.ItemsSource>
                </Picker>
            </StackLayout>

            <StackLayout Padding="10">
                <Picker Title="Select Year:" x:Name="YearPicker" SelectedIndex="0" >
                    <Picker.ItemsSource>
                        <x:Array Type="{x:Type x:Int32}">
                            <x:Int32>2020</x:Int32>
                            <x:Int32>2021</x:Int32>
                            <x:Int32>2022</x:Int32>
                            <x:Int32>2023</x:Int32>
                            <x:Int32>2024</x:Int32>
                            <x:Int32>2025</x:Int32>
                            <x:Int32>2026</x:Int32>
                            <x:Int32>2027</x:Int32>
                            <x:Int32>2028</x:Int32>
                            <x:Int32>2029</x:Int32>
                            <x:Int32>2030</x:Int32>
                        </x:Array>
                    </Picker.ItemsSource>
                </Picker>
            </StackLayout>
            <Button Text="Show Top 3s" Clicked="OnShowTop3Clicked" HeightRequest="40" HorizontalOptions="CenterAndExpand"/>
        </StackLayout>
        <BoxView Color="Gray" HeightRequest="2" HorizontalOptions="FillAndExpand" Margin="0, 5" />
        <StackLayout Orientation="Vertical" Spacing="20">
            <!-- First row -->
            <StackLayout x:Name="Top3Genres">
                <Label Text="Top 3 Genres" FontSize="30"/>
                <HorizontalStackLayout Spacing="20">
                    <VerticalStackLayout>
                        <Label Text="Genre" FontSize="20"/>
                        <BoxView Color="Gray" HeightRequest="2" HorizontalOptions="FillAndExpand" Margin="0, 5" />
                        <Label x:Name="Genre1Name" HorizontalOptions="Center" />
                        <Label x:Name="Genre2Name" HorizontalOptions="Center" />
                        <Label x:Name="Genre3Name" HorizontalOptions="Center" />
                    </VerticalStackLayout>
                    <VerticalStackLayout>
                        <Label Text="Total Listens" FontSize="20"/>
                        <BoxView Color="Gray" HeightRequest="2" HorizontalOptions="FillAndExpand" Margin="0, 5" />
                        <Label x:Name="Genre1Minutes" HorizontalOptions="Center"/>
                        <Label x:Name="Genre2Minutes" HorizontalOptions="Center"/>
                        <Label x:Name="Genre3Minutes" HorizontalOptions="Center"/>
                    </VerticalStackLayout>
                    <VerticalStackLayout>
                        <Label Text="Percentage" FontSize="20"/>
                        <BoxView Color="Gray" HeightRequest="2" HorizontalOptions="FillAndExpand" Margin="0, 5" />
                        <Label x:Name="Percentage1" HorizontalOptions="Center"/>
                        <Label x:Name="Percentage2" HorizontalOptions="Center"/>
                        <Label x:Name="Percentage3" HorizontalOptions="Center"/>
                    </VerticalStackLayout>
                </HorizontalStackLayout>
            </StackLayout>
            <BoxView Color="Gray" HeightRequest="2" HorizontalOptions="FillAndExpand" Margin="0, 5" />
            <StackLayout>
                <Label Text="Top 3 Subgenres" FontSize="30"/>
                <HorizontalStackLayout Spacing="20">
                    <VerticalStackLayout>
                        <Label Text="Genre" FontSize="20"/>
                        <BoxView Color="Gray" HeightRequest="2" HorizontalOptions="FillAndExpand" Margin="0, 5" />
                        <Label x:Name="Subgenre1Name" />
                        <Label x:Name="Subgenre2Name" />
                        <Label x:Name="Subgenre3Name" />
                    </VerticalStackLayout>
                    <VerticalStackLayout>
                        <Label Text="Total Listens" FontSize="20"/>
                        <BoxView Color="Gray" HeightRequest="2" HorizontalOptions="FillAndExpand" Margin="0, 5" />
                        <Label x:Name="Subgenre1Minutes" />
                        <Label x:Name="Subgenre2Minutes" />
                        <Label x:Name="Subgenre3Minutes" />
                    </VerticalStackLayout>
                    <VerticalStackLayout>
                        <Label Text="Percentage" FontSize="20"/>
                        <BoxView Color="Gray" HeightRequest="2" HorizontalOptions="FillAndExpand" Margin="0, 5" />
                        <Label x:Name="Subgenre1Percentage"/>
                        <Label x:Name="Subgenre2Percentage"/>
                        <Label x:Name="Subgenre3Percentage"/>
                    </VerticalStackLayout>
                </HorizontalStackLayout>
            </StackLayout>
        </StackLayout>
    </VerticalStackLayout>
    
</ContentPage>