import { Head, Link } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import {
    ArrowDownToLine,
    ArrowUpFromLine,
    Eye,
    MoreHorizontal,
    Plus,
    ReceiptIcon,
    SearchIcon,
} from 'lucide-react';

import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, 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 AppLayout from '@/layouts/app-layout';
import { formatDateID, formatIDR } from '@/lib/formatters';
import { useFilterParams } from '@/lib/hooks/useFilterParams';
import accountingRoutes from '@/routes/accounting';
import cashTransactionRoutes from '@/routes/cash-transactions';
import type { BreadcrumbItem, PaginatedData } from '@/types';
import type {
    CashTransaction,
    CashTransactionFilters,
} from '@/types/cash-transaction';

interface PageProps {
    transactions: PaginatedData<CashTransaction>;
    filters: CashTransactionFilters;
}

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Manajemen Kas',
        href: cashTransactionRoutes.index().url,
    },
    {
        title: 'Pemasukan & Pengeluaran',
        href: cashTransactionRoutes.index().url,
    },
];

export default function CashTransactionIndex({
    transactions,
    filters,
}: PageProps) {
    const { updatePage, search } = useFilterParams({
        baseUrl: cashTransactionRoutes.index().url,
    });

    const columns: ColumnDef<CashTransaction>[] = [
        {
            accessorKey: 'date',
            header: 'Tanggal',
            cell: ({ row }) => formatDateID(row.getValue('date')),
        },
        {
            accessorKey: 'type',
            header: 'Tipe',
            cell: ({ row }) => {
                const type = row.getValue('type') as string;
                return type === 'income' ? (
                    <Badge className="border-none bg-emerald-100 text-emerald-700 hover:bg-emerald-100">
                        Pemasukan
                    </Badge>
                ) : (
                    <Badge
                        variant="destructive"
                        className="border-none bg-rose-100 text-rose-700 shadow-none hover:bg-rose-100"
                    >
                        Pengeluaran
                    </Badge>
                );
            },
        },
        {
            accessorKey: 'description',
            header: 'Keterangan',
            cell: ({ row }) => (
                <div className="flex max-w-75 flex-col">
                    <span className="truncate font-medium">
                        {row.getValue('description')}
                    </span>
                    <span className="text-xs text-muted-foreground italic">
                        By: {row.original.createdBy?.name || 'Unknown'}
                    </span>
                </div>
            ),
        },
        {
            accessorKey: 'related_account',
            header: 'Akun Terkait',
            cell: ({ row }) => {
                const account = row.original.related_account;
                return (
                    <div className="flex flex-col">
                        <span className="font-mono text-xs">
                            {account?.code}
                        </span>
                        <span className="text-sm">{account?.name || '-'}</span>
                    </div>
                );
            },
        },
        {
            accessorKey: 'cash_account',
            header: 'Akun Kas',
            cell: ({ row }) => {
                const account = row.original.cash_account;
                return (
                    <div className="flex flex-col">
                        <span className="font-mono text-xs text-muted-foreground">
                            {account?.code}
                        </span>
                        <span className="text-sm">{account?.name || '-'}</span>
                    </div>
                );
            },
        },
        {
            accessorKey: 'amount',
            header: 'Nominal',
            cell: ({ row }) => {
                const isExpense = row.original.type === 'expense';
                return (
                    <span
                        className={`font-semibold ${isExpense ? 'text-rose-600' : 'text-emerald-600'}`}
                    >
                        {formatIDR(row.getValue('amount'))}
                    </span>
                );
            },
        },
        {
            id: 'actions',
            cell: ({ row }) => {
                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
                                disabled={!row.original.journalEntry}
                            >
                                <Link
                                    href={
                                        row.original.journalEntry
                                            ? accountingRoutes.journal.show({
                                                  entry: row.original
                                                      .journalEntry.id,
                                              }).url
                                            : '#'
                                    }
                                >
                                    <Eye className="mr-2 h-4 w-4" />
                                    Lihat Jurnal
                                </Link>
                            </DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                );
            },
        },
    ];

    // Stats
    const totalIncome = transactions.data
        .filter((t) => t.type === 'income')
        .reduce((sum, item) => sum + Number(item.amount), 0);

    const totalExpense = transactions.data
        .filter((t) => t.type === 'expense')
        .reduce((sum, item) => sum + Number(item.amount), 0);

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

            <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">Manajemen Kas</h1>
                        <p className="text-sm text-muted-foreground">
                            Kelola pemasukan dan pengeluaran operasional
                            koperasi.
                        </p>
                    </div>
                    <Button asChild>
                        <Link href={cashTransactionRoutes.create().url}>
                            <Plus className="mr-2 h-4 w-4" />
                            Input Transaksi
                        </Link>
                    </Button>
                </div>

                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                    <Card>
                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                            <CardTitle className="text-sm font-medium">
                                Pemasukan (Page)
                            </CardTitle>
                            <ArrowDownToLine className="h-4 w-4 text-emerald-500" />
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold text-emerald-600">
                                {formatIDR(totalIncome)}
                            </div>
                            <p className="text-xs text-muted-foreground">
                                Akumulasi masuk di halaman ini
                            </p>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                            <CardTitle className="text-sm font-medium">
                                Pengeluaran (Page)
                            </CardTitle>
                            <ArrowUpFromLine className="h-4 w-4 text-rose-500" />
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold text-rose-600">
                                {formatIDR(totalExpense)}
                            </div>
                            <p className="text-xs text-muted-foreground">
                                Akumulasi keluar di halaman ini
                            </p>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                            <CardTitle className="text-sm font-medium">
                                Total Transaksi
                            </CardTitle>
                            <ReceiptIcon className="h-4 w-4 text-muted-foreground" />
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">
                                {transactions.total}
                            </div>
                            <p className="text-xs text-muted-foreground">
                                Total record yang tercatat
                            </p>
                        </CardContent>
                    </Card>
                </div>

                <div className="flex flex-col gap-4 md:flex-row">
                    <div className="flex-1">
                        <InputGroup>
                            <InputGroupInput
                                placeholder="Cari berdasarkan keterangan transaksi..."
                                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>

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