import { ChevronLeft, ChevronRight } from 'lucide-react';
import { pageList } from '@/lib/paginate';
import { cn } from '@/lib/utils';
import { NativeSelect } from '@/Components/ui/native-select';

/**
 * ListFooter — the design-system list/table footer.
 * Three fixed zones: "Showing X to Y of Z <itemLabel>" (+ optional stats) on the
 * left · ghost page numbers with a gradient-kotak active page (§19) in the center ·
 * "Rows per page" select on the right. Sizes/weights are canonical — don't
 * restyle per page; pass `stats` for extra inline figures.
 *
 * Usage (client-side rows):
 *   <ListFooter page={page} totalPages={totalPages} onPage={setPage}
 *     pageSize={perPage} onPageSize={(n) => { setPerPage(n); setPage(1); }}
 *     total={rows.length} itemLabel="items"
 *     stats={<><Dot /><span><b>3</b> orders</span></>} />
 *
 * Usage (server paginator — pass from/to so the range is the server's, not a guess):
 *   <ListFooter page={p.current_page} totalPages={p.last_page} onPage={...}
 *     pageSize={p.per_page} onPageSize={...} total={p.total}
 *     from={p.from} to={p.to} />
 */
export function ListFooter({
    page,
    totalPages,
    onPage,
    pageSize,
    onPageSize,
    pageSizeOptions = [10, 15, 25, 50],
    total,
    itemLabel = 'items',
    stats = null,
    className,
    from: fromProp = null,
    to: toProp = null,
}) {
    // Server-paginated callers pass paginator.from/paginator.to — the range the query
    // actually returned. Client-side callers have no such figures and keep the arithmetic
    // fallback. Laravel reports from/to as null for an empty result set, which falls
    // through to the fallback and renders "0 to 0" — the wording we want anyway.
    const from = fromProp ?? (total === 0 ? 0 : (page - 1) * pageSize + 1);
    const to = toProp ?? Math.min(page * pageSize, total);
    // Boxed pager cells (ref style #1): arrows + numbers share one bordered
    // square; only the ACTIVE page swaps its border for the gradient fill.
    const navBtn = 'grid size-8 place-items-center rounded-lg border border-border/60 bg-card text-muted-foreground transition-colors hover:border-primary/50 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-border/60 disabled:hover:text-muted-foreground';

    return (
        // Phone layout is TWO rows, not three: the count and the rows-per-page picker share
        // row one, and the pager spans both columns underneath. Stacked one-per-row it came to
        // 125px of footer with a ragged left/centre/left rhythm — three separate reading
        // positions for what is one control strip. From `sm` up it is the original
        // 1fr auto 1fr row, untouched.
        <div className={cn('grid grid-cols-[1fr_auto] items-center gap-x-3 gap-y-2.5 border-t border-border/60 bg-card px-6 py-3 text-xs text-muted-foreground sm:grid-cols-[1fr_auto_1fr]', className)}>
            <div className="col-start-1 row-start-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 tabular-nums">
                {/* Phones drop the word "Showing" but KEEP the noun — "1–9 of 9" alone does
                    not say of what. At 390px this plus the picker fits the 308px available;
                    the full sentence did not. */}
                <span className="sm:hidden">{from}–{to} of {total} {itemLabel}</span>
                <span className="hidden sm:inline">Showing {from} to {to} of {total} {itemLabel}</span>
                {stats}
            </div>

            {/* A single-page pager is `‹ 1 ›` with both arrows dead — on a phone that spent a
                whole row restating what "1–9 of 9" already said, which is what made the footer
                read as two rows of nothing. Desktop keeps it: it costs no height there, and a
                pager that appears and disappears between pages 1 and 2 is worse on a layout
                that has room for it. */}
            <nav className={cn(
                'col-span-2 row-start-2 shrink-0 items-center justify-center gap-1.5 sm:col-span-1 sm:col-start-2 sm:row-start-1 sm:inline-flex',
                totalPages > 1 ? 'inline-flex' : 'hidden',
            )} aria-label="Pagination">
                <button type="button" disabled={page === 1} onClick={() => onPage(Math.max(1, page - 1))} className={navBtn} aria-label="Previous page">
                    <ChevronLeft className="size-3.5" />
                </button>
                {pageList(page, totalPages).map((p, i) => p === '…' ? (
                    <span key={`gap-${i}`} className="grid size-8 place-items-center text-muted-foreground/60">…</span>
                ) : (
                    <button key={p} type="button" onClick={() => onPage(p)} aria-current={p === page ? 'page' : undefined}
                        className={`grid size-8 place-items-center rounded-lg text-xs tabular-nums ${p === page ? 'border border-transparent bg-linear-to-br from-violet-500 to-primary font-bold text-white shadow-sm transition-[filter] hover:brightness-105' : 'border border-border/60 bg-card font-medium text-muted-foreground transition-colors hover:border-primary/50 hover:text-foreground'}`}>
                        {p}
                    </button>
                ))}
                <button type="button" disabled={page === totalPages} onClick={() => onPage(Math.min(totalPages, page + 1))} className={navBtn} aria-label="Next page">
                    <ChevronRight className="size-3.5" />
                </button>
            </nav>

            <label className="col-start-2 row-start-1 inline-flex items-center gap-2 justify-self-end sm:col-start-3">
                <span className="sm:hidden">Rows</span>
                <span className="hidden sm:inline">Rows per page</span>
                <NativeSelect value={pageSize} onChange={(e) => onPageSize(Number(e.target.value))}
                    className="h-8 rounded-lg border border-border/60 bg-card px-2.5 text-xs font-semibold text-foreground outline-none transition-colors hover:border-primary/50 focus-visible:border-primary">
                    {pageSizeOptions.map((n) => <option key={n} value={n}>{n}</option>)}
                </NativeSelect>
            </label>
        </div>
    );
}

/** Muted separator dot for `stats` fragments. */
export function StatsDot() {
    return <span aria-hidden="true" className="text-muted-foreground/40">·</span>;
}