import React from 'react';
import clsx from 'clsx';

export function Table({ className, ...props }: React.TableHTMLAttributes<HTMLTableElement>): JSX.Element {
    return <table className={clsx('table', className)} {...props} />;
}

export function TableHead({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): JSX.Element {
    return <thead className={clsx('bg-gray-50', className)} {...props} />;
}

export function TableBody({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): JSX.Element {
    return <tbody className={clsx('divide-y divide-gray-100', className)} {...props} />;
}

export function TableRow({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>): JSX.Element {
    return <tr className={clsx('border-b border-gray-100 last:border-b-0', className)} {...props} />;
}

export function TableHeaderCell({ className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>): JSX.Element {
    return <th className={clsx('px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500', className)} {...props} />;
}

export function TableCell({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>): JSX.Element {
    return <td className={clsx('px-4 py-3 text-sm text-gray-700 align-top', className)} {...props} />;
}

export function TableContainer({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): JSX.Element {
    return <div className={clsx('w-full overflow-auto rounded-sm', className)} {...props} />;
}

export function TableStateRow({
    colSpan,
    message,
    className,
}: {
    colSpan: number;
    message: React.ReactNode;
    className?: string;
}): JSX.Element {
    return (
        <tr>
            <td colSpan={colSpan} className={clsx('py-8 text-center text-sm text-gray-500', className)}>
                {message}
            </td>
        </tr>
    );
}

interface TablePaginationProps {
    meta?: {
        current_page?: number;
        last_page?: number;
        total?: number;
    } | null;
    itemCount: number;
    currentPage?: number;
    onPageChange: (page: number) => void;
    itemLabel?: string;
    summaryPrefix?: string;
}

export function TablePagination({
    meta,
    itemCount,
    currentPage = 1,
    onPageChange,
    itemLabel = 'items',
    summaryPrefix = 'Showing',
}: TablePaginationProps): JSX.Element {
    const activePage = meta?.current_page ?? currentPage;
    const lastPage = Math.max(meta?.last_page ?? 1, 1);
    const total = meta?.total ?? itemCount;

    return (
        <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
            <div className="text-sm text-gray-600">
                {summaryPrefix} {itemCount} of {total} {itemLabel}
            </div>
            <div className="flex items-center gap-2 overflow-x-auto">
                <button
                    type="button"
                    disabled={activePage <= 1}
                    onClick={() => onPageChange(activePage - 1)}
                    className="rounded border px-2 py-1 disabled:opacity-40"
                >
                    Prev
                </button>
                {Array.from({length: lastPage}).map((_, index) => {
                    const page = index + 1;
                    return (
                        <button
                            key={page}
                            type="button"
                            onClick={() => onPageChange(page)}
                            className={clsx('rounded border px-2 py-1', page === activePage && 'bg-indigo-600 text-white')}
                        >
                            {page}
                        </button>
                    );
                })}
                <button
                    type="button"
                    disabled={activePage >= lastPage}
                    onClick={() => onPageChange(activePage + 1)}
                    className="rounded border px-2 py-1 disabled:opacity-40"
                >
                    Next
                </button>
            </div>
        </div>
    );
}