import { Head, setLayoutProps } from '@inertiajs/react';
import { useEffect, useMemo, useState } from 'react';
import { AccountActionsMenu } from '@/components/accounts/account-actions-menu';
import { AccountFormDialog } from '@/components/accounts/account-form-dialog';
import { AccountViewDialog } from '@/components/accounts/account-view-dialog';
import {
    createAppColumnHelper,
    DataTable,
    DataTableColumnHeader,
} from '@/components/data-table';
import type { useServerTable } from '@/components/data-table/use-server-table';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { bank, cash, mfs } from '@/routes/accounts';
import type {
    AccountRow,
    AccountType,
    AccountsIndexProps,
} from '@/types/account';
import { accountPageTitle, accountTypeLabel } from '@/types/account';

const columnHelper = createAppColumnHelper<AccountRow>();

type AccountTableColumns = Parameters<
    typeof useServerTable<AccountRow>
>[0]['columns'];

function formatBalance(value: string): string {
    return new Intl.NumberFormat('en-BD', {
        style: 'currency',
        currency: 'BDT',
    }).format(Number(value));
}

function indexUrlForType(accountType: AccountType) {
    switch (accountType) {
        case 'bank':
            return bank.url;
        case 'cash':
            return cash.url;
        case 'mobile_banking':
            return mfs.url;
    }
}

function indexRouteForType(accountType: AccountType) {
    switch (accountType) {
        case 'bank':
            return bank;
        case 'cash':
            return cash;
        case 'mobile_banking':
            return mfs;
    }
}

export default function AccountsIndex({
    accounts,
    query,
    accountType,
    banks,
}: AccountsIndexProps) {
    const [createOpen, setCreateOpen] = useState(false);
    const [viewingAccount, setViewingAccount] = useState<AccountRow | null>(
        null,
    );
    const [editingAccount, setEditingAccount] = useState<AccountRow | null>(
        null,
    );

    const columns = useMemo(() => {
        const baseColumns = [
            columnHelper.accessor('account_name', {
                header: ({ column }) => (
                    <DataTableColumnHeader
                        title="Account Name"
                        column={column}
                    />
                ),
                enableSorting: true,
            }),
            columnHelper.accessor('account_holder_name', {
                header: ({ column }) => (
                    <DataTableColumnHeader
                        title="Holder Name"
                        column={column}
                    />
                ),
                enableSorting: true,
            }),
        ];

        const bankColumns =
            accountType !== 'cash'
                ? [
                      columnHelper.display({
                          id: 'bank',
                          header: 'Bank',
                          cell: ({ row }) => row.original.bank?.name ?? '—',
                      }),
                      columnHelper.accessor('account_number', {
                          header: 'Account Number',
                          cell: ({ getValue }) => getValue() ?? '—',
                          enableSorting: false,
                      }),
                  ]
                : [];

        const trailingColumns = [
            columnHelper.accessor('current_balance', {
                header: ({ column }) => (
                    <DataTableColumnHeader title="Balance" column={column} />
                ),
                cell: ({ getValue }) => formatBalance(getValue()),
                enableSorting: true,
            }),
            columnHelper.accessor('is_active', {
                header: 'Status',
                cell: ({ getValue }) => (
                    <Badge variant={getValue() ? 'default' : 'secondary'}>
                        {getValue() ? 'Active' : 'Inactive'}
                    </Badge>
                ),
                enableSorting: true,
            }),
            columnHelper.display({
                id: 'actions',
                header: 'Actions',
                cell: ({ row }) => (
                    <AccountActionsMenu
                        account={row.original}
                        onView={() => setViewingAccount(row.original)}
                        onEdit={() => setEditingAccount(row.original)}
                    />
                ),
            }),
        ];

        return [
            ...baseColumns,
            ...bankColumns,
            ...trailingColumns,
        ] as AccountTableColumns;
    }, [accountType]);

    const indexRoute = indexRouteForType(accountType);
    const pageTitle = accountPageTitle(accountType);

    useEffect(() => {
        setLayoutProps({
            breadcrumbs: [
                {
                    title: pageTitle,
                    href: indexRoute(),
                },
            ],
        });
    }, [indexRoute, pageTitle]);

    return (
        <>
            <Head title={pageTitle} />

            <div className="flex h-full flex-1 flex-col gap-4 p-4">
                <div className="flex items-center justify-between">
                    <div>
                        <h1 className="text-2xl font-semibold tracking-tight">
                            {pageTitle}
                        </h1>
                        <p className="text-sm text-muted-foreground">
                            Manage your{' '}
                            {accountTypeLabel(accountType).toLowerCase()}{' '}
                            accounts.
                        </p>
                    </div>
                    <Button onClick={() => setCreateOpen(true)}>
                        Create Account
                    </Button>
                </div>

                <DataTable
                    columns={columns}
                    paginator={accounts}
                    query={query}
                    url={(params) => indexUrlForType(accountType)(params)}
                    filterFields={[
                        {
                            id: 'is_active',
                            label: 'Status',
                            options: [
                                { value: '1', label: 'Active' },
                                { value: '0', label: 'Inactive' },
                            ],
                        },
                        ...(accountType !== 'cash'
                            ? [
                                  {
                                      id: 'bank_id',
                                      label: 'Bank',
                                      options: banks.map((bankOption) => ({
                                          value: String(bankOption.id),
                                          label: bankOption.name,
                                      })),
                                  },
                              ]
                            : []),
                    ]}
                    reload={['accounts', 'query']}
                />
            </div>

            <AccountViewDialog
                open={viewingAccount !== null}
                onOpenChange={(open) => {
                    if (!open) {
                        setViewingAccount(null);
                    }
                }}
                account={viewingAccount}
                accountType={accountType}
            />

            <AccountFormDialog
                open={createOpen}
                onOpenChange={setCreateOpen}
                accountType={accountType}
                banks={banks}
            />

            <AccountFormDialog
                open={editingAccount !== null}
                onOpenChange={(open) => {
                    if (!open) {
                        setEditingAccount(null);
                    }
                }}
                accountType={accountType}
                banks={banks}
                account={editingAccount}
            />
        </>
    );
}