import { Head, Link } from '@inertiajs/react';
import {
    AppPage,
    AppPageHeader,
    AppPageTitleBlock,
} from '@/components/app-page';
import {
    formatLegalUpdatedAt,
    LegalDocumentBody,
} from '@/components/legal-document-body';
import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils';
import { dashboard } from '@/routes';

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

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

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

export default function AccountLegal({ document, documents }: Props) {
    const updatedAt = formatLegalUpdatedAt(document.updated_at);

    return (
        <>
            <Head title={`Legal · ${document.title}`} />

            <AppPage width="narrow">
                <AppPageHeader>
                    <AppPageTitleBlock
                        title="Legal"
                        description="Consulta los documentos legales vigentes de la plataforma."
                    />
                </AppPageHeader>

                <nav
                    aria-label="Documentos legales"
                    className="flex gap-2 overflow-x-auto pb-1"
                >
                    {documents.map((link) => (
                        <Link
                            key={link.key}
                            aria-current={
                                link.key === document.key ? 'page' : undefined
                            }
                            className={cn(
                                'shrink-0 rounded-full border px-4 py-2 text-sm whitespace-nowrap transition-colors',
                                link.key === document.key
                                    ? 'border-primary bg-primary/10 text-foreground'
                                    : 'border-border text-muted-foreground hover:bg-muted hover:text-foreground',
                            )}
                            href={link.href}
                            preserveScroll
                        >
                            {link.title}
                        </Link>
                    ))}
                </nav>

                <Card>
                    <CardContent className="space-y-2 pt-6">
                        <h2 className="text-2xl font-semibold tracking-tight">
                            {document.title}
                        </h2>
                        {updatedAt ? (
                            <p className="text-sm text-muted-foreground">
                                Última actualización: {updatedAt}
                            </p>
                        ) : null}
                        <LegalDocumentBody html={document.body} />
                    </CardContent>
                </Card>
            </AppPage>
        </>
    );
}

AccountLegal.layout = {
    breadcrumbs: [
        { title: 'Inicio', href: dashboard() },
        { title: 'Legal', href: '/legal' },
    ],
};
