<?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.Admin"
             x:Class="LSFE.MobApp.Pages.Admin.DeviceRegistrationPage"
             x:DataType="viewmodels:DeviceRegistrationVM"
             Title="Device Registration"
             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,4"
                    Radius="16"
                    Opacity="0.08"/>
        </ResourceDictionary>
    </ContentPage.Resources>

    <ScrollView>
        <VerticalStackLayout Padding="20" Spacing="20">

            <!-- Header -->
            <Border StrokeShape="RoundRectangle 20"
                    BackgroundColor="{StaticResource CardBackgroundColor}"
                    Padding="20"
                    Shadow="{StaticResource CardShadow}">
                <VerticalStackLayout Spacing="12">
                    <Label Text="🔐 Secure Device Registration"
                           FontSize="24"
                           FontAttributes="Bold"
                           TextColor="{StaticResource TextPrimaryColor}"
                           HorizontalOptions="Center"/>

                    <Label Text="Admin authentication required"
                           FontSize="14"
                           TextColor="{StaticResource TextSecondaryColor}"
                           HorizontalOptions="Center"/>
                </VerticalStackLayout>
            </Border>

            <!-- Step 1: Admin Authentication (Initially Visible) -->
            <Border StrokeShape="RoundRectangle 20"
                    BackgroundColor="{StaticResource CardBackgroundColor}"
                    Padding="24"
                    Shadow="{StaticResource CardShadow}"
                    IsVisible="{Binding ShowAuthenticationForm}">

                <VerticalStackLayout Spacing="20">

                    <Label Text="Step 1: Admin Authentication"
                           FontSize="18"
                           FontAttributes="Bold"
                           TextColor="{StaticResource PrimaryColor}"/>

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

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

                    <!-- Admin Password -->
                    <VerticalStackLayout Spacing="8">
                        <Label TextColor="{StaticResource TextPrimaryColor}">
                            <Label.FormattedText>
                                <FormattedString>
                                    <Span Text="&#xf023;  "
                                          FontFamily="FontAwesome"
                                          FontSize="14"
                                          TextColor="{StaticResource PrimaryColor}"/>
                                    <Span Text="Admin 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 AdminPassword}"
                                       Placeholder="Enter admin password"
                                       PlaceholderColor="{StaticResource TextSecondaryColor}"
                                       TextColor="{StaticResource TextPrimaryColor}"
                                       IsPassword="{Binding IsAdminPasswordHidden}"
                                       BackgroundColor="Transparent"
                                       FontSize="15"
                                       HeightRequest="52"
                                       Margin="16,0"/>

                                <ImageButton Grid.Column="1"
                                            Command="{Binding ToggleAdminPasswordVisibilityCommand}"
                                            BackgroundColor="Transparent"
                                            WidthRequest="52"
                                            HeightRequest="52"
                                            Padding="14">
                                    <ImageButton.Source>
                                        <FontImageSource FontFamily="FontAwesome"
                                                       Glyph="{Binding AdminPasswordIcon}"
                                                       Color="{StaticResource TextSecondaryColor}"
                                                       Size="18"/>
                                    </ImageButton.Source>
                                </ImageButton>
                            </Grid>
                        </Border>
                    </VerticalStackLayout>

                    <!-- Loading Indicator -->
                    <ActivityIndicator IsRunning="{Binding IsVerifying}"
                         IsVisible="{Binding IsVerifying}"
                         Color="{StaticResource PrimaryColor}"
                         HeightRequest="40"/>
                    
                    <!-- Auth Error Message -->
                    <Border IsVisible="{Binding HasAuthError}"
                            StrokeShape="RoundRectangle 8"
                            BackgroundColor="#FFEBEE"
                            Stroke="#FFCDD2"
                            Padding="12">
                        <Label Text="{Binding AuthErrorMessage}"
                               TextColor="{StaticResource ErrorColor}"
                               FontSize="13"/>
                    </Border>

                    <!-- Verify Admin Button -->
                    <Button Text="Verify Admin Access"
                            Command="{Binding VerifyAdminCommand}"
                            BackgroundColor="{StaticResource PrimaryColor}"
                            TextColor="White"
                            FontSize="16"
                            FontAttributes="Bold"
                            CornerRadius="12"
                            HeightRequest="54">
                        <Button.Shadow>
                            <Shadow Brush="{StaticResource PrimaryColor}"
                                    Offset="0,4"
                                    Radius="16"
                                    Opacity="0.35"/>
                        </Button.Shadow>
                    </Button>

                </VerticalStackLayout>
            </Border>

            <!-- Step 2: Device Registration Form (Visible after authentication) -->
            <Border StrokeShape="RoundRectangle 20"
                    BackgroundColor="{StaticResource CardBackgroundColor}"
                    Padding="24"
                    Shadow="{StaticResource CardShadow}"
                    IsVisible="{Binding ShowRegistrationForm}">

                <VerticalStackLayout Spacing="20">

                    <Label Text="Step 2: Register Medical Rep Device"
                           FontSize="18"
                           FontAttributes="Bold"
                           TextColor="{StaticResource PrimaryColor}"/>

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

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

                    <!-- Med Rep Password -->
                    <VerticalStackLayout Spacing="8">
                        <Label TextColor="{StaticResource TextPrimaryColor}">
                            <Label.FormattedText>
                                <FormattedString>
                                    <Span Text="&#xf084;  "
                                          FontFamily="FontAwesome"
                                          FontSize="14"
                                          TextColor="{StaticResource PrimaryColor}"/>
                                    <Span Text="Medical Rep 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 MedRepPassword}"
                                       Placeholder="Enter med rep password"
                                       PlaceholderColor="{StaticResource TextSecondaryColor}"
                                       TextColor="{StaticResource TextPrimaryColor}"
                                       IsPassword="{Binding IsMedRepPasswordHidden}"
                                       BackgroundColor="Transparent"
                                       FontSize="15"
                                       HeightRequest="52"
                                       Margin="16,0"/>
                                <ImageButton Grid.Column="1"
                                            Command="{Binding ToggleMedRepPasswordVisibilityCommand}"
                                            BackgroundColor="Transparent"
                                            WidthRequest="52"
                                            HeightRequest="52"
                                            Padding="14">
                                    <ImageButton.Source>
                                        <FontImageSource FontFamily="FontAwesome"
                                                       Glyph="{Binding MedRepPasswordIcon}"
                                                       Color="{StaticResource TextSecondaryColor}"
                                                       Size="18"/>
                                    </ImageButton.Source>
                                </ImageButton>
                            </Grid>
                        </Border>

                        <Label Text="ℹ️ This is the password the medical rep will use to login"
                               FontSize="12"
                               TextColor="{StaticResource TextSecondaryColor}"
                               FontAttributes="Italic"/>
                    </VerticalStackLayout>
                    
                    <!-- Current Device Info -->
                    <Border StrokeShape="RoundRectangle 12"
                            BackgroundColor="#E3F2FD"
                            Padding="16">
                        <VerticalStackLayout Spacing="8">
                            <Label Text="📱 Current Device Information"
                                   FontSize="14"
                                   FontAttributes="Bold"
                                   TextColor="{StaticResource TextPrimaryColor}"/>

                            <Grid ColumnDefinitions="100,*" 
                                  RowDefinitions="Auto,Auto,Auto" 
                                  RowSpacing="6">
                                <Label Grid.Column="0" Grid.Row="0"
                                       Text="Device ID:"
                                       FontSize="12"
                                       FontAttributes="Bold"
                                       TextColor="{StaticResource TextSecondaryColor}"
                                       VerticalOptions="Center"/>
                                <Label Grid.Column="1" Grid.Row="0"
                                       Text="{Binding CurrentDeviceId}"
                                       FontSize="12"
                                       FontFamily="Courier"
                                       TextColor="{StaticResource TextPrimaryColor}"
                                       LineBreakMode="TailTruncation"
                                       VerticalOptions="Center"/>

                                <Label Grid.Column="0" Grid.Row="1"
                                       Text="Model:"
                                       FontSize="12"
                                       FontAttributes="Bold"
                                       TextColor="{StaticResource TextSecondaryColor}"
                                       VerticalOptions="Center"/>
                                <Label Grid.Column="1" Grid.Row="1"
                                       Text="{Binding CurrentDeviceModel}"
                                       FontSize="12"
                                       TextColor="{StaticResource TextPrimaryColor}"
                                       VerticalOptions="Center"/>

                                <Label Grid.Column="0" Grid.Row="2"
                                       Text="Platform:"
                                       FontSize="12"
                                       FontAttributes="Bold"
                                       TextColor="{StaticResource TextSecondaryColor}"
                                       VerticalOptions="Center"/>
                                <Label Grid.Column="1" Grid.Row="2"
                                       Text="{Binding CurrentDevicePlatform}"
                                       FontSize="12"
                                       TextColor="{StaticResource TextPrimaryColor}"
                                       VerticalOptions="Center"/>
                            </Grid>
                        </VerticalStackLayout>
                    </Border>

                    <!-- Registration Error Message -->
                    <Border IsVisible="{Binding HasRegistrationError}"
                            StrokeShape="RoundRectangle 8"
                            BackgroundColor="#FFEBEE"
                            Stroke="#FFCDD2"
                            Padding="12">
                        <Label Text="{Binding RegistrationErrorMessage}"
                               TextColor="{StaticResource ErrorColor}"
                               FontSize="13"/>
                    </Border>

                    <!-- Register Device Button -->
                    <Button Text="Register Device"
                            Command="{Binding RegisterDeviceCommand}"
                            BackgroundColor="{StaticResource SuccessColor}"
                            TextColor="White"
                            FontSize="16"
                            FontAttributes="Bold"
                            CornerRadius="12"
                            HeightRequest="54">
                        <Button.Shadow>
                            <Shadow Brush="{StaticResource SuccessColor}"
                                    Offset="0,4"
                                    Radius="16"
                                    Opacity="0.35"/>
                        </Button.Shadow>
                    </Button>

                    <!-- Loading Indicator -->
                    <ActivityIndicator IsRunning="{Binding IsRegistering}"
                                      IsVisible="{Binding IsRegistering}"
                                      Color="{StaticResource PrimaryColor}"
                                      HeightRequest="40"/>

                </VerticalStackLayout>
            </Border>

            <!-- Success Message -->
            <Border IsVisible="{Binding ShowSuccessMessage}"
                    StrokeShape="RoundRectangle 20"
                    BackgroundColor="{StaticResource CardBackgroundColor}"
                    Padding="24"
                    Shadow="{StaticResource CardShadow}">

                <VerticalStackLayout Spacing="16">

                    <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="✅ Device Registered Successfully!"
                           FontSize="20"
                           FontAttributes="Bold"
                           TextColor="{StaticResource SuccessColor}"
                           HorizontalOptions="Center"/>

                    <VerticalStackLayout Spacing="6">
                        <Label FontSize="14" TextColor="{StaticResource TextSecondaryColor}" HorizontalOptions="Center">
                            <Label.FormattedText>
                                <FormattedString>
                                    <Span Text="Username: "/>
                                    <Span Text="{Binding RegisteredUsername}" FontAttributes="Bold"/>
                                </FormattedString>
                            </Label.FormattedText>
                        </Label>
                        <Label FontSize="14" TextColor="{StaticResource TextSecondaryColor}" HorizontalOptions="Center">
                            <Label.FormattedText>
                                <FormattedString>
                                    <Span Text="Device: "/>
                                    <Span Text="{Binding RegisteredDeviceModel}" FontAttributes="Bold"/>
                                </FormattedString>
                            </Label.FormattedText>
                        </Label>
                    </VerticalStackLayout>

                    <Button Text="Back to main page"
                            Command="{Binding ResetFormCommand}"
                            BackgroundColor="{StaticResource PrimaryColor}"
                            TextColor="White"
                            FontSize="15"
                            CornerRadius="12"
                            HeightRequest="50"/>

                </VerticalStackLayout>
            </Border>

            <!-- Instructions -->
            <Border StrokeShape="RoundRectangle 16"
                    BackgroundColor="#FFF3E0"
                    Padding="16"
                    IsVisible="{Binding ShowAuthenticationForm}">
                <VerticalStackLayout Spacing="8">
                    <Label Text="ℹ️ How it works:"
                           FontSize="14"
                           FontAttributes="Bold"
                           TextColor="#F57C00"/>
                    <Label FontSize="13" TextColor="#F57C00">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="1. Enter admin username and password to verify access&#x0a;"/>
                                <Span Text="2. Enter med rep username and password&#x0a;"/>
                                <Span Text="3. Current device will be registered&#x0a;"/>
                                <Span Text="4. Med rep can now login on this device"/>
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                </VerticalStackLayout>
            </Border>

        </VerticalStackLayout>
    </ScrollView>
</ContentPage>