@page "/p/{slug}"
@using NodaTime
@model DysonNetwork.Zone.Pages.Posts.DetailsModel
@{
    Layout = "_LayoutContained";
    
    var post = Model.Post;
    var pageTitle = post?.Title ?? "Post";
    var pageDescription = post?.Description; 
    string? ogImageUrl = null;
    var canonicalUrl = $"{Request.Scheme}://{Request.Host}{Request.Path}{Request.QueryString}";

    if (post != null)
    {
        if (string.IsNullOrWhiteSpace(pageDescription) && !string.IsNullOrWhiteSpace(post.Content))
        {
            var plainText = System.Text.RegularExpressions.Regex.Replace(post.Content, "<.*?>", string.Empty);
            pageDescription = plainText.Length > 160 ? plainText.Substring(0, 157) + "..." : plainText;
        }

        var imageAttachment = post.Attachments.FirstOrDefault(a => a.MimeType != null && a.MimeType.StartsWith("image"));
        if (imageAttachment != null)
        {
            ogImageUrl = $"{Request.Scheme}://{Request.Host}/drive/files/{imageAttachment.Id}";
        }
    }
}

@section Head {
    <title>@pageTitle</title>
    @if (!string.IsNullOrWhiteSpace(pageDescription))
    {
        <meta name="description" content="@pageDescription" />
        <meta property="og:description" content="@pageDescription" />
        <meta name="twitter:description" content="@pageDescription" />
    }
    <link rel="canonical" href="@canonicalUrl" />

    <meta property="og:title" content="@pageTitle" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="@canonicalUrl" />
    @if (!string.IsNullOrEmpty(ogImageUrl))
    {
        <meta property="og:image" content="@ogImageUrl" />
    }
    
    @if(post != null)
    {
        <meta property="article:published_time" content="@post.CreatedAt.ToString("o", System.Globalization.CultureInfo.InvariantCulture)" />
        @if (post.EditedAt.HasValue)
        {
            <meta property="article:modified_time" content="@post.EditedAt.Value.ToString("o", System.Globalization.CultureInfo.InvariantCulture)" />
        }

        @foreach (var tag in post.Tags)
        {
            var tagName = !string.IsNullOrEmpty(tag.Name) ? tag.Name : tag.Slug;
            if(!string.IsNullOrEmpty(tagName))
            {
                <meta property="article:tag" content="@tagName" />
            }
        }
    }

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


<div class="container max-w-4xl mx-auto px-8 py-8">
    <article>
        @if (Model.Post != null)
        {
            <section class="mb-8 mt-2 px-5">
                <h1 class="text-3xl font-bold">
                    @(Model.Post.Title ?? "Post Details")
                </h1>
                @if (!string.IsNullOrWhiteSpace(Model.Post.Description))
                {
                    <p>@Model.Post.Description</p>
                }
                
                <div class="mt-2 flex gap-3 flex-wrap text-sm text-base-content/60">
                    <div class="flex gap-1">
                        <span class="mdi mdi-history"></span>
                        <span>
                            Posted on @Model.Post.CreatedAt.ToDateTimeOffset().ToString("yyyy-MM-dd HH:mm")
                        </span>
                    </div>
                    
                    @if (Model.Post.EditedAt.HasValue)
                    {
                        <div class="flex gap-1">
                            <span class="mdi mdi-pencil"></span>
                            <span>
                                Updated on @Model.Post.EditedAt.Value.ToDateTimeOffset().ToString("yyyy-MM-dd HH:mm")
                            </span>
                        </div>
                    }
                </div>
            </section>

            <div class="w-full flex flex-col gap-5">
                <div class="card bg-base-200 shadow-md">
                    <div class="card-body flex flex-col gap-5">
                        <div class="prose max-w-none">
                            @if (!string.IsNullOrWhiteSpace(Model.Post.Description))
                            {
                                <p>@Model.Post.Description</p>
                            }
                            @Html.Raw(Model.Post.Content)
                        </div>

                        @if (Model.Post.Attachments.Any())
                        {
                            <div class="flex flex-col gap-4">
                                @foreach (var attachment in Model.Post.Attachments)
                                {
                                    <div>
                                        @if (attachment.MimeType!.StartsWith("image"))
                                        {
                                            <figure>
                                                <img src="/drive/files/@attachment.Id" alt="@attachment.Name"
                                                     class="max-w-full h-auto rounded-lg"/>
                                            </figure>
                                        }
                                        else if (attachment.MimeType!.StartsWith("video"))
                                        {
                                            <video controls src="/drive/files/@attachment.Id"
                                                   class="max-w-full h-auto rounded-lg"></video>
                                        }
                                        else if (attachment.MimeType!.StartsWith("audio"))
                                        {
                                            <audio controls src="/drive/files/@attachment.Id"
                                                   class="max-w-full h-auto rounded-lg"></audio>
                                        }
                                        else
                                        {
                                            <a href="/drive/files/@attachment.Id" target="_blank"
                                               class="text-blue-500 hover:underline">@attachment.Name</a>
                                        }
                                    </div>
                                }
                            </div>
                        }

                        @if (Model.Post.Categories.Any() || (Model.Post.Tags.Any()))
                        {
                            <div>
                                @foreach (var category in Model.Post.Categories)
                                {
                                    <span class="badge badge-primary">
                                    <span class="mdi mdi-shape"></span>
                                        @(!string.IsNullOrEmpty(category.Name) ? category.Name : category.Slug)
                                </span>
                                }
                                @foreach (var tag in Model.Post.Tags)
                                {
                                    <span class="badge badge-info">
                                    <span class="mdi mdi-tag"></span>
                                        @(!string.IsNullOrEmpty(tag.Name) ? tag.Name : tag.Slug)
                                </span>
                                }
                            </div>
                        }
                    </div>
                </div>
            </div>
        }
        else
        {
            <div class="text-center py-16">
                <p class="text-lg">Post not found.</p>
            </div>
        }
    </article>
</div>