import Form from '@admin/components/form/Form';
import FormField from '@admin/components/form/FormField';
import { Button } from '@admin/components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@admin/components/ui/dialog';
import { router, usePage } from '@inertiajs/react';
import { AlertCircle, Download, Loader2 } from 'lucide-react';
import { useEffect, useState } from 'react';
import { toast } from 'sonner';

interface BulkExportModalProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    selectedItems: any[];
    selectAll?: boolean;
    totalCount?: number;
    currentFilters?: any;
    config: {
        route: string;
        payload: any;
    };
    handleColumnChange: (column: string, checked: boolean) => void;
    selectedColumns: string[];
    title: string;
    itemName: string;
    onSuccess?: () => void;
}

export function BulkExportModal({
    open,
    onOpenChange,
    selectedItems,
    selectAll = false,
    totalCount = 0,
    currentFilters = {},
    config,
    handleColumnChange,
    selectedColumns,
    title,
    itemName,
    onSuccess,
}: BulkExportModalProps) {
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [columnsState, setColumnsState] = useState<Record<string, boolean>>({});
    // Access Inertia page props to pull backend validation errors (422)
    const page = usePage<any>();

    // Default export columns - customize based on your data model
    const exportColumns = [
        { id: 'id', label: 'ID' },
        { id: 'name', label: 'Name' },
        { id: 'status', label: 'Status' },
        { id: 'type', label: 'Type' },
        { id: 'created_at', label: 'Created At' },
        { id: 'updated_at', label: 'Updated At' },
    ];

    // Initialize column state from selectedColumns prop
    useEffect(() => {
        const initialState: Record<string, boolean> = {};
        exportColumns.forEach((column) => {
            initialState[column.id] = selectedColumns.includes(column.id);
        });
        setColumnsState(initialState);
    }, [selectedColumns]);

    // Reset form when modal closes
    useEffect(() => {
        if (!open) {
            setIsSubmitting(false);
        }
    }, [open]);

    const handleSubmit = (data: any) => {
        // Get selected columns from the form data
        const selectedCols = Object.keys(data)
            .filter((key) => key.startsWith('column_') && data[key])
            .map((key) => key.replace('column_', ''));

        if (selectedCols.length === 0) return;

        setIsSubmitting(true);

        let payload = {
            ...config.payload,
            columns: selectedCols,
        };

        if (selectAll) {
            payload = {
                ...payload,
                all_records: true,
                filters: currentFilters,
            };
        }

        router.post(route(config.route), payload, {
            onSuccess: () => {
                toast.success('Export started successfully!');
                onOpenChange(false);
                if (onSuccess) onSuccess();
            },
            onError: (errors) => {
                console.error('Form submission errors:', errors);
                toast.error('Something went wrong. Please try again.');
            },
            onFinish: () => setIsSubmitting(false),
        });
    };

    // Create default values for the form
    const defaultValues = exportColumns.reduce(
        (acc, column) => {
            acc[`column_${column.id}`] = selectedColumns.includes(column.id);
            return acc;
        },
        {} as Record<string, boolean>,
    );

    const modalTitle = `${title} ${
        selectedItems.length > 0 ? `(${selectedItems.length} ${selectedItems.length === 1 ? itemName : itemName + 's'})` : ''
    }`;
    const modalDescription = 'Select columns to include in the export file';

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-h-[95vh] w-[95vw] max-w-2xl overflow-y-auto sm:w-[90vw] md:max-w-xl">
                <DialogHeader className="gap-0 pb-4">
                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                        <div className="flex items-center gap-3">
                            <Download className="h-6 w-6" />

                            <div>
                                <DialogTitle className="text-lg sm:text-xl">{modalTitle}</DialogTitle>
                            </div>
                        </div>
                    </div>
                    <DialogDescription className="text-sm text-text-gray sm:text-base">{modalDescription}</DialogDescription>
                </DialogHeader>

                <div className="space-y-6 rounded-lg border px-2 py-4 sm:px-4 md:px-6">
                    <Form
                        submitHandler={handleSubmit}
                        defaultValues={defaultValues}
                        formClassNames="space-y-4"
                        externalErrors={(page.props as any)?.errors}
                    >
                        {selectAll && (
                            <div className="flex items-center gap-2 rounded-md border border-yellow-200 bg-yellow-50 p-3 text-sm text-yellow-800">
                                <AlertCircle className="size-4" />
                                <p>
                                    All {totalCount} {itemName}s will be exported
                                </p>
                            </div>
                        )}

                        <div className="mb-3">
                            <h3 className="mb-3 text-sm font-medium">Select Columns to Export</h3>
                            <div className="space-y-2">
                                {exportColumns.map((column) => (
                                    <FormField key={column.id} type="checkbox" name={`column_${column.id}`} checkboxLabel={column.label} />
                                ))}
                            </div>
                        </div>

                        {/* Actions */}
                        <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
                            <Button type="button" variant="outline" onClick={() => onOpenChange(false)} className="w-full sm:w-auto">
                                Cancel
                            </Button>
                            <Button
                                type="submit"
                                disabled={isSubmitting || Object.values(columnsState).every((v) => !v)}
                                className="w-full bg-success hover:bg-brand-800 sm:w-auto"
                            >
                                {isSubmitting ? (
                                    <>
                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                        Processing...
                                    </>
                                ) : (
                                    <>Export</>
                                )}
                            </Button>
                        </div>
                    </Form>
                </div>
            </DialogContent>
        </Dialog>
    );
}