import { Badge } from '@/Components/ui/badge';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import DocumentDeleteAction from '@/Pages/Document/DocumentDeleteAction';
import { formatFileSize } from '@/Pages/Document/documentFile';
import { DocumentsTable } from '@/Pages/Document/DocumentsTable';
import DocumentViewAction from '@/Pages/Document/DocumentViewAction';
import { Document, DocumentsResponse, DocumentType } from '@/types';
import { Head } from '@inertiajs/react';
import { ColumnDef } from '@tanstack/react-table';

interface AdminListProps {
    documents: DocumentsResponse;
    documentTypes: DocumentType[];
}

export default function AdminList({
    documents,
    documentTypes,
}: AdminListProps) {
    const tableColumns: ColumnDef<Document>[] = [
        {
            accessorKey: 'name',
            header: 'Nome del file',
        },
        {
            header: 'Tipologia',
            cell: ({ row }) => (
                <Badge variant="secondary">{row.original.type.name}</Badge>
            ),
        },
        {
            header: 'Utente',
            cell: ({ row }) => {
                const user = row.original.user;

                return (
                    <span>{user ? `${user.name} ${user.surname}` : ''}</span>
                );
            },
        },
        {
            header: 'Dimensione',
            cell: ({ row }) => formatFileSize(row.original.size),
        },
        {
            header: 'Caricato il',
            cell: ({ row }) =>
                new Date(row.original.created_at).toLocaleDateString('it'),
        },
        {
            id: 'actions',
            cell: ({ row }) => (
                <div className="flex justify-end">
                    <DocumentViewAction document={row.original} />
                    <DocumentDeleteAction document={row.original} />
                </div>
            ),
        },
    ];

    return (
        <AuthenticatedLayout
            backLink={route('dashboard')}
            backLinkLabel="Dashboard"
        >
            <Head title="Documenti" />

            <div className="py-2">
                <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
                    <div className="overflow-hidden sm:rounded-lg">
                        <div className="p-6 text-gray-900">
                            <div className="scroll-m-20 text-4xl font-light tracking-tight lg:text-5xl">
                                Documenti
                            </div>
                            <div className="container mx-auto py-10">
                                <DocumentsTable
                                    columns={tableColumns}
                                    data={documents.data}
                                    rowCount={documents.total}
                                    pageSize={documents.per_page}
                                    pageCount={documents.last_page}
                                    documentTypes={documentTypes}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
