import { IconButton } from '@/components/common/IconButton';
import type { DataTableFilterFieldOption, DataTableFilterOperator, DataTableFilterRule } from '@/components/data-table/types';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';

type ActiveFilterBadgesProps<TField extends string> = {
    search: string;
    rules: DataTableFilterRule<TField>[];
    fields: DataTableFilterFieldOption<TField>[];
    onRemoveSearch: () => void;
    onRemoveRule: (id: string) => void;
    onClearAll: () => void;
};

const operatorLabelMap: Record<DataTableFilterOperator, string> = {
    contains: 'contine',
    equals: 'egal cu',
    not_equals: 'diferit de',
    starts_with: 'incepe cu',
    ends_with: 'se termina cu',
    is_true: 'este adevarat',
    is_false: 'este fals',
};

export function ActiveFilterBadges<TField extends string>({
    search,
    rules,
    fields,
    onRemoveSearch,
    onRemoveRule,
    onClearAll,
}: ActiveFilterBadgesProps<TField>) {
    const hasAnyFilter = search !== '' || rules.length > 0;

    if (!hasAnyFilter) {
        return null;
    }

    return (
        <div className="flex flex-wrap items-center gap-2">
            <span className="text-xs text-muted-foreground">Filtre active:</span>

            {search !== '' ? (
                <Badge variant="secondary" className="gap-1 pr-1">
                    Cautare: {search}
                    <IconButton
                        type="button"
                        variant="text"
                        color="ghost"
                        size="xs"
                        className="size-5"
                        onClick={onRemoveSearch}
                        icon="solar:close-circle-bold-duotone"
                        aria-label="Elimină căutarea"
                    />
                </Badge>
            ) : null}

            {rules.map((rule) => {
                const fieldLabel = fields.find((item) => item.value === rule.field)?.label ?? rule.field;
                const operatorLabel = operatorLabelMap[rule.operator];
                const valuePart =
                    rule.operator === 'is_true' || rule.operator === 'is_false'
                        ? ''
                        : ` ${rule.value ?? ''}`;

                return (
                    <Badge key={rule.id} variant="secondary" className="gap-1 pr-1">
                        {fieldLabel} {operatorLabel}
                        {valuePart}
                        <IconButton
                            type="button"
                            variant="text"
                            color="ghost"
                            size="xs"
                            className="size-5"
                            onClick={() => onRemoveRule(rule.id)}
                            icon="solar:close-circle-bold-duotone"
                            aria-label="Elimină filtru"
                        />
                    </Badge>
                );
            })}

            <Button type="button" variant="ghost" size="sm" onClick={onClearAll}>
                Sterge tot
            </Button>
        </div>
    );
}