import { SlidersHorizontal } from 'lucide-react';
import { useMemo, useState } from 'react';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { DatePickerField } from '@/components/common/DatePickerField';
import { TableListToolbar } from '@/components/common/TableListToolbar';
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 type {
    DocumentAccountantStatus,
    DocumentAiStatus,
    DocumentsFilters,
    ExtractionStatus,
} from '@/features/documents/types';
import { useI18n } from '@/hooks/use-i18n';

type Option = { id: number; name: string };

type DocumentsTableToolbarProps = {
    search: string;
    onSearchChange: (value: string) => void;
    onSearchSubmit: () => void;
    filters: Required<DocumentsFilters>;
    clientOptions: Option[];
    uploaderOptions: Option[];
    onApplyFilters: (filters: Partial<DocumentsFilters>) => void;
    onResetFilters: () => void;
    /** Hide AI / extraction filters (e.g. client portal). */
    hidePipelineFilters?: boolean;
};

const accountantStatuses: DocumentAccountantStatus[] = [
    'waiting',
    'in_review',
    'needs_info',
    'error',
    'validated',
    'rejected',
];

const aiStatuses: DocumentAiStatus[] = ['not_processed', 'processing', 'processed', 'failed'];

const extractionStatuses: ExtractionStatus[] = ['pending', 'processing', 'success', 'failed'];

export function DocumentsTableToolbar({
    search,
    onSearchChange,
    onSearchSubmit,
    filters,
    clientOptions,
    uploaderOptions,
    onApplyFilters,
    onResetFilters,
    hidePipelineFilters = false,
}: DocumentsTableToolbarProps) {
    const { t } = useI18n();
    const [isFiltersOpen, setIsFiltersOpen] = useState(false);
    const [draftFilters, setDraftFilters] = useState<Required<DocumentsFilters>>(filters);

    const accountantStatusLabels = useMemo(
        () =>
            accountantStatuses.reduce(
                (acc, status) => {
                    acc[status] = t(`documents.admin_index.status.accountant.${status}`);

                    return acc;
                },
                {} as Record<DocumentAccountantStatus, string>,
            ),
        [t],
    );

    const aiStatusLabels = useMemo(
        () =>
            aiStatuses.reduce(
                (acc, status) => {
                    acc[status] = t(`documents.admin_index.status.ai.${status}`);

                    return acc;
                },
                {} as Record<DocumentAiStatus, string>,
            ),
        [t],
    );

    const extractionStatusLabels = useMemo(
        () =>
            extractionStatuses.reduce(
                (acc, status) => {
                    acc[status] = t(`documents.admin_index.status.extraction.${status}`);

                    return acc;
                },
                {} as Record<ExtractionStatus, string>,
            ),
        [t],
    );

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

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

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

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

        if (! hidePipelineFilters) {
            if (filters.ai_status) {
                count += 1;
            }

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

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

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

        if (filters.client_mismatch !== null && filters.client_mismatch !== undefined) {
            count += 1;
        }

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

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

        return count;
    }, [
        filters.accountant_status,
        filters.ai_status,
        filters.client_id,
        filters.client_mismatch,
        filters.hide_duplicates,
        filters.duplicates_only,
        filters.extraction_status,
        filters.uploaded_by_user_id,
        filters.uploaded_from,
        filters.uploaded_to,
        hidePipelineFilters,
    ]);

    const resetAdvancedFilters = () => {
        setDraftFilters((current) => ({
            ...current,
            client_id: null,
            uploaded_by_user_id: null,
            accountant_status: '',
            ai_status: '',
            extraction_status: '',
            uploaded_from: '',
            uploaded_to: '',
            client_mismatch: null,
            hide_duplicates: true,
            duplicates_only: null,
        }));
    };

    const applyAdvancedFilters = () => {
        onApplyFilters({
            page: 1,
            client_id: draftFilters.client_id,
            uploaded_by_user_id: draftFilters.uploaded_by_user_id,
            accountant_status: draftFilters.accountant_status,
            ai_status: hidePipelineFilters ? '' : draftFilters.ai_status,
            extraction_status: hidePipelineFilters ? '' : draftFilters.extraction_status,
            uploaded_from: draftFilters.uploaded_from,
            uploaded_to: draftFilters.uploaded_to,
            client_mismatch: draftFilters.client_mismatch,
            hide_duplicates: draftFilters.hide_duplicates,
            duplicates_only: draftFilters.duplicates_only,
        });

        setIsFiltersOpen(false);
    };

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

    return (
        <>
            <TableListToolbar
                search={{
                    value: search,
                    onChange: onSearchChange,
                    onSubmit: onSearchSubmit,
                    placeholder: t('documents.admin_index.toolbar.search_placeholder'),
                    submitLabel: t('documents.admin_index.toolbar.search_submit'),
                }}
            >
                    <Popover
                        open={isFiltersOpen}
                        onOpenChange={(open) => {
                            if (open) {
                                setDraftFilters(filters);
                            }

                            setIsFiltersOpen(open);
                        }}
                    >
                        <PopoverTrigger asChild>
                            <Button type="button" variant="outline" className="h-10">
                                <SlidersHorizontal className="mr-2 h-4 w-4" />
                                {t('documents.admin_index.toolbar.filters_button')}
                                {activeFiltersCount > 0 ? ` (${activeFiltersCount})` : ''}
                            </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('documents.admin_index.toolbar.filters_title')}</h3>
                                <p className="text-xs text-muted-foreground">
                                    {t('documents.admin_index.toolbar.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="documents-filter-client">{t('documents.admin_index.toolbar.label_client')}</Label>
                                        <Select
                                            value={draftFilters.client_id ? String(draftFilters.client_id) : 'all'}
                                            onValueChange={(value) =>
                                                setDraftFilters((current) => ({
                                                    ...current,
                                                    client_id: value === 'all' ? null : Number(value),
                                                }))
                                            }
                                        >
                                            <SelectTrigger
                                                id="documents-filter-client"
                                                className="h-10 w-full"
                                            >
                                                <SelectValue placeholder={t('documents.admin_index.toolbar.placeholder_all_clients')} />
                                            </SelectTrigger>
                                            <SelectContent>
                                                <SelectItem value="all">{t('documents.admin_index.toolbar.placeholder_all_clients')}</SelectItem>
                                                {clientOptions.map((client) => (
                                                    <SelectItem key={client.id} value={String(client.id)}>
                                                        {client.name}
                                                    </SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                    </div>

                                    <div className="space-y-2">
                                        <Label htmlFor="documents-filter-uploader">{t('documents.admin_index.toolbar.label_uploader')}</Label>
                                        <Select
                                            value={
                                                draftFilters.uploaded_by_user_id
                                                    ? String(draftFilters.uploaded_by_user_id)
                                                    : 'all'
                                            }
                                            onValueChange={(value) =>
                                                setDraftFilters((current) => ({
                                                    ...current,
                                                    uploaded_by_user_id:
                                                        value === 'all' ? null : Number(value),
                                                }))
                                            }
                                        >
                                            <SelectTrigger
                                                id="documents-filter-uploader"
                                                className="h-10 w-full"
                                            >
                                                <SelectValue placeholder={t('documents.admin_index.toolbar.placeholder_all_uploaders')} />
                                            </SelectTrigger>
                                            <SelectContent>
                                                <SelectItem value="all">{t('documents.admin_index.toolbar.placeholder_all_uploaders')}</SelectItem>
                                                {uploaderOptions.map((uploader) => (
                                                    <SelectItem key={uploader.id} value={String(uploader.id)}>
                                                        {uploader.name}
                                                    </SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                    </div>

                                    <div className="space-y-2">
                                        <Label htmlFor="documents-filter-accountant-status">
                                            {t('documents.admin_index.toolbar.label_accountant_status')}
                                        </Label>
                                        <Select
                                            value={draftFilters.accountant_status || 'all'}
                                            onValueChange={(value) =>
                                                setDraftFilters((current) => ({
                                                    ...current,
                                                    accountant_status:
                                                        value === 'all' ? '' : (value as DocumentAccountantStatus),
                                                }))
                                            }
                                        >
                                            <SelectTrigger
                                                id="documents-filter-accountant-status"
                                                className="h-10 w-full"
                                            >
                                                <SelectValue placeholder={t('documents.admin_index.toolbar.placeholder_all_statuses')} />
                                            </SelectTrigger>
                                            <SelectContent>
                                                <SelectItem value="all">{t('documents.admin_index.toolbar.placeholder_all_statuses')}</SelectItem>
                                                {accountantStatuses.map((status) => (
                                                    <SelectItem key={status} value={status}>
                                                        {accountantStatusLabels[status]}
                                                    </SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                    </div>

                                    {!hidePipelineFilters ? (
                                        <>
                                            <div className="space-y-2">
                                                <Label htmlFor="documents-filter-ai-status">{t('documents.admin_index.toolbar.label_ai_status')}</Label>
                                                <Select
                                                    value={draftFilters.ai_status || 'all'}
                                                    onValueChange={(value) =>
                                                        setDraftFilters((current) => ({
                                                            ...current,
                                                            ai_status: value === 'all' ? '' : (value as DocumentAiStatus),
                                                        }))
                                                    }
                                                >
                                                    <SelectTrigger id="documents-filter-ai-status" className="h-10 w-full">
                                                        <SelectValue placeholder={t('documents.admin_index.toolbar.placeholder_all_statuses')} />
                                                    </SelectTrigger>
                                                    <SelectContent>
                                                        <SelectItem value="all">{t('documents.admin_index.toolbar.placeholder_all_statuses')}</SelectItem>
                                                        {aiStatuses.map((status) => (
                                                            <SelectItem key={status} value={status}>
                                                                {aiStatusLabels[status]}
                                                            </SelectItem>
                                                        ))}
                                                    </SelectContent>
                                                </Select>
                                            </div>

                                            <div className="space-y-2">
                                                <Label htmlFor="documents-filter-extraction-status">
                                                    {t('documents.admin_index.toolbar.label_extraction_status')}
                                                </Label>
                                                <Select
                                                    value={draftFilters.extraction_status || 'all'}
                                                    onValueChange={(value) =>
                                                        setDraftFilters((current) => ({
                                                            ...current,
                                                            extraction_status:
                                                                value === 'all'
                                                                    ? ''
                                                                    : (value as ExtractionStatus),
                                                        }))
                                                    }
                                                >
                                                    <SelectTrigger
                                                        id="documents-filter-extraction-status"
                                                        className="h-10 w-full"
                                                    >
                                                        <SelectValue placeholder={t('documents.admin_index.toolbar.placeholder_all_statuses')} />
                                                    </SelectTrigger>
                                                    <SelectContent>
                                                        <SelectItem value="all">{t('documents.admin_index.toolbar.placeholder_all_statuses')}</SelectItem>
                                                        {extractionStatuses.map((status) => (
                                                            <SelectItem key={status} value={status}>
                                                                {extractionStatusLabels[status]}
                                                            </SelectItem>
                                                        ))}
                                                    </SelectContent>
                                                </Select>
                                            </div>
                                        </>
                                    ) : null}

                                    <DatePickerField
                                        id="documents-filter-uploaded-from"
                                        label={t('documents.admin_index.toolbar.label_uploaded_from')}
                                        value={draftFilters.uploaded_from ?? ''}
                                        placeholder={t('documents.admin_index.toolbar.date_placeholder')}
                                        onChange={(uploadedFrom) =>
                                            setDraftFilters((current) => ({
                                                ...current,
                                                uploaded_from: uploadedFrom,
                                            }))
                                        }
                                    />

                                    <DatePickerField
                                        id="documents-filter-uploaded-to"
                                        label={t('documents.admin_index.toolbar.label_uploaded_to')}
                                        value={draftFilters.uploaded_to ?? ''}
                                        placeholder={t('documents.admin_index.toolbar.date_placeholder')}
                                        onChange={(uploadedTo) =>
                                            setDraftFilters((current) => ({
                                                ...current,
                                                uploaded_to: uploadedTo,
                                            }))
                                        }
                                    />

                                    <div className="col-span-full flex flex-col gap-2 pt-1">
                                        <div className="flex items-center gap-2">
                                            <Checkbox
                                                id="documents-filter-hide-duplicates"
                                                checked={draftFilters.hide_duplicates !== false}
                                                onCheckedChange={(checked) =>
                                                    setDraftFilters((current) => ({
                                                        ...current,
                                                        hide_duplicates: checked === true,
                                                        duplicates_only:
                                                            checked === true ? null : current.duplicates_only,
                                                    }))
                                                }
                                            />
                                            <Label
                                                htmlFor="documents-filter-hide-duplicates"
                                                className="cursor-pointer font-normal"
                                            >
                                                {t('documents.admin_index.toolbar.label_hide_duplicates')}
                                            </Label>
                                        </div>
                                        <div className="flex items-center gap-2">
                                            <Checkbox
                                                id="documents-filter-duplicates-only"
                                                checked={draftFilters.duplicates_only === true}
                                                onCheckedChange={(checked) =>
                                                    setDraftFilters((current) => ({
                                                        ...current,
                                                        duplicates_only: checked === true ? true : null,
                                                        hide_duplicates:
                                                            checked === true ? false : current.hide_duplicates,
                                                    }))
                                                }
                                            />
                                            <Label
                                                htmlFor="documents-filter-duplicates-only"
                                                className="cursor-pointer font-normal"
                                            >
                                                {t('documents.admin_index.toolbar.label_duplicates_only')}
                                            </Label>
                                        </div>
                                        <div className="flex items-center gap-2">
                                            <Checkbox
                                                id="documents-filter-client-mismatch"
                                                checked={draftFilters.client_mismatch === true}
                                                onCheckedChange={(checked) =>
                                                    setDraftFilters((current) => ({
                                                        ...current,
                                                        client_mismatch: checked === true ? true : null,
                                                    }))
                                                }
                                            />
                                            <Label
                                                htmlFor="documents-filter-client-mismatch"
                                                className="cursor-pointer font-normal"
                                            >
                                                {t('documents.admin_index.toolbar.label_client_mismatch')}
                                            </Label>
                                        </div>
                                    </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('documents.admin_index.toolbar.reset_section')}
                                    </Button>
                                    <Button type="button" variant="ghost" onClick={handleResetAll}>
                                        {t('documents.admin_index.toolbar.reset_all')}
                                    </Button>
                                </div>
                                <Button type="button" onClick={applyAdvancedFilters}>
                                    {t('documents.admin_index.toolbar.apply')}
                                </Button>
                            </div>
                        </PopoverContent>
                    </Popover>
            </TableListToolbar>
        </>
    );
}