import { Head, Link } from '@inertiajs/react';
import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils';

type LegalDocument = {
    title: string;
    body: string;
    updated_at: string | null;
};

type LegalDocumentLink = {
    key: string;
    title: string;
    href: string;
};

type Props = {
    document: LegalDocument;
    links: LegalDocumentLink[];
};

function formatUpdatedAt(value: string | null) {
    if (!value) {
        return null;
    }

    return new Intl.DateTimeFormat('es', {
        day: 'numeric',
        month: 'long',
        year: 'numeric',
    }).format(new Date(value));
}

export default function LegalDocumentShow({ document, links }: Props) {
    const updatedAt = formatUpdatedAt(document.updated_at);

    return (
        <>
            <Head title={document.title} />

            <div className="space-y-8">
                <header className="space-y-3">
                    <p className="text-sm font-medium text-primary">
                        Documento legal
                    </p>
                    <h1 className="text-3xl font-semibold tracking-tight">
                        {document.title}
                    </h1>
                    {updatedAt ? (
                        <p className="text-sm text-muted-foreground">
                            Última actualización: {updatedAt}
                        </p>
                    ) : null}
                </header>

                <Card>
                    <CardContent className="pt-6">
                        <article
                            className="text-sm leading-7 text-foreground [&_a]:text-primary [&_a]:underline [&_blockquote]:my-4 [&_blockquote]:border-l-4 [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground [&_h2]:mt-8 [&_h2]:mb-3 [&_h2]:text-2xl [&_h2]:font-semibold [&_h3]:mt-6 [&_h3]:mb-2 [&_h3]:text-xl [&_h3]:font-semibold [&_li]:ml-6 [&_ol]:my-3 [&_ol]:list-decimal [&_p]:my-3 [&_ul]:my-3 [&_ul]:list-disc"
                            dangerouslySetInnerHTML={{ __html: document.body }}
                        />
                    </CardContent>
                </Card>

                <nav
                    className="flex flex-wrap gap-3 text-sm"
                    aria-label="Documentos legales"
                >
                    {links.map((link) => (
                        <Link
                            key={link.key}
                            href={link.href}
                            className={cn(
                                'rounded-full border px-4 py-2 transition-colors',
                                link.title === document.title
                                    ? 'border-primary bg-primary/10 text-foreground'
                                    : 'border-border text-muted-foreground hover:bg-muted hover:text-foreground',
                            )}
                        >
                            {link.title}
                        </Link>
                    ))}
                </nav>
            </div>
        </>
    );
}
