import { useState } from 'react';
import { IconButton } from '@/components/common/IconButton';
import { Button } from '@/components/ui/button';
import { Icon } from '@/components/ui/icon';
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogBody,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { LoadingButton } from '@/components/ui/loading-button';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { ChartOfAccountAsyncSelect } from '@/features/documents/components/chart-of-account-async-select';
import { useI18n } from '@/hooks/use-i18n';

const EMPTY_SELECT_VALUE = '__none__';

type VatRateOption = {
    code: string;
    name: string;
    rate_percent: string;
};

type DocumentLineItemsBulkBarProps = {
    selectedCount: number;
    disabled?: boolean;
    vatRates: VatRateOption[];
    onClearSelection: () => void;
    onBulkDelete: () => void;
    onBulkSetChart: (code: string) => void;
    onBulkSetVat: (vatRate: string) => void;
};

export function DocumentLineItemsBulkBar({
    selectedCount,
    disabled = false,
    vatRates,
    onClearSelection,
    onBulkDelete,
    onBulkSetChart,
    onBulkSetVat,
}: DocumentLineItemsBulkBarProps) {
    const { t } = useI18n();
    const [menuOpen, setMenuOpen] = useState(false);
    const [chartDialogOpen, setChartDialogOpen] = useState(false);
    const [vatDialogOpen, setVatDialogOpen] = useState(false);
    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
    const [chartCode, setChartCode] = useState('');
    const [vatRate, setVatRate] = useState('');

    if (selectedCount === 0) {
        return null;
    }

    const openChartDialog = () => {
        setMenuOpen(false);
        setChartDialogOpen(true);
    };

    const openVatDialog = () => {
        setMenuOpen(false);
        setVatDialogOpen(true);
    };

    const openDeleteDialog = () => {
        setMenuOpen(false);
        setDeleteDialogOpen(true);
    };

    const applyChart = () => {
        onBulkSetChart(chartCode);
        setChartCode('');
        setChartDialogOpen(false);
        onClearSelection();
    };

    const applyVat = () => {
        onBulkSetVat(vatRate === EMPTY_SELECT_VALUE ? '' : vatRate);
        setVatRate('');
        setVatDialogOpen(false);
        onClearSelection();
    };

    const confirmDelete = () => {
        onBulkDelete();
        setDeleteDialogOpen(false);
        onClearSelection();
    };

    return (
        <>
            <div className="flex items-center gap-1.5">
                <span className="text-xs font-medium text-muted-foreground tabular-nums">
                    {t('documents.admin_show.extraction.bulk.selected_count', {
                        count: selectedCount,
                    })}
                </span>

                <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
                    <DropdownMenuTrigger asChild>
                        <IconButton
                            color="ghost"
                            variant="contained"
                            size="sm"
                            disabled={disabled}
                            icon="fa7-solid:ellipsis-v"
                            aria-label={t('documents.admin_show.extraction.bulk.actions_menu')}
                        />
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" className="w-52">
                        <DropdownMenuItem onSelect={openChartDialog}>
                            <Icon icon="solar:book-2-bold-duotone" className="size-4" />
                            {t('documents.admin_show.extraction.bulk.change_chart')}
                        </DropdownMenuItem>
                        <DropdownMenuItem onSelect={openVatDialog}>
                            <Icon icon="solar:tag-price-bold-duotone" className="size-4" />
                            {t('documents.admin_show.extraction.bulk.change_vat')}
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem variant="destructive" onSelect={openDeleteDialog}>
                            <Icon icon="solar:trash-bin-minimalistic-bold-duotone" className="size-4" />
                            {t('documents.admin_show.extraction.bulk.delete')}
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>

                <IconButton
                    color="danger"
                    size="sm"
                    disabled={disabled}
                    icon="material-symbols:close"
                    onClick={onClearSelection}
                    aria-label={t('documents.admin_show.extraction.bulk.clear_selection')}
                />
            </div>

            <AlertDialog open={chartDialogOpen} onOpenChange={setChartDialogOpen}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>
                            {t('documents.admin_show.extraction.bulk.chart_dialog_title')}
                        </AlertDialogTitle>
                    </AlertDialogHeader>
                    <AlertDialogBody>
                        <AlertDialogDescription>
                            {t('documents.admin_show.extraction.bulk.chart_dialog_description', {
                                count: selectedCount,
                            })}
                        </AlertDialogDescription>
                        <div className="space-y-2">
                            <Label>{t('documents.admin_show.extraction.table_chart')}</Label>
                            <ChartOfAccountAsyncSelect
                                value={chartCode}
                                onValueChange={setChartCode}
                                disabled={disabled}
                            />
                        </div>
                    </AlertDialogBody>
                    <AlertDialogFooter>
                        <AlertDialogCancel asChild>
                            <Button type="button" variant="outline">
                                {t('documents.admin_show.review_dialog.cancel')}
                            </Button>
                        </AlertDialogCancel>
                        <AlertDialogAction asChild>
                            <Button type="button" onClick={applyChart} disabled={disabled || chartCode.trim() === ''}>
                                {t('documents.admin_show.extraction.bulk.apply')}
                            </Button>
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>

            <AlertDialog open={vatDialogOpen} onOpenChange={setVatDialogOpen}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>
                            {t('documents.admin_show.extraction.bulk.vat_dialog_title')}
                        </AlertDialogTitle>
                    </AlertDialogHeader>
                    <AlertDialogBody>
                        <AlertDialogDescription>
                            {t('documents.admin_show.extraction.bulk.vat_dialog_description', {
                                count: selectedCount,
                            })}
                        </AlertDialogDescription>
                        <div className="space-y-2">
                            <Label>{t('documents.admin_show.extraction.table_vat')}</Label>
                        {vatRates.length > 0 ? (
                            <Select value={vatRate || EMPTY_SELECT_VALUE} onValueChange={setVatRate} disabled={disabled}>
                                <SelectTrigger className="h-9 w-full">
                                    <SelectValue placeholder={t('documents.admin_show.extraction.vat_placeholder')} />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value={EMPTY_SELECT_VALUE}>
                                        {t('documents.admin_show.extraction.direction_empty')}
                                    </SelectItem>
                                    {vatRates.map((row) => (
                                        <SelectItem key={row.code} value={row.rate_percent}>
                                            {row.name} ({row.rate_percent}%)
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                        ) : (
                            <Input
                                type="number"
                                value={vatRate}
                                onChange={(event) => setVatRate(event.target.value)}
                                placeholder={t('documents.admin_show.extraction.percent_placeholder')}
                                disabled={disabled}
                            />
                        )}
                        </div>
                    </AlertDialogBody>
                    <AlertDialogFooter>
                        <AlertDialogCancel asChild>
                            <Button type="button" variant="outline">
                                {t('documents.admin_show.review_dialog.cancel')}
                            </Button>
                        </AlertDialogCancel>
                        <AlertDialogAction asChild>
                            <Button type="button" onClick={applyVat} disabled={disabled}>
                                {t('documents.admin_show.extraction.bulk.apply')}
                            </Button>
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>

            <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>
                            {t('documents.admin_show.extraction.bulk.delete_dialog_title')}
                        </AlertDialogTitle>
                    </AlertDialogHeader>
                    <AlertDialogBody>
                        <AlertDialogDescription>
                            {t('documents.admin_show.extraction.bulk.delete_dialog_description', {
                                count: selectedCount,
                            })}
                        </AlertDialogDescription>
                    </AlertDialogBody>
                    <AlertDialogFooter>
                        <AlertDialogCancel asChild>
                            <Button type="button" variant="outline" disabled={disabled}>
                                {t('documents.admin_show.review_dialog.cancel')}
                            </Button>
                        </AlertDialogCancel>
                        <AlertDialogAction asChild>
                            <LoadingButton loading={disabled} variant="destructive" onClick={confirmDelete}>
                                {t('documents.admin_show.extraction.bulk.delete_confirm')}
                            </LoadingButton>
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>
        </>
    );
}