import { Filter, X } from 'lucide-react';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';

export type FilterOption = {
    value: string;
    label: string;
};

export type FilterField = {
    key: string;
    label: string;
    placeholder?: string;
    options: FilterOption[];
};

type FilterDialogProps = {
    fields: FilterField[];
    activeFilters: Record<string, string | undefined>;
    onApply: (filters: Record<string, string>) => void;
};

export function FilterDialog({
    fields,
    activeFilters,
    onApply,
}: FilterDialogProps) {
    const [open, setOpen] = useState(false);

    const activeCount = fields.filter(
        (field) => activeFilters[field.key],
    ).length;

    function handleChange(key: string, value: string) {
        const next: Record<string, string> = {};

        fields.forEach((field) => {
            const current =
                field.key === key ? value : activeFilters[field.key];

            if (current && current !== 'all') {
                next[field.key] = current;
            }
        });

        onApply(next);
    }

    function handleClear() {
        onApply({});
    }

    return (
        <div className="flex items-center gap-2">
            <Dialog open={open} onOpenChange={setOpen}>
                <DialogTrigger asChild>
                    <Button variant="outline" size="icon" className="relative">
                        <Filter className="h-4 w-4" />
                        {activeCount > 0 && (
                            <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground">
                                {activeCount}
                            </span>
                        )}
                    </Button>
                </DialogTrigger>
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>Filter</DialogTitle>
                    </DialogHeader>
                    <div
                        className={
                            fields.length > 1
                                ? 'grid grid-cols-2 gap-4 py-4'
                                : 'grid gap-4 py-4'
                        }
                    >
                        {fields.map((field) => (
                            <div className="grid gap-2" key={field.key}>
                                <Label>{field.label}</Label>
                                <Select
                                    value={activeFilters[field.key] ?? 'all'}
                                    onValueChange={(value) =>
                                        handleChange(field.key, value)
                                    }
                                >
                                    <SelectTrigger className="w-full">
                                        <SelectValue
                                            placeholder={
                                                field.placeholder ?? 'Semua'
                                            }
                                        />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="all">
                                            Semua
                                        </SelectItem>
                                        {field.options.map((option) => (
                                            <SelectItem
                                                key={option.value}
                                                value={option.value}
                                            >
                                                {option.label}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>
                        ))}
                    </div>
                </DialogContent>
            </Dialog>

            {activeCount > 0 && (
                <Button variant="ghost" size="sm" onClick={handleClear}>
                    <X className="h-4 w-4" />
                    Hapus Filter
                </Button>
            )}
        </div>
    );
}
