import { Head, Link } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import {
    Eye,
    FolderTree,
    Layers,
    ListTodo,
    MoreHorizontal,
    Plus,
    SearchIcon,
} 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 { formatIDR } from '@/lib/formatters';
import { useFilterParams } from '@/lib/hooks/useFilterParams';
import accountingRoutes from '@/routes/accounting';
import type { BreadcrumbItem, PaginatedData } from '@/types';
import type { Account, AccountFilters } from '@/types/accounting';

interface PageProps {
    accounts: PaginatedData<Account>;
    filters: AccountFilters;
}

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Akuntansi',
        href: accountingRoutes.accounts.index().url,
    },
    {
        title: 'Daftar Akun',
        href: accountingRoutes.accounts.index().url,
    },
];

export default function AccountsIndex({ accounts, filters }: PageProps) {
    const { can } = usePermissions();
    const { updateFilter, updatePage, search } = useFilterParams({
        baseUrl: accountingRoutes.accounts.index().url,
    });

    const columns: ColumnDef<Account>[] = [
        {
            accessorKey: 'code',
            header: 'Kode',
            cell: ({ row }) => (
                <Link
                    href={
                        accountingRoutes.accounts.show({
                            account: row.original.id,
                        }).url
                    }
                    className="font-mono font-medium text-primary hover:underline"
                >
                    {row.getValue('code')}
                </Link>
            ),
        },
        {
            accessorKey: 'name',
            header: 'Nama Akun',
            cell: ({ row }) => {
                const account = row.original;
                return (
                    <div className="flex flex-col">
                        <span className={account.is_header ? 'font-bold' : ''}>
                            {account.name}
                        </span>
                        {account.parent && (
                            <span className="text-xs text-muted-foreground">
                                {account.parent.name}
                            </span>
                        )}
                    </div>
                );
            },
        },
        {
            accessorKey: 'classification',
            header: 'Klasifikasi',
            cell: ({ row }) => {
                const classification = row.getValue('classification') as string;
                return <span className="capitalize">{classification}</span>;
            },
        },
        {
            accessorKey: 'level',
            header: 'Level',
            cell: ({ row }) => {
                const level = row.getValue('level') as number;
                return <span className="text-sm">Lvl {level}</span>;
            },
        },
        {
            accessorKey: 'balance',
            header: 'Saldo',
            cell: ({ row }) => formatIDR(row.getValue('balance')),
        },
        {
            accessorKey: 'is_active',
            header: 'Status',
            cell: ({ row }) => (
                <StatusBadge
                    type="default"
                    status={row.original.is_active ? 'active' : 'inactive'}
                />
            ),
        },
        {
            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={
                                        accountingRoutes.accounts.show({
                                            account: account.id,
                                        }).url
                                    }
                                >
                                    <Eye className="mr-2 h-4 w-4" />
                                    Lihat Detail
                                </Link>
                            </DropdownMenuItem>
                            {can('accounting.manage_accounts') && (
                                <DropdownMenuItem asChild>
                                    <Link
                                        href={
                                            accountingRoutes.accounts.edit({
                                                account: account.id,
                                            }).url
                                        }
                                    >
                                        <Plus className="mr-2 h-4 w-4" />
                                        Edit Akun
                                    </Link>
                                </DropdownMenuItem>
                            )}
                        </DropdownMenuContent>
                    </DropdownMenu>
                );
            },
        },
    ];

    // Stats
    const totalAccounts = accounts.total;
    const headerAccounts = accounts.data.filter((a) => a.is_header).length;
    const detailAccounts = accounts.data.filter(
        (a) => !a.is_header && a.is_active,
    ).length;

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

            <div className="flex h-full flex-1 flex-col gap-4 p-4">
                <div className="flex items-center justify-between">
                    <div className="flex flex-col gap-1">
                        <h1 className="text-2xl font-black">
                            Chart of Accounts
                        </h1>
                        <p className="text-sm text-muted-foreground">
                            Kelola bagan akun untuk pelaporan keuangan yang
                            akurat.
                        </p>
                    </div>
                    {can('accounting.manage_accounts') && (
                        <Button asChild>
                            <Link href={accountingRoutes.accounts.create().url}>
                                <Plus className="mr-2 h-4 w-4" />
                                Tambah Akun
                            </Link>
                        </Button>
                    )}
                </div>

                <div className="grid gap-4 md:grid-cols-3">
                    <Card>
                        <CardHeader>
                            <CardTitle>Total Akun</CardTitle>
                            <CardAction>
                                <Layers className="h-4 w-4" />
                            </CardAction>
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">
                                {totalAccounts}
                            </div>
                            <p className="text-xs text-muted-foreground">
                                Semua klasifikasi
                            </p>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardHeader>
                            <CardTitle>Akun Header</CardTitle>
                            <CardAction>
                                <FolderTree className="h-4 w-4" />
                            </CardAction>
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">
                                {headerAccounts}
                            </div>
                            <p className="text-xs text-muted-foreground">
                                Hanya untuk pengelompokan
                            </p>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardHeader>
                            <CardTitle>Akun Detail Aktif</CardTitle>
                            <CardAction>
                                <ListTodo className="h-4 w-4" />
                            </CardAction>
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">
                                {detailAccounts}
                            </div>
                            <p className="text-xs text-muted-foreground">
                                Dapat menerima transaksi
                            </p>
                        </CardContent>
                    </Card>
                </div>

                <div className="flex flex-col gap-4 md:flex-row">
                    <div className="flex-1">
                        <InputGroup>
                            <InputGroupInput
                                placeholder="Cari akun berdasarkan kode atau nama..."
                                className="pl-10"
                                defaultValue={filters.search || ''}
                                onKeyDown={(e) => {
                                    if (e.key === 'Enter') {
                                        search(e.currentTarget.value);
                                    }
                                }}
                            />
                            <InputGroupAddon align="inline-start">
                                <SearchIcon className="h-4 w-4" />
                            </InputGroupAddon>
                        </InputGroup>
                    </div>
                    <div className="flex gap-2">
                        <Select
                            defaultValue={filters.classification || 'all'}
                            onValueChange={(v) =>
                                updateFilter('classification', v)
                            }
                        >
                            <SelectTrigger className="w-40">
                                <SelectValue placeholder="Klasifikasi" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectGroup>
                                    <SelectLabel>Klasifikasi</SelectLabel>
                                    <SelectItem value="all">Semua</SelectItem>
                                    <SelectItem value="asset">Asset</SelectItem>
                                    <SelectItem value="liability">
                                        Liability
                                    </SelectItem>
                                    <SelectItem value="equity">
                                        Equity
                                    </SelectItem>
                                    <SelectItem value="revenue">
                                        Revenue
                                    </SelectItem>
                                    <SelectItem value="expense">
                                        Expense
                                    </SelectItem>
                                </SelectGroup>
                            </SelectContent>
                        </Select>

                        <Select
                            defaultValue={filters.is_active || 'all'}
                            onValueChange={(v) => updateFilter('is_active', v)}
                        >
                            <SelectTrigger className="w-40">
                                <SelectValue placeholder="Status" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectGroup>
                                    <SelectLabel>Status</SelectLabel>
                                    <SelectItem value="all">Semua</SelectItem>
                                    <SelectItem value="1">Aktif</SelectItem>
                                    <SelectItem value="0">Non-Aktif</SelectItem>
                                </SelectGroup>
                            </SelectContent>
                        </Select>
                    </div>
                </div>

                <DataTable
                    columns={columns}
                    data={accounts.data}
                    pagination={{
                        currentPage: accounts.current_page,
                        lastPage: accounts.last_page,
                        onPageChange: (page) => updatePage(page),
                    }}
                />
            </div>
        </AppLayout>
    );
}