import { Link } from '@inertiajs/react';
import { Files, FileStack } from 'lucide-react';
import type { DocumentDetail } from '@/features/documents/types';

type SplitDocumentBannerProps = {
    document: DocumentDetail;
};

export function SplitDocumentBanner({ document }: SplitDocumentBannerProps) {
    if (document.source_document !== null) {
        return (
            <div className="rounded-md border border-info-soft bg-info-soft/40 px-3 py-2">
                <div className="flex items-start gap-2">
                    <span className="mt-0.5 shrink-0 rounded-sm bg-info-soft p-1 text-info-soft-foreground">
                        <FileStack className="h-3.5 w-3.5" />
                    </span>
                    <div className="min-w-0">
                        <p className="text-xs font-semibold uppercase tracking-wide text-info-soft-foreground">
                            Document extras din
                        </p>
                        <p className="mt-0.5 text-sm text-foreground">
                            Acest document a fost extras automat din{' '}
                            <Link
                                href={`/admin/documents/${document.source_document.id}`}
                                className="font-medium underline underline-offset-2 hover:no-underline"
                            >
                                {document.source_document.original_filename ?? `#${document.source_document.id}`}
                            </Link>
                            .
                        </p>
                    </div>
                </div>
            </div>
        );
    }

    if (document.split_documents.length > 0) {
        return (
            <div className="rounded-md border border-info-soft bg-info-soft/40 px-3 py-2">
                <div className="flex items-start gap-2">
                    <span className="mt-0.5 shrink-0 rounded-sm bg-info-soft p-1 text-info-soft-foreground">
                        <Files className="h-3.5 w-3.5" />
                    </span>
                    <div className="min-w-0">
                        <p className="text-xs font-semibold uppercase tracking-wide text-info-soft-foreground">
                            Document separat în {document.split_documents.length}{' '}
                            {document.split_documents.length === 1 ? 'document' : 'documente'}
                        </p>
                        <ul className="mt-1 space-y-0.5">
                            {document.split_documents.map((child) => (
                                <li key={child.id} className="flex flex-wrap items-center gap-1 text-sm text-foreground">
                                    <Link
                                        href={`/admin/documents/${child.id}`}
                                        className="font-medium underline underline-offset-2 hover:no-underline"
                                    >
                                        #{child.id}
                                    </Link>
                                    {child.issuer_name && (
                                        <span className="text-muted-foreground">— {child.issuer_name}</span>
                                    )}
                                    {child.document_number && (
                                        <span className="text-muted-foreground">{child.document_number}</span>
                                    )}
                                    {child.total_amount !== null && (
                                        <span className="text-muted-foreground">
                                            {child.total_amount.toLocaleString('ro-RO', {
                                                minimumFractionDigits: 2,
                                                maximumFractionDigits: 2,
                                            })}
                                            {child.currency ? ` ${child.currency}` : ''}
                                        </span>
                                    )}
                                </li>
                            ))}
                        </ul>
                    </div>
                </div>
            </div>
        );
    }

    return null;
}