import { Card, CardContent } from '@/components/ui/card';
import type { DocumentListItem } from '@/features/documents/types';
import { useI18n } from '@/hooks/use-i18n';

type ExpandedDocumentSummaryProps = {
    document: DocumentListItem;
};

export function ExpandedDocumentSummary({ document }: ExpandedDocumentSummaryProps) {
    const { t } = useI18n();

    if (!document.summary) {
        return (
            <div className="rounded-md border border-dashed border-border/60 px-3 py-2.5 text-start text-xs leading-snug text-muted-foreground">
                {t('documents.admin_index.expanded_summary.empty')}
            </div>
        );
    }

    return (
        <Card className="border-none bg-transparent p-0 text-start shadow-none">
            <CardContent className="grid gap-2 p-0 text-start sm:grid-cols-2 md:grid-cols-3 md:gap-x-4 md:gap-y-2.5">
                <SummaryItem label={t('documents.admin_index.expanded_summary.issuer')} value={document.summary.issuer_name} />
                <SummaryItem
                    label={t('documents.admin_index.expanded_summary.document_number')}
                    value={document.summary.document_number}
                />
                <SummaryItem label={t('documents.admin_index.expanded_summary.issue_date')} value={document.summary.issue_date} />
                <SummaryItem label={t('documents.admin_index.expanded_summary.due_date')} value={document.summary.due_date} />
                <SummaryItem label={t('documents.admin_index.expanded_summary.total')} value={document.summary.total_amount} />
                <SummaryItem label={t('documents.admin_index.expanded_summary.vat')} value={document.summary.vat_amount} />
            </CardContent>
        </Card>
    );
}

function SummaryItem({ label, value }: { label: string; value: string | null }) {
    return (
        <div className="min-w-0 space-y-0.5 text-start">
            <p className="text-[11px] font-medium leading-tight text-muted-foreground">{label}</p>
            <p className="text-xs font-semibold leading-snug text-foreground/90">{value ?? '—'}</p>
        </div>
    );
}