import { Head, router, usePage } from '@inertiajs/react';
import { useCallback, useMemo, useState } from 'react';

import type { ColumnDef } from '@tanstack/react-table';
import { Card, CardContent } from '@/components/ui/card';
import { SortableColumnHeader } from '@/components/ui/sortable-column-header';
import { DocumentAiStatusBadge } from '@/features/documents/components/document-ai-status-badge';
import { DocumentPrimaryCell } from '@/features/documents/components/document-primary-cell';
import { DocumentRowActions } from '@/features/documents/table/document-row-actions';
import { DocumentsTable } from '@/features/documents/table/documents-table';
import { DocumentStatusBadgeDropdown } from '@/features/documents/components/document-status-badge-dropdown';
import type { ClientEntity } from '@/features/clients/types';
import type { DocumentListItem, DocumentsPaginationMeta } from '@/features/documents/types';
import { useAuthorization } from '@/hooks/use-authorization';
import { useI18n } from '@/hooks/use-i18n';
import { ClientShowLayout } from '@/layouts/clients/client-show-layout';

interface FiltersShape {
    sort_by: 'created_at' | 'accountant_status' | 'ai_status';
    sort_direction: 'asc' | 'desc';
}

type ClientDocumentsPageProps = {
    client: ClientEntity;
    documents: {
        data: DocumentListItem[];
        meta: DocumentsPaginationMeta;
    };
    filters: FiltersShape;
    [key: string]: unknown;
};

export default function ClientDocumentsPage() {
    const { client, documents, filters } = usePage<ClientDocumentsPageProps>().props;
    const { t } = useI18n();
    const { can } = useAuthorization();

    const canProcess  = can('process documents') || can('reprocess documents');
    const canDelete   = can('delete documents');
    const canReview   = can('review documents');
    const canValidate = can('validate documents') || can('approve documents');

    const [expandedDocumentId, setExpandedDocumentId] = useState<number | null>(null);

    const navigate = useCallback(
        (params: Record<string, string | number | null>) => {
            router.get(
                `/admin/clients/${client.id}/documents`,
                { ...filters, ...params },
                { preserveState: true, preserveScroll: true, replace: true },
            );
        },
        [client.id, filters],
    );

    const handleSort = useCallback(
        (column: 'created_at' | 'accountant_status' | 'ai_status') => {
            const direction =
                filters.sort_by === column && filters.sort_direction === 'asc' ? 'desc' : 'asc';
            navigate({ sort_by: column, sort_direction: direction, page: 1 });
        },
        [filters, navigate],
    );

    const handlePageChange = useCallback(
        (page: number) => navigate({ page }),
        [navigate],
    );

    const handleToggleExpand = useCallback(
        (documentId: number) =>
            setExpandedDocumentId((prev) => (prev === documentId ? null : documentId)),
        [],
    );

    const handleOpenDetail = useCallback(
        (documentId: number) => router.visit(`/admin/documents/${documentId}`),
        [],
    );

    const columns = useMemo<ColumnDef<DocumentListItem>[]>(
        () => [
            {
                id: 'document',
                header: t('documents.admin_index.table.column_document'),
                cell: ({ row }) => (
                    <DocumentPrimaryCell
                        document={row.original}
                        onOpenDetail={handleOpenDetail}
                        isExpanded={row.getIsExpanded()}
                        onToggleExpand={handleToggleExpand}
                        alwaysAllowOpenDetail
                    />
                ),
            },
            {
                accessorKey: 'accountant_status',
                header: () => (
                    <SortableColumnHeader
                        label={t('documents.admin_index.table.column_accountant_status')}
                        onSort={() => handleSort('accountant_status')}
                    />
                ),
                cell: ({ row }) => (
                    <DocumentStatusBadgeDropdown
                        documentId={row.original.id}
                        aiStatus={row.original.ai_status}
                        accountantStatus={row.original.accountant_status}
                        canReview={canReview}
                        canValidate={canValidate}
                    />
                ),
            },
            {
                accessorKey: 'ai_status',
                header: () => (
                    <SortableColumnHeader
                        label={t('documents.admin_index.table.column_ai_status')}
                        onSort={() => handleSort('ai_status')}
                    />
                ),
                cell: ({ row }) => <DocumentAiStatusBadge status={row.original.ai_status} />,
            },
            {
                id: 'actions',
                header: () => (
                    <span className="block text-end text-[11px] font-semibold leading-tight text-foreground/85">
                        {t('documents.admin_index.table.column_actions')}
                    </span>
                ),
                cell: ({ row }) => (
                    <DocumentRowActions
                        documentId={row.original.id}
                        canProcess={canProcess}
                        canDelete={canDelete}
                    />
                ),
            },
        ],
        [t, canProcess, canDelete, canReview, canValidate, handleSort, handleOpenDetail, handleToggleExpand],
    );

    return (
        <ClientShowLayout client={client}>
            <Head title={`${client.name} — ${t('clients.show.nav.documents')}`} />

            <div className="mb-6 flex items-center justify-between">
                <h2 className="text-base font-semibold">{t('clients.show.nav.documents')}</h2>
                <span className="text-sm text-muted-foreground">
                    {documents.meta.total} {t('clients.show.documents.total_suffix')}
                </span>
            </div>

            <Card>
                <CardContent className="p-0 overflow-x-auto">
                    <DocumentsTable
                        columns={columns}
                        data={documents.data}
                        pagination={documents.meta}
                        onPageChange={handlePageChange}
                        isLoading={false}
                        expandedDocumentId={expandedDocumentId}
                        canDelete={canDelete}
                    />
                </CardContent>
            </Card>
        </ClientShowLayout>
    );
}