import { Head, usePage } from '@inertiajs/react';
import { SlidersHorizontal } from 'lucide-react';
import { IconButton } from '@/components/common/IconButton';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { TableActiveFilters, type TableActiveFilterItem } from '@/components/common/TableActiveFilters';
import { TableListToolbar } from '@/components/common/TableListToolbar';
import { PageHeaderActions } from '@/components/page-header-actions';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { SupplierFormSheet } from '@/features/suppliers/components/supplier-form-sheet';
import { useSuppliersFilters } from '@/features/suppliers/lib/use-suppliers-filters';
import { useSuppliersColumns } from '@/features/suppliers/table/suppliers-columns';
import { SuppliersTable } from '@/features/suppliers/table/suppliers-table';
import type { SuppliersIndexPageProps, SuppliersSortColumn } from '@/features/suppliers/types';
import { useAuthorization } from '@/hooks/use-authorization';
import { useI18n } from '@/hooks/use-i18n';
import { Label } from '@/components/ui/label';

export default function SuppliersIndexPage() {
    const { t } = useI18n();
    const page = usePage<SuppliersIndexPageProps>();
    const { suppliers, filters: initialFilters, editing_supplier, form_options } = page.props;
    const { can } = useAuthorization();
    const canCreate = can('create clients');
    const canEdit = can('edit clients');
    const canDeactivate = can('deactivate clients');

    const { filters, search, setSearch, isApplying, applyFilters, openEdit, closeEdit } =
        useSuppliersFilters(initialFilters);

    const [isFiltersOpen, setIsFiltersOpen] = useState(false);
    const [createSheetOpen, setCreateSheetOpen] = useState(false);

    const sheetOpen = createSheetOpen || Boolean(editing_supplier);
    const sheetMode = editing_supplier ? 'edit' : 'create';

    useEffect(() => {
        if (editing_supplier) {
            setCreateSheetOpen(false);
        }
    }, [editing_supplier]);

    const [draftFilters, setDraftFilters] = useState({
        client_id: filters.client_id !== null ? String(filters.client_id) : '',
        active: filters.active,
    });

    useEffect(() => {
        setDraftFilters({
            client_id: filters.client_id !== null ? String(filters.client_id) : '',
            active: filters.active,
        });
    }, [filters.client_id, filters.active]);

    useEffect(() => {
        setSearch(filters.search);
    }, [filters.search]);

    const yesLabel = t('suppliers.admin_index.filters.yes');
    const noLabel = t('suppliers.admin_index.filters.no');

    const onSort = useCallback(
        (column: SuppliersSortColumn) => {
            const nextDirection =
                filters.sort_by === column && filters.sort_direction === 'asc' ? 'desc' : 'asc';

            applyFilters({
                sort_by: column,
                sort_direction: nextDirection,
            });
        },
        [applyFilters, filters.sort_by, filters.sort_direction],
    );

    const columns = useSuppliersColumns(onSort, canEdit, canDeactivate, openEdit);

    const clientFilterLabel = useMemo(() => {
        if (filters.client_id === null) {
            return null;
        }

        return form_options.clients.find((c) => c.id === filters.client_id)?.name ?? String(filters.client_id);
    }, [filters.client_id, form_options.clients]);

    const applyDraftFilters = () => {
        applyFilters({
            client_id: draftFilters.client_id !== '' ? Number(draftFilters.client_id) : null,
            active: draftFilters.active,
        });
        setIsFiltersOpen(false);
    };

    const resetDraftFilters = () => {
        setDraftFilters({ client_id: '', active: '' });
        applyFilters({ client_id: null, active: '' });
        setIsFiltersOpen(false);
    };

    const handleSearchSubmit = () => {
        applyFilters({ search, page: 1 });
    };

    const resetAllFilters = () => {
        setSearch('');
        applyFilters({
            page: 1,
            search: '',
            client_id: null,
            active: '',
        });
    };

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

        if (filters.search !== '') {
            items.push({
                key: 'search',
                label: t('common.active_filters.search', { value: filters.search }),
                onRemove: () => {
                    setSearch('');
                    applyFilters({ page: 1, search: '' });
                },
            });
        }

        if (clientFilterLabel) {
            items.push({
                key: 'client',
                label: `${t('suppliers.admin_index.filters.label_client')}: ${clientFilterLabel}`,
                onRemove: () => applyFilters({ page: 1, client_id: null }),
            });
        }

        if (filters.active !== '') {
            items.push({
                key: 'active',
                label: `${t('suppliers.admin_index.filters.label_active')}: ${filters.active === 'true' ? yesLabel : noLabel}`,
                onRemove: () => applyFilters({ page: 1, active: '' }),
            });
        }

        return items;
    }, [applyFilters, clientFilterLabel, filters.active, filters.search, noLabel, setSearch, t, yesLabel]);

    const handleSheetOpenChange = (open: boolean) => {
        if (!open) {
            setCreateSheetOpen(false);

            if (editing_supplier) {
                closeEdit();
            }
        }
    };

    return (
        <>
            <Head title={t('suppliers.admin_index.page.head_title')} />

            <section className="space-y-6">
                <PageHeaderActions
                    title={t('suppliers.admin_index.page.title')}
                    description={t('suppliers.admin_index.page.description')}
                    actions={
                        canCreate ? (
                            <TooltipProvider delayDuration={150}>
                                <Tooltip>
                                
                                    <TooltipTrigger asChild>
                                        <IconButton
                                            type="button"
                                            variant="contained"
                                            color="primary"
                                            size="sm"
                                            aria-label={t('suppliers.admin_index.actions.add_supplier_aria')}
                                            onClick={() => setCreateSheetOpen(true)}
                                            icon="material-symbols:add"
                                        />
                                    </TooltipTrigger>
                                    <TooltipContent>{t('suppliers.admin_index.actions.add_supplier')}</TooltipContent>
                                </Tooltip>
                            </TooltipProvider>
                        ) : null
                    }
                />

                <Card>
                    <CardHeader>
                        <TableListToolbar
                            align="center"
                            search={{
                                id: 'suppliers-search',
                                value: search,
                                onChange: setSearch,
                                onSubmit: handleSearchSubmit,
                                placeholder: t('suppliers.admin_index.search.placeholder'),
                                submitLabel: t('suppliers.admin_index.search.submit'),
                                disabled: isApplying,
                            }}
                        >
                            <Popover open={isFiltersOpen} onOpenChange={setIsFiltersOpen}>
                                <PopoverTrigger asChild>
                                    <Button type="button" variant="outline" className="gap-2">
                                        <SlidersHorizontal className="h-4 w-4" />
                                        {t('suppliers.admin_index.filters.button')}
                                    </Button>
                                </PopoverTrigger>
                                <PopoverContent align="end" className="w-80 space-y-4">
                                    <div>
                                        <h3 className="text-sm font-semibold">{t('suppliers.admin_index.filters.title')}</h3>
                                        <p className="text-xs text-muted-foreground">
                                            {t('suppliers.admin_index.filters.subtitle')}
                                        </p>
                                    </div>

                                    <div className="space-y-2">
                                        <Label>{t('suppliers.admin_index.filters.label_client')}</Label>
                                        <Select
                                            value={draftFilters.client_id || '__all__'}
                                            onValueChange={(value) =>
                                                setDraftFilters((prev) => ({
                                                    ...prev,
                                                    client_id: value === '__all__' ? '' : value,
                                                }))
                                            }
                                        >
                                            <SelectTrigger>
                                                <SelectValue
                                                    placeholder={t('suppliers.admin_index.filters.placeholder_all_clients')}
                                                />
                                            </SelectTrigger>
                                            <SelectContent>
                                                <SelectItem value="__all__">
                                                    {t('suppliers.admin_index.filters.placeholder_all_clients')}
                                                </SelectItem>
                                                {form_options.clients.map((client) => (
                                                    <SelectItem key={client.id} value={String(client.id)}>
                                                        {client.name}
                                                    </SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                    </div>

                                    <div className="space-y-2">
                                        <Label>{t('suppliers.admin_index.filters.label_active')}</Label>
                                        <Select
                                            value={draftFilters.active || '__all__'}
                                            onValueChange={(value) =>
                                                setDraftFilters((prev) => ({
                                                    ...prev,
                                                    active: value === '__all__' ? '' : (value as 'true' | 'false'),
                                                }))
                                            }
                                        >
                                            <SelectTrigger>
                                                <SelectValue placeholder={t('suppliers.admin_index.filters.placeholder_all')} />
                                            </SelectTrigger>
                                            <SelectContent>
                                                <SelectItem value="__all__">
                                                    {t('suppliers.admin_index.filters.placeholder_all')}
                                                </SelectItem>
                                                <SelectItem value="true">{yesLabel}</SelectItem>
                                                <SelectItem value="false">{noLabel}</SelectItem>
                                            </SelectContent>
                                        </Select>
                                    </div>

                                    <div className="flex justify-end gap-2">
                                        <Button type="button" variant="outline" size="sm" onClick={resetDraftFilters}>
                                            {t('suppliers.admin_index.filters.reset')}
                                        </Button>
                                        <Button type="button" variant="primary" size="sm" onClick={applyDraftFilters}>
                                            {t('suppliers.admin_index.filters.apply')}
                                        </Button>
                                    </div>
                                </PopoverContent>
                            </Popover>
                        </TableListToolbar>

                        <TableActiveFilters
                            className="mt-3"
                            items={activeFilterItems}
                            onClearAll={resetAllFilters}
                        />
                    </CardHeader>

                    <CardContent className="pt-0">
                        <SuppliersTable
                            columns={columns}
                            data={suppliers.data}
                            pagination={suppliers.meta}
                            onPageChange={(pageNumber) => applyFilters({ page: pageNumber })}
                            isLoading={isApplying}
                        />
                    </CardContent>
                </Card>
            </section>

            {(canCreate || canEdit) && sheetOpen ? (
                <SupplierFormSheet
                    open={sheetOpen}
                    onOpenChange={handleSheetOpenChange}
                    mode={sheetMode}
                    supplier={editing_supplier}
                    clients={form_options.clients}
                    onAfterSave={() => {
                        setCreateSheetOpen(false);

                        if (editing_supplier) {
                            closeEdit();
                        }
                    }}
                />
            ) : null}
        </>
    );
}