import { Head, Link, router } from '@inertiajs/react';
import { createColumnHelper } from '@tanstack/react-table';
import type { ColumnDef, PaginationState, SortingState } from '@tanstack/react-table';
import { Eye, Plus } from 'lucide-react';
import { useEffect, useMemo, useRef, useState } from 'react';
import FixedAssetController from '@/actions/App/Http/Controllers/Admin/FixedAssetController';
import { DataTable, DataTableColumnHeader } from '@/components/data-table';
import Heading from '@/components/heading';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { formatCurrency } from '@/lib/utils';
import { dashboard } from '@/routes';
import { create, index, show } from '@/routes/admin/fixed-assets';
import type { Paginated } from '@/types';
import { FixedAssetStatusBadge } from './status-badge';

type AssetRow = {
    id: number;
    code: string;
    label: string;
    acquisition_date: string | null;
    acquisition_cost: string | number;
    accumulated_depreciation: string | number;
    status: string;
    depreciation_method: string;
};

const columnHelper = createColumnHelper<AssetRow>();

export default function FixedAssetsIndex({
    assets,
    filters,
    can,
}: {
    assets: Paginated<AssetRow>;
    filters: { search: string; sort: string; direction: 'asc' | 'desc'; per_page: number };
    can: { create: boolean; depreciate: boolean };
}) {
    const [search, setSearch] = useState(filters.search);
    const [sorting, setSorting] = useState<SortingState>([
        { id: filters.sort, desc: filters.direction === 'desc' },
    ]);
    const [pagination, setPagination] = useState<PaginationState>({
        pageIndex: assets.current_page - 1,
        pageSize: assets.per_page,
    });
    const [periodYear, setPeriodYear] = useState(new Date().getFullYear());
    const [periodMonth, setPeriodMonth] = useState(new Date().getMonth() + 1);
    const isFirstSearchEffect = useRef(true);

    useEffect(() => {
        if (isFirstSearchEffect.current) {
            isFirstSearchEffect.current = false;
            return;
        }
        const timeout = window.setTimeout(() => {
            router.get(index.url(), { search: search || undefined }, { preserveState: true });
        }, 300);
        return () => window.clearTimeout(timeout);
    }, [search]);

    const columns = useMemo(
        () =>
            [
                columnHelper.accessor('code', {
                    header: ({ column }) => (
                        <DataTableColumnHeader column={column} title="Code" />
                    ),
                    cell: (info) => (
                        <span className="font-mono text-sm">{info.getValue()}</span>
                    ),
                }),
                columnHelper.accessor('label', {
                    header: ({ column }) => (
                        <DataTableColumnHeader column={column} title="Libellé" />
                    ),
                }),
                columnHelper.accessor('acquisition_cost', {
                    header: ({ column }) => (
                        <DataTableColumnHeader column={column} title="Valeur" />
                    ),
                    cell: (info) => formatCurrency(info.getValue()),
                }),
                columnHelper.accessor('accumulated_depreciation', {
                    header: ({ column }) => (
                        <DataTableColumnHeader column={column} title="Amort. cumulé" />
                    ),
                    cell: (info) => formatCurrency(info.getValue()),
                }),
                columnHelper.accessor('status', {
                    header: ({ column }) => (
                        <DataTableColumnHeader column={column} title="Statut" />
                    ),
                    cell: (info) => <FixedAssetStatusBadge status={info.getValue()} />,
                }),
                columnHelper.display({
                    id: 'actions',
                    cell: ({ row }) => (
                        <Button variant="ghost" size="icon" asChild>
                            <Link href={show.url(row.original.id)}>
                                <Eye />
                            </Link>
                        </Button>
                    ),
                }),
            ] as ColumnDef<AssetRow, any>[],
        [],
    );

    return (
        <>
            <Head title="Immobilisations" />
            <div className="flex h-full flex-1 flex-col gap-6 p-4 md:p-6">
                <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                    <Heading
                        title="Immobilisations"
                        description="Registre des immobilisations et amortissements"
                    />
                    {can.create && (
                        <Button asChild>
                            <Link href={create.url()}>
                                <Plus />
                                Nouvelle immobilisation
                            </Link>
                        </Button>
                    )}
                </div>

                {can.depreciate && (
                    <div className="flex flex-wrap items-end gap-4 rounded-xl border p-4">
                        <div className="grid gap-2">
                            <Label>Période — année</Label>
                            <Input
                                type="number"
                                className="w-28"
                                value={periodYear}
                                onChange={(e) =>
                                    setPeriodYear(Number(e.target.value))
                                }
                            />
                        </div>
                        <div className="grid gap-2">
                            <Label>Mois</Label>
                            <Input
                                type="number"
                                min={1}
                                max={12}
                                className="w-20"
                                value={periodMonth}
                                onChange={(e) =>
                                    setPeriodMonth(Number(e.target.value))
                                }
                            />
                        </div>
                        <Button
                            onClick={() =>
                                router.post(
                                    FixedAssetController.runDepreciations.url(),
                                    {
                                        period_year: periodYear,
                                        period_month: periodMonth,
                                    },
                                    { preserveScroll: true },
                                )
                            }
                        >
                            Calculer les amortissements
                        </Button>
                    </div>
                )}

                <DataTable
                    id="admin-fixed-assets"
                    columns={columns}
                    data={assets.data}
                    getRowId={(row) => String(row.id)}
                    searchValue={search}
                    onSearchChange={setSearch}
                    emptyMessage="Aucune immobilisation."
                    sorting={sorting}
                    onSortingChange={setSorting}
                    pagination={pagination}
                    onPaginationChange={setPagination}
                    manualPagination
                    pageCount={assets.last_page}
                />
            </div>
        </>
    );
}

FixedAssetsIndex.layout = {
    breadcrumbs: [
        { title: 'Tableau de bord', href: dashboard() },
        { title: 'Immobilisations', href: index() },
    ],
};