import { Head, Link, router } from '@inertiajs/react';
import { useState } from 'react';

import HeadingSmall from '@/components/heading-small';
import { SortableHeader } from '@/components/sortable-header';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { useUserTimezone } from '@/hooks/use-user-timezone';
import AppLayout from '@/layouts/app-layout';
import { formatDateTime } from '@/lib/format-date';
import { archive, build, bulkArchive, index, index as creditCheckRequestsIndex } from '@/actions/App/Http/Controllers/Admin/CreditCheckRequestController';
import { index as enrollmentRequestsIndex } from '@/actions/App/Http/Controllers/Admin/EnrollmentRequestController';
import { index as apiLogsIndex } from '@/actions/App/Http/Controllers/Admin/PublicApiRequestLogController';
import { show as webFormSessionsShow } from '@/routes/admin/web-form-sessions';

type EnrollmentRequest = {
    id: number;
    status: string | null;
    web_form_session: { id: number; session_id: string } | null;
};

type ApiLog = {
    id: number;
    method: string;
    path: string;
    response_status: number | null;
    created_at: string;
};

type CreditCheckRequest = {
    id: number;
    enrollment_request_id: number;
    enrollment_request: EnrollmentRequest | null;
    ip_address: string | null;
    body: Record<string, unknown> | null;
    status: string | null;
    processed_at: string | null;
    created_at: string;
    deleted_at: string | null;
    api_log: ApiLog | null;
};

type PaginatedCreditCheckRequests = {
    data: CreditCheckRequest[];
    current_page: number;
    last_page: number;
    per_page: number;
    total: number;
    next_page_url: string | null;
    prev_page_url: string | null;
    links: { url: string | null; label: string; active: boolean }[];
};

type Filters = {
    search: string;
    status: string;
    enrollment_request_id: string;
    sort_by: string;
    sort_direction: string;
    trashed: string;
};

type Props = {
    creditCheckRequests: PaginatedCreditCheckRequests;
    filters: Filters;
};

function StatusBadge({ status }: { status: string | null }) {
    if (!status) return <span className="text-zinc-400">—</span>;

    const colors: Record<string, string> = {
        pending: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
        processed: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
        failed: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
        canceled: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400',
    };

    return (
        <span className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${colors[status] ?? 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400'}`}>
            {status}
        </span>
    );
}

function BodyFields({ body }: { body: Record<string, unknown> | null }) {
    if (!body || Object.keys(body).length === 0) {
        return <span className="text-zinc-400 text-sm">No data</span>;
    }

    return (
        <dl className="divide-y divide-zinc-100 dark:divide-zinc-800">
            {Object.entries(body).map(([key, value]) => (
                <div key={key} className="grid grid-cols-[180px_1fr] gap-2 py-2 text-sm">
                    <dt className="font-medium text-zinc-500 dark:text-zinc-400 truncate">{key}</dt>
                    <dd className="text-zinc-900 dark:text-zinc-100 break-all">
                        {value === null || value === undefined
                            ? <span className="text-zinc-400">—</span>
                            : typeof value === 'object'
                                ? <pre className="whitespace-pre-wrap font-mono text-xs">{JSON.stringify(value, null, 2)}</pre>
                                : String(value)}
                    </dd>
                </div>
            ))}
        </dl>
    );
}

function EnrollmentRequestLink({ enrollmentRequestId }: { enrollmentRequestId: number }) {
    return (
        <Link
            href={enrollmentRequestsIndex.url({ query: { search: String(enrollmentRequestId) } })}
            className="font-mono text-xs text-blue-600 hover:text-blue-800 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
            onClick={(e) => e.stopPropagation()}
        >
            #{enrollmentRequestId}
        </Link>
    );
}

function CreditCheckRequestDetailModal({
    creditCheckRequest,
    open,
    onOpenChange,
}: {
    creditCheckRequest: CreditCheckRequest | null;
    open: boolean;
    onOpenChange: (open: boolean) => void;
}) {
    const timezone = useUserTimezone();

    if (!creditCheckRequest) return null;

    const { enrollment_request_id, enrollment_request, status, ip_address, created_at, processed_at, body, api_log } = creditCheckRequest;
    const webFormSession = enrollment_request?.web_form_session ?? null;

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
                <DialogHeader>
                    <DialogTitle>Credit Check Request #{creditCheckRequest.id}</DialogTitle>
                </DialogHeader>

                <div className="space-y-6 pt-2">
                    <dl className="divide-y divide-zinc-100 dark:divide-zinc-800">
                        {([
                            ['Enrollment Request', <EnrollmentRequestLink enrollmentRequestId={enrollment_request_id} />],
                            ['Status', <StatusBadge status={status} />],
                            ['IP Address', ip_address ?? '—'],
                            ['Submitted', formatDateTime(created_at, timezone)],
                            ['Processed', formatDateTime(processed_at, timezone)],
                            ['API Log', api_log
                                ? (
                                    <a
                                        href={apiLogsIndex.url({ query: { id: String(api_log.id) } })}
                                        className="inline-flex items-center gap-1 font-mono text-xs text-blue-600 hover:text-blue-800 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
                                    >
                                        #{api_log.id} · {api_log.method} · {api_log.response_status} →
                                    </a>
                                )
                                : <span className="text-zinc-400">None</span>
                            ],
                            ['Web Form Session', webFormSession
                                ? (
                                    <Link
                                        href={webFormSessionsShow.url(webFormSession.id)}
                                        className="inline-flex items-center gap-1 font-mono text-xs text-blue-600 hover:text-blue-800 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
                                    >
                                        {webFormSession.session_id} →
                                    </Link>
                                )
                                : <span className="text-zinc-400">None</span>
                            ],
                        ] as [string, React.ReactNode][]).map(([label, value]) => (
                            <div key={String(label)} className="grid grid-cols-[180px_1fr] gap-2 py-2 text-sm">
                                <dt className="font-medium text-zinc-500 dark:text-zinc-400">{label}</dt>
                                <dd className="text-zinc-900 dark:text-zinc-100">{value}</dd>
                            </div>
                        ))}
                    </dl>

                    <div>
                        <h3 className="text-sm font-semibold text-zinc-700 dark:text-zinc-300 mb-2">Request Body</h3>
                        <BodyFields body={body} />
                    </div>
                </div>
            </DialogContent>
        </Dialog>
    );
}

function ArchiveConfirmDialog({
    open,
    onOpenChange,
    onConfirm,
}: {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onConfirm: () => void;
}) {
    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-sm">
                <DialogHeader>
                    <DialogTitle>Archive credit check request?</DialogTitle>
                </DialogHeader>
                <p className="text-sm text-zinc-600 dark:text-zinc-400">
                    This record will be soft-deleted and hidden from the default view. You can view archived records using the "Show archived" toggle.
                </p>
                <div className="flex justify-end gap-2 pt-2">
                    <button
                        type="button"
                        onClick={() => onOpenChange(false)}
                        className="rounded-md px-3 py-2 text-sm font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
                    >
                        Cancel
                    </button>
                    <button
                        type="button"
                        onClick={onConfirm}
                        className="rounded-md bg-red-600 px-3 py-2 text-sm font-medium text-white hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-600"
                    >
                        Archive
                    </button>
                </div>
            </DialogContent>
        </Dialog>
    );
}

function BulkArchiveConfirmDialog({
    open,
    onOpenChange,
    onConfirm,
    count,
}: {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onConfirm: () => void;
    count: number;
}) {
    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-sm">
                <DialogHeader>
                    <DialogTitle>Archive {count} credit check {count === 1 ? 'request' : 'requests'}?</DialogTitle>
                </DialogHeader>
                <p className="text-sm text-zinc-600 dark:text-zinc-400">
                    These records will be soft-deleted and hidden from the default view. You can view archived records using the "Show archived" toggle.
                </p>
                <div className="flex justify-end gap-2 pt-2">
                    <button
                        type="button"
                        onClick={() => onOpenChange(false)}
                        className="rounded-md px-3 py-2 text-sm font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
                    >
                        Cancel
                    </button>
                    <button
                        type="button"
                        onClick={onConfirm}
                        className="rounded-md bg-red-600 px-3 py-2 text-sm font-medium text-white hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-600"
                    >
                        Archive
                    </button>
                </div>
            </DialogContent>
        </Dialog>
    );
}

function RebuildConfirmDialog({
    open,
    onOpenChange,
    onConfirm,
    creditCheckRequest,
}: {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onConfirm: () => void;
    creditCheckRequest: CreditCheckRequest | null;
}) {
    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-sm">
                <DialogHeader>
                    <DialogTitle>Rebuild supplier credit check?</DialogTitle>
                </DialogHeader>
                <p className="text-sm text-zinc-600 dark:text-zinc-400">
                    A new supplier credit check record will be created for credit check request{' '}
                    {creditCheckRequest ? <strong>#{creditCheckRequest.id}</strong> : null}. Any existing supplier credit check records for this enrollment will remain intact.
                </p>
                <div className="flex justify-end gap-2 pt-2">
                    <button
                        type="button"
                        onClick={() => onOpenChange(false)}
                        className="rounded-md px-3 py-2 text-sm font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
                    >
                        Cancel
                    </button>
                    <button
                        type="button"
                        onClick={onConfirm}
                        className="rounded-md bg-zinc-900 px-3 py-2 text-sm font-medium text-white hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
                    >
                        Rebuild
                    </button>
                </div>
            </DialogContent>
        </Dialog>
    );
}

const breadcrumbs = [{ title: 'Credit Check Requests', href: index.url() }];

const selectClasses =
    'rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm shadow-sm dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100';

export default function CreditCheckRequests({ creditCheckRequests, filters }: Props) {
    const timezone = useUserTimezone();
    const [search, setSearch] = useState(filters.search);
    const [selectedRequest, setSelectedRequest] = useState<CreditCheckRequest | null>(null);
    const [archiveTarget, setArchiveTarget] = useState<CreditCheckRequest | null>(null);
    const [rebuildTarget, setRebuildTarget] = useState<CreditCheckRequest | null>(null);
    const [selectedIds, setSelectedIds] = useState<number[]>([]);
    const [bulkArchiveOpen, setBulkArchiveOpen] = useState(false);
    const [buildError, setBuildError] = useState<string | null>(null);

    const sortColumn = filters.sort_by || 'created_at';
    const sortDirection = (filters.sort_direction || 'desc') as 'asc' | 'desc';
    const showTrashed = filters.trashed === '1';

    function toggleSort(column: string) {
        if (column === sortColumn) {
            applyFilters({ sort_by: column, sort_direction: sortDirection === 'asc' ? 'desc' : 'asc' });
        } else {
            applyFilters({ sort_by: column, sort_direction: 'asc' });
        }
    }

    function applyFilters(overrides: Partial<Filters> = {}) {
        const merged = { ...filters, ...overrides };

        router.get(
            creditCheckRequestsIndex.url(),
            Object.fromEntries(Object.entries(merged).filter(([, v]) => v !== '')),
            { preserveState: true, replace: true },
        );
    }

    function confirmArchive() {
        if (!archiveTarget) return;
        router.delete(archive.url(archiveTarget.id), {
            preserveScroll: true,
            onFinish: () => setArchiveTarget(null),
        });
    }

    function confirmRebuild() {
        if (!rebuildTarget) return;
        setBuildError(null);
        router.post(build.url(rebuildTarget.id), {}, {
            preserveScroll: true,
            onError: (errors) => setBuildError(errors.build ?? 'Failed to rebuild credit check.'),
            onFinish: () => setRebuildTarget(null),
        });
    }

    const archivableIds = creditCheckRequests.data.filter((r) => !r.deleted_at).map((r) => r.id);
    const allSelected = archivableIds.length > 0 && archivableIds.every((id) => selectedIds.includes(id));

    function toggleSelectAll() {
        setSelectedIds(allSelected ? [] : archivableIds);
    }

    function toggleSelected(id: number) {
        setSelectedIds((prev) => (prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]));
    }

    function confirmBulkArchive() {
        router.delete(bulkArchive.url(), {
            data: { ids: selectedIds },
            preserveScroll: true,
            onFinish: () => {
                setBulkArchiveOpen(false);
                setSelectedIds([]);
            },
        });
    }

    const hasActiveFilters = filters.search || filters.status || filters.enrollment_request_id || filters.trashed;

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Credit Check Requests" />

            <h1 className="sr-only">Credit Check Requests</h1>

            <div className="space-y-6">
                {buildError && (
                    <div className="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-800 dark:border-red-900 dark:bg-red-950 dark:text-red-300">
                        {buildError}
                    </div>
                )}

                <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                    <HeadingSmall
                        title="Credit Check Requests"
                        description="Manage inbound credit check requests"
                    />

                    <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end">
                        <div className="flex flex-col gap-1 sm:min-w-60">
                            <label className="text-xs font-medium text-zinc-700 dark:text-zinc-300">
                                Search
                            </label>
                            <input
                                type="text"
                                value={search}
                                onChange={(e) => setSearch(e.target.value)}
                                onKeyDown={(e) => {
                                    if (e.key === 'Enter') {
                                        applyFilters({ search });
                                    }
                                }}
                                placeholder="Search request body…"
                                className={selectClasses}
                            />
                        </div>

                        <div className="flex flex-col gap-1">
                            <label className="text-xs font-medium text-zinc-700 dark:text-zinc-300">
                                Status
                            </label>
                            <select
                                value={filters.status}
                                onChange={(e) => applyFilters({ status: e.target.value })}
                                className={selectClasses}
                            >
                                <option value="">All</option>
                                <option value="pending">Pending</option>
                                <option value="processed">Processed</option>
                                <option value="failed">Failed</option>
                                <option value="canceled">Canceled</option>
                            </select>
                        </div>

                        <label className="flex cursor-pointer items-center gap-2 self-end pb-2">
                            <input
                                type="checkbox"
                                checked={showTrashed}
                                onChange={(e) => applyFilters({ trashed: e.target.checked ? '1' : '' })}
                                className="size-4 rounded border-zinc-300 dark:border-zinc-700"
                            />
                            <span className="text-sm text-zinc-700 dark:text-zinc-300">Show archived</span>
                        </label>

                        <button
                            type="button"
                            onClick={() => applyFilters({ search })}
                            className="rounded-md bg-zinc-900 px-3 py-2 text-sm font-medium text-white dark:bg-zinc-100 dark:text-zinc-900"
                        >
                            Search
                        </button>

                        {hasActiveFilters && (
                            <button
                                type="button"
                                onClick={() => {
                                    setSearch('');
                                    applyFilters({ search: '', status: '', enrollment_request_id: '', trashed: '' });
                                }}
                                className="rounded-md px-3 py-2 text-sm font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
                            >
                                Clear
                            </button>
                        )}
                    </div>
                </div>

                {filters.enrollment_request_id && (
                    <div className="flex items-center gap-2 rounded-md border border-blue-200 bg-blue-50 px-3 py-2 text-sm text-blue-800 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-300">
                        <span>Showing credit check requests for enrollment request <strong>#{filters.enrollment_request_id}</strong></span>
                        <button
                            type="button"
                            onClick={() => applyFilters({ enrollment_request_id: '' })}
                            className="ml-auto text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
                        >
                            ✕
                        </button>
                    </div>
                )}

                {selectedIds.length > 0 && (
                    <div className="flex items-center justify-between rounded-md border border-zinc-200 bg-zinc-50 px-4 py-2.5 dark:border-zinc-800 dark:bg-zinc-900">
                        <span className="text-sm text-zinc-700 dark:text-zinc-300">
                            {selectedIds.length} selected
                        </span>
                        <div className="flex items-center gap-3">
                            <button
                                type="button"
                                onClick={() => setSelectedIds([])}
                                className="text-sm font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
                            >
                                Clear selection
                            </button>
                            <button
                                type="button"
                                onClick={() => setBulkArchiveOpen(true)}
                                className="rounded-md border border-red-200 bg-white px-3 py-1.5 text-sm font-medium text-red-600 hover:bg-red-50 dark:border-red-800 dark:bg-zinc-900 dark:text-red-400 dark:hover:bg-red-950"
                            >
                                Archive selected
                            </button>
                        </div>
                    </div>
                )}

                <div className="overflow-hidden rounded-md border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
                    <div className="overflow-x-auto">
                        <table className="w-full text-left text-sm">
                            <thead className="border-b border-zinc-200 text-xs text-zinc-600 uppercase dark:border-zinc-800 dark:text-zinc-400">
                                <tr>
                                    <th className="w-10 px-4 py-3">
                                        <input
                                            type="checkbox"
                                            checked={allSelected}
                                            onChange={toggleSelectAll}
                                            disabled={archivableIds.length === 0}
                                            className="size-4 rounded border-zinc-300 dark:border-zinc-700"
                                            aria-label="Select all"
                                        />
                                    </th>
                                    <SortableHeader label="ID" column="id" sortColumn={sortColumn} sortDirection={sortDirection} onSort={toggleSort} />
                                    <th className="px-4 py-3">Enrollment Request</th>
                                    <th className="px-4 py-3">IP Address</th>
                                    <SortableHeader label="Status" column="status" sortColumn={sortColumn} sortDirection={sortDirection} onSort={toggleSort} />
                                    <SortableHeader label="Created" column="created_at" sortColumn={sortColumn} sortDirection={sortDirection} onSort={toggleSort} />
                                    <SortableHeader label="Processed" column="processed_at" sortColumn={sortColumn} sortDirection={sortDirection} onSort={toggleSort} />
                                    <th className="px-4 py-3" />
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-zinc-200 dark:divide-zinc-800">
                                {creditCheckRequests.data.map((r) => (
                                    <tr
                                        key={r.id}
                                        onClick={() => setSelectedRequest(r)}
                                        className={`cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-900 ${r.deleted_at ? 'opacity-60' : ''}`}
                                    >
                                        <td className="px-4 py-3" onClick={(ev) => ev.stopPropagation()}>
                                            {!r.deleted_at && (
                                                <input
                                                    type="checkbox"
                                                    checked={selectedIds.includes(r.id)}
                                                    onChange={() => toggleSelected(r.id)}
                                                    className="size-4 rounded border-zinc-300 dark:border-zinc-700"
                                                    aria-label={`Select credit check request ${r.id}`}
                                                />
                                            )}
                                        </td>
                                        <td className="px-4 py-3 font-medium">{r.id}</td>
                                        <td className="px-4 py-3">
                                            <EnrollmentRequestLink enrollmentRequestId={r.enrollment_request_id} />
                                        </td>
                                        <td className="px-4 py-3 text-zinc-600 dark:text-zinc-400">{r.ip_address ?? '—'}</td>
                                        <td className="px-4 py-3">
                                            <StatusBadge status={r.status} />
                                        </td>
                                        <td className="px-4 py-3">{formatDateTime(r.created_at, timezone)}</td>
                                        <td className="px-4 py-3">{formatDateTime(r.processed_at, timezone)}</td>
                                        <td className="px-4 py-3 text-right" onClick={(ev) => ev.stopPropagation()}>
                                            {!r.deleted_at ? (
                                                <div className="flex justify-end gap-2">
                                                    {r.status !== 'processed' && (
                                                        <button
                                                            type="button"
                                                            onClick={(ev) => {
                                                                ev.stopPropagation();
                                                                setBuildError(null);
                                                                router.post(build.url(r.id), {}, {
                                                                    preserveScroll: true,
                                                                    preserveState: true,
                                                                    onError: (errors) => setBuildError(errors.build ?? 'Failed to build credit check.'),
                                                                });
                                                            }}
                                                            className="rounded-md bg-zinc-900 px-2.5 py-1 text-xs font-medium text-white hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
                                                        >
                                                            Build
                                                        </button>
                                                    )}

                                                    {r.status === 'processed' && (
                                                        <button
                                                            type="button"
                                                            onClick={(ev) => {
                                                                ev.stopPropagation();
                                                                setRebuildTarget(r);
                                                            }}
                                                            className="rounded-md border border-zinc-200 bg-white px-2.5 py-1 text-xs font-medium text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800"
                                                        >
                                                            Rebuild
                                                        </button>
                                                    )}

                                                    <button
                                                        type="button"
                                                        onClick={(ev) => {
                                                            ev.stopPropagation();
                                                            setArchiveTarget(r);
                                                        }}
                                                        className="rounded-md border border-red-200 bg-white px-2.5 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:border-red-800 dark:bg-zinc-900 dark:text-red-400 dark:hover:bg-red-950"
                                                    >
                                                        Archive
                                                    </button>
                                                </div>
                                            ) : (
                                                <span className="text-xs text-zinc-400 italic">Archived</span>
                                            )}
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>

                    {creditCheckRequests.data.length === 0 && (
                        <div className="p-4 text-sm text-zinc-600 dark:text-zinc-400">
                            No credit check requests yet.
                        </div>
                    )}
                </div>

                {creditCheckRequests.last_page > 1 && (
                    <div className="flex items-center justify-between text-sm">
                        <span className="text-zinc-500 dark:text-zinc-400">
                            Showing{' '}
                            {(creditCheckRequests.current_page - 1) * creditCheckRequests.per_page + 1}
                            –
                            {Math.min(
                                creditCheckRequests.current_page * creditCheckRequests.per_page,
                                creditCheckRequests.total,
                            )}{' '}
                            of {creditCheckRequests.total}
                        </span>
                        <div className="flex gap-1">
                            {creditCheckRequests.links.map((link) => (
                                <Link
                                    key={link.label}
                                    href={link.url ?? '#'}
                                    preserveState
                                    className={`rounded-md px-3 py-1.5 text-xs ${
                                        link.active
                                            ? 'bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900'
                                            : link.url
                                              ? 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800'
                                              : 'pointer-events-none text-zinc-300 dark:text-zinc-700'
                                    }`}
                                    dangerouslySetInnerHTML={{ __html: link.label }}
                                />
                            ))}
                        </div>
                    </div>
                )}
            </div>

            <CreditCheckRequestDetailModal
                creditCheckRequest={selectedRequest}
                open={selectedRequest !== null}
                onOpenChange={(open) => { if (!open) setSelectedRequest(null); }}
            />
            <ArchiveConfirmDialog
                open={archiveTarget !== null}
                onOpenChange={(open) => { if (!open) setArchiveTarget(null); }}
                onConfirm={confirmArchive}
            />
            <RebuildConfirmDialog
                open={rebuildTarget !== null}
                onOpenChange={(open) => { if (!open) setRebuildTarget(null); }}
                onConfirm={confirmRebuild}
                creditCheckRequest={rebuildTarget}
            />
            <BulkArchiveConfirmDialog
                open={bulkArchiveOpen}
                onOpenChange={setBulkArchiveOpen}
                onConfirm={confirmBulkArchive}
                count={selectedIds.length}
            />
        </AppLayout>
    );
}