import { Link, router } from '@inertiajs/react';
import { Eye } from 'lucide-react';
import { useCallback, useEffect, useMemo } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { useLanguage } from '@/contexts/language-context';
import { useSyncedState } from '@/hooks/use-synced-state';
import { formatMoneyAmountOrDash } from '@/lib/dates';

/**
 * @param {object} props
 * @param {import('@inertiajs/core').Paginator<any>} props.staff
 * @param {{ search: string, per_page: number }} props.filters
 * @param {Record<string, string>} props.labels
 * @param {(opts?: { query?: Record<string, string | number> }) => string} props.indexUrl
 * @param {(employeeId: number) => string} props.staffUrl
 */
export function PermanentEmployeeAdvancesTable({
    staff,
    filters,
    labels,
    indexUrl,
    staffUrl,
}) {
    const { locale } = useLanguage();
    const [search, setSearch] = useSyncedState(filters.search ?? '');

    useEffect(() => {
        const handle = setTimeout(() => {
            const next = search.trim();
            const current = (filters.search ?? '').trim();
            if (next === current) {
                return;
            }
            router.get(
                indexUrl({
                    query: {
                        search: next,
                        per_page: filters.per_page,
                        page: 1,
                    },
                }),
                {},
                { preserveState: true, preserveScroll: true, replace: true },
            );
        }, 350);

        return () => clearTimeout(handle);
    }, [search, filters.search, filters.per_page, indexUrl]);

    const rows = staff?.data ?? [];
    const currentPage = staff?.current_page ?? 1;
    const lastPage = staff?.last_page ?? 1;
    const from = staff?.from;
    const to = staff?.to;
    const total = staff?.total ?? 0;

    const perPageOptions = useMemo(() => [5, 10, 25, 50], []);

    const summaryText = useMemo(() => {
        if (!total) {
            return labels.summaryEmpty;
        }

        return labels.paginationSummary
            .replace('{from}', String(from ?? 0))
            .replace('{to}', String(to ?? 0))
            .replace('{total}', String(total));
    }, [total, from, to, labels.summaryEmpty, labels.paginationSummary]);

    const changePerPage = useCallback(
        (perPage) => {
            router.get(
                indexUrl({
                    query: {
                        search: filters.search ?? '',
                        per_page: perPage,
                        page: 1,
                    },
                }),
                {},
                { preserveState: true, preserveScroll: true },
            );
        },
        [filters.search, indexUrl],
    );

    function formatTypes(types) {
        if (!Array.isArray(types) || types.length === 0) {
            return labels.notProvided;
        }

        return types
            .map((type) => (type === 'product' ? labels.typeProduct : labels.typeCash))
            .join(' · ');
    }

    return (
        <div className="space-y-4">
            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <Input
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    placeholder={labels.searchStaffPlaceholder}
                    className="max-w-md"
                />
                <div className="flex items-center gap-2">
                    <span className="text-muted-foreground text-sm">{labels.rowsPerPage}</span>
                    <Select
                        value={String(filters.per_page ?? 10)}
                        onValueChange={(value) => changePerPage(Number(value))}
                    >
                        <SelectTrigger className="w-20">
                            <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                            {perPageOptions.map((option) => (
                                <SelectItem key={option} value={String(option)}>
                                    {option}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>
            </div>

            <div className="overflow-x-auto rounded-md border">
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead className="w-14">{labels.colSerial}</TableHead>
                            <TableHead>{labels.colStaffName}</TableHead>
                            <TableHead>{labels.colAdvanceType}</TableHead>
                            <TableHead className="text-end">{labels.colOverallAdvances}</TableHead>
                            <TableHead className="text-end">{labels.colPaid}</TableHead>
                            <TableHead className="text-end">{labels.colRemaining}</TableHead>
                            <TableHead className="w-[1%] whitespace-nowrap text-end">
                                {labels.colAction}
                            </TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {rows.length === 0 ? (
                            <TableRow>
                                <TableCell
                                    colSpan={7}
                                    className="text-muted-foreground h-24 text-center"
                                >
                                    {labels.empty}
                                </TableCell>
                            </TableRow>
                        ) : (
                            rows.map((row, index) => (
                                <TableRow key={row.permanent_employee_id}>
                                    <TableCell className="text-muted-foreground tabular-nums">
                                        {from ? from + index : index + 1}
                                    </TableCell>
                                    <TableCell className="whitespace-normal">
                                        <div className="font-medium">{row.employee_name}</div>
                                        {row.employee_designation ? (
                                            <div className="text-muted-foreground text-xs">
                                                {row.employee_designation}
                                            </div>
                                        ) : null}
                                    </TableCell>
                                    <TableCell>{formatTypes(row.advance_types)}</TableCell>
                                    <TableCell className="text-end font-medium tabular-nums">
                                        {formatMoneyAmountOrDash(row.overall_advances, locale)}
                                    </TableCell>
                                    <TableCell className="text-end font-medium tabular-nums text-emerald-700 dark:text-emerald-400">
                                        {formatMoneyAmountOrDash(row.paid, locale)}
                                    </TableCell>
                                    <TableCell className="text-end font-medium tabular-nums text-destructive">
                                        {formatMoneyAmountOrDash(row.remaining, locale)}
                                    </TableCell>
                                    <TableCell className="text-end">
                                        <Button variant="outline" size="sm" asChild>
                                            <Link
                                                href={staffUrl(row.permanent_employee_id)}
                                                prefetch
                                            >
                                                <Eye className="size-4" />
                                                {labels.viewDetails}
                                            </Link>
                                        </Button>
                                    </TableCell>
                                </TableRow>
                            ))
                        )}
                    </TableBody>
                </Table>
            </div>

            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <p className="text-muted-foreground text-sm">{summaryText}</p>
                <div className="flex items-center gap-2">
                    <Button
                        variant="outline"
                        size="sm"
                        disabled={currentPage <= 1}
                        onClick={() =>
                            router.get(
                                indexUrl({
                                    query: {
                                        search: filters.search ?? '',
                                        per_page: filters.per_page,
                                        page: currentPage - 1,
                                    },
                                }),
                                {},
                                { preserveState: true, preserveScroll: true },
                            )
                        }
                    >
                        {labels.paginationPrevious}
                    </Button>
                    <span className="text-muted-foreground text-sm">
                        {labels.paginationPages
                            .replace('{page}', String(currentPage))
                            .replace('{pages}', String(lastPage))}
                    </span>
                    <Button
                        variant="outline"
                        size="sm"
                        disabled={currentPage >= lastPage}
                        onClick={() =>
                            router.get(
                                indexUrl({
                                    query: {
                                        search: filters.search ?? '',
                                        per_page: filters.per_page,
                                        page: currentPage + 1,
                                    },
                                }),
                                {},
                                { preserveState: true, preserveScroll: true },
                            )
                        }
                    >
                        {labels.paginationNext}
                    </Button>
                </div>
            </div>
        </div>
    );
}