import { router } from '@inertiajs/react';
import React from 'react';

import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { Card, CardContent } from '@/Components/ui/card';
import { Input } from '@/Components/ui/input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/Components/ui/select';
import { t } from '@/lib/utils';
import { Filter, X } from 'lucide-react';

type Filters = {
    notification_type?: string;
    schedule_type?: string;
    created_from?: string; // YYYY-MM-DD
    created_to?: string; // YYYY-MM-DD
};

interface RemindersFiltersProps {
    filters: Filters;
    availableScheduleTypes: string[];
    availableNotificationTypes: string[];
    routeName?: string;
}

export default function RemindersFilters({
    filters,
    availableScheduleTypes,
    availableNotificationTypes,
    routeName = 'reminders.index',
}: RemindersFiltersProps) {
    const [local, setLocal] = React.useState<Filters>({
        notification_type: filters.notification_type ?? '',
        schedule_type: filters.schedule_type ?? '',
        created_from: filters.created_from ?? '',
        created_to: filters.created_to ?? '',
    });

    React.useEffect(() => {
        setLocal({
            notification_type: filters.notification_type ?? '',
            schedule_type: filters.schedule_type ?? '',
            created_from: filters.created_from ?? '',
            created_to: filters.created_to ?? '',
        });
    }, [
        filters.notification_type,
        filters.schedule_type,
        filters.created_from,
        filters.created_to,
    ]);

    const scheduleLabel = (value: string) =>
        t(`reminders.schedule_types.${value}`);

    const notificationLabel = (fqcn: string) => {
        const base = fqcn.split('\\').pop() || fqcn;
        return t(`reminders.notification_types.${base}`);
    };

    const apply = () => {
        const params: Record<string, string | number | undefined> = {
            notification_type: local.notification_type || undefined,
            schedule_type: local.schedule_type || undefined,
            created_from: local.created_from || undefined,
            created_to: local.created_to || undefined,
            page: 1,
        };

        router.get(route(routeName), params, {
            preserveState: true,
            preserveScroll: true,
            replace: true,
        });
    };

    const reset = () => {
        setLocal({
            notification_type: '',
            schedule_type: '',
            created_from: '',
            created_to: '',
        });

        router.get(
            route(routeName),
            { page: 1 },
            {
                preserveState: true,
                preserveScroll: true,
                replace: true,
            },
        );
    };

    const activeCount =
        (local.notification_type ? 1 : 0) +
        (local.schedule_type ? 1 : 0) +
        (local.created_from ? 1 : 0) +
        (local.created_to ? 1 : 0);

    return (
        <Card className="mb-6">
            <CardContent className="p-4">
                <div className="flex flex-col gap-3">
                    <div className="flex items-center justify-between gap-3">
                        <div className="text-muted-foreground flex items-center gap-2 text-sm">
                            <Filter className="h-4 w-4" />
                            <span>{t('reminders.filters.title')}</span>
                            {activeCount > 0 && (
                                <Badge variant="secondary">{activeCount}</Badge>
                            )}
                        </div>

                        <div className="flex items-center gap-2">
                            <Button
                                variant="outline"
                                onClick={reset}
                                type="button"
                            >
                                <X className="mr-2 h-4 w-4" />
                                {t('reminders.filters.reset')}
                            </Button>
                            <Button onClick={apply} type="button">
                                {t('reminders.filters.apply')}
                            </Button>
                        </div>
                    </div>

                    <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                        <div className="flex flex-col gap-1">
                            <div className="text-muted-foreground text-xs">
                                {t('reminders.filters.type')}
                            </div>
                            <Select
                                value={local.notification_type || '__all__'}
                                onValueChange={(v) =>
                                    setLocal((p) => ({
                                        ...p,
                                        notification_type:
                                            v === '__all__' ? '' : v,
                                    }))
                                }
                            >
                                <SelectTrigger>
                                    <SelectValue
                                        placeholder={t('reminders.filters.all')}
                                    />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="__all__">
                                        {t('reminders.filters.all')}
                                    </SelectItem>

                                    <SelectItem value="__classic__">
                                        {t('reminders.filters.classic')}
                                    </SelectItem>

                                    {availableNotificationTypes.map((v) => (
                                        <SelectItem key={v} value={v}>
                                            {notificationLabel(v)}
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                        </div>

                        <div className="flex flex-col gap-1">
                            <div className="text-muted-foreground text-xs">
                                {t('reminders.filters.schedule')}
                            </div>
                            <Select
                                value={local.schedule_type || '__all__'}
                                onValueChange={(v) =>
                                    setLocal((p) => ({
                                        ...p,
                                        schedule_type: v === '__all__' ? '' : v,
                                    }))
                                }
                            >
                                <SelectTrigger>
                                    <SelectValue
                                        placeholder={t('reminders.filters.all')}
                                    />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="__all__">
                                        {t('reminders.filters.all')}
                                    </SelectItem>
                                    {availableScheduleTypes.map((v) => (
                                        <SelectItem key={v} value={v}>
                                            {scheduleLabel(v)}
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                        </div>
                    </div>

                    <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                        <div className="flex flex-col gap-1">
                            <div className="text-muted-foreground text-xs">
                                {t('reminders.filters.created_from')}
                            </div>
                            <Input
                                type="date"
                                value={local.created_from ?? ''}
                                onChange={(e) =>
                                    setLocal((p) => ({
                                        ...p,
                                        created_from: e.target.value,
                                    }))
                                }
                            />
                        </div>

                        <div className="flex flex-col gap-1">
                            <div className="text-muted-foreground text-xs">
                                {t('reminders.filters.created_to')}
                            </div>
                            <Input
                                type="date"
                                value={local.created_to ?? ''}
                                onChange={(e) =>
                                    setLocal((p) => ({
                                        ...p,
                                        created_to: e.target.value,
                                    }))
                                }
                            />
                        </div>
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}