import { Link, router } from '@inertiajs/react';
import { MoreHorizontal, Pencil } from 'lucide-react';
import { useEffect, useMemo } from 'react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Input } from '@/components/ui/input';
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 { formatAppDateTimeOrDash } from '@/lib/dates';

/**
 * @param {object} props
 * @param {import('@inertiajs/core').Paginator<any>} props.devices
 * @param {object} props.filters
 * @param {Record<string, string>} props.labels
 * @param {(opts?: object) => string} props.indexUrl
 * @param {(id: number) => string} props.editUrl
 */
export function AttendanceDevicesTable({ devices, filters, labels, indexUrl, editUrl }) {
    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 = devices?.data ?? [];
    const currentPage = devices?.current_page ?? 1;
    const lastPage = devices?.last_page ?? 1;
    const total = devices?.total ?? 0;
    const perPage = devices?.per_page ?? 10;

    const summaryText = useMemo(() => {
        if (total === 0) {
            return labels.summaryEmpty;
        }
        return labels.paginationSummary
            .replace('{from}', String(devices?.from ?? 0))
            .replace('{to}', String(devices?.to ?? 0))
            .replace('{total}', String(total));
    }, [total, devices?.from, devices?.to, labels]);

    function goToPage(page) {
        router.get(
            indexUrl({ query: { ...filters, page } }),
            {},
            { preserveState: true, preserveScroll: true },
        );
    }

    return (
        <div className="space-y-4">
            <Input
                type="search"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder={labels.searchDevicesPlaceholder}
                className="max-w-md"
            />

            <div className="overflow-x-auto rounded-md border">
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead className="w-14">{labels.colSerial}</TableHead>
                            <TableHead>{labels.colDeviceName}</TableHead>
                            <TableHead>{labels.colSerialNumber}</TableHead>
                            <TableHead>{labels.colLocation}</TableHead>
                            <TableHead>{labels.colEnrollments}</TableHead>
                            <TableHead>{labels.colLastSync}</TableHead>
                            <TableHead className="w-24">{labels.colAction}</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {rows.length === 0 ? (
                            <TableRow>
                                <TableCell colSpan={7} className="text-muted-foreground h-24 text-center">
                                    {labels.emptyDevices}
                                </TableCell>
                            </TableRow>
                        ) : (
                            rows.map((row, index) => (
                                <TableRow key={row.id}>
                                    <TableCell className="text-muted-foreground tabular-nums">
                                        {(currentPage - 1) * perPage + index + 1}
                                    </TableCell>
                                    <TableCell className="font-medium">
                                        <div className="flex items-center gap-2">
                                            {row.name}
                                            {!row.is_active ? (
                                                <Badge variant="outline">{labels.isActive}</Badge>
                                            ) : null}
                                        </div>
                                    </TableCell>
                                    <TableCell className="font-mono text-sm">
                                        {row.serial_number}
                                    </TableCell>
                                    <TableCell>{row.location || '—'}</TableCell>
                                    <TableCell className="tabular-nums">
                                        {row.enrollments_count ?? 0}
                                    </TableCell>
                                    <TableCell className="text-sm whitespace-nowrap">
                                        {formatAppDateTimeOrDash(row.last_sync_at, locale)}
                                    </TableCell>
                                    <TableCell>
                                        <DropdownMenu>
                                            <DropdownMenuTrigger asChild>
                                                <Button
                                                    type="button"
                                                    variant="ghost"
                                                    size="icon"
                                                    aria-label={labels.actionsMenuAria}
                                                >
                                                    <MoreHorizontal className="size-4" />
                                                </Button>
                                            </DropdownMenuTrigger>
                                            <DropdownMenuContent align="end">
                                                <DropdownMenuItem asChild>
                                                    <Link href={editUrl(row.id)} prefetch>
                                                        <Pencil className="size-4" />
                                                        {labels.editDevice}
                                                    </Link>
                                                </DropdownMenuItem>
                                            </DropdownMenuContent>
                                        </DropdownMenu>
                                    </TableCell>
                                </TableRow>
                            ))
                        )}
                    </TableBody>
                </Table>
            </div>

            <div className="flex flex-wrap items-center justify-between gap-2">
                <p className="text-muted-foreground text-sm">{summaryText}</p>
                <div className="flex gap-2">
                    <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        disabled={currentPage <= 1}
                        onClick={() => goToPage(currentPage - 1)}
                    >
                        {labels.paginationPrevious}
                    </Button>
                    <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        disabled={currentPage >= lastPage}
                        onClick={() => goToPage(currentPage + 1)}
                    >
                        {labels.paginationNext}
                    </Button>
                </div>
            </div>
        </div>
    );
}