@attribute [Route(RouteConstants.Profile.Index)]
@inject ISnackbar Snackbar

<PageTitle>پروفایل کاربری</PageTitle>

<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
    <MudGrid Spacing="4">

        @* ═══════════════════════════════════════════════
           1. PROFILE HEADER — Modern gradient card
           ═══════════════════════════════════════════════ *@
        <MudItem xs="12">
            <MudPaper Elevation="0" Class="dash-header-card pa-5 pa-md-6 rounded-xl">
                <MudStack Row="true" Spacing="3" AlignItems="AlignItems.Center" Class="flex-wrap">
                    <MudAvatar Size="Size.Large" Class="dash-avatar">
                        <MudIcon Icon="@Icons.Material.Filled.Person" Size="Size.Large" />
                    </MudAvatar>
                    <MudStack Spacing="0" Class="flex-grow-1">
                        <MudText Typo="Typo.h5" Class="dash-hero-name">
                            @($"{_userProfile.FirstName} {_userProfile.LastName}")
                        </MudText>
                        <MudText Typo="Typo.body2" Class="dash-hero-sub">
                            @(_userProfile.Mobile)
                        </MudText>
                        <MudText Typo="Typo.caption" Class="dash-hero-hint">
                            عضو از @(_userProfile.MobileVerifiedAt?.ToDateTime().MiladiToJalali())
                        </MudText>
                    </MudStack>
                    <MudButton Variant="Variant.Filled"
                               Class="rounded-pill dash-hero-btn"
                               Href="https://dayadiamond.ir/"
                               StartIcon="@Icons.Material.Filled.Diamond">
                        سامانه دایا
                    </MudButton>
                </MudStack>
            </MudPaper>
        </MudItem>

        @* ═══════════════════════════════════════════════
           2. WALLET STRIP — Compact inline stats
           ═══════════════════════════════════════════════ *@
        <MudItem xs="12">
            <MudPaper Elevation="1" Class="pa-2 pa-md-4 rounded-xl">
                <MudStack Row="true" Justify="Justify.SpaceAround" AlignItems="AlignItems.Center" Class="flex-wrap wallet-strip">
                    <div class="wallet-strip-item">
                        <div class="wallet-strip-label">
                            <MudIcon Icon="@Icons.Material.Outlined.CreditCard" Size="Size.Small" Color="Color.Primary" />
                            <MudText Typo="Typo.caption" Class="mud-text-secondary">اصلی</MudText>
                        </div>
                        <MudText Typo="Typo.subtitle2" Color="Color.Primary">@_walletCredit</MudText>
                    </div>
                    <MudDivider Vertical="true" FlexItem="true" Class="d-none d-sm-flex" />
                    <div class="wallet-strip-item">
                        <div class="wallet-strip-label">
                            <MudIcon Icon="@Icons.Material.Outlined.Discount" Size="Size.Small" Color="Color.Success" />
                            <MudText Typo="Typo.caption" Class="mud-text-secondary">کیف اعتباری</MudText>
                        </div>
                        <MudText Typo="Typo.subtitle2" Color="Color.Success">@_walletDiscount</MudText>
                    </div>
                    <MudDivider Vertical="true" FlexItem="true" Class="d-none d-sm-flex" />
                    <div class="wallet-strip-item">
                        <div class="wallet-strip-label">
                            <MudIcon Icon="@Icons.Material.Outlined.Groups" Size="Size.Small" Color="Color.Warning" />
                            <MudText Typo="Typo.caption" Class="mud-text-secondary">پاداش تیمی</MudText>
                        </div>
                        <MudText Typo="Typo.subtitle2" Color="Color.Warning">@_walletNetwork</MudText>
                    </div>
                    <MudDivider Vertical="true" FlexItem="true" Class="d-none d-sm-flex" />
                    <MudButton Variant="Variant.Text" Color="Color.Primary" Size="Size.Small"
                               Href="@RouteConstants.Profile.Wallet" EndIcon="@Icons.Material.Filled.ArrowBack">
                        کیف پول
                    </MudButton>
                </MudStack>
            </MudPaper>
        </MudItem>

        @* ═══════════════════════════════════════════════
           3. REFERRAL SECTION
           ═══════════════════════════════════════════════ *@
        <MudItem xs="12">
            @if (CanShowReferralLink)
            {
                <MudPaper Elevation="1" Class="pa-5 rounded-xl">
                    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Class="mb-3">
                        <MudIcon Icon="@Icons.Material.Filled.Share" Color="Color.Primary" />
                        <MudText Typo="Typo.h6">کد دعوت شما</MudText>
                        <MudSpacer />
                        <MudButton Variant="Variant.Filled"
                                   Color="Color.Primary"
                                   Size="Size.Small"
                                   Class="rounded-pill"
                                   StartIcon="@Icons.Material.Filled.Share"
                                   OnClick="ShareReferralCode">
                            اشتراک‌گذاری
                        </MudButton>
                    </MudStack>
                    <MudText Typo="Typo.body2" Class="mud-text-secondary mb-3">
                        این کد را با دوستان خود به اشتراک بگذارید تا از خریدهای آنها پاداش دریافت کنید.
                    </MudText>
                    <MudTextField @bind-Value="_userProfile.ReferralCode"
                                  Label="کد دعوت"
                                  Variant="Variant.Outlined"
                                  ReadOnly="true"
                                  Adornment="Adornment.End"
                                  AdornmentIcon="@Icons.Material.Filled.ContentCopy"
                                  OnAdornmentClick="CopyReferralCode"
                                  Class="rounded-lg" />
                    @if (!string.IsNullOrWhiteSpace(_copyMessage))
                    {
                        <MudText Typo="Typo.caption" Color="Color.Success" Class="mt-2">@(_copyMessage)</MudText>
                    }
                </MudPaper>
            }
            else
            {
                <MudPaper Elevation="0" Class="pa-6 rounded-xl text-center" Style="border:2px dashed var(--mud-palette-primary); background:rgba(99,102,241,.04);">
                    <MudIcon Icon="@Icons.Material.Filled.Lock" Size="Size.Large" Color="Color.Primary" Class="mb-2" Style="font-size:2.5rem;" />
                    <MudText Typo="Typo.h6" Color="Color.Primary" Class="mb-2">
                        لینک دعوت شما هنوز فعال نشده است
                    </MudText>
                    <MudText Typo="Typo.body2" Class="mud-text-secondary mb-1" Style="max-width:560px; margin:0 auto;">
                        برای فعال‌سازی لینک دعوت، ابتدا یکی از <strong>پکیج‌ها</strong> را تهیه کنید و سپس در <strong>باشگاه مشتریان</strong> عضو شوید.
                    </MudText>
                    <MudText Typo="Typo.body2" Class="mud-text-secondary mb-4" Style="max-width:560px; margin:0 auto;">
                        از مزایای ویژه عضویت بهره‌مند شده و با فعالیت در زمینه توسعه فروشگاه‌ها پاداش دریافت کنید.
                    </MudText>
                    <MudButton Variant="Variant.Filled"
                               Color="Color.Primary"
                               Size="Size.Large"
                               Class="rounded-pill"
                               StartIcon="@Icons.Material.Filled.ShoppingCart"
                               OnClick="OpenPurchaseOptions">
                        تهیه پکیج
                    </MudButton>
                </MudPaper>
            }
        </MudItem>

        @* ═══════════════════════════════════════════════
           3.5 LATEST BLOG BANNER
           ═══════════════════════════════════════════════ *@
        @if (_latestPost is not null)
        {
            <MudItem xs="12">
                <MudLink Href="@($"/blog/{_latestPost.Slug}")" Underline="Underline.None">
                    <MudPaper Elevation="1" Class="rounded-xl dash-blog-banner overflow-hidden">
                        <MudStack Row="true" AlignItems="AlignItems.Center" Class="pa-2" Spacing="2">
                            @if (!string.IsNullOrWhiteSpace(_latestPost.ThumbnailUrl))
                            {
                                <div style="width:72px;height:72px;min-width:72px;border-radius:10px;overflow:hidden;">
                                    <AppImage Path="@_latestPost.ThumbnailUrl" Alt="@_latestPost.Title"
                                              ObjectFit="ObjectFit.Cover" Style="width:100%;height:100%;" />
                                </div>
                            }
                            else
                            {
                                <MudAvatar Rounded="true" Size="Size.Large" Color="Color.Primary" Variant="Variant.Outlined">
                                    <MudIcon Icon="@Icons.Material.Outlined.Article" />
                                </MudAvatar>
                            }
                            <MudStack Spacing="0" Class="flex-grow-1" Style="min-width:0;">
                                <MudText Typo="Typo.caption" Color="Color.Primary" Style="font-size:0.7rem;">جدیدترین مطلب</MudText>
                                <MudText Typo="Typo.body2" Class="dash-blog-title" Style="font-size:0.85rem;">@_latestPost.Title</MudText>
                            </MudStack>
                            <MudIcon Icon="@Icons.Material.Filled.ArrowBack" Color="Color.Primary" Size="Size.Small" />
                        </MudStack>
                    </MudPaper>
                </MudLink>
            </MudItem>
        }

        @* ═══════════════════════════════════════════════
           4. QUICK ACCESS TILES — Modern grid
           ═══════════════════════════════════════════════ *@
        <MudItem xs="12">
            <MudText Typo="Typo.h6" Class="mb-3">دسترسی سریع</MudText>
            <MudGrid Spacing="3" Justify="Justify.Center">
                @foreach (var tile in _dashTiles)
                {
                    <MudItem xs="6" sm="4" md="3">
                        <MudLink Href="@tile.Href" Underline="Underline.None" Class="tile-link">
                            <MudPaper Elevation="0" Class="pa-4 rounded-xl dash-tile text-center">
                                <MudAvatar Size="Size.Medium" Class="mx-auto mb-2" Style="@tile.AvatarStyle">
                                    <MudIcon Icon="@tile.Icon" Size="Size.Medium" />
                                </MudAvatar>
                                <MudText Typo="Typo.subtitle2">@tile.Title</MudText>
                                <MudText Typo="Typo.caption" Class="mud-text-secondary">@tile.Subtitle</MudText>
                            </MudPaper>
                        </MudLink>
                    </MudItem>
                }
            </MudGrid>
        </MudItem>

    </MudGrid>
</MudContainer>