import { useForm } from '@inertiajs/react';
import { Loader2, User, UserCheck } from 'lucide-react';
import { useEffect, useState } from 'react';

import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { SearchableSelect } from '@/components/ui/searchable-select';
import { toastError, toastLoading, toastSuccess } from '@/lib/toast';
import { cn } from '@/lib/utils';
import financingsRoutes from '@/routes/financing';
import type { Financing } from '@/types/financing';

interface ReassignEntityModalProps {
    financing: Financing;
    open: boolean;
    onOpenChange: (open: boolean) => void;
    type: 'member' | 'collector';
}

interface Option {
    value: string;
    label: string;
}

export function ReassignEntityModal({
    financing,
    open,
    onOpenChange,
    type,
}: ReassignEntityModalProps) {
    const [options, setOptions] = useState<Option[]>([]);
    const [isLoading, setIsLoading] = useState(false);
    const [search, setSearch] = useState('');

    const form = useForm({
        type: type,
        member_id: '',
        collector_id: '',
    });

    // Handle type change when props change
    useEffect(() => {
        form.setData('type', type);
        form.setData('member_id', '');
        form.setData('collector_id', '');
        setSearch('');
    }, [type, open]);

    // Fetch options based on search and type
    useEffect(() => {
        if (!open) return;

        const fetchData = async () => {
            setIsLoading(true);
            try {
                if (type === 'member') {
                    const response = await fetch(
                        `/members/search?search=${search}&limit=20`,
                    );
                    if (response.ok) {
                        const data = await response.json();
                        setOptions(
                            data.map((m: any) => ({
                                value: m.id.toString(),
                                label: `${m.name} (${m.id_number || 'No ID'}) - ${m.branch || ''}`,
                            })),
                        );
                    }
                } else {
                    const response = await fetch(
                        `/users/search?role=collector&search=${search}&limit=20`,
                    );
                    if (response.ok) {
                        const data = await response.json();
                        setOptions(
                            data.map((u: any) => ({
                                value: u.id.toString(),
                                label: `${u.name} (${u.email})`,
                            })),
                        );
                    }
                }
            } catch (error) {
                console.error('Error fetching options:', error);
            } finally {
                setIsLoading(false);
            }
        };

        const timeout = setTimeout(fetchData, 300);
        return () => clearTimeout(timeout);
    }, [search, type, open]);

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();

        form.transform((data) => ({
            ...data,
            member_id: type === 'member' ? data.member_id : null,
            collector_id: type === 'collector' ? data.collector_id : null,
        }));

        form.post(financingsRoutes.reassign({ financing: financing.id }).url, {
            onStart: () => toastLoading(`Memproses pemindahan ${type}...`),
            onSuccess: () => {
                toastSuccess(
                    `${type === 'member' ? 'Anggota' : 'Staf Lapangan'} berhasil dipindahkan`,
                );
                onOpenChange(false);
            },
            onError: () => toastError(`Gagal memindahkan ${type}`),
        });
    };

    const isDummy =
        type === 'member'
            ? financing.member.notes === 'Imported from CSV'
            : financing.collector?.email?.endsWith('@btm.dummy');

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="overflow-visible border-none p-0 shadow-2xl sm:max-w-137.5">
                <form onSubmit={handleSubmit} className="flex flex-col">
                    <DialogHeader className="bg-linear-to-br from-primary/10 to-transparent p-6 pb-2">
                        <DialogTitle className="flex items-center gap-3 text-xl font-bold tracking-tight">
                            <div
                                className={cn(
                                    'rounded-lg bg-white p-2 shadow-sm ring-1 ring-black/5',
                                    type === 'member'
                                        ? 'text-blue-600'
                                        : 'text-emerald-600',
                                )}
                            >
                                {type === 'member' ? (
                                    <UserCheck className="h-5 w-5" />
                                ) : (
                                    <User className="h-5 w-5" />
                                )}
                            </div>
                            Tugaskan Ulang{' '}
                            {type === 'member' ? 'Anggota' : 'Staf Lapangan'}
                        </DialogTitle>
                        <DialogDescription className="pt-2 text-sm leading-relaxed">
                            Pindahkan data pembiayaan ini ke{' '}
                            {type === 'member' ? 'anggota' : 'staf lapangan'} yang
                            valid di sistem untuk menjaga integritas data.
                            {isDummy && (
                                <div className="mt-3 flex animate-in items-start gap-2 rounded-lg border border-amber-100 bg-amber-50 p-3 text-xs text-amber-800 shadow-sm fade-in slide-in-from-top-1">
                                    <div className="mt-0.5 rounded-full bg-amber-200 p-0.5">
                                        <Loader2 className="h-3 w-3 animate-spin" />
                                    </div>
                                    <p>
                                        <strong>
                                            ⚠️ Data Sementara Terdeteksi:
                                        </strong>{' '}
                                        Member ini merupakan data dummy hasil
                                        import yang perlu dikoreksi.
                                    </p>
                                </div>
                            )}
                        </DialogDescription>
                    </DialogHeader>

                    <div className="space-y-6 px-6 py-6">
                        <div className="space-y-4">
                            <div className="space-y-2">
                                <label className="ml-1 text-sm font-semibold text-foreground/80">
                                    Cari{' '}
                                    {type === 'member'
                                        ? 'Anggota'
                                        : 'Staf Lapangan'}{' '}
                                    Baru
                                </label>
                                <SearchableSelect
                                    options={options}
                                    value={
                                        type === 'member'
                                            ? form.data.member_id || ''
                                            : form.data.collector_id || ''
                                    }
                                    onValueChange={(val) => {
                                        if (type === 'member')
                                            form.setData('member_id', val);
                                        else form.setData('collector_id', val);
                                    }}
                                    placeholder={`Ketik nama atau ${type === 'member' ? 'No. KTP' : 'Email'}...`}
                                    searchPlaceholder="Ketik untuk mencari..."
                                    loading={isLoading}
                                    error={
                                        type === 'member'
                                            ? form.errors.member_id
                                            : form.errors.collector_id
                                    }
                                    className="w-full"
                                    onSearchChange={setSearch}
                                    searchValue={search}
                                />
                                <p className="ml-1 text-[11px] text-muted-foreground">
                                    Tip: Masukkan minimal 3 karakter untuk hasil
                                    yang lebih akurat.
                                </p>
                            </div>
                        </div>
                    </div>

                    <DialogFooter className="gap-3 bg-muted/30 p-4 px-6">
                        <Button
                            type="button"
                            variant="ghost"
                            onClick={() => onOpenChange(false)}
                            disabled={form.processing}
                            className="flex-1 sm:flex-none"
                        >
                            Batal
                        </Button>
                        <Button
                            type="submit"
                            className="min-w-35 flex-1 shadow-sm sm:flex-none"
                            disabled={
                                form.processing ||
                                (type === 'member'
                                    ? !form.data.member_id
                                    : !form.data.collector_id)
                            }
                        >
                            {form.processing ? (
                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                            ) : null}
                            Simpan Perubahan
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}