@model Frontend.Models.MemberDetailsViewModel
@{
    ViewData["Title"] = "Member Details";
}

<div class="mb-8">
    <a asp-action="Index" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-900 mb-6 group">
        <svg class="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
        Back to Directory
    </a>
    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
        <div class="lg:col-span-1">
            <div class="aspect-square w-full rounded-2xl bg-slate-900 flex flex-col items-center justify-center text-white p-6 shadow-xl">
                <div class="text-6xl font-black mb-4 tracking-tighter">
                    @(Model.User.FullName?.Substring(0, 2).ToUpper() ?? "U")
                </div>
                <h2 class="text-xl font-bold text-center">@Model.User.FullName</h2>
                <div class="mt-2 inline-flex rounded-full px-3 py-1 text-xs font-semibold leading-5 @(Model.User.Role == "Admin" ? "bg-amber-500/20 text-amber-200" : "bg-blue-500/20 text-blue-200")">
                    @Model.User.Role
                </div>
            </div>
        </div>

        <div class="lg:col-span-2 space-y-8">
            <div>
                <h1 class="text-4xl font-extrabold text-slate-900 tracking-tight mb-2">Member Profile</h1>
                <div class="flex items-center gap-3">
                    @if (Model.User.BanStatus == true)
                    {
                        <span class="inline-flex items-center rounded-full bg-rose-100 px-3 py-1 text-xs font-semibold text-rose-800 tracking-wide uppercase">Suspended</span>
                    }
                    else if (Model.User.IsActive)
                    {
                        <span class="inline-flex items-center rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-800 tracking-wide uppercase">Active</span>
                    }
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-8 border-y border-slate-100 py-6">
                <div>
                    <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Email</h4>
                    <p class="text-sm font-semibold text-slate-900">@Model.User.Email</p>
                </div>
                <div>
                    <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Phone</h4>
                    <p class="text-sm font-semibold text-slate-900">@(string.IsNullOrEmpty(Model.User.PhoneNumber) ? "-" : Model.User.PhoneNumber)</p>
                </div>
                <div>
                    <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Student ID</h4>
                    <p class="text-sm font-semibold text-slate-900">@(string.IsNullOrEmpty(Model.User.StudentId) ? "-" : Model.User.StudentId)</p>
                </div>
                <div>
                    <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Joined</h4>
                    <p class="text-sm font-semibold text-slate-900">@Model.User.CreatedAt.ToString("MMM dd, yyyy")</p>
                </div>
                <div class="sm:col-span-2">
                    <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Address</h4>
                    <p class="text-sm font-semibold text-slate-900">@(string.IsNullOrEmpty(Model.User.Address) ? "-" : Model.User.Address)</p>
                </div>
            </div>

            <div class="flex items-center gap-4 pt-4 flex-wrap">
                <a asp-action="Edit" asp-route-id="@Model.User.Id" class="btn-primary py-3 px-8 text-base shadow-lg shadow-slate-200">Edit Details</a>
                
                <form asp-action="UpdateRole" asp-route-id="@Model.User.Id" method="POST" class="inline-block">
                    <input type="hidden" name="role" value="@(Model.User.Role == "Admin" ? "Member" : "Admin")" />
                    <button type="submit" class="btn-secondary py-3 px-8 text-base">
                        Make @(Model.User.Role == "Admin" ? "Member" : "Admin")
                    </button>
                </form>

                <form asp-action="Delete" asp-route-id="@Model.User.Id" method="POST" onsubmit="return confirm('Are you sure you want to completely remove this member? This action cannot be undone.');">
                    <button type="submit" class="p-3 text-rose-600 hover:text-rose-700 hover:bg-rose-50 rounded-xl transition-colors">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                    </button>
                </form>
            </div>
            
            <!-- Subscription Management -->
            <div class="mt-8 pt-8 border-t border-slate-100">
                <h3 class="text-2xl font-bold text-slate-900 mb-6">Manage Subscription</h3>
                
                @if (Model.CurrentSubscription != null && Model.CurrentSubscription.IsActive)
                {
                    <div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-6">
                        <div class="flex justify-between items-center">
                            <div>
                                <span class="text-sm text-green-800 font-semibold uppercase tracking-wider">Active Plan</span>
                                <h4 class="text-xl font-bold text-green-900">@Model.CurrentSubscription.MembershipType</h4>
                            </div>
                            <div class="text-right">
                                <div class="text-xs text-green-700">Expires On</div>
                                <div class="font-bold text-green-900">@Model.CurrentSubscription.ExpiryDate.ToString("MMM dd, yyyy")</div>
                            </div>
                        </div>
                    </div>
                }
                else
                {
                    <div class="bg-slate-50 border border-slate-200 rounded-xl p-4 mb-6">
                        <p class="text-slate-600 font-medium">No active subscription for this member.</p>
                    </div>
                }

                <h4 class="text-lg font-semibold text-slate-900 mb-4">Assign New Plan</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
                    @foreach (var plan in Model.AvailableMemberships)
                    {
                        var isCurrent = Model.CurrentSubscription?.IsActive == true && Model.CurrentSubscription.MembershipId == plan.Id;
                        <div class="card p-4 relative @(isCurrent ? "ring-2 ring-slate-900 border-slate-900" : "")">
                            @if (isCurrent)
                            {
                                <div class="absolute top-0 right-0 -mt-2 -mr-2 bg-slate-900 text-white text-xs font-bold px-2 py-1 rounded-md">Current</div>
                            }
                            <h5 class="font-bold text-slate-900 text-lg mb-1">@plan.Type</h5>
                            <p class="text-slate-500 font-medium text-sm mb-4">@plan.Price.ToString("N0") MMK / @plan.DurationMonths mo</p>
                            
                            @if (!isCurrent)
                            {
                                <form asp-action="AssignSubscription" method="post" onsubmit="return confirm('Assign @plan.Type plan to this member?');">
                                    <input type="hidden" name="id" value="@Model.User.Id" />
                                    <input type="hidden" name="membershipId" value="@plan.Id" />
                                    <button type="submit" class="w-full btn-secondary text-sm">Assign Plan</button>
                                </form>
                            }
                            else
                            {
                                <button disabled class="w-full btn-secondary text-sm opacity-50 cursor-not-allowed">Current Plan</button>
                            }
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</div>