@attribute [Route(RouteConstants.Package.Detail + "{id:long}")]

<PageTitle>@(_package?.Title ?? "جزئیات پکیج")</PageTitle>

@if (_isLoading)
{
    <MudStack AlignItems="AlignItems.Center" Class="py-16">
        <MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Large" />
        <MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">در حال بارگذاری...</MudText>
    </MudStack>
}
else if (_package == null)
{
    <MudStack AlignItems="AlignItems.Center" Class="py-16">
        <MudIcon Icon="@Icons.Material.Filled.Error" Size="Size.Large" Color="Color.Error" />
        <MudText Typo="Typo.h5" Class="mt-2">پکیج یافت نشد</MudText>
        <MudText Typo="Typo.body2" Class="mud-text-secondary">پکیج مورد نظر وجود ندارد یا حذف شده است.</MudText>
        <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="mt-4" OnClick="() => Navigation.NavigateTo(RouteConstants.Main.MainPage)">
            بازگشت به صفحه اصلی
        </MudButton>
    </MudStack>
}
else
{
    <!-- Breadcrumb -->
    <MudContainer MaxWidth="MaxWidth.Large" Class="py-4">
        <MudBreadcrumbs Items="_breadcrumbItems" />
    </MudContainer>

    <!-- Package Details -->
    <MudContainer MaxWidth="MaxWidth.Large" Class="pb-8">
        <MudGrid Spacing="4">
            <!-- Sidebar (Mobile First) -->
            <MudItem xs="12" lg="4" Class="order-1 order-lg-2">
                <MudPaper Elevation="2" Class="pa-6 rounded-2xl mud-theme-surface sticky-top">
                    <MudStack Class="mb-4">
                        <!-- Package Image -->
                        <MudPaper Class="pa-2 rounded-xl" Style="background: radial-gradient(600px 280px at 120% 0, #daccff 0, transparent 60%), radial-gradient(600px 280px at -10% 100%, #ffe2f2 0, transparent 60%), linear-gradient(180deg, #fff, #fbfaff);">
                            <MudImage Src="@_package.Image"
                                      Alt="@_package.Title"
                                      Height="250"
                                      ObjectFit="ObjectFit.Cover"
                                      ObjectPosition="ObjectPosition.Center"
                                      Style="width:100%"
                                      Class="rounded-xl" />
                        </MudPaper>

                        <MudText Typo="Typo.h4" Class="px-2">@(_package.Title)</MudText>
                    </MudStack>


                    <!-- Pricing -->
                    <MudStack Spacing="3">
                        @if (_package.Pricing.HasDiscount)
                        {
                            <div>
                                <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                    <MudText Typo="Typo.h5" Class="text-decoration-line-through mud-text-secondary">@_package.Pricing.OriginalPrice.ToThousands().ToCurrencyUnitIRT()</MudText>
                                    <MudChip T="string" Color="Color.Error" Variant="Variant.Filled" Size="Size.Small">@_package.Pricing.DiscountPercent% تخفیف</MudChip>
                                </MudStack>
                                <MudText Typo="Typo.h4" Color="Color.Success" Class="fw-700">@_package.Pricing.FinalPrice.ToThousands().ToCurrencyUnitIRT()</MudText>
                            </div>
                        }
                        else
                        {
                            <MudText Typo="Typo.h4" Color="Color.Primary" Class="fw-700">@_package.Pricing.FinalPrice.ToThousands().ToCurrencyUnitIRT()</MudText>
                        }

                        <!-- Purchase Button -->
                        <MudButton Variant="Variant.Filled"
                                   Color="Color.Primary"
                                   FullWidth="true"
                                   Size="Size.Large"
                                   OnClick="PurchasePackage"
                                   Disabled="_isPurchasing">
                            @(_isPurchasing ? "در حال پردازش..." : "خرید پکیج")
                        </MudButton>

                        <!-- Package Features -->
                        <div>
                            <MudText Typo="Typo.subtitle2" Class="mb-2 fw-600">شامل:</MudText>
                            <MudStack Spacing="1">
                                @foreach (var feature in _package.Features)
                                {
                                    <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Start">
                                        <MudIcon Icon="@Icons.Material.Filled.Check" Size="Size.Small" Color="Color.Success" Class="mt-1" />
                                        <MudText Typo="Typo.body2">@feature</MudText>
                                        </MudStack>
                                }
                            </MudStack>
                        </div>

                        <!-- Support Info -->
                        <MudDivider Class="my-2" />
                        <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                            <MudIcon Icon="@Icons.Material.Filled.Support" Size="Size.Small" Color="Color.Info" />
                            <MudText Typo="Typo.body2">پشتیبانی ۲۴ ساعته</MudText>
                        </MudStack>
                    </MudStack>
                </MudPaper>
            </MudItem>

            <!-- Main Content -->
            <MudItem xs="12" lg="8" Class="order-2 order-lg-1">
                <MudPaper Elevation="2" Class="pa-6 rounded-2xl mud-theme-surface">
                    <!-- Package Header -->
                    <MudStack Spacing="4">

                        <!-- Package Description -->
                        <div>
                            <MudText Typo="Typo.h6" Class="mb-3 mud-typography-subtitle1">توضیحات پکیج</MudText>
                            @((MarkupString)_package.Body)
                        </div>

                        <!-- Package Specifications -->
                        <div>
                            <MudText Typo="Typo.h6" Class="mb-3 mud-typography-subtitle1">مشخصات پکیج</MudText>
                            <MudGrid Spacing="2">
                                @foreach (var spec in _package.Specifications)
                                {
                                    <MudItem xs="12" sm="6">
                                        <MudPaper Outlined="true" Class="pa-3 rounded-lg">
                                            <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                                <MudIcon Icon="@spec.Icon" Size="Size.Small" Color="Color.Primary" />
                                                <div>
                                                    <MudText Typo="Typo.body2" Class="fw-600">@spec.Name</MudText>
                                                        <MudText Typo="Typo.caption" Class="mud-text-secondary">@spec.Value</MudText>
                                                    </div>
                                                </MudStack>
                                            </MudPaper>
                                        </MudItem>
                                }
                            </MudGrid>
                        </div>
                    </MudStack>
                </MudPaper>

                <!-- Reviews Section -->
                <MudPaper Elevation="2" Class="pa-6 rounded-2xl mud-theme-surface mt-4">                    

                    <!-- Comment Submission Form (only for authenticated users) -->
                    @if (_isAuthenticated)
                    {
                        <MudPaper Outlined="true" Class="pa-4 rounded-lg mb-4">
                            <MudStack Row="true" AlignItems="AlignItems.Center">
                                <MudText Typo="Typo.subtitle1" Class="mb-3 fw-600">نظر خود را ثبت کنید</MudText>
                                <MudSpacer />
                                <MudRating @bind-Value="_newComment.Rating" Size="Size.Medium" />
                            </MudStack>
                            <MudStack Spacing="3">
                                <MudTextField @bind-Value="_newComment.Comment"
                                              Label="نظر شما"
                                              Variant="Variant.Outlined"
                                              Lines="3"
                                              Placeholder="نظر خود را درباره این پکیج بنویسید..." />
                                <MudStack AlignItems="AlignItems.Start">
                                    <MudButton Variant="Variant.Filled"
                                               Color="Color.Primary"
                                               OnClick="SubmitComment"
                                               Disabled="_isSubmittingComment"
                                               StartIcon="@Icons.Material.Filled.Send">
                                        @(_isSubmittingComment ? "در حال ارسال..." : "ارسال نظر")
                                    </MudButton>
                                </MudStack>
                            </MudStack>
                        </MudPaper>
                    }
                    else
                    {
                        <MudPaper Outlined="true" Class="pa-4 rounded-lg mb-4">
                            <MudStack AlignItems="AlignItems.Center" Spacing="2">
                                <MudIcon Icon="@Icons.Material.Filled.Lock" Size="Size.Medium" Color="Color.Default" />
                                <MudText Typo="Typo.body2" Class="mud-text-secondary">
                                    برای ثبت نظر ابتدا
                                    <MudLink Href="javascript:void(0)" OnClick="() => Navigation.NavigateTo(RouteConstants.Auth.Phone)" Class="text-primary">وارد حساب کاربری</MudLink>
                                    شوید.
                                </MudText>
                            </MudStack>
                        </MudPaper>
                    }
                    <MudText Typo="Typo.h6" Class="my-4 mud-typography-subtitle1">نظرات کاربران</MudText>
                    <!-- Reviews List -->
                    @if (_reviews.Any())
                    {
                        <MudStack Spacing="3">
                            @foreach (var review in _reviews)
                            {
                                <MudPaper Outlined="true" Class="pa-4 rounded-lg">
                                    <MudStack Spacing="2">
                                        <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                            <MudAvatar Size="Size.Small">
                                                <MudIcon Icon="@Icons.Material.Filled.Person" Size="Size.Small" />
                                            </MudAvatar>
                                            <div>
                                                <MudText Typo="Typo.body2" Class="fw-600">@(review.UserName)</MudText>
                                                <MudRating ReadOnly="true" Value="review.Rating" Size="Size.Small" />
                                            </div>
                                            <MudSpacer />
                                            <MudText Typo="Typo.caption" Class="mud-text-secondary">@(review.Date)</MudText>
                                        </MudStack>
                                        <MudText Typo="Typo.body2">@(review.Comment)</MudText>
                                    </MudStack>
                                </MudPaper>
                            }
                        </MudStack>
                    }
                    else
                    {
                        <MudStack AlignItems="AlignItems.Center" Class="py-8">
                            <MudIcon Icon="@Icons.Material.Filled.Chat" Size="Size.Large" Color="Color.Default" />
                            <MudText Typo="Typo.body2" Class="mud-text-secondary mt-2">هنوز نظری ثبت نشده است.</MudText>
                        </MudStack>
                    }
                </MudPaper>
            </MudItem>
        </MudGrid>
    </MudContainer>

    <!-- Related Packages -->
    @if (_relatedPackages.Any())
    {
        <section class="py-8 bg-grey-50">
            <MudContainer MaxWidth="MaxWidth.Large">
                <MudText Typo="Typo.h5" Align="Align.Center" Class="mb-6 mud-typography-subtitle1">پکیج‌های پیشنهادی</MudText>
                <MudGrid Spacing="3" Justify="Justify.Center">
                    @foreach (var relatedPackage in _relatedPackages)
                    {
                        <MudItem xs="12" md="4">
                            <MudPaper Elevation="2" Class="pa-4 rounded-2xl d-flex flex-column h-100 cursor-pointer"
                                      OnClick="() => NavigateToPackage(relatedPackage.Id)">
                                <MudImage Src="@relatedPackage.Image"
                                          Alt="@relatedPackage.Title"
                                          Height="200"
                                          ObjectFit="ObjectFit.Cover"
                                          Class="rounded-xl mb-3" />
                                <MudText Typo="Typo.h6" Class="mb-2">@relatedPackage.Title</MudText>
                                    <MudText Typo="Typo.body2" Class="mud-text-secondary mb-3 line-clamp-2">@relatedPackage.ShortDescription</MudText>
                                    <MudSpacer />
                                    <MudText Typo="Typo.h6" Color="Color.Primary">@relatedPackage.Pricing.FinalPrice.ToString("N0") تومان</MudText>
                            </MudPaper>
                        </MudItem>
                    }
                </MudGrid>
            </MudContainer>
        </section>
    }
}