import { Badge } from '@admin/components/ui/badge';
import { Label } from '@admin/components/ui/label';
import { Modal, ModalFooter } from '@admin/components/ui/modal';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@admin/components/ui/select';
import { User } from '@admin/types';
import { router } from '@inertiajs/react';
import { useState } from 'react';

interface StatusOption {
    value: number;
    label: string;
    color: string;
}

interface BulkStatusEditModalProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    selectedUsers: User[];
    onSuccess?: () => void;
    selectAll?: boolean; // indicates select-all-across-pages used
    currentFilters?: Record<string, any>;
    totalCount?: number; // total matching rows when selectAll=true
    statusOptions: StatusOption[];
    apiRoute: string;
}

export function BulkStatusEditModal({
    open,
    onOpenChange,
    selectedUsers,
    onSuccess,
    selectAll = false,
    currentFilters = {},
    totalCount,
    statusOptions,
    apiRoute,
}: BulkStatusEditModalProps) {
    const [selectedStatus, setSelectedStatus] = useState<string>('');
    const [isLoading, setIsLoading] = useState(false);

    const handleSubmit = async () => {
        if (selectedStatus === '' || selectedUsers?.length === 0) return;

        setIsLoading(true);

        try {
            const ids = selectedUsers?.map((user) => user.id);
            const basePayload: any = {
                type: 'update_status',
                data: { status: Number(selectedStatus) },
            };
            if (selectAll) {
                basePayload.select_all = true;
                basePayload.filters = currentFilters;
            } else {
                basePayload.ids = ids;
            }

            router.post(route(apiRoute), basePayload, {
                onSuccess: () => {
                    onOpenChange(false);
                    setSelectedStatus('');
                    onSuccess?.();
                },
                onError: (errors) => {
                    console.error('Bulk status update failed:', errors);
                },
                onFinish: () => {
                    setIsLoading(false);
                },
            });
        } catch (error) {
            console.error('Error updating user status:', error);
            setIsLoading(false);
        }
    };

    const handleCancel = () => {
        setSelectedStatus('');
        onOpenChange(false);
    };

    const selectedStatusOption = statusOptions.find((option) => String(option.value) === selectedStatus);

    return (
        <Modal
            open={open}
            onOpenChange={onOpenChange}
            title="Update User Status"
            description={
                selectAll
                    ? `Change the status for ALL ${totalCount ?? selectedUsers?.length} matched`
                    : `Change the status for ${selectedUsers?.length} selected users`
            }
            size="md"
            footer={
                <ModalFooter
                    onCancel={handleCancel}
                    onConfirm={handleSubmit}
                    cancelText="Cancel"
                    confirmText={`Update`}
                    isLoading={isLoading}
                    confirmVariant="default"
                />
            }
        >
            <div className="space-y-4">
                {/* Status Selection */}
                <div className="space-y-2">
                    <Label htmlFor="status-select" className="font-semibold">
                        New Status
                    </Label>
                    <Select value={selectedStatus} onValueChange={setSelectedStatus}>
                        <SelectTrigger id="status-select">
                            <SelectValue placeholder="Select a status">
                                {selectedStatusOption && (
                                    <div className="flex items-center gap-2">
                                        <Badge variant="outline" className={`text-xs ${selectedStatusOption.color}`}>
                                            {selectedStatusOption.label}
                                        </Badge>
                                    </div>
                                )}
                            </SelectValue>
                        </SelectTrigger>
                        <SelectContent>
                            {statusOptions.map((status) => (
                                <SelectItem key={status.value} value={String(status.value)}>
                                    <div className="flex items-center gap-2">
                                        <Badge variant="outline" className={`text-xs ${status.color}`}>
                                            {status.label}
                                        </Badge>
                                    </div>
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>
            </div>
        </Modal>
    );
}