import { Link, router } from '@inertiajs/react';
import { Copy, Layers } from 'lucide-react';
import { Button } from '@/components/ui/button';
import type { DocumentDetail } from '@/features/documents/types';
import { useI18n } from '@/hooks/use-i18n';
import { formatDateTimeRo } from '@/lib/datetime';

type DocumentDuplicateBannerProps = {
    document: DocumentDetail;
};

export function DocumentDuplicateBanner({ document }: DocumentDuplicateBannerProps) {
    const { t } = useI18n();

    const isDuplicate = document.duplicate_of_document_id !== null;
    const hasIntakes = document.intake_events_count > 0;

    if (!isDuplicate && !hasIntakes) {
        return null;
    }

    const dismissDuplicate = () => {
        router.post(`/admin/documents/${document.id}/duplicate/dismiss`, {}, { preserveScroll: true });
    };

    return (
        <div className="space-y-2">
            {isDuplicate && document.duplicate_of ? (
                <div className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 dark:border-amber-900/50 dark:bg-amber-950/30">
                    <div className="flex items-start justify-between gap-3">
                        <div className="flex items-start gap-2">
                            <span className="rounded-sm bg-amber-100 p-1 text-amber-700 dark:bg-amber-900/60 dark:text-amber-300">
                                <Copy className="h-3.5 w-3.5" />
                            </span>
                            <div>
                                <p className="text-xs font-semibold uppercase tracking-wide text-amber-800 dark:text-amber-200">
                                    {t('documents.admin_show.duplicate.banner_title')}
                                </p>
                                <p className="mt-1 text-sm text-foreground">
                                    {t('documents.admin_show.duplicate.banner_body', {
                                        reason: t(
                                            `documents.admin_show.duplicate.reason.${document.duplicate_reason ?? 'fingerprint'}`,
                                        ),
                                    })}{' '}
                                    <Link
                                        href={`/admin/documents/${document.duplicate_of.id}`}
                                        className="font-medium text-primary underline-offset-2 hover:underline"
                                    >
                                        {document.duplicate_of.original_filename ??
                                            `#${document.duplicate_of.id}`}
                                    </Link>
                                </p>
                            </div>
                        </div>
                        <Button type="button" variant="outline" size="sm" onClick={dismissDuplicate}>
                            {t('documents.admin_show.duplicate.dismiss_action')}
                        </Button>
                    </div>
                </div>
            ) : null}

            {hasIntakes ? (
                <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
                    <div className="flex items-center gap-2">
                        <span className="rounded-sm bg-muted p-1 text-muted-foreground">
                            <Layers className="h-3.5 w-3.5" />
                        </span>
                        <p className="text-sm font-medium text-foreground">
                            {t('documents.admin_show.duplicate.intake_title', {
                                count: document.intake_events_count,
                            })}
                        </p>
                    </div>
                    {document.recent_intake_events.length > 0 ? (
                        <ul className="mt-2 space-y-1 border-t border-border/60 pt-2 text-xs text-muted-foreground">
                            {document.recent_intake_events.map((event) => (
                                <li key={event.id}>
                                    {t(`documents.admin_show.duplicate.channel.${event.channel}`)} ·{' '}
                                    {event.original_filename ?? '—'} ·{' '}
                                    {formatDateTimeRo(event.received_at)}
                                </li>
                            ))}
                        </ul>
                    ) : null}
                </div>
            ) : null}
        </div>
    );
}