import { SlidersHorizontal } from 'lucide-react';
import type { FormEvent } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { TableActiveFilters, type TableActiveFilterItem } from '@/components/common/TableActiveFilters';
import { TableListToolbar } from '@/components/common/TableListToolbar';
import { Button } from '@/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import type { UsersFilters } from '@/features/users/types';
import { useI18n } from '@/hooks/use-i18n';

type UsersFiltersProps = {
    filters: Required<UsersFilters>;
    availableRoles: string[];
    onApply: (filters: Partial<UsersFilters>) => void;
};

export function UsersFilters({ filters, availableRoles, onApply }: UsersFiltersProps) {
    const { t } = useI18n();
    const [search, setSearch] = useState(filters.search);
    const [isFiltersOpen, setIsFiltersOpen] = useState(false);
    const [draftRole, setDraftRole] = useState(filters.role);
    const [draftStatus, setDraftStatus] = useState(filters.status);
    const [draftPerPage, setDraftPerPage] = useState(filters.per_page);

    useEffect(() => {
        setSearch(filters.search);
        setDraftRole(filters.role);
        setDraftStatus(filters.status);
        setDraftPerPage(filters.per_page);
    }, [filters.per_page, filters.role, filters.search, filters.status]);

    const submit = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        onApply({
            page: 1,
            search,
            role: filters.role,
            status: filters.status,
            per_page: filters.per_page,
            sort_by: filters.sort_by,
            sort_direction: filters.sort_direction,
        });
    };

    const applyAdvancedFilters = () => {
        onApply({
            page: 1,
            search,
            role: draftRole,
            status: draftStatus,
            per_page: draftPerPage,
            sort_by: filters.sort_by,
            sort_direction: filters.sort_direction,
        });

        setIsFiltersOpen(false);
    };

    const resetAdvancedFilters = () => {
        setDraftRole('');
        setDraftStatus('');
        setDraftPerPage(15);
    };

    const resetAll = () => {
        setSearch('');
        setDraftRole('');
        setDraftStatus('');
        setDraftPerPage(15);
        onApply({
            page: 1,
            search: '',
            role: '',
            status: '',
            per_page: 15,
            sort_by: 'created_at',
            sort_direction: 'desc',
        });
        setIsFiltersOpen(false);
    };

    const activeFiltersCount = useMemo(() => {
        let count = 0;

        if (filters.role) {
            count += 1;
        }

        if (filters.status) {
            count += 1;
        }

        if (filters.per_page !== 15) {
            count += 1;
        }

        return count;
    }, [filters.per_page, filters.role, filters.status]);

    const statusLabel =
        filters.status === 'active'
            ? t('users.admin_index.filters.status_active')
            : t('users.admin_index.filters.status_inactive');

    const activeFilterItems = useMemo(() => {
        const items: TableActiveFilterItem[] = [];

        if (search) {
            items.push({
                key: 'search',
                label: t('users.admin_index.filters.badge_search', { value: search }),
                onRemove: () => {
                    setSearch('');
                    onApply({
                        page: 1,
                        search: '',
                        role: filters.role,
                        status: filters.status,
                        per_page: filters.per_page,
                        sort_by: filters.sort_by,
                        sort_direction: filters.sort_direction,
                    });
                },
            });
        }

        if (filters.role) {
            items.push({
                key: 'role',
                label: t('users.admin_index.filters.badge_role', { value: filters.role }),
                onRemove: () =>
                    onApply({
                        page: 1,
                        search,
                        role: '',
                        status: filters.status,
                        per_page: filters.per_page,
                        sort_by: filters.sort_by,
                        sort_direction: filters.sort_direction,
                    }),
            });
        }

        if (filters.status) {
            items.push({
                key: 'status',
                label: t('users.admin_index.filters.badge_status', { value: statusLabel }),
                onRemove: () =>
                    onApply({
                        page: 1,
                        search,
                        role: filters.role,
                        status: '',
                        per_page: filters.per_page,
                        sort_by: filters.sort_by,
                        sort_direction: filters.sort_direction,
                    }),
            });
        }

        if (filters.per_page !== 15) {
            items.push({
                key: 'per_page',
                label: t('users.admin_index.filters.badge_per_page', { value: String(filters.per_page) }),
                onRemove: () =>
                    onApply({
                        page: 1,
                        search,
                        role: filters.role,
                        status: filters.status,
                        per_page: 15,
                        sort_by: filters.sort_by,
                        sort_direction: filters.sort_direction,
                    }),
            });
        }

        return items;
    }, [filters, onApply, search, statusLabel, t]);

    return (
        <form onSubmit={submit} className="space-y-4">
            <TableListToolbar
                search={{
                    embedded: true,
                    value: search,
                    onChange: setSearch,
                    placeholder: t('users.admin_index.filters.search_placeholder'),
                    submitLabel: t('users.admin_index.filters.search_submit'),
                }}
            >
                    <Popover
                        open={isFiltersOpen}
                        onOpenChange={(open) => {
                            if (open) {
                                setDraftRole(filters.role);
                                setDraftStatus(filters.status);
                                setDraftPerPage(filters.per_page);
                            }

                            setIsFiltersOpen(open);
                        }}
                    >
                        <PopoverTrigger asChild>
                            <Button type="button" variant="outline" className="h-10">
                                <SlidersHorizontal className="mr-2 h-4 w-4" />
                                {t('users.admin_index.filters.filters_button')}
                                {activeFiltersCount > 0 ? ` (${activeFiltersCount})` : ''}
                            </Button>
                        </PopoverTrigger>
                        <PopoverContent
                            align="end"
                            className="w-[95vw] max-w-2xl p-0"
                            onOpenAutoFocus={(event) => event.preventDefault()}
                        >
                            <div className="border-b px-4 py-3">
                                <h3 className="text-sm font-semibold">{t('users.admin_index.filters.filters_title')}</h3>
                                <p className="text-xs text-muted-foreground">
                                    {t('users.admin_index.filters.filters_subtitle')}
                                </p>
                            </div>

                            <div className="grid gap-4 p-4 md:grid-cols-2">
                                <div className="space-y-2">
                                    <label className="text-sm font-medium">{t('users.admin_index.filters.label_role')}</label>
                                    <Select
                                        value={draftRole || 'all'}
                                        onValueChange={(value) => setDraftRole(value === 'all' ? '' : value)}
                                    >
                                        <SelectTrigger className="h-10 w-full">
                                            <SelectValue placeholder={t('users.admin_index.filters.placeholder_all_roles')} />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value="all">
                                                {t('users.admin_index.filters.placeholder_all_roles')}
                                            </SelectItem>
                                            {availableRoles.map((roleItem) => (
                                                <SelectItem key={roleItem} value={roleItem}>
                                                    {roleItem}
                                                </SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </div>

                                <div className="space-y-2">
                                    <label className="text-sm font-medium">
                                        {t('users.admin_index.filters.label_status')}
                                    </label>
                                    <Select
                                        value={draftStatus || 'all'}
                                        onValueChange={(value) =>
                                            setDraftStatus(value === 'all' ? '' : (value as 'active' | 'inactive'))
                                        }
                                    >
                                        <SelectTrigger className="h-10 w-full">
                                            <SelectValue
                                                placeholder={t('users.admin_index.filters.placeholder_all_statuses')}
                                            />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value="all">
                                                {t('users.admin_index.filters.placeholder_all_statuses')}
                                            </SelectItem>
                                            <SelectItem value="active">
                                                {t('users.admin_index.filters.status_active')}
                                            </SelectItem>
                                            <SelectItem value="inactive">
                                                {t('users.admin_index.filters.status_inactive')}
                                            </SelectItem>
                                        </SelectContent>
                                    </Select>
                                </div>

                                <div className="space-y-2 md:col-span-2">
                                    <label className="text-sm font-medium">
                                        {t('users.admin_index.filters.label_per_page')}
                                    </label>
                                    <Select
                                        value={String(draftPerPage)}
                                        onValueChange={(value) => setDraftPerPage(Number(value))}
                                    >
                                        <SelectTrigger className="h-10 w-full">
                                            <SelectValue
                                                placeholder={t('users.admin_index.filters.placeholder_per_page')}
                                            />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {[10, 15, 25, 50].map((size) => (
                                                <SelectItem key={size} value={String(size)}>
                                                    {t('users.admin_index.filters.per_page_option', { count: size })}
                                                </SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </div>
                            </div>

                            <div className="flex items-center justify-between gap-2 border-t px-4 py-3">
                                <div className="flex flex-wrap items-center gap-2">
                                    <Button type="button" variant="ghost" onClick={resetAdvancedFilters}>
                                        {t('users.admin_index.filters.reset_section')}
                                    </Button>
                                    <Button type="button" variant="ghost" onClick={resetAll}>
                                        {t('users.admin_index.filters.reset_all')}
                                    </Button>
                                </div>
                                <Button type="button" onClick={applyAdvancedFilters}>
                                    {t('users.admin_index.filters.apply')}
                                </Button>
                            </div>
                        </PopoverContent>
                    </Popover>
            </TableListToolbar>

            <TableActiveFilters
                heading={t('users.admin_index.filters.active_filters_label')}
                clearAllLabel={t('users.admin_index.filters.clear_all_badges')}
                items={activeFilterItems}
                onClearAll={resetAll}
            />
        </form>
    );
}