@using CMSMicroservice.Protobuf.Protos.UserOrder
@attribute [Route(RouteConstants.Store.OrderTracking + "{id:long}")]

<PageTitle>پیگیری سفارش</PageTitle>

<MudContainer MaxWidth="MaxWidth.Medium" Class="py-6">
    @if (_loading)
    {
        <MudStack AlignItems="AlignItems.Center">
            <MudProgressCircular Indeterminate="true" Color="Color.Primary" />
            <MudText Class="mt-2 mud-text-secondary">در حال بارگذاری...</MudText>
        </MudStack>
    }
    else if (_order is null)
    {
        <MudAlert Severity="Severity.Warning">سفارش یافت نشد.</MudAlert>
        <MudButton Variant="Variant.Text" StartIcon="@Icons.Material.Filled.ArrowBack" 
                   Href="@RouteConstants.Store.Orders">
            بازگشت به سفارش‌ها
        </MudButton>
    }
    else
    {
        <MudStack Spacing="3">
            <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                <MudText Typo="Typo.h5">پیگیری سفارش #@_order.Id</MudText>
                <MudButton Variant="Variant.Text" StartIcon="@Icons.Material.Filled.ArrowBack" 
                           Href="@(RouteConstants.Store.OrderDetail + id)">
                    جزئیات سفارش
                </MudButton>
            </MudStack>

            @* Timeline سفارش *@
            <MudPaper Elevation="2" Class="pa-4 rounded-lg">
                <MudText Typo="Typo.h6" Class="mb-4">وضعیت سفارش</MudText>
                
                <MudTimeline TimelinePosition="TimelinePosition.Start">
                    @foreach (var step in _trackingSteps)
                    {
                        <MudTimelineItem Color="@(step.IsCompleted ? Color.Success : (step.IsCurrent ? Color.Primary : Color.Default))"
                                         Variant="@(step.IsCompleted || step.IsCurrent ? Variant.Filled : Variant.Outlined)"
                                         Size="Size.Medium">
                            <ItemContent>
                                <MudStack Spacing="0">
                                    <MudText Typo="Typo.subtitle1" 
                                             Color="@(step.IsCompleted ? Color.Success : (step.IsCurrent ? Color.Primary : Color.Default))">
                                        @step.Title
                                    </MudText>
                                    <MudText Typo="Typo.caption" Class="mud-text-secondary">@step.Description</MudText>
                                    @if (!string.IsNullOrEmpty(step.Date))
                                    {
                                        <MudText Typo="Typo.caption" Class="mud-text-secondary mt-1">
                                            <MudIcon Icon="@Icons.Material.Filled.Schedule" Size="Size.Small" Class="me-1" />
                                            @step.Date
                                        </MudText>
                                    }
                                </MudStack>
                            </ItemContent>
                        </MudTimelineItem>
                    }
                </MudTimeline>
            </MudPaper>

            @* اطلاعات ارسال *@
            <MudPaper Elevation="2" Class="pa-4 rounded-lg">
                <MudText Typo="Typo.h6" Class="mb-3">اطلاعات ارسال</MudText>
                
                <MudGrid>
                    <MudItem xs="12" sm="6">
                        <MudStack Spacing="1">
                            <MudText Typo="Typo.caption" Class="mud-text-secondary">آدرس تحویل</MudText>
                            <MudText>@(_order.UserAddressText ?? "---")</MudText>
                        </MudStack>
                    </MudItem>
                    <MudItem xs="12" sm="6">
                        <MudStack Spacing="1">
                            <MudText Typo="Typo.caption" Class="mud-text-secondary">روش پرداخت</MudText>
                            <MudText>@GetPaymentMethodText(_order.PaymentMethod)</MudText>
                        </MudStack>
                    </MudItem>
                </MudGrid>
            </MudPaper>

            @* پشتیبانی *@
            <MudPaper Elevation="1" Class="pa-4 rounded-lg" Style="background-color: var(--mud-palette-background-grey);">
                <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="3">
                    <MudIcon Icon="@Icons.Material.Filled.HeadsetMic" Size="Size.Large" Color="Color.Primary" />
                    <MudStack Spacing="0">
                        <MudText Typo="Typo.subtitle1">سوالی دارید؟</MudText>
                        <MudText Typo="Typo.body2" Class="mud-text-secondary">
                            با پشتیبانی ما تماس بگیرید: ۰۲۱-۱۲۳۴۵۶۷۸
                        </MudText>
                    </MudStack>
                    <MudSpacer />
                    <MudButton Variant="Variant.Outlined" Color="Color.Primary" Href="@RouteConstants.Contact.Index">
                        تماس با ما
                    </MudButton>
                </MudStack>
            </MudPaper>
        </MudStack>
    }
</MudContainer>