import { Link } from '@inertiajs/react';

import { ArticleBody } from '@/components/blog/article-body';
import type { ArticleMedia } from '@/components/blog/article-body';
import { SeoHead } from '@/components/seo/seo-head';
import { PublicLayout } from '@/layouts/public-layout';

type BlogTaxonomy = {
    name: string;
    slug: string;
};

type BlogArticle = {
    id: number;
    title: string;
    slug: string;
    excerpt: string | null;
    body: string;
    content_font: 'sans' | 'serif' | 'technical';
    seo_title: string | null;
    meta_description: string | null;
    canonical_url: string;
    image_url: string | null;
    schema: Record<string, unknown>;
    category: BlogTaxonomy | null;
    author: string | null;
    published_at: string | null;
    tags: BlogTaxonomy[];
    media: ArticleMedia[];
};

type BlogShowProps = {
    article: BlogArticle;
};

export default function BlogShow({ article }: BlogShowProps) {
    const title = article.seo_title || article.title;
    const description = article.meta_description || article.excerpt;

    return (
        <PublicLayout title={title}>
            <SeoHead
                title={title}
                description={description}
                canonicalUrl={article.canonical_url}
                imageUrl={article.image_url}
                type="article"
                jsonLd={article.schema}
            />

            <article className="mx-auto max-w-4xl space-y-6">
                <div className="flex flex-wrap items-center gap-2 text-sm">
                    <Link href="/blog" className="text-primary hover:underline">
                        Blog
                    </Link>
                    {article.category ? (
                        <>
                            <span className="text-muted">/</span>
                            <Link
                                href={`/blog?category=${article.category.slug}`}
                                className="text-primary hover:underline"
                            >
                                {article.category.name}
                            </Link>
                        </>
                    ) : null}
                </div>

                <header className="space-y-3">
                    <p className="text-xs font-semibold tracking-wide text-primary uppercase">
                        {article.category?.name || 'Technical Article'}
                    </p>
                    <h1 className="text-3xl font-semibold text-main sm:text-4xl">
                        {article.title}
                    </h1>
                    <p className="text-sm text-muted">
                        {article.author || 'Parts Platform'}
                        {article.published_at
                            ? ` | ${article.published_at}`
                            : ''}
                    </p>
                    {article.excerpt ? (
                        <p className="text-lg text-main">{article.excerpt}</p>
                    ) : null}
                </header>

                <div className="rounded-2xl border border-border bg-card p-5 shadow-sm">
                    <ArticleBody
                        body={article.body}
                        media={article.media}
                        contentFont={article.content_font}
                    />
                </div>

                {article.tags.length > 0 ? (
                    <div className="flex flex-wrap gap-2">
                        {article.tags.map((tag) => (
                            <Link
                                key={tag.slug}
                                href={`/blog?tag=${tag.slug}`}
                                className="rounded-full bg-surface px-3 py-1 text-xs font-medium text-muted hover:bg-card hover:text-main"
                            >
                                {tag.name}
                            </Link>
                        ))}
                    </div>
                ) : null}
            </article>
        </PublicLayout>
    );
}