import { Head, Link, usePage } from '@inertiajs/react';
import { PageHeaderActions } from '@/components/page-header-actions';
import { DocumentShowHeaderActions } from '@/features/documents/components/document-show-header-actions';
import { useDocumentDetailProcessingSync } from '@/features/documents/hooks/use-document-processing-sync';
import { DocumentShowWorkspace } from '@/features/documents/components/document-show-workspace';
import { buildDocumentShowTitle } from '@/features/documents/lib/document-show-title';
import type { DocumentShowPageProps } from '@/features/documents/types';
import { useI18n } from '@/hooks/use-i18n';
import { formatDateTimeRo } from '@/lib/datetime';

export default function AdminDocumentShowPage() {
    const { document } = usePage<DocumentShowPageProps>().props;
    const { t } = useI18n();

    useDocumentDetailProcessingSync(document.ai_status);

    const fileName =
        document.file.original_filename?.trim() || t('documents.admin_show.page.unnamed_file');
    const pageTitle = buildDocumentShowTitle(document, fileName);
    const description = (
        <>
            <Link
                href={`/admin/clients/${document.client.id}`}
                className="font-medium text-primary hover:underline"
            >
                {document.client.name}
            </Link>
            {t('documents.admin_show.page.subtitle_after_client', {
                created_at: formatDateTimeRo(document.created_at),
            })}
        </>
    );

    return (
        <>
            <Head title={pageTitle} />

            <section className="w-full space-y-6">
                <PageHeaderActions
                    title={pageTitle}
                    description={description}
                    actions={<DocumentShowHeaderActions document={document} />}
                />

                <DocumentShowWorkspace document={document} />
            </section>
        </>
    );
}
