import { router } from '@inertiajs/react';
import axios from 'axios';
import { AlertCircle, Merge, UserCheck, UserMinus } 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 { Label } from '@/components/ui/label';
import {
    SearchableSelect,
    type SearchableSelectOption,
} from '@/components/ui/searchable-select';
import { toastError, toastSuccess } from '@/lib/toast';
import * as dataCleansingRoutes from '@/routes/data-cleansing';
import type { Member } from '@/types/member';

interface ManualMergeModalProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
}

export function ManualMergeModal({
    open,
    onOpenChange,
}: ManualMergeModalProps) {
    const [primaryId, setPrimaryId] = useState<string>('');
    const [secondaryId, setSecondaryId] = useState<string>('');
    const [searchTerm, setSearchTerm] = useState('');
    const [options, setOptions] = useState<SearchableSelectOption[]>([]);
    const [loading, setLoading] = useState(false);
    const [processing, setProcessing] = useState(false);

    // Fetch members based on search term
    useEffect(() => {
        const fetchMembers = async () => {
            if (searchTerm.length < 2) {
                setOptions([]);
                return;
            }

            setLoading(true);
            try {
                const response = await axios.get(
                    dataCleansingRoutes.searchMembers().url,
                    { params: { term: searchTerm } },
                );
                const members = response.data as Member[];
                setOptions(
                    members.map((m) => ({
                        value: m.id.toString(),
                        label: `${m.name} (NIK: ${m.id_number || '-'})`,
                    })),
                );
            } catch (error) {
                console.error('Failed to fetch members', error);
            } finally {
                setLoading(false);
            }
        };

        const timeoutId = setTimeout(fetchMembers, 300);
        return () => clearTimeout(timeoutId);
    }, [searchTerm]);

    const handleMerge = () => {
        if (!primaryId || !secondaryId) {
            toastError('Silakan pilih kedua anggota');
            return;
        }

        if (primaryId === secondaryId) {
            toastError('Anggota utama dan sekunder tidak boleh sama');
            return;
        }

        setProcessing(true);

        router.post(
            dataCleansingRoutes.merge().url,
            {
                type: 'member',
                primary_id: primaryId,
                secondary_ids: [secondaryId],
            },
            {
                onSuccess: () => {
                    toastSuccess('Data berhasil digabungkan secara manual');
                    onOpenChange(false);
                    setPrimaryId('');
                    setSecondaryId('');
                },
                onError: (errors) => {
                    const message =
                        Object.values(errors)[0] || 'Gagal menggabungkan data';
                    toastError(message);
                },
                onFinish: () => setProcessing(false),
            },
        );
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-2xl">
                <DialogHeader>
                    <DialogTitle className="flex items-center gap-2">
                        <Merge className="h-5 w-5 text-primary" />
                        Merge Manual Anggota
                    </DialogTitle>
                    <DialogDescription>
                        Cari dan hubungkan dua data anggota secara manual untuk
                        memindahkan seluruh record ke satu data utama.
                    </DialogDescription>
                </DialogHeader>

                <div className="grid gap-6 py-4">
                    <div className="flex gap-3 rounded-lg border border-blue-200 bg-blue-50 p-4">
                        <AlertCircle className="h-5 w-5 shrink-0 text-blue-600" />
                        <p className="text-sm text-blue-800">
                            Gunakan fitur ini untuk memindahkan data dari
                            anggota "Dummy" atau "Double" yang tidak terdeteksi
                            otomatis oleh sistem.
                        </p>
                    </div>

                    <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                        <div className="space-y-3">
                            <Label className="flex items-center gap-2 font-bold text-primary">
                                <UserCheck className="h-4 w-4" />
                                Data UTAMA (Primary)
                            </Label>
                            <SearchableSelect
                                value={primaryId}
                                onValueChange={setPrimaryId}
                                onSearchChange={setSearchTerm}
                                options={options}
                                loading={loading}
                                placeholder="Cari nama atau NIK..."
                                searchPlaceholder="Ketik minimal 2 karakter..."
                                emptyMessage={
                                    searchTerm.length < 2
                                        ? 'Ketik untuk mencari...'
                                        : 'Tidak ditemukan'
                                }
                            />
                            <p className="text-[10px] font-semibold text-muted-foreground uppercase italic">
                                * Data ini yang akan DIPERTAHANKAN
                            </p>
                        </div>

                        <div className="space-y-3">
                            <Label className="flex items-center gap-2 font-bold text-destructive">
                                <UserMinus className="h-4 w-4" />
                                Data SEKUNDER (Reassign)
                            </Label>
                            <SearchableSelect
                                value={secondaryId}
                                onValueChange={setSecondaryId}
                                onSearchChange={setSearchTerm}
                                options={options}
                                loading={loading}
                                placeholder="Cari nama atau NIK..."
                                searchPlaceholder="Ketik minimal 2 karakter..."
                                emptyMessage={
                                    searchTerm.length < 2
                                        ? 'Ketik untuk mencari...'
                                        : 'Tidak ditemukan'
                                }
                            />
                            <p className="text-[10px] font-semibold text-muted-foreground uppercase italic">
                                * Data ini akan DIHAPUS setelah merge
                            </p>
                        </div>
                    </div>
                </div>

                <DialogFooter className="gap-2 sm:gap-0">
                    <Button
                        variant="ghost"
                        onClick={() => onOpenChange(false)}
                        disabled={processing}
                    >
                        Batal
                    </Button>
                    <Button
                        onClick={handleMerge}
                        disabled={!primaryId || !secondaryId || processing}
                        className="gap-2"
                    >
                        {processing ? (
                            'Memproses...'
                        ) : (
                            <>
                                <Merge className="h-4 w-4" />
                                Eksekusi Merge Manual
                            </>
                        )}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}