'use client';

export interface Column<T> {
    key: keyof T;
    header: string;
    render?: (row: T) => React.ReactNode;
}

export interface DataTableProps<T extends {id: number | string}> {
    caption?: string;
    columns: Column<T>[];
    rows: T[];
    total: number;
    isLoading?: boolean;
    skip?: number;
    limit?: number;
    onPrev?: () => void;
    onNext?: () => void;
    emptyMessage?: string;
}


const DataTable = <T extends { id: number | string}>({ 
    caption,
    columns, 
    rows, 
    total, 
    isLoading = false, 
    skip = 0, 
    limit = 10, 
    onPrev, 
    onNext, 
    emptyMessage = "No result found." 
}: DataTableProps<T>) => {

    const showInitialLoading = isLoading && rows.length === 0;
    if(showInitialLoading) {
        return <div className="text-sm p-4" role="status" aria-live="polite">Loading...</div>;
    }
    if(rows.length === 0) {
        return <div className="text-sm p-4" role="status" aria-live="polite">{emptyMessage}</div>;
    }
    
    return (
        <>
            <div 
                className={`flex flex-col gap-2 overflow-hidden rounded-md border border-border ${isLoading ? "opacity-60 pointer-events-none" : "opacity-100"}`}
                aria-busy={isLoading}
            >
                <table className="w-full border-collapse text-sm">
                    <caption className="sr-only">{caption ?? "Data table"}</caption>
                    <thead className="bg-muted">
                        <tr>
                            {columns.map((col) => (
                                <th
                                    key={String(col.key)}
                                    scope="col"
                                    className="px-4 py-2 text-left font-medium border-b border-border"
                                >
                                    {col.header}
                                </th>
                            ))}
                        </tr>
                    </thead>
                    <tbody className="text-sm text-foreground bg-background">
                        {rows.map((row) => (
                            <tr key={row.id} className="border-b border-border last:border-0 hover:bg-muted/50">
                                {columns.map((col) => (
                                    <td key={String(col.key)} className="px-4 py-2">
                                        {col.render ? col.render(row) : String(row[col.key] ?? "" )}
                                    </td>
                                ))}
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
            {(onPrev || onNext) && (
                <nav 
                    aria-labelledby="table-pagination-status"
                >
                    <div className="grid grid-cols-2 items-center">
                        <div className="flex gap-2 justify-self-start">
                            {onPrev && (
                                <button 
                                    type="button"
                                    aria-label="Go to previous page"
                                    className={`text-sm px-2 py-1 border border-border bg-accent rounded-sm active:scale-95 transition-transform duration-200 ease-out ${skip === 0 ? 'cursor-not-allowed' : 'cursor-pointer'}`}
                                    disabled={skip === 0}
                                    onClick={onPrev}
                                >Previous</button>
                            )}
                            {onNext && (
                                <button 
                                    type="button"
                                    aria-label="Go to next page"
                                    className={`text-sm px-2 py-1 border border-border bg-accent rounded-sm active:scale-95 transition-transform duration-200 ease-out ${total !== null && skip + limit >= total ? 'cursor-not-allowed' : 'cursor-pointer'}`}
                                    disabled={skip + limit >= total}
                                    onClick={onNext}
                                >Next</button>
                            )}
                        </div>

                        <div 
                            aria-live="polite"
                            role="status"
                            id="table-pagination-status" 
                            aria-label={`Page ${Math.floor(skip / limit) + 1}. Showing from ${skip+1} to ${Math.min(skip+limit, total)} of ${total} results`} 
                            className="text-sm text-foreground/80 justify-self-end"
                            >
                            Page: {Math.floor(skip / limit) + 1}. Showing from {`${skip+1} to ${Math.min(skip+limit, total)} of ${total} results`}
                        </div>
                    </div>
                </nav>
            )}
        </>
    );
}

export default DataTable;