import { DocumentAiStatusBadge } from '@/features/documents/components/document-ai-status-badge';
import { DocumentAccountantStatusBadge } from '@/features/documents/components/document-status-badge';
import type { DocumentDetail } from '@/features/documents/types';
import { useI18n } from '@/hooks/use-i18n';
import { formatDateTimeRo } from '@/lib/datetime';

type DocumentMetadataHeaderProps = {
    document: DocumentDetail;
};

export function DocumentMetadataHeader({ document }: DocumentMetadataHeaderProps) {
    const { t } = useI18n();

    return (
        <div className="space-y-4">
            <div className="grid gap-2 text-sm text-muted-foreground md:grid-cols-2">
                <p>
                    <span className="font-medium text-foreground">{t('documents.admin_show.metadata_header.client')}</span>{' '}
                    {document.client.name}
                </p>
                <p>
                    <span className="font-medium text-foreground">{t('documents.admin_show.metadata_header.uploaded_by')}</span>{' '}
                    {document.uploaded_by.name}
                </p>
                <p>
                    <span className="font-medium text-foreground">{t('documents.admin_show.metadata_header.file')}</span>{' '}
                    {document.file.original_filename}
                </p>
                <p>
                    <span className="font-medium text-foreground">{t('documents.admin_show.metadata_header.created_at')}</span>{' '}
                    {formatDateTimeRo(document.created_at)}
                </p>
            </div>

            <div className="flex flex-col gap-3 border-t border-border/60 pt-3">
                <div className="flex flex-wrap items-center gap-2">
                    <span className="text-xs font-medium text-muted-foreground">
                        {t('documents.admin_show.metadata_header.accountant_status')}
                    </span>
                    <DocumentAccountantStatusBadge status={document.accountant_status} />
                </div>
                <div className="flex flex-wrap items-center gap-2">
                    <span className="text-xs font-medium text-muted-foreground">
                        {t('documents.admin_show.metadata_header.ai_status')}
                    </span>
                    <DocumentAiStatusBadge status={document.ai_status} />
                    <span className="text-[11px] text-muted-foreground">
                        {t('documents.admin_show.metadata_header.ai_hint')}
                    </span>
                </div>
            </div>
        </div>
    );
}