import { Head, Link, router } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import {
    Download,
    FileText,
    MoreHorizontal,
    Pencil,
    Plus,
    SearchIcon,
    Verified,
} from 'lucide-react';

import { Button } from '@/components/ui/button';
import { DataTable } from '@/components/ui/data-table';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
    InputGroup,
    InputGroupAddon,
    InputGroupInput,
} from '@/components/ui/input-group';
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectLabel,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { StatusBadge } from '@/components/ui/status-badge';
import { usePermissions } from '@/hooks/use-permissions';
import AppLayout from '@/layouts/app-layout';
import { exportToCSV } from '@/lib/exportToCSV';
import { useFilterParams } from '@/lib/hooks/useFilterParams';
import { toastError, toastLoading, toastSuccess } from '@/lib/toast';
import membersRoutes from '@/routes/members';
import type {
    Branch,
    BreadcrumbItem,
    Member,
    MemberFilters,
    PaginatedData,
} from '@/types';

interface PageProps {
    members: PaginatedData<Member>;
    branches: Branch[];
    filters: MemberFilters;
}

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Nasabah',
        href: membersRoutes.index().url,
    },
];

export default function Index({ members, branches, filters }: PageProps) {
    const { can } = usePermissions();
    const columns: ColumnDef<Member>[] = [
        {
            accessorKey: 'id_number',
            header: 'Nomor Identitas',
            cell: ({ row }) => (
                <Link
                    href={membersRoutes.show({ member: row.original.id }).url}
                    className="font-medium text-primary hover:underline"
                >
                    {row.getValue('id_number')}
                </Link>
            ),
        },
        {
            accessorKey: 'name',
            header: 'Nama Lengkap',
            cell: ({ row }) => row.getValue('name'),
        },
        {
            accessorKey: 'is_verified',
            header: 'Status',
            cell: ({ row }) => (
                <StatusBadge
                    type="member"
                    status={
                        row.getValue('is_verified') ? 'verified' : 'unverified'
                    }
                />
            ),
        },
        {
            accessorKey: 'registration_date',
            header: 'Tgl Registrasi',
            cell: ({ row }) => {
                const date = new Date(row.getValue('registration_date'));
                return date.toLocaleDateString('id-ID', {
                    day: '2-digit',
                    month: 'short',
                    year: 'numeric',
                });
            },
        },
        {
            id: 'actions',
            cell: ({ row }) => {
                const member = row.original;

                return (
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0">
                                <span className="sr-only">Buka menu</span>
                                <MoreHorizontal className="h-4 w-4" />
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                            <DropdownMenuItem asChild>
                                <Link
                                    href={
                                        membersRoutes.show({
                                            member: member.id,
                                        }).url
                                    }
                                >
                                    <FileText className="h-4 w-4" />
                                    Lihat Detail
                                </Link>
                            </DropdownMenuItem>
                            {can('members.update') && (
                                <DropdownMenuItem asChild>
                                    <Link
                                        href={
                                            membersRoutes.edit({
                                                member: member.id,
                                            }).url
                                        }
                                    >
                                        <Pencil className="h-4 w-4" />
                                        Edit
                                    </Link>
                                </DropdownMenuItem>
                            )}
                            {!member.is_verified && can('members.verify') && (
                                <DropdownMenuItem
                                    onClick={() => {
                                        toastLoading(
                                            'Memverifikasi anggota...',
                                        );
                                        router.post(
                                            membersRoutes.verify({
                                                member: member.id,
                                            }).url,
                                            {},
                                            {
                                                onSuccess: () =>
                                                    toastSuccess(
                                                        'Anggota berhasil diverifikasi',
                                                    ),
                                                onError: () =>
                                                    toastError(
                                                        'Gagal memverifikasi anggota',
                                                    ),
                                            },
                                        );
                                    }}
                                >
                                    <Verified className="h-4 w-4" />
                                    Verifikasi
                                </DropdownMenuItem>
                            )}
                        </DropdownMenuContent>
                    </DropdownMenu>
                );
            },
        },
    ];

    // Use filter params hook
    const { updateFilter, updatePage, search } = useFilterParams({
        baseUrl: membersRoutes.index().url,
    });

    const handleExportCSV = () => {
        exportToCSV(
            [
                'Nomor Identitas',
                'Nama Lengkap',
                'Telepon',
                'Email',
                'Cabang',
                'Status',
                'Tgl Registrasi',
            ],
            members.data.map((member) => ({
                'Nomor Identitas': member.id_number,
                'Nama Lengkap': member.name,
                Telepon: member.phone || '',
                Email: member.email || '',
                Cabang: member.branch?.name || '-',
                Status: member.is_verified ? 'Terverifikasi' : 'Belum',
                'Tgl Registrasi': member.registration_date,
            })),
            `nasabah_${new Date().toISOString().split('T')[0]}.csv`,
        );
    };

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

            <div className="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4">
                {/* Header */}
                <div className="flex items-center justify-between">
                    <div className="flex flex-col gap-1">
                        <h1 className="text-2xl font-black">
                            Manajemen Nasabah
                        </h1>
                        <span className="text-sm text-muted-foreground">
                            Kelola nasabah koperasi dan akun mereka.
                        </span>
                    </div>
                    {can('members.create') && (
                        <Button asChild>
                            <Link href={membersRoutes.create().url}>
                                <Plus className="h-4 w-4" />
                                Tambah Nasabah
                            </Link>
                        </Button>
                    )}
                </div>

                {/* Search & Filters */}
                <div className="flex flex-col gap-4 md:flex-row md:gap-4">
                    <div className="flex w-full md:w-1/2">
                        <InputGroup className="max-w-md flex-1">
                            <InputGroupInput
                                id="search"
                                placeholder="Cari berdasarkan nama atau NIK..."
                                defaultValue={filters.search}
                                onKeyDown={(e) => {
                                    if (e.key === 'Enter') {
                                        search(e.currentTarget.value);
                                    }
                                }}
                                onBlur={(e) => search(e.currentTarget.value)}
                            />
                            <InputGroupAddon align="inline-start">
                                <SearchIcon className="h-4 w-4" />
                            </InputGroupAddon>
                        </InputGroup>
                    </div>
                    <div className="flex w-full justify-end gap-2">
                        {/* <Deferred
                            data="filters"
                            fallback={
                                <div className="h-10 w-full animate-pulse rounded-md bg-muted md:w-48" />
                            }
                        >
                            <Select
                                defaultValue={filters.branch_id || 'all'}
                                onValueChange={(value) =>
                                    updateFilter('branch_id', value)
                                }
                            >
                                <SelectTrigger className="w-full md:w-48">
                                    <SelectValue placeholder="Semua Cabang" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectGroup>
                                        <SelectLabel>Cabang</SelectLabel>
                                        <SelectItem value="all">
                                            Semua Cabang
                                        </SelectItem>
                                        {branches?.map((branch) => (
                                            <SelectItem
                                                key={branch.id}
                                                value={branch.id.toString()}
                                            >
                                                {branch.name}
                                            </SelectItem>
                                        ))}
                                    </SelectGroup>
                                </SelectContent>
                            </Select>
                        </Deferred> */}

                        <Select
                            defaultValue={filters.is_verified || 'all'}
                            onValueChange={(value) =>
                                updateFilter('is_verified', value)
                            }
                        >
                            <SelectTrigger className="w-full md:w-48">
                                <SelectValue placeholder="Semua Status" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectGroup>
                                    <SelectLabel>Status Verifikasi</SelectLabel>
                                    <SelectItem value="all">
                                        Semua Status
                                    </SelectItem>
                                    <SelectItem value="1">
                                        Terverifikasi
                                    </SelectItem>
                                    <SelectItem value="0">
                                        Belum Verifikasi
                                    </SelectItem>
                                </SelectGroup>
                            </SelectContent>
                        </Select>

                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <Button variant="outline">
                                    <Download className="mr-2 h-4 w-4" />
                                    Export Data
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end" className="w-56">
                                <DropdownMenuItem onClick={handleExportCSV}>
                                    Export CSV (Halaman Ini)
                                </DropdownMenuItem>
                                <DropdownMenuItem asChild>
                                    <a
                                        href={membersRoutes.export.csv().url}
                                        className="flex w-full cursor-pointer items-center"
                                    >
                                        Export Semua (CSV)
                                    </a>
                                </DropdownMenuItem>
                                <DropdownMenuItem asChild>
                                    <a
                                        href={membersRoutes.export.excel().url}
                                        className="flex w-full cursor-pointer items-center"
                                    >
                                        Export Semua (Excel)
                                    </a>
                                </DropdownMenuItem>
                                <DropdownMenuItem asChild>
                                    <a
                                        href={membersRoutes.export.pdf().url}
                                        className="flex w-full cursor-pointer items-center"
                                    >
                                        Export Semua (PDF)
                                    </a>
                                </DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </div>
                </div>

                {/* Table */}
                <DataTable
                    columns={columns}
                    data={members.data}
                    pagination={{
                        currentPage: members.current_page,
                        lastPage: members.last_page,
                        onNext: () => updatePage(members.current_page + 1),
                        onPrev: () => updatePage(members.current_page - 1),
                        onPageChange: (page) => updatePage(page),
                    }}
                />
            </div>
        </AppLayout>
    );
}