import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import type { Financing } from '@/types/financing';
import { X } from 'lucide-react';
import { useState } from 'react';

interface RejectModalProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    financing: Financing;
    onReject: (reason: string) => void;
    loading?: boolean;
}

export function RejectModal({
    open,
    onOpenChange,
    financing,
    onReject,
    loading = false,
}: RejectModalProps) {
    const [reason, setReason] = useState('');

    const handleSubmit = () => {
        if (!reason.trim()) {
            alert('Alasan penolakan harus diisi');
            return;
        }

        onReject(reason);
        setReason('');
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-md">
                <DialogHeader>
                    <DialogTitle>
                        <div className="flex items-center gap-2">
                            <X className="h-5 w-5 text-destructive" />
                            Tolak Pembiayaan
                        </div>
                    </DialogTitle>
                    <DialogDescription>
                        Anda akan menolak pembiayaan{' '}
                        <span className="font-medium">
                            {financing.account_number}
                        </span>
                        . Tindakan ini tidak dapat dibatalkan.
                    </DialogDescription>
                </DialogHeader>

                <div className="space-y-4 py-4">
                    {/* Financing Summary */}
                    <div className="space-y-2 rounded-lg border p-3">
                        <div className="flex justify-between text-sm">
                            <span className="text-muted-foreground">
                                Anggota
                            </span>
                            <span className="font-medium">
                                {financing.member.name}
                            </span>
                        </div>
                        <div className="flex justify-between text-sm">
                            <span className="text-muted-foreground">
                                Produk
                            </span>
                            <span className="font-medium">
                                {financing.financing_product?.name || '-'}
                            </span>
                        </div>
                        <div className="flex justify-between text-sm">
                            <span className="text-muted-foreground">
                                Jumlah
                            </span>
                            <span className="font-medium">
                                Rp{' '}
                                {financing.principal_amount.toLocaleString(
                                    'id-ID',
                                )}
                            </span>
                        </div>
                        <div className="flex justify-between text-sm">
                            <span className="text-muted-foreground">
                                Tujuan
                            </span>
                            <span className="max-w-[250px] text-right text-xs">
                                {financing.financing_purpose}
                            </span>
                        </div>
                    </div>

                    {/* Rejection Reason */}
                    <div className="space-y-2">
                        <Label htmlFor="rejection-reason">
                            Alasan Penolakan{' '}
                            <span className="text-destructive">*</span>
                        </Label>
                        <Textarea
                            id="rejection-reason"
                            value={reason}
                            onChange={(e) => setReason(e.target.value)}
                            placeholder="Jelaskan alasan penolakan pembiayaan..."
                            rows={4}
                            required
                        />
                    </div>
                </div>

                <DialogFooter>
                    <Button
                        variant="outline"
                        onClick={() => onOpenChange(false)}
                        disabled={loading}
                    >
                        Batal
                    </Button>
                    <Button
                        variant="destructive"
                        onClick={handleSubmit}
                        disabled={loading || !reason.trim()}
                    >
                        {loading ? 'Memproses...' : 'Tolak Pembiayaan'}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}