<?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.ForgotPasswordPage"
             x:DataType="viewmodels:ForgotPasswordVM"
             Shell.NavBarIsVisible="False"
             BackgroundColor="#E8F5F3">

    <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="PrimaryColor">#1DB9A6</Color>
            <Color x:Key="TextPrimaryColor">#2C3E50</Color>
            <Color x:Key="TextSecondaryColor">#7F8C9A</Color>
            <Color x:Key="CardBackgroundColor">#FFFFFF</Color>
            <Color x:Key="InputBackgroundColor">#EFF3F8</Color>
            <Color x:Key="ErrorColor">#E74C3C</Color>
            <Color x:Key="SuccessColor">#27AE60</Color>

            <Shadow x:Key="CardShadow" 
                    Brush="#30000000"
                    Offset="0,8"
                    Radius="24"
                    Opacity="0.1"/>
        </ResourceDictionary>
    </ContentPage.Resources>

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

            <!-- Header -->
            <VerticalStackLayout Grid.Row="0" 
                                Spacing="16"
                                Margin="0,60,0,40">

                <!-- Back Button -->
                <ImageButton Command="{Binding BackCommand}"
                            HorizontalOptions="Start"
                            BackgroundColor="Transparent"
                            WidthRequest="44"
                            HeightRequest="44"
                            Margin="-12,0,0,0">
                    <ImageButton.Source>
                        <FontImageSource FontFamily="FontAwesome"
                                       Glyph="&#xf060;"
                                       Color="{StaticResource TextPrimaryColor}"
                                       Size="20"/>
                    </ImageButton.Source>
                </ImageButton>

                <!-- Icon -->
                <Border StrokeShape="RoundRectangle 24"
                        BackgroundColor="#FFF3E0"
                        WidthRequest="96"
                        HeightRequest="96"
                        HorizontalOptions="Center">
                    <Label Text="&#xf084;"
                           FontFamily="FontAwesome"
                           FontSize="48"
                           TextColor="#FF9800"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"/>
                </Border>

                <!-- Title -->
                <Label Text="Forgot Password?"
                       FontSize="28"
                       FontAttributes="Bold"
                       TextColor="{StaticResource TextPrimaryColor}"
                       HorizontalOptions="Center"
                       Margin="0,16,0,0"/>

                <Label Text="Enter your username and we'll send you instructions to reset your password"
                       FontSize="15"
                       TextColor="{StaticResource TextSecondaryColor}"
                       HorizontalOptions="Center"
                       HorizontalTextAlignment="Center"
                       MaximumWidthRequest="350"/>
            </VerticalStackLayout>

            <!-- Form -->
            <Border Grid.Row="1"
                    StrokeShape="RoundRectangle 24"
                    BackgroundColor="{StaticResource CardBackgroundColor}"
                    Stroke="Transparent"
                    Padding="32,36"
                    Shadow="{StaticResource CardShadow}"
                    VerticalOptions="Start"
                    MaximumWidthRequest="500"
                    HorizontalOptions="Center"
                    WidthRequest="500"
                    IsVisible="{Binding IsFormVisible}">

                <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 your username"
                                   PlaceholderColor="{StaticResource TextSecondaryColor}"
                                   TextColor="{StaticResource TextPrimaryColor}"
                                   BackgroundColor="Transparent"
                                   FontSize="15"
                                   HeightRequest="52"
                                   Margin="16,0"/>
                        </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>

                    <!-- Submit Button -->
                    <Button Text="Send Reset Instructions"
                            Command="{Binding SendResetCommand}"
                            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>

            <!-- Success Message -->
            <Border Grid.Row="1"
                    StrokeShape="RoundRectangle 24"
                    BackgroundColor="{StaticResource CardBackgroundColor}"
                    Stroke="Transparent"
                    Padding="32,36"
                    Shadow="{StaticResource CardShadow}"
                    VerticalOptions="Start"
                    MaximumWidthRequest="500"
                    HorizontalOptions="Center"
                    WidthRequest="500"
                    IsVisible="{Binding IsSuccessVisible}">

                <VerticalStackLayout Spacing="20">

                    <!-- Success Icon -->
                    <Border StrokeShape="RoundRectangle 50"
                            BackgroundColor="#D4EDDA"
                            WidthRequest="100"
                            HeightRequest="100"
                            HorizontalOptions="Center">
                        <Label Text="&#xf058;"
                               FontFamily="FontAwesome"
                               FontSize="50"
                               TextColor="{StaticResource SuccessColor}"
                               HorizontalOptions="Center"
                               VerticalOptions="Center"/>
                    </Border>

                    <Label Text="Check Your Email"
                           FontSize="24"
                           FontAttributes="Bold"
                           TextColor="{StaticResource TextPrimaryColor}"
                           HorizontalOptions="Center"/>

                    <Label Text="We've sent password reset instructions to the email associated with your account."
                           FontSize="15"
                           TextColor="{StaticResource TextSecondaryColor}"
                           HorizontalOptions="Center"
                           HorizontalTextAlignment="Center"
                           Margin="0,0,0,8"/>

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

                </VerticalStackLayout>
            </Border>

            <!-- Footer -->
            <VerticalStackLayout Grid.Row="2" 
                                Spacing="8"
                                Margin="0,32,0,24">
                <Label HorizontalOptions="Center">
                    <Label.FormattedText>
                        <FormattedString>
                            <Span Text="Remember your password? "
                                  TextColor="{StaticResource TextSecondaryColor}"
                                  FontSize="14"/>
                            <Span Text="Sign In"
                                  TextColor="{StaticResource PrimaryColor}"
                                  FontSize="14"
                                  FontAttributes="Bold">
                                <Span.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding BackCommand}"/>
                                </Span.GestureRecognizers>
                            </Span>
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
            </VerticalStackLayout>

        </Grid>
    </ScrollView>

</ContentPage>