import { useTranslation } from '@/hooks/use-translation';
import { Loader2 } from 'lucide-react';
import type { BulkFailure } from '../types';

type BulkProgressPanelProps = {
    running: boolean;
    processed: number;
    total: number;
    succeeded: string[];
    failed: BulkFailure[];
};

export default function BulkProgressPanel({ running, processed, total, succeeded, failed }: BulkProgressPanelProps) {
    const { t } = useTranslation();

    const progressPct = total > 0 ? Math.round((processed / total) * 100) : 0;

    return (
        <div className="flex flex-col gap-4 rounded-lg border p-4">
            <div className="flex items-center gap-2 text-sm">
                {running && <Loader2 className="h-4 w-4 animate-spin" />}
                <span>
                    {processed}/{total} — {succeeded.length} OK
                    {failed.length > 0 ? `, ${failed.length} ⚠` : ''}
                </span>
            </div>
            <div className="bg-muted h-2 w-full overflow-hidden rounded-full">
                <div className="bg-secondary h-full transition-all duration-300" style={{ width: `${progressPct}%` }} />
            </div>
            {failed.length > 0 && (
                <div className="flex flex-col gap-1">
                    <p className="text-sm font-semibold">{t('properties.bulk-edit', 'failures_title')}</p>
                    <ul className="max-h-40 overflow-y-auto text-xs text-red-600">
                        {failed.map((f, i) => (
                            <li key={`${f.uid}-${i}`}>
                                {f.name ?? f.uid} — {f.reason}
                            </li>
                        ))}
                    </ul>
                </div>
            )}
        </div>
    );
}