<?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"
             x:Class="LSFE.MobApp.Pages.CoveragePlan.DoctorsPage"
             xmlns:vm="clr-namespace:LSFE.MobApp.ViewModels.Coverage"
             Title="Actual Coverage Plan">
    <Shell.TitleView>
        <Grid ColumnDefinitions="*,Auto" Padding="0,0,10,0">
            <Label Text="Actual Coverage Plan"
               VerticalOptions="Center"
               FontSize="20"
               FontAttributes="Bold"
               TextColor="#111827"/>

            <Button Grid.Column="1"
                Style="{StaticResource TransparentButtonStyle}"
                Command="{Binding SignOutCommand}">
                <Button.ImageSource>
                    <FileImageSource File="logout.svg"/>
                </Button.ImageSource>
            </Button>
        </Grid>
    </Shell.TitleView>

    <ContentPage.Resources>
        <ResourceDictionary>
            <!-- Status Color Converter -->
            <Style x:Key="StatusBadgeStyle" TargetType="Border">
                <Setter Property="Padding" Value="12,6" />
                <Setter Property="StrokeShape" Value="RoundRectangle 12" />
                <Setter Property="StrokeThickness" Value="0" />
            </Style>

            <Style x:Key="CardStyle" TargetType="Border">
                <Setter Property="BackgroundColor" Value="White" />
                <Setter Property="Stroke" Value="#E5E7EB" />
                <Setter Property="StrokeThickness" Value="1" />
                <Setter Property="StrokeShape" Value="RoundRectangle 12" />
                <Setter Property="Padding" Value="20" />
                <Setter Property="Margin" Value="0,0,0,16" />
            </Style>

            <Style x:Key="PrimaryButtonStyle" TargetType="Button">
                <Setter Property="BackgroundColor" Value="#2563EB" />
                <!-- Indigo-600 -->
                <Setter Property="TextColor" Value="White" />
                <Setter Property="CornerRadius" Value="8" />
                <Setter Property="Padding" Value="16,12" />
                <Setter Property="FontAttributes" Value="Bold" />
            </Style>


            <Style x:Key="SecondaryButtonStyle" TargetType="Button">
                <Setter Property="BackgroundColor" Value="White" />
                <Setter Property="TextColor" Value="#4B5563" />
                <Setter Property="BorderColor" Value="#D1D5DB" />
                <Setter Property="BorderWidth" Value="1" />
                <Setter Property="CornerRadius" Value="8" />
                <Setter Property="Padding" Value="16,12" />
            </Style>

            <Style x:Key="CallButtonStyle" TargetType="Button">
                <Setter Property="BackgroundColor" Value="#F97316" />
                <!-- Orange-500 -->
                <Setter Property="TextColor" Value="White" />
                <Setter Property="CornerRadius" Value="8" />
                <Setter Property="Padding" Value="16,12" />
                <Setter Property="FontAttributes" Value="Bold" />
            </Style>
            
            <Style x:Key="DeleteButtonStyle" TargetType="Button">
                <Setter Property="BackgroundColor" Value="#FBBF24" />
                <!-- Amber-400 -->
                <Setter Property="TextColor" Value="#78350F" />
                <!-- Amber-900 -->
                <Setter Property="CornerRadius" Value="8" />
                <Setter Property="Padding" Value="16,12" />
                <Setter Property="FontAttributes" Value="Bold" />
            </Style>

            <Style x:Key="MissedButtonStyle" TargetType="Button">
                <Setter Property="BackgroundColor" Value="#F87171" />
                <!-- Red-400 -->
                <Setter Property="TextColor" Value="#7F1D1D" />
                <!-- Red-900 -->
                <Setter Property="CornerRadius" Value="8" />
                <Setter Property="Padding" Value="16,12" />
                <Setter Property="FontAttributes" Value="Bold" />
            </Style>

            <Style x:Key="TransparentButtonStyle" TargetType="Button">
                <Setter Property="BackgroundColor" Value="Transparent" />
                <Setter Property="TextColor" Value="White" />
                <Setter Property="CornerRadius" Value="8" />
                <Setter Property="Padding" Value="5,5" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <Grid RowDefinitions="Auto,Auto,*" Padding="16" BackgroundColor="#F9FAFB">

        <!-- Header Section 
        <Grid Grid.Row="0" 
          ColumnDefinitions="50,50,*,*,*" 
          ColumnSpacing="5"
          Margin="0,0,0,20">
            <Button Grid.Column="0" 
            Text="🔄 Sync From Cloud to Mobile" 
            Style="{StaticResource TransparentButtonStyle}"
            Command="{Binding SyncAllCommand}"
            HeightRequest="44"/>

            <Button Grid.Column="1" 
            Text="📜"
            Style="{StaticResource TransparentButtonStyle}"
            Command="{Binding ViewCrashLogCommand}"
            HeightRequest="44"/>
        </Grid>
        -->
        <!-- Search and Filter Section -->
        <Grid Grid.Row="1" 
              ColumnDefinitions="*,Auto,Auto" 
              ColumnSpacing="12" 
              Margin="0,0,0,20">

            <!-- Search Bar -->
            <Border Grid.Column="0" 
                    BackgroundColor="White" 
                    Stroke="#E5E7EB" 
                    StrokeThickness="1"
                    StrokeShape="RoundRectangle 8"
                    Padding="12,0">
                <Grid ColumnDefinitions="Auto,*,Auto">
                    <Label Text="🔍" 
                           FontSize="18" 
                           VerticalOptions="Center"
                           Margin="0,0,8,0"/>
                    <Entry Grid.Column="1"
                           Placeholder="Search doctors..."
                           Text="{Binding SearchText}"
                           TextColor="#111827"
                           PlaceholderColor="#9CA3AF"
                           VerticalOptions="Center"/>
                    <Button Grid.Column="2"
                            Text="✕"
                            BackgroundColor="Transparent"
                            TextColor="#6B7280"
                            IsVisible="{Binding HasSearchText}"
                            Command="{Binding ClearSearchCommand}"
                            Padding="8,0"/>
                </Grid>
            </Border>

            <!-- Sort by Institution 
            <Border Grid.Column="1" 
                BackgroundColor="White" 
                Stroke="#E5E7EB" 
                StrokeThickness="1"
                StrokeShape="RoundRectangle 8"
                Padding="16,12">    
                <Grid ColumnDefinitions="Auto,Auto">
                    <Label Text="Sort by Institution" 
               TextColor="#374151" 
               FontSize="14"
               VerticalOptions="Center"/>
                    <Label Grid.Column="1" 
               Text="{Binding InstitutionSortIcon}" 
               TextColor="#6B7280" 
               FontSize="12"
               Margin="8,0,0,0"
               VerticalOptions="Center"/>
                </Grid>
                <Border.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding SortByInstitutionCommand}"/>
                </Border.GestureRecognizers>
            </Border>-->
            
            <!-- Filter by Institution -->
            <Border Grid.Column="1" 
                BackgroundColor="White" 
                Stroke="#E5E7EB" 
                StrokeThickness="1"
                StrokeShape="RoundRectangle 8"
                Padding="12,0"
                MinimumWidthRequest="400">  
                <Picker ItemsSource="{Binding InstitutionFilterOptions}"
            SelectedItem="{Binding SelectedInstitutionFilter}"
            TextColor="#374151"
            FontSize="14"
            Title="Filter by Institution"/>
            </Border>
            
            <!-- Sort by Status Picker -->
            <Border Grid.Column="2" 
                    BackgroundColor="White" 
                    Stroke="#E5E7EB" 
                    StrokeThickness="1"
                    StrokeShape="RoundRectangle 8"
                    Padding="12,0"
                    MinimumWidthRequest="180">
                <Picker ItemsSource="{Binding StatusFilterOptions}"
                        SelectedItem="{Binding SelectedStatusFilter}"
                        TextColor="#374151"
                        FontSize="14"
                        Title="Sort by status"/>
            </Border>
        </Grid>

        <!-- Results Count -->
        <Label Grid.Row="1" 
               Text="{Binding ResultsCountText}" 
               TextColor="#6B7280" 
               FontSize="14"
               Margin="0,60,0,0"/>

        <!-- Doctors List must be use DoctorVM instead -->
        <ScrollView Grid.Row="2">
            <StackLayout BindableLayout.ItemsSource="{Binding FilteredDoctors}">
                <BindableLayout.ItemTemplate>
                    <DataTemplate x:DataType="vm:DoctorVM">
                        <Border Style="{StaticResource CardStyle}">
                            <Border.Shadow>
                                <Shadow Brush="Black" Opacity="0.05" Radius="8" Offset="0,2"/>
                            </Border.Shadow>

                            <Grid RowDefinitions="Auto,Auto,Auto,Auto" ColumnDefinitions="Auto,*,Auto">

                                <!-- Avatar and Name Row -->
                                <Border Grid.Row="0" 
                                        Grid.Column="0"
                                        BackgroundColor="#E0F2FE" 
                                        WidthRequest="56" 
                                        HeightRequest="56"
                                        StrokeShape="RoundRectangle 28"
                                        StrokeThickness="0"
                                        VerticalOptions="Start">
                                    <Label Text="👤" 
                                           FontSize="28" 
                                           HorizontalOptions="Center" 
                                           VerticalOptions="Center"/>
                                </Border>

                                <VerticalStackLayout Grid.Row="0" 
                                                     Grid.Column="1" 
                                                     Margin="16,0,0,0"
                                                     Spacing="4">
                                    <Label Text="{Binding FullName}" 
                                           FontSize="18" 
                                           FontAttributes="Bold" 
                                           TextColor="#111827"/>
                                    <Label Text="{Binding Specialization}" 
                                           FontSize="14" 
                                           TextColor="#6B7280"/>
                                </VerticalStackLayout>

                                <!-- Status Badge -->
                                <Border Grid.Row="0" 
                                        Grid.Column="2" 
                                        Style="{StaticResource StatusBadgeStyle}"
                                        BackgroundColor="{Binding StatusBackgroundColor}"
                                        VerticalOptions="Start">
                                    <Label Text="{Binding StatusText}" 
                                           TextColor="{Binding StatusTextColor}" 
                                           FontSize="12" 
                                           FontAttributes="Bold"/>
                                </Border>

                                <!-- Contact Info -->
                                <VerticalStackLayout Grid.Row="1" 
                                                     Grid.Column="0" 
                                                     Grid.ColumnSpan="3" 
                                                     Margin="0,20,0,0"
                                                     Spacing="10">
                                    <!-- Email -->
                                    <Grid ColumnDefinitions="Auto,*">
                                        <Label Text="✉️" 
                                               FontSize="16" 
                                               VerticalOptions="Center"
                                               Margin="0,0,10,0"/>
                                        <Label Grid.Column="1" 
                                               Text="{Binding EmailAddress}" 
                                               TextColor="#374151" 
                                               FontSize="14"
                                               VerticalOptions="Center"/>
                                    </Grid>

                                    <!-- Phone -->
                                    <Grid ColumnDefinitions="Auto,*">
                                        <Label Text="📞" 
                                               FontSize="16" 
                                               VerticalOptions="Center"
                                               Margin="0,0,10,0"/>
                                        <Label Grid.Column="1" 
                                               Text="{Binding PhoneNo}" 
                                               TextColor="#374151" 
                                               FontSize="14"
                                               VerticalOptions="Center"/>
                                    </Grid>

                                    <!-- License -->
                                    <Grid ColumnDefinitions="Auto,*">
                                        <Label Text="🆔" 
                                               FontSize="16" 
                                               VerticalOptions="Center"
                                               Margin="0,0,10,0"/>
                                        <Label Grid.Column="1" 
                                               Text="{Binding LicenseNo}" 
                                               TextColor="#374151" 
                                               FontSize="14"
                                               VerticalOptions="Center"/>
                                    </Grid>

                                    <!-- Institution -->
                                    <Grid ColumnDefinitions="Auto,*" IsVisible="{Binding HasInstitution}">
                                        <Label Text="🏥" 
                                               FontSize="16" 
                                               VerticalOptions="Center"
                                               Margin="0,0,10,0"/>
                                        <Label Grid.Column="1" 
                                               Text="{Binding InstitutionName}" 
                                               TextColor="#374151" 
                                               FontSize="14"
                                               VerticalOptions="Center"/>
                                    </Grid>
                                </VerticalStackLayout>

                                <!-- Action Buttons -->
                                <Grid Grid.Row="2" 
                                  Grid.Column="0" 
                                  Grid.ColumnSpan="3" 
                                  ColumnDefinitions="*,*,*,*" 
                                  ColumnSpacing="10"
                                  Margin="0,20,0,0">    

                                    <Button Grid.Column="0" 
                                    Text="👁️ View" 
                                    Style="{StaticResource PrimaryButtonStyle}"
                                    Command="{Binding Source={RelativeSource AncestorType={x:Type vm:DoctorsVM}}, Path=ViewDoctorCommand}"
                                    CommandParameter="{Binding .}"
                                    IsEnabled="{Binding Source={RelativeSource AncestorType={x:Type vm:DoctorsVM}}, Path=CanInteract}"/>

                                    <Button Grid.Column="1" 
                                     Text="📞 Coverage" 
                                     Style="{StaticResource CallButtonStyle}"
                                     Command="{Binding Source={RelativeSource AncestorType={x:Type vm:DoctorsVM}}, Path=CoverageCommand}"
                                     CommandParameter="{Binding .}"
                                     IsEnabled="{Binding Source={RelativeSource AncestorType={x:Type vm:DoctorsVM}}, Path=CanInteract}"/>

                                    <Button Grid.Column="2" 
                                     Text="📅 Reschedule" 
                                     Style="{StaticResource DeleteButtonStyle}"
                                     Command="{Binding Source={RelativeSource AncestorType={x:Type vm:DoctorsVM}}, Path=RescheduleCommand}"
                                     CommandParameter="{Binding .}"
                                     IsEnabled="{Binding Source={RelativeSource AncestorType={x:Type vm:DoctorsVM}}, Path=CanInteract}"/>
                                    
                                    <Button Grid.Column="4" 
                                     Text="⏰Missed"  
                                      Style="{StaticResource MissedButtonStyle}"
                                      Command="{Binding Source={RelativeSource AncestorType={x:Type vm:DoctorsVM}}, Path=MissedCommand}"
                                      CommandParameter="{Binding .}"
                                      IsEnabled="{Binding Source={RelativeSource AncestorType={x:Type vm:DoctorsVM}}, Path=CanInteract}"/>
                                    <!--       
                                    <Button Grid.Column="1" 
                                    Text="✏️ Edit" 
                                    Style="{StaticResource SecondaryButtonStyle}"
                                    Command="{Binding Source={RelativeSource AncestorType={x:Type vm:DoctorsVM}}, Path=EditDoctorCommand}"
                                    CommandParameter="{Binding .}"
                                    IsEnabled="{Binding Source={RelativeSource AncestorType={x:Type vm:DoctorsVM}}, Path=CanInteract}"/>

                                    <Button Grid.Column="2" 
                                    Text="🗑️ Delete" 
                                    Style="{StaticResource DeleteButtonStyle}"
                                    Command="{Binding Source={RelativeSource AncestorType={x:Type vm:DoctorsVM}}, Path=DeleteDoctorCommand}"
                                    CommandParameter="{Binding .}"
                                    IsEnabled="{Binding Source={RelativeSource AncestorType={x:Type vm:DoctorsVM}}, Path=CanInteract}"/>    -->    
                                </Grid>
                            </Grid>
                        </Border>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </StackLayout>
        </ScrollView>

        <!-- Filtering Indicator (small overlay on list) -->
        <Border Grid.Row="2" 
        IsVisible="{Binding IsFiltering}"
        BackgroundColor="#80FFFFFF"
        VerticalOptions="Start"
        HorizontalOptions="Center"
        Padding="16,8"
        Margin="0,20,0,0"
        StrokeShape="RoundRectangle 20"
        StrokeThickness="0">
            <Border.Shadow>
                <Shadow Brush="Black" Opacity="0.1" Radius="8" Offset="0,2"/>
            </Border.Shadow>
            <HorizontalStackLayout Spacing="10">
                <ActivityIndicator IsRunning="True" 
                          Color="#0EA5E9"
                          WidthRequest="20"
                          HeightRequest="20"/>
                <Label Text="Filtering..." 
               TextColor="#0EA5E9"
               FontSize="14"
               FontAttributes="Bold"
               VerticalOptions="Center"/>
            </HorizontalStackLayout>
        </Border>
        
        <!-- Fullscreen Loading Overlay -->
        <Grid 
        Grid.RowSpan="3"
        BackgroundColor="#80000000"
        IsVisible="{Binding IsLoading}"
        ZIndex="999"
        HorizontalOptions="Fill"
        VerticalOptions="Fill">

            <!-- Centered white rounded box -->
            <Border
            StrokeShape="RoundRectangle 16"
            BackgroundColor="White"
            Padding="32"
            WidthRequest="200"
            HeightRequest="150"
            HorizontalOptions="Center"
            VerticalOptions="Center">

                <VerticalStackLayout Spacing="16"
                             HorizontalOptions="Center"
                             VerticalOptions="Center">
                    <ActivityIndicator 
                IsRunning="True"
                Color="#0EA5E9"
                WidthRequest="40"
                HeightRequest="40" />
                    <Label 
                Text="Processing..."
                TextColor="#0EA5E9"
                FontAttributes="Bold"
                FontSize="16"
                HorizontalOptions="Center" />
                </VerticalStackLayout>

            </Border>
        </Grid>

        <!-- Empty State -->
        <VerticalStackLayout Grid.Row="2" 
                            IsVisible="{Binding IsEmpty}"
                            VerticalOptions="Center"
                            HorizontalOptions="Center"
                            Spacing="16">
            <Label Text="📋" FontSize="64" HorizontalOptions="Center"/>
            <Label Text="No doctors found" 
                   FontSize="20" 
                   FontAttributes="Bold" 
                   TextColor="#6B7280"
                   HorizontalOptions="Center"/>
            <Label Text="Try adjusting your search or filters" 
                   FontSize="14" 
                   TextColor="#9CA3AF"
                   HorizontalOptions="Center"/>
        </VerticalStackLayout>
    </Grid>
</ContentPage>