<?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:vm="clr-namespace:Scry.ViewModels"
             x:Class="Scry.Views.CardDetailPage"
             x:DataType="vm:CardDetailViewModel"
             Title="{Binding Card.Name}">

    <ScrollView>
        <VerticalStackLayout Spacing="16" Padding="16">
            <!-- Card image -->
            <Border HorizontalOptions="Center"
                    HeightRequest="420"
                    WidthRequest="300"
                    StrokeThickness="0">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="16" />
                </Border.StrokeShape>
                <Border.Shadow>
                    <Shadow Brush="Black"
                            Offset="0,4"
                            Radius="20"
                            Opacity="0.3" />
                </Border.Shadow>
                <Image Source="{Binding Card.ImageUrl}"
                       Aspect="AspectFill" />
            </Border>

            <!-- Card name and mana cost -->
            <Grid ColumnDefinitions="*,Auto" Margin="0,8,0,0">
                <Label Grid.Column="0"
                       Text="{Binding Card.Name}"
                       FontSize="24"
                       FontAttributes="Bold" />
                <Label Grid.Column="1"
                       Text="{Binding Card.ManaCost}"
                       FontSize="18"
                       VerticalOptions="Center" />
            </Grid>

            <!-- Type line -->
            <Label Text="{Binding Card.TypeLine}"
                   FontSize="16"
                   TextColor="{StaticResource Gray500}" />

            <!-- Oracle text -->
            <Border BackgroundColor="{AppThemeBinding Light={StaticResource Gray100}, Dark={StaticResource Gray800}}"
                    Padding="16"
                    IsVisible="{Binding Card.OracleText, Converter={StaticResource StringNotEmpty}}">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="8" />
                </Border.StrokeShape>
                <Label Text="{Binding Card.OracleText}"
                       FontSize="15"
                       LineHeight="1.4" />
            </Border>

            <!-- Set info -->
            <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" RowSpacing="8" ColumnSpacing="16">
                <Label Grid.Row="0" Grid.Column="0"
                       Text="Set"
                       FontSize="12"
                       TextColor="{StaticResource Gray500}" />
                <Label Grid.Row="1" Grid.Column="0"
                       Text="{Binding Card.SetName}"
                       FontSize="16" />

                <Label Grid.Row="0" Grid.Column="1"
                       Text="Collector #"
                       FontSize="12"
                       TextColor="{StaticResource Gray500}" />
                <Label Grid.Row="1" Grid.Column="1"
                       Text="{Binding Card.CollectorNumber}"
                       FontSize="16" />
            </Grid>

            <!-- Rarity and price -->
            <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" RowSpacing="8" ColumnSpacing="16">
                <Label Grid.Row="0" Grid.Column="0"
                       Text="Rarity"
                       FontSize="12"
                       TextColor="{StaticResource Gray500}" />
                <Label Grid.Row="1" Grid.Column="0"
                       Text="{Binding Card.Rarity}"
                       FontSize="16"
                       TextTransform="Uppercase" />

                <Label Grid.Row="0" Grid.Column="1"
                       Text="Price"
                       FontSize="12"
                       TextColor="{StaticResource Gray500}" />
                <Label Grid.Row="1" Grid.Column="1"
                       Text="{Binding Card.Price, StringFormat='${0:F2}'}"
                       FontSize="16" />
            </Grid>

            <!-- Collection info (if in collection) -->
            <Border BackgroundColor="{StaticResource Primary}"
                    Padding="16"
                    IsVisible="{Binding IsInCollection}"
                    Margin="0,8,0,0">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="8" />
                </Border.StrokeShape>
                <Grid ColumnDefinitions="*,Auto">
                    <VerticalStackLayout Grid.Column="0">
                        <Label Text="In Your Collection"
                               TextColor="White"
                               FontSize="14"
                               FontAttributes="Bold" />
                        <HorizontalStackLayout Spacing="4">
                            <Label Text="{Binding Entry.Quantity, StringFormat='{0} copies'}"
                                   TextColor="#CCFFFFFF"
                                   FontSize="13" />
                            <Label Text="• Foil"
                                   TextColor="#FFCC00"
                                   FontSize="13"
                                   IsVisible="{Binding Entry.IsFoil}" />
                        </HorizontalStackLayout>
                    </VerticalStackLayout>

                    <HorizontalStackLayout Grid.Column="1" Spacing="8">
                        <Button Text="-"
                                WidthRequest="40"
                                HeightRequest="40"
                                Padding="0"
                                CornerRadius="20"
                                BackgroundColor="White"
                                TextColor="{StaticResource Primary}"
                                Command="{Binding DecrementQuantityCommand}" />
                        <Button Text="+"
                                WidthRequest="40"
                                HeightRequest="40"
                                Padding="0"
                                CornerRadius="20"
                                BackgroundColor="White"
                                TextColor="{StaticResource Primary}"
                                Command="{Binding IncrementQuantityCommand}" />
                    </HorizontalStackLayout>
                </Grid>
            </Border>
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>
