<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewmodels="clr-namespace:LSFE.MobApp.ViewModels.Authentication"
             x:Class="LSFE.MobApp.Pages.Authentication.LoginPage"
             x:DataType="viewmodels:LoginVM"
             Shell.NavBarIsVisible="False"
             Shell.FlyoutBehavior="Flyout"
             BackgroundColor="#E8F5F3">

    <ContentPage.Resources>
        <ResourceDictionary>
            <!-- Healthcare Theme Colors -->
            <Color x:Key="PrimaryColor">#1DB9A6</Color>
            <Color x:Key="PrimaryDarkColor">#17A593</Color>
            <Color x:Key="AccentLightColor">#B4E9E0</Color>
            <Color x:Key="AccentColor">#7DD4C5</Color>
            <Color x:Key="TextPrimaryColor">#2C3E50</Color>
            <Color x:Key="TextSecondaryColor">#7F8C9A</Color>
            <Color x:Key="BackgroundColor">#E8F5F3</Color>
            <Color x:Key="CardBackgroundColor">#FFFFFF</Color>
            <Color x:Key="InputBackgroundColor">#EFF3F8</Color>
            <Color x:Key="ErrorColor">#E74C3C</Color>

            <!-- Shadows -->
            <Shadow x:Key="CardShadow" 
                    Brush="#30000000"
                    Offset="0,8"
                    Radius="24"
                    Opacity="0.1"/>

            <Shadow x:Key="IconShadow" 
                    Brush="#401DB9A6"
                    Offset="0,4"
                    Radius="12"
                    Opacity="0.3"/>
        </ResourceDictionary>
    </ContentPage.Resources>

    <ScrollView>
        <Grid RowDefinitions="Auto,*,Auto"
      Padding="24"
      RowSpacing="0">

            <!-- Logo and Header Section -->
            <VerticalStackLayout Grid.Row="0" 
                                Spacing="16"
                                Margin="0,60,0,32">

                <!-- App Logo with Medical Icon -->
                <Border StrokeShape="RoundRectangle 24"
                        BackgroundColor="{StaticResource PrimaryColor}"
                        WidthRequest="96"
                        HeightRequest="96"
                        HorizontalOptions="Center"
                        Shadow="{StaticResource IconShadow}">
                    <Label Text="&#xf0f1;"
                           FontFamily="FontAwesome"
                           FontSize="48"
                           TextColor="White"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"/>
                </Border>

                <!-- App Title -->
                <Label Text="LLI - Sales Force"
                       FontSize="28"
                       FontAttributes="Bold"
                       TextColor="{StaticResource TextPrimaryColor}"
                       HorizontalOptions="Center"
                       Margin="0,8,0,0"/>

                <!-- Subtitle -->
                <Label Text="MD Call Management System"
                       FontSize="15"
                       TextColor="{StaticResource TextSecondaryColor}"
                       HorizontalOptions="Center"/>

                <!-- Feature Icons -->
                <Grid ColumnDefinitions="*,*,*"
                      ColumnSpacing="16"
                      Margin="0,24,0,0"
                      MaximumWidthRequest="400"
                      HorizontalOptions="Center">

                    <!-- Doctor Visits -->
                    <VerticalStackLayout Grid.Column="0" Spacing="8">
                        <Border StrokeShape="RoundRectangle 16"
                                BackgroundColor="{StaticResource AccentLightColor}"
                                WidthRequest="56"
                                HeightRequest="56"
                                HorizontalOptions="Center">
                            <Label Text="&#xf0f0;"
                                   FontFamily="FontAwesome"
                                   FontSize="24"
                                   TextColor="{StaticResource PrimaryColor}"
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center"/>
                        </Border>
                        <Label Text="Doctor Visits"
                               FontSize="12"
                               TextColor="{StaticResource TextSecondaryColor}"
                               HorizontalOptions="Center"
                               HorizontalTextAlignment="Center"/>
                    </VerticalStackLayout>

                    <!-- E-Signatures -->
                    <VerticalStackLayout Grid.Column="1" Spacing="8">
                        <Border StrokeShape="RoundRectangle 16"
                                BackgroundColor="#E3F2FD"
                                WidthRequest="56"
                                HeightRequest="56"
                                HorizontalOptions="Center">
                            <Label Text="&#xf3ed;"
                                   FontFamily="FontAwesome"
                                   FontSize="24"
                                   TextColor="#2196F3"
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center"/>
                        </Border>
                        <Label Text="E-Signatures"
                               FontSize="12"
                               TextColor="{StaticResource TextSecondaryColor}"
                               HorizontalOptions="Center"
                               HorizontalTextAlignment="Center"/>
                    </VerticalStackLayout>

                    <!-- Product Sales -->
                    <VerticalStackLayout Grid.Column="2" Spacing="8">
                        <Border StrokeShape="RoundRectangle 16"
                                BackgroundColor="#E8EAF6"
                                WidthRequest="56"
                                HeightRequest="56"
                                HorizontalOptions="Center">
                            <Label Text="&#xf0f1;"
                                   FontFamily="FontAwesome"
                                   FontSize="24"
                                   TextColor="#5C6BC0"
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center"/>
                        </Border>
                        <Label Text="Product Sales"
                               FontSize="12"
                               TextColor="{StaticResource TextSecondaryColor}"
                               HorizontalOptions="Center"
                               HorizontalTextAlignment="Center"/>
                    </VerticalStackLayout>
                </Grid>
            </VerticalStackLayout>

            <!-- Login Form Card -->
            <Border Grid.Row="1"
        StrokeShape="RoundRectangle 24"
        BackgroundColor="{StaticResource CardBackgroundColor}"
        Stroke="Transparent"
        Padding="24,28"
        Shadow="{StaticResource CardShadow}"
        VerticalOptions="Start"
        MaximumWidthRequest="500"
        HorizontalOptions="Fill">

                <VerticalStackLayout Spacing="24">

                    <!-- Username Field -->
                    <VerticalStackLayout Spacing="8">
                        <Label TextColor="{StaticResource TextPrimaryColor}">
                            <Label.FormattedText>
                                <FormattedString>
                                    <Span Text="&#xf007;  "
                                          FontFamily="FontAwesome"
                                          FontSize="14"
                                          TextColor="{StaticResource PrimaryColor}"/>
                                    <Span Text="UserName"
                                          FontSize="14"
                                          FontAttributes="Bold"/>
                                </FormattedString>
                            </Label.FormattedText>
                        </Label>

                        <Border StrokeShape="RoundRectangle 12"
                                Stroke="Transparent"
                                BackgroundColor="{StaticResource InputBackgroundColor}">
                            <Entry Text="{Binding UserName}"
                                   Placeholder="Enter username"
                                   PlaceholderColor="{StaticResource TextSecondaryColor}"
                                   TextColor="{StaticResource TextPrimaryColor}"
                                   BackgroundColor="Transparent"
                                   FontSize="15"
                                   HeightRequest="52"
                                   Margin="16,0"/>
                        </Border>
                    </VerticalStackLayout>

                    <!-- Password Field -->
                    <VerticalStackLayout Spacing="8">
                        <Label TextColor="{StaticResource TextPrimaryColor}">
                            <Label.FormattedText>
                                <FormattedString>
                                    <Span Text="&#xf023;  "
                                          FontFamily="FontAwesome"
                                          FontSize="14"
                                          TextColor="{StaticResource PrimaryColor}"/>
                                    <Span Text="Password"
                                          FontSize="14"
                                          FontAttributes="Bold"/>
                                </FormattedString>
                            </Label.FormattedText>
                        </Label>

                        <Border StrokeShape="RoundRectangle 12"
                                Stroke="Transparent"
                                BackgroundColor="{StaticResource InputBackgroundColor}">
                            <Grid ColumnDefinitions="*,Auto">
                                <Entry Grid.Column="0"
                                       Text="{Binding Password}"
                                       Placeholder="Enter password"
                                       PlaceholderColor="{StaticResource TextSecondaryColor}"
                                       TextColor="{StaticResource TextPrimaryColor}"
                                       IsPassword="{Binding IsPasswordHidden}"
                                       BackgroundColor="Transparent"
                                       FontSize="15"
                                       HeightRequest="52"
                                       Margin="16,0"/>
                                <ImageButton Grid.Column="1"
                                            Command="{Binding TogglePasswordVisibilityCommand}"
                                            BackgroundColor="Transparent"
                                            WidthRequest="52"
                                            HeightRequest="52"
                                            Padding="14">
                                    <ImageButton.Source>
                                        <FontImageSource FontFamily="FontAwesome"
                                                       Glyph="{Binding PasswordIcon}"
                                                       Color="{StaticResource TextSecondaryColor}"
                                                       Size="18"/>
                                    </ImageButton.Source>
                                </ImageButton>
                            </Grid>
                        </Border>
                    </VerticalStackLayout>

                    <!-- Error Message -->
                    <Border IsVisible="{Binding HasError}"
                            StrokeShape="RoundRectangle 8"
                            BackgroundColor="#FFEBEE"
                            Stroke="#FFCDD2"
                            Padding="12"
                            Margin="0,-16,0,0">
                        <Label Text="{Binding ErrorMessage}"
                               TextColor="{StaticResource ErrorColor}"
                               FontSize="13"/>
                    </Border>

                    <!-- Remember Me & Forgot Password -->
                    <Grid ColumnDefinitions="Auto,*,Auto" 
                          ColumnSpacing="8"
                          Margin="0,-8,0,0">
                        <CheckBox Grid.Column="0"
                                  IsChecked="{Binding RememberMe}"
                                  Color="{StaticResource PrimaryColor}"
                                  VerticalOptions="Center"/>
                        <Label Grid.Column="1"
                               Text="Remember me"
                               TextColor="{StaticResource TextSecondaryColor}"
                               FontSize="14"
                               VerticalOptions="Center">
                            <Label.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding ToggleRememberMeCommand}"/>
                            </Label.GestureRecognizers>
                        </Label>
                        <Label Grid.Column="2"
                               Text="Forgot Password?"
                               TextColor="{StaticResource PrimaryColor}"
                               FontSize="14"
                               FontAttributes="Bold"
                               VerticalOptions="Center">
                            <Label.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding ForgotPasswordCommand}"/>
                            </Label.GestureRecognizers>
                        </Label>
                    </Grid>

                    <!-- Sign In Button -->
                    <Button Text="Sign In"
                            Command="{Binding LoginCommand}"
                            BackgroundColor="{StaticResource PrimaryColor}"
                            TextColor="White"
                            FontSize="16"
                            FontAttributes="Bold"
                            CornerRadius="12"
                            HeightRequest="56"
                            Margin="0,8,0,0">
                        <Button.Shadow>
                            <Shadow Brush="{StaticResource PrimaryColor}"
                                    Offset="0,4"
                                    Radius="16"
                                    Opacity="0.35"/>
                        </Button.Shadow>
                    </Button>

                    <!-- Loading Indicator -->
                    <ActivityIndicator IsRunning="{Binding IsLoading}"
                                      IsVisible="{Binding IsLoading}"
                                      Color="{StaticResource PrimaryColor}"
                                      HeightRequest="40"
                                      Margin="0,-8,0,0"/>

                </VerticalStackLayout>
            </Border>

            <!-- Footer -->
            <VerticalStackLayout Grid.Row="2" 
                                Spacing="8"
                                Margin="0,32,0,24">
                <Label Text="Secure medical representative portal for healthcare professionals"
                       FontSize="13"
                       TextColor="{StaticResource TextSecondaryColor}"
                       HorizontalOptions="Center"
                       HorizontalTextAlignment="Center"/>

                <Grid ColumnDefinitions="Auto,Auto,Auto"
                      ColumnSpacing="12"
                      HorizontalOptions="Center"
                      Margin="0,4,0,0">
                    <Label Grid.Column="0"
                           Text="© 2025 MedRep Portal"
                           FontSize="12"
                           TextColor="{StaticResource TextSecondaryColor}"/>
                    <Label Grid.Column="1"
                           Text="•"
                           FontSize="12"
                           TextColor="{StaticResource TextSecondaryColor}"/>
                    <Label Grid.Column="2"
                           Text="Healthcare Solutions"
                           FontSize="12"
                           TextColor="{StaticResource TextSecondaryColor}"/>
                </Grid>
            </VerticalStackLayout>

        </Grid>
    </ScrollView>

</ContentPage>