import { Head, router } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import {
    Database,
    Merge,
    Plus,
    UserCheck,
    UserMinus,
    UserX,
    Users,
} from 'lucide-react';
import { useState } from 'react';

import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { ConfirmDialog } from '@/components/ui/confirm-dialog';
import { DataTable } from '@/components/ui/data-table';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import AppLayout from '@/layouts/app-layout';
import { toastError, toastSuccess } from '@/lib/toast';
import * as dataCleansingRoutes from '@/routes/data-cleansing';
import type { Member } from '@/types/member';
import type { User } from '@/types/user';
import { ManualMergeModal } from './Components/ManualMergeModal';
import { MergeEntityModal } from './Components/MergeEntityModal';

interface MemberGroup {
    id: string;
    name: string;
    nik?: string;
    phone?: string;
    count: number;
    members: Member[];
    type: 'by_nik' | 'by_phone' | 'by_name';
}

interface CollectorGroup {
    id: string;
    name: string;
    email: string;
    count: number;
    users: User[];
}

interface PaginationInfo {
    total: number;
    per_page: number;
    current_page: number;
    last_page: number;
}

interface PaginatedData<T> {
    data: T[];
    pagination?: PaginationInfo;
    pagination_nik?: PaginationInfo;
    pagination_phone?: PaginationInfo;
    pagination_name?: PaginationInfo;
}

interface DataCleansingProps {
    duplicateMembers: PaginatedData<MemberGroup>;
    duplicateCollectors: PaginatedData<CollectorGroup>;
    dummyMembers: PaginatedData<Member>;
    dummyCollectors: PaginatedData<User>;
}

const breadcrumbs = [
    {
        title: 'Data Cleansing',
        href: dataCleansingRoutes.index().url,
    },
];

export default function Index({
    duplicateMembers,
    duplicateCollectors,
    dummyMembers,
    dummyCollectors,
}: DataCleansingProps) {
    const [manualMergeModal, setManualMergeModal] = useState(false);
    const [mergeModal, setMergeModal] = useState<{
        open: boolean;
        type: 'member' | 'collector';
        groupName: string;
        entities: (Member | User)[];
    }>({
        open: false,
        type: 'member',
        groupName: '',
        entities: [],
    });

    const [deleteModal, setDeleteModal] = useState<{
        open: boolean;
        id: string | null;
        type: 'member' | 'collector';
        name: string;
        processing: boolean;
    }>({
        open: false,
        id: null,
        type: 'member',
        name: '',
        processing: false,
    });

    const handleMerge = (
        type: 'member' | 'collector',
        groupName: string,
        items: (Member | User)[],
    ) => {
        setMergeModal({
            open: true,
            type,
            groupName,
            entities: items,
        });
    };

    const handleDelete = (
        type: 'member' | 'collector',
        id: string,
        name: string,
    ) => {
        setDeleteModal({
            open: true,
            id,
            type,
            name,
            processing: false,
        });
    };

    const confirmDelete = () => {
        if (!deleteModal.id) {
            return;
        }

        setDeleteModal((prev) => ({ ...prev, processing: true }));

        router.delete(dataCleansingRoutes.destroy().url, {
            data: {
                type: deleteModal.type,
                id: deleteModal.id,
            },
            onSuccess: () => {
                toastSuccess('Data berhasil dihapus');
                setDeleteModal({
                    open: false,
                    id: null,
                    type: 'member',
                    name: '',
                    processing: false,
                });
            },
            onError: () => {
                toastError(
                    'Gagal menghapus data. Data mungkin masih memiliki relasi aktif.',
                );
                setDeleteModal((prev) => ({ ...prev, processing: false }));
            },
        });
    };

    const goToPage = (param: string, page: number) => {
        const url = new URL(window.location.href);
        url.searchParams.set(param, page.toString());
        router.visit(url.toString(), {
            preserveScroll: true,
            preserveState: true,
        });
    };

    const memberColumns: ColumnDef<MemberGroup>[] = [
        {
            accessorKey: 'name',
            header: 'Nama Terdeteksi',
            cell: ({ row }) => (
                <span className="font-medium">{row.original.name}</span>
            ),
        },
        {
            accessorKey: 'nik',
            header: 'NIK',
            cell: ({ row }) => <span>{row.original.nik || '-'}</span>,
        },
        {
            accessorKey: 'phone',
            header: 'No. HP',
            cell: ({ row }) => <span>{row.original.phone || '-'}</span>,
        },
        {
            accessorKey: 'count',
            header: 'Jumlah Record',
            cell: ({ row }) => (
                <div className="flex flex-col items-center gap-1">
                    <span className="rounded bg-amber-100 px-2 py-1 text-xs font-bold text-amber-800">
                        {row.original.count} records
                    </span>
                    <span className="text-[10px] font-bold text-muted-foreground uppercase">
                        {row.original.type.replace('by_', 'Identik ')}
                    </span>
                </div>
            ),
        },
        {
            id: 'actions',
            cell: ({ row }) => (
                <Button
                    variant="outline"
                    size="sm"
                    onClick={() =>
                        handleMerge(
                            'member',
                            row.original.name,
                            row.original.members,
                        )
                    }
                    className="gap-2"
                >
                    <Merge className="h-4 w-4" />
                    Gabungkan
                </Button>
            ),
        },
    ];

    const collectorColumns: ColumnDef<CollectorGroup>[] = [
        {
            accessorKey: 'name',
            header: 'Nama',
            cell: ({ row }) => (
                <span className="font-medium">{row.original.name}</span>
            ),
        },
        {
            accessorKey: 'email',
            header: 'Email',
            cell: ({ row }) => <span>{row.original.email}</span>,
        },
        {
            accessorKey: 'count',
            header: 'Jumlah',
            cell: ({ row }) => (
                <span className="rounded bg-amber-100 px-2 py-1 text-xs font-bold text-amber-800">
                    {row.original.count} records
                </span>
            ),
        },
        {
            id: 'actions',
            cell: ({ row }) => (
                <Button
                    variant="outline"
                    size="sm"
                    onClick={() =>
                        handleMerge(
                            'collector',
                            row.original.name,
                            row.original.users,
                        )
                    }
                    className="gap-2"
                >
                    <Merge className="h-4 w-4" />
                    Gabungkan
                </Button>
            ),
        },
    ];

    const dummyMemberColumns: ColumnDef<Member>[] = [
        {
            accessorKey: 'id',
            header: 'ID',
        },
        {
            accessorKey: 'name',
            header: 'Nama',
        },
        {
            accessorKey: 'notes',
            header: 'Keterangan',
        },
        {
            id: 'actions',
            cell: ({ row }) => (
                <div className="flex gap-2">
                    <Button
                        variant="ghost"
                        size="sm"
                        onClick={() =>
                            handleDelete(
                                'member',
                                row.original.id.toString(),
                                row.original.name,
                            )
                        }
                    >
                        <UserX className="mr-2 h-4 w-4 text-destructive" />
                        Hapus
                    </Button>
                </div>
            ),
        },
    ];

    const dummyCollectorColumns: ColumnDef<User>[] = [
        {
            accessorKey: 'id',
            header: 'ID',
        },
        {
            accessorKey: 'name',
            header: 'Nama',
        },
        {
            accessorKey: 'email',
            header: 'Email',
        },
        {
            id: 'actions',
            cell: ({ row }) => (
                <Button
                    variant="ghost"
                    size="sm"
                    onClick={() =>
                        handleDelete(
                            'collector',
                            row.original.id.toString(),
                            row.original.name,
                        )
                    }
                >
                    <UserX className="mr-2 h-4 w-4 text-destructive" />
                    Hapus
                </Button>
            ),
        },
    ];

    // Filter duplicate members by type for separate tables
    const nikDuplicatesData = duplicateMembers.data.filter(
        (m) => m.type === 'by_nik',
    );
    const phoneDuplicatesData = duplicateMembers.data.filter(
        (m) => m.type === 'by_phone',
    );
    const nameDuplicatesData = duplicateMembers.data.filter(
        (m) => m.type === 'by_name',
    );

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Data Cleansing" />

            <div className="flex h-full flex-1 flex-col gap-6 p-4">
                <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
                    <div className="flex flex-col gap-1">
                        <h1 className="flex items-center gap-3 text-3xl font-black tracking-tight">
                            <Database className="h-8 w-8 text-primary" />
                            Data Cleansing Dashboard
                        </h1>
                        <p className="text-muted-foreground">
                            Identifikasi dan bersihkan data duplicate atau dummy
                            untuk menjaga integritas data koperasi.
                        </p>
                    </div>
                    <Button
                        onClick={() => setManualMergeModal(true)}
                        className="gap-2 shadow-sm"
                    >
                        <Plus className="h-4 w-4" />
                        Merge Manual
                    </Button>
                </div>

                <div className="grid gap-6 md:grid-cols-3">
                    <Card className="border-amber-200 bg-linear-to-br from-amber-50 to-white dark:from-amber-950 dark:to-background">
                        <CardHeader className="pb-2">
                            <CardTitle className="flex items-center gap-2 text-sm font-medium">
                                <Users className="h-4 w-4 text-amber-600" />
                                Duplicate Anggota
                            </CardTitle>
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">
                                {duplicateMembers.data.length} identitas
                            </div>
                            <p className="text-xs text-muted-foreground">
                                NIK / Phone / Fuzzy Name
                            </p>
                        </CardContent>
                    </Card>
                    <Card className="border-blue-200 bg-linear-to-br from-blue-50 to-white dark:from-blue-950 dark:to-background">
                        <CardHeader className="pb-2">
                            <CardTitle className="flex items-center gap-2 text-sm font-medium">
                                <UserCheck className="h-4 w-4 text-blue-600" />
                                Duplicate Kolektor
                            </CardTitle>
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">
                                {duplicateCollectors.data.length} identitas
                            </div>
                            <p className="text-xs text-muted-foreground">
                                Email Duplicate
                            </p>
                        </CardContent>
                    </Card>
                    <Card className="border-red-200 bg-linear-to-br from-red-50 to-white dark:from-red-950 dark:to-background">
                        <CardHeader className="pb-2">
                            <CardTitle className="flex items-center gap-2 text-sm font-medium">
                                <UserMinus className="h-4 w-4 text-red-600" />
                                Data Dummy (CSV)
                            </CardTitle>
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">
                                {(dummyMembers.data?.length || 0) +
                                    (dummyCollectors.data?.length || 0)}{' '}
                                record
                            </div>
                            <p className="text-xs text-muted-foreground">
                                Tag "Dummy" / Import CSV
                            </p>
                        </CardContent>
                    </Card>
                </div>

                <Tabs defaultValue="duplicates" className="w-full">
                    <TabsList className="grid w-full max-w-sm grid-cols-2">
                        <TabsTrigger
                            value="duplicates"
                            className="flex items-center gap-2"
                        >
                            <Merge className="h-4 w-4" />
                            Data Duplikasi
                        </TabsTrigger>
                        <TabsTrigger
                            value="dummy"
                            className="flex items-center gap-2"
                        >
                            <UserMinus className="h-4 w-4" />
                            Data Dummy
                        </TabsTrigger>
                    </TabsList>

                    <TabsContent value="duplicates" className="space-y-6 pt-4">
                        <div className="grid gap-6">
                            <Card className="border-purple-200 shadow-sm">
                                <CardHeader className="bg-purple-50/50">
                                    <div className="flex items-center justify-between">
                                        <div>
                                            <CardTitle>
                                                Duplicate Anggota (Fuzzy Name
                                                Matching)
                                            </CardTitle>
                                            <CardDescription>
                                                Nama depan identik + 5 huruf
                                                kata kedua.
                                            </CardDescription>
                                        </div>
                                    </div>
                                </CardHeader>
                                <CardContent className="pt-6">
                                    <DataTable
                                        columns={memberColumns}
                                        data={nameDuplicatesData}
                                        pagination={
                                            duplicateMembers.pagination_name
                                                ? {
                                                      currentPage:
                                                          duplicateMembers
                                                              .pagination_name
                                                              .current_page,
                                                      lastPage:
                                                          duplicateMembers
                                                              .pagination_name
                                                              .last_page,
                                                      onNext: () =>
                                                          goToPage(
                                                              'member_name_page',
                                                              duplicateMembers
                                                                  .pagination_name!
                                                                  .current_page +
                                                                  1,
                                                          ),
                                                      onPrev: () =>
                                                          goToPage(
                                                              'member_name_page',
                                                              duplicateMembers
                                                                  .pagination_name!
                                                                  .current_page -
                                                                  1,
                                                          ),
                                                      onPageChange: (page) =>
                                                          goToPage(
                                                              'member_name_page',
                                                              page,
                                                          ),
                                                      pageParamName:
                                                          'member_name_page',
                                                  }
                                                : undefined
                                        }
                                    />
                                </CardContent>
                            </Card>

                            <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
                                <Card className="border-amber-100 shadow-sm">
                                    <CardHeader className="bg-amber-50/50">
                                        <CardTitle>
                                            Duplicate Anggota (Identik NIK)
                                        </CardTitle>
                                        <CardDescription>
                                            Anggota dengan nomor identitas yang
                                            sama.
                                        </CardDescription>
                                    </CardHeader>
                                    <CardContent className="pt-6">
                                        <DataTable
                                            columns={memberColumns}
                                            data={nikDuplicatesData}
                                            pagination={
                                                duplicateMembers.pagination_nik
                                                    ? {
                                                          currentPage:
                                                              duplicateMembers
                                                                  .pagination_nik
                                                                  .current_page,
                                                          lastPage:
                                                              duplicateMembers
                                                                  .pagination_nik
                                                                  .last_page,
                                                          onNext: () =>
                                                              goToPage(
                                                                  'member_nik_page',
                                                                  duplicateMembers
                                                                      .pagination_nik!
                                                                      .current_page +
                                                                      1,
                                                              ),
                                                          onPrev: () =>
                                                              goToPage(
                                                                  'member_nik_page',
                                                                  duplicateMembers
                                                                      .pagination_nik!
                                                                      .current_page -
                                                                      1,
                                                              ),
                                                          onPageChange: (
                                                              page,
                                                          ) =>
                                                              goToPage(
                                                                  'member_nik_page',
                                                                  page,
                                                              ),
                                                          pageParamName:
                                                              'member_nik_page',
                                                      }
                                                    : undefined
                                            }
                                        />
                                    </CardContent>
                                </Card>

                                <Card className="border-blue-100 shadow-sm">
                                    <CardHeader className="bg-blue-50/50">
                                        <CardTitle>
                                            Duplicate Anggota (Identik No. HP)
                                        </CardTitle>
                                        <CardDescription>
                                            Anggota dengan nomor telepon yang
                                            sama.
                                        </CardDescription>
                                    </CardHeader>
                                    <CardContent className="pt-6">
                                        <DataTable
                                            columns={memberColumns}
                                            data={phoneDuplicatesData}
                                            pagination={
                                                duplicateMembers.pagination_phone
                                                    ? {
                                                          currentPage:
                                                              duplicateMembers
                                                                  .pagination_phone
                                                                  .current_page,
                                                          lastPage:
                                                              duplicateMembers
                                                                  .pagination_phone
                                                                  .last_page,
                                                          onNext: () =>
                                                              goToPage(
                                                                  'member_phone_page',
                                                                  duplicateMembers
                                                                      .pagination_phone!
                                                                      .current_page +
                                                                      1,
                                                              ),
                                                          onPrev: () =>
                                                              goToPage(
                                                                  'member_phone_page',
                                                                  duplicateMembers
                                                                      .pagination_phone!
                                                                      .current_page -
                                                                      1,
                                                              ),
                                                          onPageChange: (
                                                              page,
                                                          ) =>
                                                              goToPage(
                                                                  'member_phone_page',
                                                                  page,
                                                              ),
                                                          pageParamName:
                                                              'member_phone_page',
                                                      }
                                                    : undefined
                                            }
                                        />
                                    </CardContent>
                                </Card>
                            </div>

                            <Card className="border-muted shadow-sm">
                                <CardHeader>
                                    <CardTitle>
                                        Identitas Kolektor Duplikat
                                    </CardTitle>
                                    <CardDescription>
                                        Kolektor teridentifikasi duplikat
                                        berdasarkan email.
                                    </CardDescription>
                                </CardHeader>
                                <CardContent>
                                    <DataTable
                                        columns={collectorColumns}
                                        data={duplicateCollectors.data}
                                        pagination={
                                            duplicateCollectors.pagination
                                                ? {
                                                      currentPage:
                                                          duplicateCollectors
                                                              .pagination
                                                              .current_page,
                                                      lastPage:
                                                          duplicateCollectors
                                                              .pagination
                                                              .last_page,
                                                      onNext: () =>
                                                          goToPage(
                                                              'collector_name_page',
                                                              duplicateCollectors
                                                                  .pagination!
                                                                  .current_page +
                                                                  1,
                                                          ),
                                                      onPrev: () =>
                                                          goToPage(
                                                              'collector_name_page',
                                                              duplicateCollectors
                                                                  .pagination!
                                                                  .current_page -
                                                                  1,
                                                          ),
                                                      onPageChange: (page) =>
                                                          goToPage(
                                                              'collector_name_page',
                                                              page,
                                                          ),
                                                      pageParamName:
                                                          'collector_name_page',
                                                  }
                                                : undefined
                                        }
                                    />
                                </CardContent>
                            </Card>
                        </div>
                    </TabsContent>

                    <TabsContent value="dummy" className="space-y-6 pt-4">
                        <div className="grid gap-6">
                            <Card className="border-red-100 shadow-sm">
                                <CardHeader className="bg-red-50/50">
                                    <CardTitle>
                                        Anggota Dummy (Import CSV)
                                    </CardTitle>
                                    <CardDescription>
                                        Anggota yang diimport dari CSV dan belum
                                        divalidasi atau direassign.
                                    </CardDescription>
                                </CardHeader>
                                <CardContent className="pt-6">
                                    <DataTable
                                        columns={dummyMemberColumns}
                                        data={dummyMembers.data}
                                        pagination={
                                            dummyMembers.pagination
                                                ? {
                                                      currentPage:
                                                          dummyMembers
                                                              .pagination
                                                              .current_page,
                                                      lastPage:
                                                          dummyMembers
                                                              .pagination
                                                              .last_page,
                                                      onNext: () =>
                                                          goToPage(
                                                              'dummy_member_page',
                                                              dummyMembers
                                                                  .pagination!
                                                                  .current_page +
                                                                  1,
                                                          ),
                                                      onPrev: () =>
                                                          goToPage(
                                                              'dummy_member_page',
                                                              dummyMembers
                                                                  .pagination!
                                                                  .current_page -
                                                                  1,
                                                          ),
                                                      onPageChange: (page) =>
                                                          goToPage(
                                                              'dummy_member_page',
                                                              page,
                                                          ),
                                                      pageParamName:
                                                          'dummy_member_page',
                                                  }
                                                : undefined
                                        }
                                    />
                                </CardContent>
                            </Card>

                            <Card className="border-muted shadow-sm">
                                <CardHeader>
                                    <CardTitle>Kolektor Dummy</CardTitle>
                                    <CardDescription>
                                        Data kolektor buatan (Dummy) yang
                                        digunakan saat import awal.
                                    </CardDescription>
                                </CardHeader>
                                <CardContent>
                                    <DataTable
                                        columns={dummyCollectorColumns}
                                        data={dummyCollectors.data}
                                        pagination={
                                            dummyCollectors.pagination
                                                ? {
                                                      currentPage:
                                                          dummyCollectors
                                                              .pagination
                                                              .current_page,
                                                      lastPage:
                                                          dummyCollectors
                                                              .pagination
                                                              .last_page,
                                                      onNext: () =>
                                                          goToPage(
                                                              'dummy_collector_page',
                                                              dummyCollectors
                                                                  .pagination!
                                                                  .current_page +
                                                                  1,
                                                          ),
                                                      onPrev: () =>
                                                          goToPage(
                                                              'dummy_collector_page',
                                                              dummyCollectors
                                                                  .pagination!
                                                                  .current_page -
                                                                  1,
                                                          ),
                                                      onPageChange: (page) =>
                                                          goToPage(
                                                              'dummy_collector_page',
                                                              page,
                                                          ),
                                                      pageParamName:
                                                          'dummy_collector_page',
                                                  }
                                                : undefined
                                        }
                                    />
                                </CardContent>
                            </Card>
                        </div>
                    </TabsContent>
                </Tabs>

                <MergeEntityModal
                    open={mergeModal.open}
                    onOpenChange={(open) =>
                        setMergeModal((prev) => ({ ...prev, open }))
                    }
                    type={mergeModal.type}
                    groupName={mergeModal.groupName}
                    entities={mergeModal.entities}
                />

                <ManualMergeModal
                    open={manualMergeModal}
                    onOpenChange={setManualMergeModal}
                />

                <ConfirmDialog
                    open={deleteModal.open}
                    onOpenChange={(open) =>
                        setDeleteModal((prev) => ({ ...prev, open }))
                    }
                    title="Hapus Data Dummy"
                    description={`Apakah Anda yakin ingin menghapus data ${deleteModal.type === 'member' ? 'Anggota' : 'Kolektor'} "${deleteModal.name}"? Tindakan ini hanya akan berhasil jika data tidak memiliki relasi keuangan aktif (seperti pembiayaan yang belum lunas).`}
                    confirmText="Hapus Sekarang"
                    variant="destructive"
                    isLoading={deleteModal.processing}
                    onConfirm={confirmDelete}
                />
            </div>
        </AppLayout>
    );
}