import React from "react";
import { View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useColorScheme } from "nativewind";
import { cn } from "../utils/cn";
import { Button } from "./button";
import { MutedText } from "./text";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "./dropdown-menu";

export interface PaginationProps {
  /** Current page, 1-based. */
  page: number;
  /** Number of rows per page. Used to derive total pages from `totalItems`. */
  pageSize: number;
  /** Total number of items across all pages. */
  totalItems: number;
  /** Called with the next page (1-based) when prev/next is pressed. */
  onPageChange: (page: number) => void;
  /**
   * Page-size choices. When provided (and `onPageSizeChange` is set) a
   * size selector renders, built on the existing `DropdownMenu` primitive.
   */
  pageSizeOptions?: number[];
  onPageSizeChange?: (pageSize: number) => void;
  className?: string;
}

export interface PaginationState {
  totalPages: number;
  /** Clamped current page (never below 1, never above totalPages). */
  currentPage: number;
  canPrev: boolean;
  canNext: boolean;
  /** 1-based index of the first item on the current page (0 when empty). */
  rangeStart: number;
  /** 1-based index of the last item on the current page (0 when empty). */
  rangeEnd: number;
}

/**
 * Pure pagination maths, separated from the view so it can be unit-tested
 * without a render host. Tolerates degenerate inputs (zero items, negative
 * page, oversized page) by clamping.
 */
export function getPaginationState(
  page: number,
  pageSize: number,
  totalItems: number
): PaginationState {
  const safeSize = Math.max(1, Math.floor(pageSize));
  const safeTotal = Math.max(0, Math.floor(totalItems));
  const totalPages = Math.max(1, Math.ceil(safeTotal / safeSize));
  const currentPage = Math.min(Math.max(1, Math.floor(page) || 1), totalPages);
  const rangeStart = safeTotal === 0 ? 0 : (currentPage - 1) * safeSize + 1;
  const rangeEnd = Math.min(currentPage * safeSize, safeTotal);
  return {
    totalPages,
    currentPage,
    canPrev: currentPage > 1,
    canNext: currentPage < totalPages,
    rangeStart,
    rangeEnd,
  };
}

/**
 * Page controls for paginated lists/tables: prev/next, a "X–Y of Z" summary,
 * and an optional page-size selector. Disabled states are derived from the
 * clamped pagination state and exposed to assistive tech via
 * `accessibilityState`.
 */
export function Pagination({
  page,
  pageSize,
  totalItems,
  onPageChange,
  pageSizeOptions,
  onPageSizeChange,
  className,
}: PaginationProps) {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";
  const iconColor = isDark ? "#FFFFFF" : "#000000";

  const { totalPages, currentPage, canPrev, canNext, rangeStart, rangeEnd } = getPaginationState(
    page,
    pageSize,
    totalItems
  );

  const showSizeSelector = !!pageSizeOptions && pageSizeOptions.length > 0 && !!onPageSizeChange;

  return (
    <View className={cn("flex-row items-center justify-between gap-3", className)}>
      <View className="flex-row items-center gap-3">
        <MutedText className="text-sm">
          {totalItems === 0 ? "No items" : `${rangeStart}–${rangeEnd} of ${totalItems}`}
        </MutedText>
        {showSizeSelector ? (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                variant="outline"
                size="sm"
                accessibilityRole="button"
                accessibilityLabel={`Rows per page, currently ${pageSize}`}
              >
                {`${pageSize} / page`}
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              {pageSizeOptions.map((size) => (
                <DropdownMenuItem key={size} onPress={() => onPageSizeChange(size)}>
                  <MutedText className="text-sm text-foreground dark:text-white">{`${size} / page`}</MutedText>
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        ) : null}
      </View>

      <View className="flex-row items-center gap-2">
        <MutedText className="text-sm">{`Page ${currentPage} of ${totalPages}`}</MutedText>
        <Button
          variant="outline"
          size="sm"
          disabled={!canPrev}
          onPress={() => onPageChange(currentPage - 1)}
          accessibilityRole="button"
          accessibilityLabel="Previous page"
          accessibilityState={{ disabled: !canPrev }}
        >
          <Ionicons name="chevron-back" size={18} color={iconColor} />
        </Button>
        <Button
          variant="outline"
          size="sm"
          disabled={!canNext}
          onPress={() => onPageChange(currentPage + 1)}
          accessibilityRole="button"
          accessibilityLabel="Next page"
          accessibilityState={{ disabled: !canNext }}
        >
          <Ionicons name="chevron-forward" size={18} color={iconColor} />
        </Button>
      </View>
    </View>
  );
}