@page
@using NodaTime.Serialization.Protobuf
@model AboutModel

@{
    Layout = "_LayoutContained";

    var pageTitle = "About";
    var pageDescription = "Information page.";
    var ogType = "website";
    string? ogImageUrl = null;
    var canonicalUrl = $"{Request.Scheme}://{Request.Host}{Request.Path}{Request.QueryString}";
    var siteName = Model.Site?.Name ?? "Solar Network";

    if (Model.UserAccount != null)
    {
        pageTitle = $"About {Model.UserAccount.Nick ?? Model.UserAccount.Name}";
        if (!string.IsNullOrWhiteSpace(Model.UserAccount.Profile?.Bio))
        {
            pageDescription = Model.UserAccount.Profile.Bio;
        }
        else
        {
            pageDescription = $"Profile of {Model.UserAccount.Nick ?? Model.UserAccount.Name} on {siteName}";
        }
        
        ogType = "profile";
        ogImageUrl = Model.UserPictureUrl;
        if(!string.IsNullOrEmpty(ogImageUrl) && !ogImageUrl.StartsWith("http"))
        {
            ogImageUrl = $"{Request.Scheme}://{Request.Host}{ogImageUrl}";
        }
    }
    else if (Model.Site != null)
    {
        pageTitle = $"About {Model.Site.Name}";
        if(!string.IsNullOrWhiteSpace(Model.Site.Description))
        {
            pageDescription = Model.Site.Description;
        }
        ogType = "website";
        ogImageUrl = null;
    }

    if (!string.IsNullOrWhiteSpace(pageDescription) && pageDescription.Length > 160)
    {
        pageDescription = pageDescription.Substring(0, 157) + "...";
    }
}

@section Head {
    <title>@pageTitle - @siteName</title>
    <meta name="description" content="@pageDescription" />
    <link rel="canonical" href="@canonicalUrl" />

    <meta property="og:title" content="@pageTitle" />
    <meta property="og:description" content="@pageDescription" />
    <meta property="og:type" content="@ogType" />
    <meta property="og:url" content="@canonicalUrl" />
    @if (!string.IsNullOrEmpty(ogImageUrl))
    {
        <meta property="og:image" content="@ogImageUrl" />
    }
    <meta property="og:site_name" content="@siteName" />

    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="@pageTitle" />
    <meta name="twitter:description" content="@pageDescription" />
    @if (!string.IsNullOrEmpty(ogImageUrl))
    {
        <meta name="twitter:image" content="@ogImageUrl" />
    }
}


@if (Model.UserAccount != null)
{
    @if (!string.IsNullOrEmpty(Model.UserBackgroundUrl))
    {
        <img src="@Model.UserBackgroundUrl" class="w-full max-h-48 object-cover mb-8" alt="Background Image"/>
    }

    <div class="container mx-auto px-8 pb-8">
        <h2 class="text-xl flex gap-2 mb-5 px-3">
            <span class="mdi mdi-account-circle"></span>
            About me
        </h2>

        <div class="flex items-center gap-6 mb-8">
            @if (!string.IsNullOrEmpty(Model.UserPictureUrl))
            {
                <img src="@Model.UserPictureUrl" class="w-20 h-20 rounded-full object-cover" alt="Avatar"/>
            }
            else
            {
                <div class="w-20 h-20 rounded-full bg-gray-300 flex items-center justify-center">
                    <span class="text-2xl">@(Model.UserAccount.Name != null ? Model.UserAccount.Name[0] : '?')</span>
                </div>
            }
            <div>
                <div class="text-2xl font-bold">
                    @(Model.UserAccount.Nick ?? Model.UserAccount.Name)
                </div>
                <div class="text-body-2 text-base-content/60">@@@Model.UserAccount.Name</div>
            </div>
        </div>

        <div class="flex flex-col md:flex-row gap-6">
            <div class="flex flex-col gap-4 flex-1">
                <div class="card bg-base-100 border">
                    <div class="card-body">
                        <h3 class="card-title"><span class="mdi mdi-home"></span> Info</h3>

                        <div class="space-y-2">
                            @if (!string.IsNullOrEmpty(Model.UserAccount.Profile?.TimeZone))
                            {
                                <div class="flex justify-between">
                                    <span class="flex gap-2">
                                        <span class="mdi mdi-map-clock"></span>
                                        Time Zone
                                    </span>
                                    <span class="text-right">
                                        @Model.GetCurrentTimeInTimeZone(Model.UserAccount.Profile.TimeZone)
                                        <span class="text-base-content/50">·</span>
                                        @Model.GetOffsetUtcString(Model.UserAccount.Profile.TimeZone)
                                        <span class="text-base-content/50">·</span>
                                        @Model.UserAccount.Profile.TimeZone
                                    </span>
                                </div>
                            }
                            @if (!string.IsNullOrEmpty(Model.UserAccount.Profile?.Location))
                            {
                                <div class="flex justify-between">
                                    <span class="flex gap-2">
                                        <span class="mdi mdi-map-marker"></span> Location
                                    </span>
                                    <span>@Model.UserAccount.Profile.Location</span>
                                </div>
                            }
                            @if (!string.IsNullOrEmpty(Model.UserAccount.Profile?.FirstName) || !string.IsNullOrEmpty(Model.UserAccount.Profile?.LastName))
                            {
                                <div class="flex justify-between">
                                    <span class="flex gap-2">
                                        <span class="mdi mdi-card-bulleted-outline"></span> Name
                                    </span>
                                    <span>
                                        @string.Join(" ", new[]
                                        {
                                            Model.UserAccount.Profile.FirstName,
                                            Model.UserAccount.Profile.MiddleName,
                                            Model.UserAccount.Profile.LastName
                                        }.Where(s => !string.IsNullOrEmpty(s)))
                                    </span>
                                </div>
                            }
                            @if (!string.IsNullOrEmpty(Model.UserAccount.Profile?.Gender))
                            {
                                <div class="flex justify-between">
                                    <span class="flex gap-2">
                                        <span class="mdi mdi-human-non-binary"></span> Gender
                                    </span>
                                    <span>
                                        @Model.UserAccount.Profile.Gender
                                        @if (!string.IsNullOrEmpty(Model.UserAccount.Profile?.Pronouns))
                                        {
                                            <span class="text-base-content/50">·</span>
                                            @Model.UserAccount.Profile.Pronouns
                                        }
                                    </span>
                                </div>
                            }
                            <div class="flex justify-between">
                                <span class="flex gap-2">
                                    <span class="mdi mdi-history"></span> Joined at
                                </span>
                                <span>
                                    @Model.UserAccount.CreatedAt?.ToDateTimeOffset().ToString("MMMM d, yyyy")
                                </span>
                            </div>
                            @if (Model.UserAccount.Profile?.Birthday != null)
                            {
                                <div class="flex justify-between">
                                    <span class="flex gap-2">
                                        <span class="mdi mdi-cake-variant"></span> Birthday
                                    </span>
                                    <span>
                                        @Model.CalculateAge(Model.UserAccount.Profile.Birthday.ToInstant()) yrs old
                                        <span class="text-base-content/50">·</span>
                                        @Model.UserAccount.Profile.Birthday?.ToDateTimeOffset().ToString("MMMM d")
                                    </span>
                                </div>
                            }
                        </div>
                    </div>
                </div>

                @if (Model.UserAccount.PerkSubscription != null)
                {
                    <div class="card bg-base-100 border">
                        <div class="card-body">
                            <div class="flex justify-between items-center">
                                <div class="flex flex-col">
                                    <div class="text-xl font-bold">
                                        @Model.GetPerkInfo(Model.UserAccount.PerkSubscription.Identifier).Name Tier
                                    </div>
                                    <div class="text-sm text-base-content/70">Stellar Program Member</div>
                                </div>
                                <div class="text-4xl"
                                     style="color: @Model.GetPerkInfo(Model.UserAccount.PerkSubscription.Identifier).Color">
                                    ★
                                </div>
                            </div>
                        </div>
                    </div>
                }

                <div class="card bg-base-100 border">
                    <div class="card-body">
                        <div class="flex justify-between mb-2">
                            <div>Level @Model.UserAccount.Profile?.Level</div>
                            <div>@Model.UserAccount.Profile?.Experience XP</div>
                        </div>
                        <progress class="progress progress-success"
                                  value="@(Model.UserAccount.Profile?.LevelingProgress ?? 0)" max="1"></progress>
                    </div>
                </div>
            </div>

            <div class="flex flex-col gap-4 flex-1">
                @if (Model.UserAccount.Profile?.Links.Count > 0)
                {
                    <div>
                        <div class="card bg-base-100 border">
                            <div class="card-body">
                                <h3 class="card-title">
                                    <span class="mdi mdi-link-variant"></span> Links
                                </h3>
                                <ul class="list pt-2">
                                    @foreach (var link in Model.UserAccount.Profile.Links)
                                    {
                                        <li class="list-row p-0">
                                            <div class="list-col-grow">
                                                <div>@(link.Name)</div>
                                                <div class="text-xs font-semibold opacity-60">@(link.Url)</div>
                                            </div>
                                            <a class="btn btn-square btn-ghost" href="@link.Url" target="_blank">
                                                <span class="mdi mdi-launch"></span>
                                            </a>
                                        </li>
                                    }
                                </ul>
                            </div>
                        </div>
                    </div>
                }

                @if (Model.UserAccount.Contacts.Count > 0)
                {
                    <div>
                        <div class="card bg-base-100 border">
                            <div class="card-body">
                                <h3 class="card-title">
                                    <span class="mdi mdi-contacts"></span> Contacts
                                </h3>
                                <ul class="list pt-2">
                                    @foreach (var contact in Model.UserAccount.Contacts)
                                    {
                                        <li class="list-row p-0" x-data="{ content: '@contact.Content' }">
                                            <div class="list-col-grow">
                                                <div>@(contact.Content)</div>
                                                <div
                                                    class="text-xs font-semibold opacity-60">@(contact.Type.ToString())</div>
                                            </div>
                                            <button class="btn btn-square btn-ghost" x-clipboard="content">
                                                <span class="mdi mdi-content-copy"></span>
                                            </button>
                                        </li>
                                    }
                                </ul>
                            </div>
                        </div>
                    </div>
                }

                @if (!string.IsNullOrEmpty(Model.HtmlBio))
                {
                    <div>
                        <div class="card bg-base-100 border">
                            <div class="card-body">
                                <h3 class="card-title">
                                    <span class="mdi mdi-information"></span> Bio
                                </h3>
                                <div class="prose prose-sm max-w-none">
                                    @Html.Raw(Model.HtmlBio)
                                </div>
                            </div>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
}

@if (Model.Site != null)
{
    <div class="container mx-auto px-8 pb-8">
        <h2 class="text-xl flex gap-2 mb-5 px-3">
            <span class="mdi mdi-sitemap"></span>
            About the site
        </h2>

        <div class="flex flex-col md:flex-row gap-6">
            <div class="flex flex-col gap-4 flex-1">
                <div class="card bg-base-100 border">
                    <div class="card-body">
                        <h3 class="card-title"><span class="mdi mdi-home"></span> Info</h3>

                        <div class="space-y-2">
                            <div class="flex justify-between">
                                <span class="flex gap-2">
                                    <span class="mdi mdi-label"></span>
                                    Name
                                </span>
                                <span class="text-right">@Model.Site.Name</span>
                            </div>
                        </div>
                        <div class="space-y-2">
                            <div class="flex justify-between">
                                <span class="flex gap-2">
                                    <span class="mdi mdi-tag"></span>
                                    Slug 
                                </span>
                                <span class="text-right font-mono">@Model.Site.Slug</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col gap-4 flex-1">
                @if (!string.IsNullOrEmpty(Model.Site.Description))
                {
                    <div class="flex-1">
                        <div class="card bg-base-100 border">
                            <div class="card-body">
                                <h3 class="card-title">
                                    <span class="mdi mdi-information"></span> Description
                                </h3>
                                <div class="prose prose-sm max-w-none">
                                    @Model.Site.Description
                                </div>
                            </div>
                        </div>
                    </div>
                }

                <div class="flex-1">
                    <div class="flex flex-col p-5 opacity-80 text-sm">
                        <p>Proudly powered by the Solar Network Pages</p>
                        <p>Hosted on the Solar Network</p>
                        <p class="mt-2">Networking with Cloudflare</p>
                        <p>Therefore, if the site is down, 99% is Cloudflare's fault</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
}