<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="LocationTrackerApp.Views.MainView"
             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:components="clr-namespace:LocationTrackerApp.Components"
             xmlns:viewmodels="clr-namespace:LocationTrackerApp.ViewModels"
             x:DataType="viewmodels:MainViewModel"
             Title="MainView"
             BackgroundColor="{DynamicResource PageBackgroundColor}">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <!-- Header -->
        <Grid Grid.Row="0" 
              BackgroundColor="#8B5CF6" 
              HeightRequest="60">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Label Grid.Column="0"
                   Text="Location Tracker"
                   FontSize="20"
                   FontAttributes="Bold"
                   TextColor="White"
                   VerticalOptions="Center"
                   HorizontalOptions="Center" />

            <Button Grid.Column="1"
                    Text="Settings"
                    BackgroundColor="Transparent"
                    TextColor="White"
                    FontSize="14"
                    Margin="0,0,10,0"
                    VerticalOptions="Center"
                    Command="{Binding SettingsCommand}" />
        </Grid>

        <!-- Map Container -->
        <Grid Grid.Row="1">
            <Microsoft.Maui.Controls.Maps.Map MapType="Street"
                                             IsShowingUser="True" />

            <!-- Overlay Controls -->
            <Grid VerticalOptions="Start" 
                  HorizontalOptions="End" 
                  Margin="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <!-- Tracking Status -->
                <Frame Grid.Row="0"
                       BackgroundColor="Black"
                       Opacity="0.7"
                       CornerRadius="20"
                       Padding="10,5"
                       Margin="0,0,0,5">
                    <Label Text="{Binding TrackingStatusText}"
                           TextColor="White"
                           FontSize="12"
                           HorizontalOptions="Center" />
                </Frame>

                <!-- Location Info -->
                <Frame Grid.Row="1"
                       BackgroundColor="Black"
                       Opacity="0.7"
                       CornerRadius="20"
                       Padding="10,5"
                       Margin="0,0,0,5">
                    <StackLayout>
                        <Label Text="{Binding CurrentLocationText}"
                               TextColor="White"
                               FontSize="10"
                               HorizontalOptions="Center" />
                        <Label Text="{Binding LocationCountText}"
                               TextColor="White"
                               FontSize="10"
                               HorizontalOptions="Center" />
                    </StackLayout>
                </Frame>

                <!-- Map Controls -->
                <Frame Grid.Row="2"
                       BackgroundColor="Black"
                       Opacity="0.7"
                       CornerRadius="20"
                       Padding="5">
                    <StackLayout Orientation="Horizontal">
                        <Button Text="📍"
                                BackgroundColor="Transparent"
                                TextColor="White"
                                FontSize="16"
                                WidthRequest="40"
                                HeightRequest="40"
                                Command="{Binding TogglePointsCommand}" />
                        <Button Text="🔥"
                                BackgroundColor="Transparent"
                                TextColor="White"
                                FontSize="16"
                                WidthRequest="40"
                                HeightRequest="40"
                                Command="{Binding ToggleHeatMapCommand}" />
                        <Button Text="🎯"
                                BackgroundColor="Transparent"
                                TextColor="White"
                                FontSize="16"
                                WidthRequest="40"
                                HeightRequest="40"
                                Command="{Binding CenterOnUserCommand}" />
                    </StackLayout>
                </Frame>
            </Grid>
        </Grid>

        <!-- Bottom Controls -->
        <Grid Grid.Row="2" 
              BackgroundColor="#F3F4F6" 
              HeightRequest="80">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <!-- Start/Stop Tracking Button -->
            <Button Grid.Column="0"
                    Text="{Binding TrackingButtonText}"
                    BackgroundColor="{Binding TrackingButtonColor}"
                    TextColor="White"
                    FontSize="16"
                    FontAttributes="Bold"
                    Margin="10,10,5,10"
                    CornerRadius="25"
                    Command="{Binding ToggleTrackingCommand}" />

            <!-- Clear Data Button -->
            <Button Grid.Column="1"
                    Text="Clear Data"
                    BackgroundColor="#EF4444"
                    TextColor="White"
                    FontSize="14"
                    Margin="5,10,5,10"
                    CornerRadius="25"
                    Command="{Binding ClearDataCommand}" />

            <!-- Load Data Button -->
            <Button Grid.Column="2"
                    Text="Load Data"
                    BackgroundColor="#10B981"
                    TextColor="White"
                    FontSize="14"
                    Margin="5,10,10,10"
                    CornerRadius="25"
                    Command="{Binding LoadDataCommand}" />
        </Grid>
    </Grid>
</ContentPage>
