import Seo from '@/components/Seo';
import PlatformLayout from '@/Layouts/PlatformLayout';
import type { PageProps } from '@/types';
import type { ArticleDetail } from '@/types/platform';
import { Link, usePage } from '@inertiajs/react';
import {
    ArrowLeft,
    Calendar,
    Clock,
    MapPin,
    TrendingUp,
    Users,
} from 'lucide-react';

interface Props {
    article: ArticleDetail;
    backHref: string;
    backLabel: string;
}

function formatDate(iso: string | null): string | null {
    if (!iso) return null;
    return new Date(iso).toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
    });
}

const ARTICLE_TYPE_LABEL: Record<ArticleDetail['type'], string> = {
    news: 'Press',
    case_study: 'Case Study',
    tutorial: 'Tutorial',
    help_article: 'Help Centre',
};

export default function ArticleShow({ article, backHref, backLabel }: Props) {
    const { ziggy } = usePage<PageProps>().props;
    const origin = ziggy?.url ?? '';
    const canonicalUrl = ziggy?.location ?? origin;
    const publishedLabel = formatDate(article.published_at);
    const description =
        article.excerpt ||
        `Read ${article.title} on the Upepo Finance ${ARTICLE_TYPE_LABEL[article.type]} page.`;

    return (
        <PlatformLayout>
            <Seo
                title={`${article.title} — ${ARTICLE_TYPE_LABEL[article.type]}`}
                description={description}
                image={article.cover_url ?? undefined}
                type="article"
            >
                {article.published_at && (
                    <script
                        type="application/ld+json"
                        dangerouslySetInnerHTML={{
                            __html: JSON.stringify({
                                '@context': 'https://schema.org',
                                '@type':
                                    article.type === 'news'
                                        ? 'NewsArticle'
                                        : 'Article',
                                headline: article.title,
                                description,
                                image: article.cover_url
                                    ? [article.cover_url]
                                    : undefined,
                                datePublished: article.published_at,
                                author: {
                                    '@type': 'Organization',
                                    name: 'Upepo Finance',
                                },
                                publisher: {
                                    '@type': 'Organization',
                                    name: 'Upepo Finance',
                                    logo: {
                                        '@type': 'ImageObject',
                                        url: `${origin}/images/logo.png`,
                                    },
                                },
                                mainEntityOfPage: canonicalUrl,
                            }),
                        }}
                    />
                )}
            </Seo>

            <article className="pf-container pt-32 pb-24">
                <div className="mx-auto max-w-3xl">
                    <Link
                        href={backHref}
                        className="text-muted-foreground hover:text-foreground mb-8 inline-flex items-center gap-2 text-sm transition-colors"
                    >
                        <ArrowLeft className="h-3.5 w-3.5" />
                        {backLabel}
                    </Link>

                    <div className="mb-6 flex flex-wrap items-center gap-3">
                        {article.type === 'news' && article.outlet && (
                            <span className="pf-chip text-[9px]">
                                {article.outlet}
                            </span>
                        )}
                        {article.type === 'case_study' && (
                            <>
                                {article.location && (
                                    <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
                                        <MapPin className="h-3 w-3" />
                                        {article.location}
                                    </div>
                                )}
                                {article.clients && (
                                    <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
                                        <Users className="h-3 w-3" />
                                        {article.clients}
                                    </div>
                                )}
                                {article.read_time && (
                                    <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
                                        <Clock className="h-3 w-3" />
                                        {article.read_time}
                                    </div>
                                )}
                            </>
                        )}
                        {article.type === 'tutorial' && (
                            <>
                                {article.level && (
                                    <span className="pf-chip text-[9px]">
                                        {article.level}
                                    </span>
                                )}
                                {article.duration && (
                                    <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
                                        <Clock className="h-3 w-3" />
                                        {article.duration}
                                    </div>
                                )}
                            </>
                        )}
                        {article.type === 'help_article' &&
                            article.category && (
                                <span className="pf-chip text-[9px]">
                                    {article.category}
                                </span>
                            )}
                        {publishedLabel && (
                            <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
                                <Calendar className="h-3 w-3" />
                                {publishedLabel}
                            </div>
                        )}
                    </div>

                    <h1 className="pf-display text-foreground mb-4 text-3xl font-bold md:text-4xl">
                        {article.type === 'case_study' && article.company
                            ? article.company
                            : article.title}
                    </h1>

                    {article.type === 'case_study' && (
                        <p className="text-foreground mb-6 text-xl leading-snug font-semibold">
                            {article.title}
                        </p>
                    )}

                    {article.excerpt && (
                        <p className="text-muted-foreground mb-8 text-lg leading-relaxed">
                            {article.excerpt}
                        </p>
                    )}

                    {article.cover_url && (
                        <img
                            src={article.cover_url}
                            alt={article.title}
                            className="border-border mb-10 w-full rounded-2xl border object-cover"
                        />
                    )}

                    {article.type === 'case_study' &&
                        article.results &&
                        article.results.length > 0 && (
                            <div className="mb-10 grid grid-cols-1 gap-3 md:grid-cols-3">
                                {article.results.map((result) => (
                                    <div
                                        key={result}
                                        className="border-border bg-card/60 flex items-start gap-2 rounded-xl border p-3"
                                    >
                                        <TrendingUp className="text-primary mt-0.5 h-4 w-4 shrink-0" />
                                        <span className="text-foreground text-xs leading-snug font-medium">
                                            {result}
                                        </span>
                                    </div>
                                ))}
                            </div>
                        )}

                    {article.body ? (
                        <div
                            className="prose dark:prose-invert max-w-none"
                            dangerouslySetInnerHTML={{ __html: article.body }}
                        />
                    ) : (
                        <p className="text-muted-foreground text-sm italic">
                            Full content coming soon.
                        </p>
                    )}
                </div>
            </article>
        </PlatformLayout>
    );
}