import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

interface ConfirmDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    title: string;
    description: string;
    confirmText?: string;
    cancelText?: string;
    onConfirm: (inputValue?: string) => void;
    variant?: 'default' | 'destructive';
    isLoading?: boolean;
    requireInput?: boolean;
    inputLabel?: string;
    inputPlaceholder?: string;
    inputValue?: string;
}

export function ConfirmDialog({
    open,
    onOpenChange,
    title,
    description,
    confirmText = 'Konfirmasi',
    cancelText = 'Batal',
    onConfirm,
    variant = 'destructive',
    isLoading = false,
    requireInput = false,
    inputLabel,
    inputPlaceholder,
    inputValue: initialInputValue = '',
}: ConfirmDialogProps) {
    const [inputValue, setInputValue] = useState(initialInputValue);

    useEffect(() => {
        if (open) {
            // eslint-disable-next-line react-hooks/set-state-in-effect
            setInputValue(initialInputValue);
        }
    }, [open, initialInputValue]);

    const handleConfirm = () => {
        onConfirm(inputValue);
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-[425px]">
                <DialogHeader>
                    <DialogTitle>{title}</DialogTitle>
                    <DialogDescription>{description}</DialogDescription>
                </DialogHeader>
                {requireInput && (
                    <div className="grid gap-4 py-4">
                        <div className="grid gap-2">
                            {inputLabel && <Label htmlFor="confirm-input">{inputLabel}</Label>}
                            <Input
                                id="confirm-input"
                                value={inputValue}
                                onChange={(e) => setInputValue(e.target.value)}
                                placeholder={inputPlaceholder}
                                autoFocus
                            />
                        </div>
                    </div>
                )}
                <DialogFooter className="flex flex-row gap-2">
                    <Button
                        type="button"
                        variant="outline"
                        onClick={() => onOpenChange(false)}
                        disabled={isLoading}
                    >
                        {cancelText}
                    </Button>
                    <Button
                        type="button"
                        variant={variant}
                        onClick={handleConfirm}
                        disabled={isLoading || (requireInput && !inputValue.trim())}
                    >
                        {confirmText}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}