import { router } from '@inertiajs/react';
import {
    ChevronDown,
    ChevronLeft,
    ChevronRight,
    ChevronsUpDown,
    ChevronUp,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';

export type SortDirection = 'asc' | 'desc';

export type TableFilters = {
    sort: string;
    direction: SortDirection;
    per_page: number;
};

export type PaginationMeta = {
    current_page: number;
    from: number | null;
    last_page: number;
    per_page: number;
    to: number | null;
    total: number;
};

export type PaginatedData<T> = PaginationMeta & {
    data: T[];
};

type SortableHeaderProps = {
    basePath: string;
    children: React.ReactNode;
    column: string;
    filters: TableFilters;
    className?: string;
};

export function SortableHeader({
    basePath,
    children,
    column,
    filters,
    className = '',
}: SortableHeaderProps) {
    const isActive = filters.sort === column;
    const direction: SortDirection =
        isActive && filters.direction === 'asc' ? 'desc' : 'asc';
    const Icon = !isActive
        ? ChevronsUpDown
        : filters.direction === 'asc'
          ? ChevronUp
          : ChevronDown;

    return (
        <th className={className}>
            <button
                type="button"
                className="flex items-center gap-1.5 font-medium"
                onClick={() =>
                    router.get(
                        basePath,
                        {
                            sort: column,
                            direction,
                            per_page: filters.per_page,
                        },
                        {
                            preserveScroll: true,
                            preserveState: true,
                        },
                    )
                }
            >
                {children}
                <Icon className="size-3.5 text-muted-foreground" />
            </button>
        </th>
    );
}

type PaginationControlsProps = {
    basePath: string;
    filters: TableFilters;
    meta: PaginationMeta;
};

export function PaginationControls({
    basePath,
    filters,
    meta,
}: PaginationControlsProps) {
    const goToPage = (page: number) => {
        router.get(
            basePath,
            {
                ...filters,
                page,
            },
            {
                preserveScroll: true,
                preserveState: true,
            },
        );
    };

    const setPerPage = (perPage: string) => {
        router.get(
            basePath,
            {
                ...filters,
                per_page: Number(perPage),
                page: 1,
            },
            {
                preserveScroll: true,
                preserveState: true,
            },
        );
    };

    return (
        <div className="flex flex-col gap-3 border-t px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
            <div className="text-sm text-muted-foreground">
                Showing {meta.from ?? 0} to {meta.to ?? 0} of {meta.total}
            </div>

            <div className="flex flex-wrap items-center gap-3">
                <div className="flex items-center gap-2">
                    <span className="text-sm text-muted-foreground">Rows</span>
                    <Select
                        value={String(filters.per_page)}
                        onValueChange={setPerPage}
                    >
                        <SelectTrigger className="w-20">
                            <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                            {[10, 25, 50, 100].map((size) => (
                                <SelectItem key={size} value={String(size)}>
                                    {size}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>

                <div className="flex items-center gap-2">
                    <span className="text-sm text-muted-foreground">
                        Page {meta.current_page} of {meta.last_page}
                    </span>
                    <Button
                        variant="outline"
                        size="icon"
                        disabled={meta.current_page <= 1}
                        onClick={() => goToPage(meta.current_page - 1)}
                    >
                        <ChevronLeft />
                        <span className="sr-only">Previous page</span>
                    </Button>
                    <Button
                        variant="outline"
                        size="icon"
                        disabled={meta.current_page >= meta.last_page}
                        onClick={() => goToPage(meta.current_page + 1)}
                    >
                        <ChevronRight />
                        <span className="sr-only">Next page</span>
                    </Button>
                </div>
            </div>
        </div>
    );
}