<script lang="ts" generics="TData, TValue">
    import {
        type ColumnDef,
        getCoreRowModel,
    } from "@tanstack/table-core";
    import { createSvelteTable, FlexRender } from "$lib/components/ui/data-table/index.js";
    import * as Table from "$lib/components/ui/table/index.js";
    import { Button } from "$lib/components/ui/button";
    import { goto } from "$app/navigation";
    import { page } from "$app/stores";

    type DataTableProps<TData, TValue> = {
        columns: ColumnDef<TData, TValue>[];
        data: TData[];
        pageCount: number;
        totalItems: number;
    };

    let {
        data,
        columns,
        pageCount,
        totalItems
    }: DataTableProps<TData, TValue> = $props();

    const table = createSvelteTable({
        get data() { return data; },
        columns,
        getCoreRowModel: getCoreRowModel(),
        manualPagination: true,
        pageCount: pageCount,
    });

    function handlePageChange(newPage: number) {
        const url = new URL($page.url);
        url.searchParams.set('page', newPage.toString());
        goto(url);
    }
</script>

<div class="rounded-md border">
    <Table.Root>
        <Table.Header>
            {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
                <Table.Row inTabOrder={false}>
                    {#each headerGroup.headers as header (header.id)}
                        <Table.Head>
                            {#if !header.isPlaceholder}
                                <FlexRender
                                    content={header.column.columnDef.header}
                                    context={header.getContext()}
                                />
                            {/if}
                        </Table.Head>
                    {/each}
                </Table.Row>
            {/each}
        </Table.Header>
        <Table.Body>
            {#if table.getRowModel().rows.length}
                {#each table.getRowModel().rows as row (row.id)}
                    <Table.Row inTabOrder={false} data-state={row.getIsSelected() && "selected"}>
                        {#each row.getVisibleCells() as cell (cell.id)}
                            <Table.Cell>
                                <FlexRender
                                    content={cell.column.columnDef.cell}
                                    context={cell.getContext()}
                                />
                            </Table.Cell>
                        {/each}
                    </Table.Row>
                {/each}
            {:else}
                <Table.Row inTabOrder={false}>
                    <Table.Cell colspan={columns.length} class="h-24 text-center">
                        No hay resultados.
                    </Table.Cell>
                </Table.Row>
            {/if}
        </Table.Body>
    </Table.Root>
</div>

<div class="flex items-center justify-end space-x-2 py-4">
    <div class="flex-1 text-sm text-muted-foreground">
        Total: {totalItems} registros
    </div>
    <Button
        variant="outline"
        size="sm"
        onclick={() => handlePageChange(Number($page.url.searchParams.get('page') || 1) - 1)}
        disabled={Number($page.url.searchParams.get('page') || 1) <= 1}
    >
        Anterior
    </Button>
    <Button
        variant="outline"
        size="sm"
        onclick={() => handlePageChange(Number($page.url.searchParams.get('page') || 1) + 1)}
        disabled={Number($page.url.searchParams.get('page') || 1) >= pageCount}
    >
        Siguiente
    </Button>
</div>
