import { AlertCircle, CheckCircle2, Clock3, FileUp, PlayCircle, User } from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import type { DocumentActivityTimelineItem } from '@/features/documents/types';
import { useI18n } from '@/hooks/use-i18n';
import { formatDateTimeRo } from '@/lib/datetime';

type ActivityTimelineItemProps = {
    item: DocumentActivityTimelineItem;
};

const iconMap: Record<string, LucideIcon> = {
    'document-uploaded': FileUp,
    'document-processing-started': PlayCircle,
    'document-processed-successfully': CheckCircle2,
    'document-processing-failed': AlertCircle,
    'document-reprocessing-requested': PlayCircle,
    'document-moved-in-review': Clock3,
    'document-validated': CheckCircle2,
    'document-marked-pending-info': Clock3,
    'document-marked-error': AlertCircle,
    'document-rejected': AlertCircle,
};

export function ActivityTimelineItem({ item }: ActivityTimelineItemProps) {
    const { t } = useI18n();
    const reasonKey = t('documents.admin_show.metadata.reason_key');
    const Icon = iconMap[item.type] ?? Clock3;
    const reasonMeta = item.metadata.find((meta) => meta.key === reasonKey);
    const otherMetadata = item.metadata.filter((meta) => meta.key !== reasonKey);

    return (
        <div className="relative pl-8">
            <span className="absolute left-0 top-1.5 rounded-full bg-secondary-soft p-1.5 text-secondary-soft-foreground">
                <Icon className="h-3.5 w-3.5" />
            </span>

            <div className="rounded-md border bg-background p-3">
                <div className="flex flex-wrap items-center justify-between gap-2">
                    <p className="text-sm font-medium">{item.label}</p>
                    <p className="text-xs text-muted-foreground">
                        {formatDateTimeRo(item.created_at)}
                    </p>
                </div>

                <div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground">
                    {!item.causer_name ? (
                        <span className="rounded-full bg-muted p-1">
                            <User className="h-3 w-3" />
                        </span>
                    ) : null}
                    <span>
                        {item.causer_name
                            ? `${t('documents.admin_show.activity.by_prefix')} ${item.causer_name}`
                            : t('documents.admin_show.activity.system')}
                    </span>
                </div>

                {otherMetadata.length > 0 ? (
                    <div className="mt-2 flex flex-wrap items-center gap-2">
                        {otherMetadata.map((meta) => (
                            <Badge key={`${item.id}-${meta.key}-${meta.label}-${meta.value}`} variant="secondarySoft">
                                {meta.label}: {meta.value}
                            </Badge>
                        ))}
                    </div>
                ) : null}

                {reasonMeta ? (
                    <div className="mt-3 rounded-md border border-warning-soft bg-warning-soft/40 px-3 py-2">
                        <p className="text-xs font-semibold text-warning-soft-foreground">
                            {t('documents.admin_show.metadata.reason_label')}
                        </p>
                        <p className="mt-1 text-sm text-foreground">{reasonMeta.value}</p>
                    </div>
                ) : null}
            </div>
        </div>
    );
}