import { Deferred, Head, Link } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import {
    ArrowDownToLine,
    ArrowUpFromLine,
    BadgeDollarSign,
    Download,
    MoreHorizontal,
    SearchIcon,
    Verified,
    Wallet,
} from 'lucide-react';

import { Button } from '@/components/ui/button';
import {
    Card,
    CardAction,
    CardContent,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
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 { formatDateID, formatIDR } from '@/lib/formatters';
import { useFilterParams } from '@/lib/hooks/useFilterParams';
import savingsRoutes from '@/routes/savings';
import type { Branch, BreadcrumbItem, PaginatedData } from '@/types';
import type {
    SavingsAccount,
    SavingsFilters,
    SavingsProduct,
} from '@/types/savings';

interface PageProps {
    accounts: PaginatedData<SavingsAccount>;
    products: SavingsProduct[];
    branches: Branch[];
    filters: SavingsFilters;
}

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

export default function Index({
    accounts,
    products,
    branches,
    filters,
}: PageProps) {
    const { can } = usePermissions();

    const columns: ColumnDef<SavingsAccount>[] = [
        {
            accessorKey: 'account_number',
            header: 'Nomor Rekening',
            cell: ({ row }) => (
                <Link
                    href={savingsRoutes.show({ account: row.original.id }).url}
                    className="font-medium text-primary hover:underline"
                >
                    {row.getValue('account_number')}
                </Link>
            ),
        },

        {
            accessorKey: 'member.name',
            header: 'Anggota',
            cell: ({ row }) => row.original.member.name,
        },

        {
            accessorKey: 'balance',
            header: 'Saldo',
            cell: ({ row }) => formatIDR(row.getValue('balance')),
        },
        {
            accessorKey: 'status',
            header: 'Status',
            cell: ({ row }) => (
                <StatusBadge type="savings" status={row.getValue('status')} />
            ),
        },
        {
            accessorKey: 'opened_date',
            header: 'Tgl Buka',
            cell: ({ row }) => formatDateID(row.getValue('opened_date')),
        },
        {
            accessorKey: 'transactions_max_transaction_date',
            header: 'Transaksi Terakhir',
            cell: ({ row }) => {
                const date = row.original.transactions_max_transaction_date;
                return date ? (
                    formatDateID(date)
                ) : (
                    <span className="text-muted-foreground">—</span>
                );
            },
        },
        {
            id: 'actions',
            cell: ({ row }) => {
                const account = 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={
                                        savingsRoutes.show({
                                            account: account.id,
                                        }).url
                                    }
                                >
                                    <Wallet className="h-4 w-4" />
                                    Lihat Detail
                                </Link>
                            </DropdownMenuItem>
                            {account.status === 'active' && (
                                <>
                                    {can('savings.deposit') && (
                                        <DropdownMenuItem asChild>
                                            <Link
                                                href={
                                                    savingsRoutes.show({
                                                        account: account.id,
                                                    }).url + '#deposit'
                                                }
                                            >
                                                <ArrowDownToLine className="h-4 w-4" />
                                                Setor
                                            </Link>
                                        </DropdownMenuItem>
                                    )}
                                    {can('savings.withdraw') && (
                                        <DropdownMenuItem asChild>
                                            <Link
                                                href={
                                                    savingsRoutes.show({
                                                        account: account.id,
                                                    }).url + '#withdraw'
                                                }
                                            >
                                                <ArrowUpFromLine className="h-4 w-4" />
                                                Tarik
                                            </Link>
                                        </DropdownMenuItem>
                                    )}
                                </>
                            )}
                        </DropdownMenuContent>
                    </DropdownMenu>
                );
            },
        },
    ];

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

    // Calculate stats
    const totalAccounts = accounts.total;
    const activeAccounts = accounts.data.filter(
        (a) => a.status === 'active',
    ).length;
    const totalBalance = accounts.data.reduce(
        (sum, a) => sum + Number(a.balance),
        0,
    );

    const handleExportCSV = () => {
        exportToCSV(
            [
                'Nomor Rekening',
                'Nama Rekening',
                'Anggota',
                'Cabang',
                'Produk',
                'Saldo',
                'Status',
                'Tgl Buka',
                'Transaksi Terakhir',
            ],
            accounts.data.map((account) => ({
                'Nomor Rekening': account.account_number,
                'Nama Rekening': account.account_name,
                Anggota: account.member.name,
                Cabang: account.branch?.name || '',
                Produk: account.savingsProduct?.name || '',
                Saldo: account.balance.toString(),
                Status: account.status,
                'Tgl Buka': account.opened_date,
                'Transaksi Terakhir':
                    account.transactions_max_transaction_date || '-',
            })),
            `simpanan_${new Date().toISOString().split('T')[0]}.csv`,
        );
    };

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

            <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 Simpanan
                        </h1>
                        <span className="text-sm text-muted-foreground">
                            Kelola rekening simpanan dan transaksi anggota.
                        </span>
                    </div>
                </div>
                {/* Stats Cards */}
                <div className="grid gap-4 md:grid-cols-3">
                    <Card>
                        <CardHeader>
                            <CardTitle>Total Rekening</CardTitle>
                            <CardAction>
                                <Wallet className="h-4 w-4" />
                            </CardAction>
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">
                                {totalAccounts.toLocaleString('id-ID')}
                            </div>
                            <p className="text-xs text-muted-foreground">
                                {activeAccounts} rekening aktif
                            </p>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardHeader>
                            <CardTitle>Total Saldo</CardTitle>
                            <CardAction>
                                <BadgeDollarSign className="h-4 w-4" />
                            </CardAction>
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">
                                {formatIDR(totalBalance)}
                            </div>
                            <p className="text-xs text-muted-foreground">
                                Semua rekening
                            </p>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardHeader>
                            <CardTitle>Rekening Aktif</CardTitle>
                            <CardAction>
                                <Verified className="h-4 w-4" />
                            </CardAction>
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">
                                {activeAccounts.toLocaleString('id-ID')}
                            </div>
                            <p className="text-xs text-muted-foreground">
                                {(
                                    (activeAccounts / totalAccounts) *
                                    100
                                ).toFixed(1)}
                                % dari total
                            </p>
                        </CardContent>
                    </Card>
                </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">
                        <div className="relative w-full">
                            <InputGroup className="max-w-md flex-1">
                                <InputGroupInput
                                    id="search"
                                    placeholder="Cari berdasarkan nomor rekening atau nama anggota..."
                                    className="pl-10"
                                    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>
                    <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" />
                                    <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>

                            <Select
                                defaultValue={filters.product_id || 'all'}
                                onValueChange={(value) =>
                                    updateFilter('product_id', value)
                                }
                            >
                                <SelectTrigger className="w-full md:w-48">
                                    <SelectValue placeholder="Semua Produk" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectGroup>
                                        <SelectLabel>
                                            Produk Simpanan
                                        </SelectLabel>
                                        <SelectItem value="all">
                                            Semua Produk
                                        </SelectItem>
                                        {products?.map((product) => (
                                            <SelectItem
                                                key={product.id}
                                                value={product.id.toString()}
                                            >
                                                {product.name}
                                            </SelectItem>
                                        ))}
                                    </SelectGroup>
                                </SelectContent>
                            </Select>
                        </Deferred>

                        <Select
                            defaultValue={filters.status || 'all'}
                            onValueChange={(value) =>
                                updateFilter('status', value)
                            }
                        >
                            <SelectTrigger className="w-full md:w-48">
                                <SelectValue placeholder="Semua Status" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectGroup>
                                    <SelectLabel>Status</SelectLabel>
                                    <SelectItem value="all">
                                        Semua Status
                                    </SelectItem>
                                    <SelectItem value="active">
                                        Aktif
                                    </SelectItem>
                                    <SelectItem value="inactive">
                                        Tidak Aktif
                                    </SelectItem>
                                    <SelectItem value="frozen">
                                        Dibekukan
                                    </SelectItem>
                                    <SelectItem value="closed">
                                        Tutup
                                    </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={savingsRoutes.export.csv().url}
                                        className="flex w-full cursor-pointer items-center"
                                    >
                                        Export Semua (CSV)
                                    </a>
                                </DropdownMenuItem>
                                <DropdownMenuItem asChild>
                                    <a
                                        href={savingsRoutes.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={accounts.data}
                    pagination={{
                        currentPage: accounts.current_page,
                        lastPage: accounts.last_page,
                        onPageChange: (page) => updatePage(page),
                    }}
                />

                {/* Pagination */}
            </div>
        </AppLayout>
    );
}