import { router } from '@inertiajs/react';
import { AlertCircle, ArrowRight, Merge } from 'lucide-react';
import { 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 {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { toastError, toastSuccess } from '@/lib/toast';
import dataCleansingRoutes from '@/routes/data-cleansing';
import type { Member } from '@/types/member';
import type { User } from '@/types/user';

interface MergeEntityModalProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    type: 'member' | 'collector';
    groupName: string;
    entities: (Member | User)[];
}

export function MergeEntityModal({
    open,
    onOpenChange,
    type,
    groupName,
    entities,
}: MergeEntityModalProps) {
    const [primaryId, setPrimaryId] = useState<string>('');
    const [processing, setProcessing] = useState(false);

    const handleMerge = () => {
        if (!primaryId) {
            toastError('Silakan pilih data utama');
            return;
        }

        const secondaryIds = entities
            .filter((e) => e.id.toString() !== primaryId)
            .map((e) => e.id);

        setProcessing(true);

        router.post(
            dataCleansingRoutes.merge().url,
            {
                type,
                primary_id: primaryId,
                secondary_ids: secondaryIds,
            },
            {
                onSuccess: () => {
                    toastSuccess('Data berhasil digabungkan');
                    onOpenChange(false);
                },
                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-xl">
                <DialogHeader>
                    <DialogTitle className="flex items-center gap-2">
                        <Merge className="h-5 w-5 text-primary" />
                        Gabungkan {type === 'member'
                            ? 'Anggota'
                            : 'Kolektor'}: {groupName}
                    </DialogTitle>
                    <DialogDescription>
                        Pilih satu data yang akan menjadi data utama. Data
                        lainnya akan dipindahkan ke data utama ini dan dihapus.
                    </DialogDescription>
                </DialogHeader>

                <div className="grid gap-6 py-4">
                    <div className="flex gap-3 rounded-lg border border-amber-200 bg-amber-50 p-4">
                        <AlertCircle className="h-5 w-5 shrink-0 text-amber-600" />
                        <p className="text-sm text-amber-800">
                            <strong>Peringatan!</strong> Tindakan ini tidak
                            dapat dibatalkan. Semua data keuangan (pembiayaan,
                            tabungan) dari data sekunder akan dipindahkan ke
                            data utama yang Anda pilih.
                        </p>
                    </div>

                    <div className="space-y-3">
                        <Label htmlFor="primary-select">
                            Pilih Data Utama (Primary)
                        </Label>
                        <Select value={primaryId} onValueChange={setPrimaryId}>
                            <SelectTrigger
                                id="primary-select"
                                className="h-12 w-full"
                            >
                                <SelectValue placeholder="Pilih data yang paling akurat..." />
                            </SelectTrigger>
                            <SelectContent>
                                {entities.map((entity) => (
                                    <SelectItem
                                        key={entity.id}
                                        value={entity.id.toString()}
                                    >
                                        <div className="flex flex-col py-1 text-left">
                                            <span className="font-medium">
                                                {entity.name}
                                                {type === 'member'
                                                    ? ` (NIK: ${(entity as Member).id_number || '-'})`
                                                    : ` (${(entity as User).email})`}
                                            </span>
                                            <span className="text-xs text-muted-foreground">
                                                ID: {entity.id} • Dibuat:{' '}
                                                {entity.created_at
                                                    ? new Date(
                                                          entity.created_at,
                                                      ).toLocaleDateString(
                                                          'id-ID',
                                                      )
                                                    : '-'}
                                            </span>
                                        </div>
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    </div>

                    <div className="space-y-2">
                        <Label className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
                            Data Sekunder yang Akan Digabung (Dihapus)
                        </Label>
                        <div className="space-y-2 rounded-md border bg-muted/30 p-3">
                            {entities.filter(
                                (e) => e.id.toString() !== primaryId,
                            ).length > 0 ? (
                                entities
                                    .filter(
                                        (e) => e.id.toString() !== primaryId,
                                    )
                                    .map((entity) => (
                                        <div
                                            key={entity.id}
                                            className="flex items-center justify-between py-1 text-sm"
                                        >
                                            <span>
                                                {entity.name}
                                                <span className="ml-2 text-muted-foreground">
                                                    {type === 'member'
                                                        ? `(${(entity as Member).id_number || '-'})`
                                                        : `(${(entity as User).email})`}
                                                </span>
                                            </span>
                                            <ArrowRight className="h-4 w-4 text-muted-foreground" />
                                        </div>
                                    ))
                            ) : (
                                <p className="text-xs text-muted-foreground italic">
                                    Pilih data utama di atas terlebih dahulu.
                                </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 || processing}
                        className="gap-2"
                    >
                        {processing ? (
                            'Memproses...'
                        ) : (
                            <>
                                <Merge className="h-4 w-4" />
                                Gabungkan Sekarang
                            </>
                        )}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}