import { Link, router } from '@inertiajs/react';
import { useEffect } from 'react';
import { CustomerLoanStatusBadge } from '@/components/customers/customer-loan-status-badge';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { useSyncedState } from '@/hooks/use-synced-state';
import { formatExpenseDateNumericOrDash } from '@/lib/dates';
import { cn } from '@/lib/utils';

export function CustomerLoansTable({
    loans,
    filters,
    labels,
    indexUrl,
    customers = [],
}) {
    const [search, setSearch] = useSyncedState(filters.search ?? '');
    const [customerId, setCustomerId] = useSyncedState(
        filters.customer_id ? String(filters.customer_id) : 'all',
    );

    useEffect(() => {
        const handle = setTimeout(() => {
            const nextSearch = search.trim();
            const currentSearch = (filters.search ?? '').trim();
            const nextCustomer = customerId === 'all' ? '' : customerId;
            const currentCustomer = filters.customer_id ? String(filters.customer_id) : '';

            if (nextSearch === currentSearch && nextCustomer === currentCustomer) {
                return;
            }

            router.get(
                indexUrl({
                    query: {
                        search: nextSearch,
                        customer_id: nextCustomer,
                        per_page: filters.per_page,
                        page: 1,
                    },
                }),
                {},
                { preserveState: true, preserveScroll: true },
            );
        }, 300);

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

    const rows = loans?.data ?? [];
    const paginationLinks = loans?.links ?? [];

    return (
        <div className="space-y-4">
            <div className="flex flex-col gap-3 sm:flex-row">
                <div className="flex-1 space-y-2">
                    <Label htmlFor="customer-loans-search">{labels.filterSearch}</Label>
                    <Input
                        id="customer-loans-search"
                        value={search}
                        onChange={(e) => setSearch(e.target.value)}
                        placeholder={labels.searchPlaceholder}
                    />
                </div>
                <div className="w-full space-y-2 sm:w-64">
                    <Label>{labels.filterCustomer}</Label>
                    <Select value={customerId} onValueChange={setCustomerId}>
                        <SelectTrigger>
                            <SelectValue placeholder={labels.allCustomers} />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value="all">{labels.allCustomers}</SelectItem>
                            {customers.map((customer) => (
                                <SelectItem key={customer.id} value={String(customer.id)}>
                                    {customer.full_name}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>
            </div>

            <div className="rounded-md border">
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>{labels.colLoanNumber}</TableHead>
                            <TableHead>{labels.colCustomer}</TableHead>
                            <TableHead>{labels.colDate}</TableHead>
                            <TableHead className="text-end">{labels.colAmount}</TableHead>
                            <TableHead className="text-end">{labels.colOutstanding}</TableHead>
                            <TableHead>{labels.colStatus}</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {rows.length ? (
                            rows.map((loan) => (
                                <TableRow
                                    key={loan.id}
                                    className={cn(
                                        'cursor-pointer',
                                        !loan.is_active && 'opacity-60',
                                    )}
                                    onClick={() => router.visit(`/customers/loans/${loan.id}`)}
                                >
                                    <TableCell className="font-medium">{loan.loan_number}</TableCell>
                                    <TableCell>{loan.customer_name ?? '—'}</TableCell>
                                    <TableCell>{formatExpenseDateNumericOrDash(loan.loan_date)}</TableCell>
                                    <TableCell className="text-end tabular-nums">
                                        {loan.amount_afn} {labels.currencyLabel}
                                    </TableCell>
                                    <TableCell className="text-end tabular-nums font-medium text-amber-700 dark:text-amber-400">
                                        {loan.due_amount_afn} {labels.currencyLabel}
                                    </TableCell>
                                    <TableCell>
                                        <CustomerLoanStatusBadge
                                            status={loan.payment_status}
                                            labels={labels}
                                        />
                                    </TableCell>
                                </TableRow>
                            ))
                        ) : (
                            <TableRow>
                                <TableCell colSpan={6} className="h-24 text-center text-muted-foreground">
                                    {labels.emptyTitle}
                                </TableCell>
                            </TableRow>
                        )}
                    </TableBody>
                </Table>
            </div>

            {paginationLinks.length > 3 ? (
                <div className="flex flex-wrap gap-2">
                    {paginationLinks.map((link, index) => (
                        <Link
                            key={`${link.label}-${index}`}
                            href={link.url ?? '#'}
                            preserveScroll
                            preserveState
                            className={cn(
                                'inline-flex h-8 items-center rounded-md border px-3 text-sm',
                                link.active
                                    ? 'border-primary bg-primary text-primary-foreground'
                                    : 'border-border bg-background text-foreground',
                                !link.url && 'pointer-events-none opacity-50',
                            )}
                            dangerouslySetInnerHTML={{ __html: link.label }}
                        />
                    ))}
                </div>
            ) : null}
        </div>
    );
}