// Contoh penggunaan React Table Expanding yang sudah dioptimalkan

import { useMemo, useCallback } from "react";
import { Button } from "react-bootstrap";
import { PiCaretDown, PiCaretRight } from "react-icons/pi";
import { useDataTable } from "@/hooks/use-data-table";
import { useQueryParams } from "@/hooks/use-query-params";
import DataTable from "@/components/data-table";

// Contoh untuk tabel User dengan expanding detail
interface User {
    id: number;
    name: string;
    email: string;
    profile?: {
        phone?: string;
        address?: string;
        department?: string;
    };
    created_at: string;
}

interface UserTableProps {
    data: User[];
    meta: any;
}

export function UserTableWithExpanding({ data, meta }: UserTableProps) {
    const [params, setParams] = useQueryParams();

    // Columns dengan expander
    const columns = useMemo(() => [
        {
            id: 'expander',
            header: '',
            size: 40,
            cell: ({ row }: { row: any }) => (
                <div className="d-flex align-items-center justify-content-center">
                    {row.getCanExpand() ? (
                        <Button
                            variant="link"
                            size="sm"
                            className="btn-icon p-1 text-muted border-0"
                            onClick={row.getToggleExpandedHandler()}
                        >
                            {row.getIsExpanded() ?
                                <PiCaretDown size={14} /> :
                                <PiCaretRight size={14} />
                            }
                        </Button>
                    ) : null}
                </div>
            ),
            enableSorting: false,
        },
        {
            accessorKey: 'name',
            id: 'name',
            header: 'Name',
            enableSorting: true,
        },
        {
            accessorKey: 'email',
            id: 'email',
            header: 'Email',
            enableSorting: true,
        },
        {
            accessorKey: 'created_at',
            id: 'created_at',
            header: 'Created At',
            enableSorting: true,
            cell: (info: any) => new Date(info.getValue()).toLocaleDateString(),
        },
    ], []);

    // Setup table dengan expanding
    const { table } = useDataTable({
        data,
        columns,
        pageCount: meta.last_page,
        currentPage: meta.current_page,
        pageSize: meta.per_page,
        params,
        onSort: (columnId) => {
            setParams({
                sort: columnId,
                order: params.sort === columnId && params.order === 'desc' ? 'asc' : 'desc'
            });
        },
        onPageChange: (page) => setParams({ page }),
        onPerPageChange: (perPage) => setParams({ per_page: perPage }),
        enableExpanding: true,
        getRowCanExpand: (row) => !!row.original.profile, // Hanya expand jika ada profile
    });

    // Render detail user ketika di-expand
    const renderUserDetail = useCallback(({ row }: { row: User }) => (
        <div className="p-4 bg-light">
            <div className="row">
                <div className="col-md-6">
                    <h6 className="mb-3">Contact Information</h6>
                    <p><strong>Phone:</strong> {row.profile?.phone || 'N/A'}</p>
                    <p><strong>Address:</strong> {row.profile?.address || 'N/A'}</p>
                </div>
                <div className="col-md-6">
                    <h6 className="mb-3">Work Information</h6>
                    <p><strong>Department:</strong> {row.profile?.department || 'N/A'}</p>
                </div>
            </div>
        </div>
    ), []);

    return (
        <div>
            {/* Controls */}
            <div className="mb-3 d-flex gap-2">
                <Button
                    variant="outline-primary"
                    size="sm"
                    onClick={() => table.toggleAllRowsExpanded(true)}
                >
                    Expand All
                </Button>
                <Button
                    variant="outline-secondary"
                    size="sm"
                    onClick={() => table.toggleAllRowsExpanded(false)}
                >
                    Collapse All
                </Button>
                <small className="text-muted align-self-center ms-2">
                    {table.getExpandedRowModel().rows.length} of {data.length} expanded
                </small>
            </div>

            {/* Table */}
            <DataTable
                table={table}
                params={params}
                onSort={() => { }}
                renderSubComponent={renderUserDetail}
            />
        </div>
    );
}

// Contoh dengan conditional expanding
export function ConditionalExpandingTable({ data, meta }: UserTableProps) {
    const [params, setParams] = useQueryParams();

    const columns = useMemo(() => [
        {
            id: 'expander',
            header: '',
            size: 40,
            cell: ({ row }: { row: any }) => {
                const canExpand = row.getCanExpand();
                const hasProfile = row.original.profile;

                return (
                    <div className="d-flex align-items-center justify-content-center">
                        {canExpand ? (
                            <Button
                                variant="link"
                                size="sm"
                                className="btn-icon p-1 text-muted border-0"
                                onClick={row.getToggleExpandedHandler()}
                                title={hasProfile ? "View details" : "No details available"}
                            >
                                {row.getIsExpanded() ?
                                    <PiCaretDown size={14} /> :
                                    <PiCaretRight size={14} />
                                }
                            </Button>
                        ) : (
                            <span className="text-muted small">—</span>
                        )}
                    </div>
                );
            },
            enableSorting: false,
        },
        // ... other columns
    ], []);

    const { table } = useDataTable({
        data,
        columns,
        pageCount: meta.last_page,
        currentPage: meta.current_page,
        pageSize: meta.per_page,
        params,
        onSort: (columnId) => {
            setParams({
                sort: columnId,
                order: params.sort === columnId && params.order === 'desc' ? 'asc' : 'desc'
            });
        },
        onPageChange: (page) => setParams({ page }),
        onPerPageChange: (perPage) => setParams({ per_page: perPage }),
        enableExpanding: true,
        // Conditional expanding logic
        getRowCanExpand: (row) => {
            const user = row.original;
            return !!(user.profile && (user.profile.phone || user.profile.address || user.profile.department));
        },
    });

    return (
        <DataTable
            table={table}
            params={params}
            onSort={() => { }}
            renderSubComponent={({ row }) => (
                <div className="p-3">
                    <strong>Additional Info for {row.name}</strong>
                    {/* Your detail content here */}
                </div>
            )}
        />
    );
}

// Tips untuk optimasi performance:
/*
1. Gunakan useCallback untuk renderSubComponent
2. Memoize columns dengan useMemo
3. Implementasikan getRowCanExpand untuk conditional expanding
4. Gunakan lazy loading untuk detail data jika diperlukan
5. Consider virtualization untuk large datasets

// Contoh dengan lazy loading:
const renderSubComponent = useCallback(({ row }: { row: User }) => {
    const [details, setDetails] = useState(null);
    const [loading, setLoading] = useState(true);
    
    useEffect(() => {
        if (row.isExpanded) {
            fetchUserDetails(row.id).then(setDetails).finally(() => setLoading(false));
        }
    }, [row.isExpanded, row.id]);
    
    if (loading) return <div className="p-3 text-center">Loading...</div>;
    
    return <div className="p-3">{details}</div>;
}, []);
*/