import { Head, router, usePage } from '@inertiajs/react';
import { SlidersHorizontal } from 'lucide-react';
import { IconButton } from '@/components/common/IconButton';
import { useCallback, 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 { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
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 { ClientFormSheet } from '@/features/clients/components/client-form-sheet';
import { ClientPortalUsersModal } from '@/features/clients/components/client-portal-users-modal';
import { compactClientsFilters, normalizeClientsFilters, parseEditClientIdFromPageUrl } from '@/features/clients/lib/query-state';
import { useClientsFilters } from '@/features/clients/lib/use-clients-filters';
import { useClientsColumns, type ClientsSortColumn } from '@/features/clients/table/clients-columns';
import { ClientsTable } from '@/features/clients/table/clients-table';
import type { ClientsIndexPageProps } from '@/features/clients/types';
import { useAuthorization } from '@/hooks/use-authorization';
import { useI18n } from '@/hooks/use-i18n';

export default function ClientsIndexPage() {
    const { t } = useI18n();
    const page = usePage<ClientsIndexPageProps>();
    const { clients, filters: initialFilters, editing_client, portal_manage_client, client_form_options } = page.props;
    const { can } = useAuthorization();
    const canCreateClients = can('create clients');
    const canEditClients = can('edit clients');
    const canManageContacts = can('manage client contacts');
    const canAssignPortalUsers = can('assign client users');
    const canAssignAccountants = can('assign client accountants');

    const { filters, search, setSearch, apply, resetAll, isApplying } = useClientsFilters(initialFilters);
    const [isFiltersOpen, setIsFiltersOpen] = useState(false);
    const [sheetOpen, setSheetOpen] = useState(Boolean(editing_client));
    const [sheetMode, setSheetMode] = useState<'create' | 'edit'>(editing_client ? 'edit' : 'create');
    const [sheetFormKey, setSheetFormKey] = useState(0);

    const [draftFilters, setDraftFilters] = useState({
        country: filters.country,
        county: filters.county,
        city: filters.city,
        active: filters.active,
        is_vat_payer: filters.is_vat_payer,
    });

    const clearEditingFromUrl = useCallback(() => {
        router.get(
            '/admin/clients',
            compactClientsFilters(normalizeClientsFilters(filters)),
            {
                preserveState: true,
                preserveScroll: true,
                replace: true,
                only: ['editing_client', 'client_form_options'],
            },
        );
    }, [filters]);

    const openEditClient = useCallback(
        (id: number) => {
            setSheetFormKey((k) => k + 1);
            setSheetMode('edit');
            setSheetOpen(true);

            router.get(
                '/admin/clients',
                {
                    ...compactClientsFilters(normalizeClientsFilters(filters)),
                    edit: id,
                },
                {
                    preserveState: true,
                    preserveScroll: true,
                    replace: true,
                    only: ['editing_client', 'client_form_options'],
                },
            );
        },
        [filters],
    );

    const openCreate = useCallback(() => {
        setSheetFormKey((k) => k + 1);
        setSheetMode('create');

        if (parseEditClientIdFromPageUrl(page.url)) {
            clearEditingFromUrl();
        }

        setSheetOpen(true);
    }, [clearEditingFromUrl, page.url]);

    const handleSheetOpenChange = useCallback(
        (open: boolean) => {
            if (!open) {
                if (parseEditClientIdFromPageUrl(page.url)) {
                    clearEditingFromUrl();
                }
            }

            setSheetOpen(open);
        },
        [clearEditingFromUrl, page.url],
    );

    const afterClientSave = useCallback(() => {
        router.reload({ only: ['clients', 'editing_client', 'client_form_options', 'portal_manage_client'] });
    }, []);

    const afterPortalSave = useCallback(() => {
        router.reload({ only: ['clients', 'editing_client', 'client_form_options', 'portal_manage_client'] });
    }, []);

    const openManagePortal = useCallback(
        (id: number) => {
            router.get(
                '/admin/clients',
                {
                    ...compactClientsFilters(normalizeClientsFilters(filters)),
                    manage_portal: id,
                },
                {
                    preserveState: true,
                    preserveScroll: true,
                    replace: true,
                    only: ['portal_manage_client', 'client_form_options'],
                },
            );
        },
        [filters],
    );

    const closePortalManage = useCallback(() => {
        router.get(
            '/admin/clients',
            compactClientsFilters(normalizeClientsFilters(filters)),
            {
                preserveState: true,
                preserveScroll: true,
                replace: true,
                only: ['portal_manage_client', 'client_form_options'],
            },
        );
    }, [filters]);

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

            apply({
                page: 1,
                sort_by: column,
                sort_direction: nextDirection,
            });
        },
        [apply, filters.sort_by, filters.sort_direction],
    );

    const columns = useClientsColumns(
        onSort,
        canEditClients,
        canAssignPortalUsers,
        openEditClient,
        openManagePortal,
    );

    const submitSearch = () => {
        apply({
            page: 1,
            search,
        });
    };

    const applyAdvancedFilters = () => {
        apply({
            page: 1,
            country: draftFilters.country,
            county: draftFilters.county,
            city: draftFilters.city,
            active: draftFilters.active,
            is_vat_payer: draftFilters.is_vat_payer,
        });
        setIsFiltersOpen(false);
    };

    const resetAdvancedFilters = () => {
        setDraftFilters({
            country: '',
            county: '',
            city: '',
            active: '',
            is_vat_payer: '',
        });
    };

    const handleResetAll = () => {
        resetAll();
        setIsFiltersOpen(false);
    };

    const advancedFilterCount = [
        filters.country,
        filters.county,
        filters.city,
        filters.active,
        filters.is_vat_payer,
    ].filter(Boolean).length;

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

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

        if (search !== '') {
            items.push({
                key: 'search',
                label: t('clients.admin_index.filters.chip_search', { value: search }),
                onRemove: () => {
                    setSearch('');
                    apply({ page: 1, search: '' });
                },
            });
        }

        if (filters.country !== '') {
            items.push({
                key: 'country',
                label: t('clients.admin_index.filters.chip_country', { value: filters.country }),
                onRemove: () => apply({ page: 1, country: '' }),
            });
        }

        if (filters.county !== '') {
            items.push({
                key: 'county',
                label: t('clients.admin_index.filters.chip_county', { value: filters.county }),
                onRemove: () => apply({ page: 1, county: '' }),
            });
        }

        if (filters.city !== '') {
            items.push({
                key: 'city',
                label: t('clients.admin_index.filters.chip_city', { value: filters.city }),
                onRemove: () => apply({ page: 1, city: '' }),
            });
        }

        if (filters.active !== '') {
            items.push({
                key: 'active',
                label: t('clients.admin_index.filters.chip_active', {
                    value: filters.active === 'true' ? yesLabel : noLabel,
                }),
                onRemove: () => apply({ page: 1, active: '' }),
            });
        }

        if (filters.is_vat_payer !== '') {
            items.push({
                key: 'vat',
                label: t('clients.admin_index.filters.chip_vat', {
                    value: filters.is_vat_payer === 'true' ? yesLabel : noLabel,
                }),
                onRemove: () => apply({ page: 1, is_vat_payer: '' }),
            });
        }

        return items;
    }, [apply, filters.active, filters.city, filters.country, filters.county, filters.is_vat_payer, noLabel, search, setSearch, t, yesLabel]);

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

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

                <Card>
                    <CardHeader>
                        <TableListToolbar
                            align="center"
                            search={{
                                id: 'clients-search',
                                value: search,
                                onChange: setSearch,
                                onSubmit: submitSearch,
                                placeholder: t('clients.admin_index.search.placeholder'),
                                submitLabel: t('clients.admin_index.search.submit'),
                                disabled: isApplying,
                            }}
                        >
                                <Popover
                                    open={isFiltersOpen}
                                    onOpenChange={(open) => {
                                        if (open) {
                                            setDraftFilters({
                                                country: filters.country,
                                                county: filters.county,
                                                city: filters.city,
                                                active: filters.active,
                                                is_vat_payer: filters.is_vat_payer,
                                            });
                                        }

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

                                        <div className="max-h-[70vh] overflow-auto p-4">
                                            <div className="grid gap-4 md:grid-cols-2">
                                                <div className="space-y-2">
                                                    <Label htmlFor="clients-filter-country">
                                                        {t('clients.admin_index.filters.label_country')}
                                                    </Label>
                                                    <Input
                                                        id="clients-filter-country"
                                                        value={draftFilters.country}
                                                        onChange={(event) =>
                                                            setDraftFilters((current) => ({
                                                                ...current,
                                                                country: event.target.value,
                                                            }))
                                                        }
                                                        placeholder={t('clients.admin_index.filters.placeholder_country')}
                                                    />
                                                </div>

                                                <div className="space-y-2">
                                                    <Label htmlFor="clients-filter-county">
                                                        {t('clients.admin_index.filters.label_county')}
                                                    </Label>
                                                    <Input
                                                        id="clients-filter-county"
                                                        value={draftFilters.county}
                                                        onChange={(event) =>
                                                            setDraftFilters((current) => ({
                                                                ...current,
                                                                county: event.target.value,
                                                            }))
                                                        }
                                                        placeholder={t('clients.admin_index.filters.placeholder_county')}
                                                    />
                                                </div>

                                                <div className="space-y-2">
                                                    <Label htmlFor="clients-filter-city">
                                                        {t('clients.admin_index.filters.label_city')}
                                                    </Label>
                                                    <Input
                                                        id="clients-filter-city"
                                                        value={draftFilters.city}
                                                        onChange={(event) =>
                                                            setDraftFilters((current) => ({
                                                                ...current,
                                                                city: event.target.value,
                                                            }))
                                                        }
                                                        placeholder={t('clients.admin_index.filters.placeholder_city')}
                                                    />
                                                </div>

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

                                                <div className="space-y-2">
                                                    <Label htmlFor="clients-filter-vat">
                                                        {t('clients.admin_index.filters.label_vat')}
                                                    </Label>
                                                    <Select
                                                        value={draftFilters.is_vat_payer || 'all'}
                                                        onValueChange={(value) =>
                                                            setDraftFilters((current) => ({
                                                                ...current,
                                                                is_vat_payer: value === 'all' ? '' : (value as 'true' | 'false'),
                                                            }))
                                                        }
                                                    >
                                                        <SelectTrigger id="clients-filter-vat">
                                                            <SelectValue placeholder={t('clients.admin_index.filters.placeholder_all')} />
                                                        </SelectTrigger>
                                                        <SelectContent>
                                                            <SelectItem value="all">
                                                                {t('clients.admin_index.filters.placeholder_all')}
                                                            </SelectItem>
                                                            <SelectItem value="true">{yesLabel}</SelectItem>
                                                            <SelectItem value="false">{noLabel}</SelectItem>
                                                        </SelectContent>
                                                    </Select>
                                                </div>
                                            </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('clients.admin_index.filters.reset_section')}
                                                </Button>
                                                <Button type="button" variant="ghost" onClick={handleResetAll}>
                                                    {t('clients.admin_index.filters.reset_all')}
                                                </Button>
                                            </div>
                                            <Button type="button" onClick={applyAdvancedFilters}>
                                                {t('clients.admin_index.filters.apply')}
                                            </Button>
                                        </div>
                                    </PopoverContent>
                                </Popover>
                        </TableListToolbar>

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

                    <CardContent className="pt-0">
                        <ClientsTable
                            columns={columns}
                            data={clients.data}
                            pagination={clients.meta}
                            isLoading={isApplying}
                            onPageChange={(page) => apply({ page })}
                        />
                    </CardContent>
                </Card>

                <ClientFormSheet
                    key={`${sheetMode}-${sheetFormKey}`}
                    open={sheetOpen}
                    onOpenChange={handleSheetOpenChange}
                    mode={sheetMode}
                    client={sheetMode === 'edit' ? editing_client : null}
                    accountants={client_form_options.accountants}
                    canManageContacts={canManageContacts}
                    canAssignAccountants={canAssignAccountants}
                    onAfterSave={afterClientSave}
                />

                <ClientPortalUsersModal
                    open={portal_manage_client !== null}
                    onOpenChange={(nextOpen) => {
                        if (!nextOpen) {
                            closePortalManage();
                        }
                    }}
                    client={portal_manage_client}
                    portalUsers={client_form_options.portal_users_for_manage ?? []}
                    onAfterChange={afterPortalSave}
                />
            </section>
        </>
    );
}