// Example of how to use the optimized data table hooks in other components

import { useQueryParams } from "@/hooks/use-query-params";
import { useDataTable } from "@/hooks/use-data-table";
import { useSearch } from "@/hooks/use-search";
import DataTable from "@/components/data-table";
import AppPagination from "@/components/app-pagination";
import { useMemo, useCallback } from "react";
import { Form } from "react-bootstrap";

interface ExampleData {
    id: number;
    name: string;
    email: string;
    created_at: string;
}

interface ExamplePageProps {
    resource: {
        data: ExampleData[];
        meta: {
            current_page: number;
            last_page: number;
            per_page: number;
            total: number;
            from: number;
            to: number;
        };
    };
}

export default function ExampleDataTablePage({ resource }: ExamplePageProps) {
    const [params, setParams] = useQueryParams();

    // Search functionality
    const { searchValue, handleSearch } = useSearch({
        initialValue: params.search || '',
        onSearch: useCallback((value: string) => {
            setParams({ search: value || undefined });
        }, [setParams]),
        debounceMs: 500,
    });

    // Sort handler
    const handleSort = useCallback((columnId: string) => {
        const isCurrentSort = params.sort === columnId;
        const isDesc = isCurrentSort && params.order === 'desc';
        const newOrder = isDesc ? 'asc' : 'desc';

        setParams({
            sort: columnId,
            order: newOrder,
        });
    }, [params.sort, params.order, setParams]);

    // Pagination handlers
    const handlePageChange = useCallback((page: number) => {
        setParams({ page });
    }, [setParams]);

    const handlePerPageChange = useCallback((perPage: number) => {
        setParams({ per_page: perPage });
    }, [setParams]);

    // Column definitions - Define your columns here
    const columns = useMemo(() => [
        {
            accessorKey: 'name',
            id: 'name',
            enableSorting: true,
            cell: (info: any) => <div className="text-start">{info.getValue()}</div>,
            header: () => <div className="text-start">Name</div>
        },
        {
            accessorKey: 'email',
            id: 'email',
            enableSorting: true,
            cell: (info: any) => <div className="text-start">{info.getValue()}</div>,
            header: () => <div className="text-start">Email</div>
        },
        {
            accessorKey: 'created_at',
            id: 'created_at',
            enableSorting: true,
            cell: (info: any) => <div className="text-start small text-muted">{info.getValue()}</div>,
            header: () => <div className="text-start">Created At</div>
        },
    ], []);

    // Data table setup
    const { table } = useDataTable({
        data: resource.data,
        columns,
        pageCount: resource.meta.last_page,
        currentPage: resource.meta.current_page,
        pageSize: resource.meta.per_page,
        params,
        onSort: handleSort,
        onPageChange: handlePageChange,
        onPerPageChange: handlePerPageChange,
    });

    return (
        <div>
            {/* Search Input */}
            <div className="mb-4">
                <Form.Control
                    type="search"
                    name="search"
                    value={searchValue}
                    onChange={handleSearch}
                    placeholder="Search..."
                    style={{ maxWidth: '300px' }}
                />
            </div>

            {/* Data Table */}
            <DataTable
                table={table}
                params={params}
                onSort={handleSort}
                defaultSortColumn="created_at"
            />

            {/* Pagination */}
            <AppPagination
                meta={resource.meta}
                onPageChange={handlePageChange}
                onPerPageChange={handlePerPageChange}
            />
        </div>
    );
}

// Key benefits of this optimized approach:
// 1. Separation of concerns - Each hook handles specific functionality
// 2. Performance optimization with useMemo and useCallback
// 3. Proper cleanup of debounced functions
// 4. Type safety with TypeScript
// 5. Reusable across different components
// 6. Automatic page reset when filtering
// 7. Proper URL state management