import { Card, Group, Pagination, Select, Text } from "@mantine/core";
import type { ReactNode } from "react";

interface ListTableCardProps {
  title: string;
  count: number;
  controls?: ReactNode;
  children: ReactNode;
  footer?: ReactNode;
}

export function ListTableCard({
  title,
  count,
  controls,
  children,
  footer,
}: ListTableCardProps) {
  return (
    <Card withBorder radius="lg" p="lg">
      <Text fw={700} size="lg" mb={controls ? "sm" : "md"}>
        {title} ({count})
      </Text>
      {controls && (
        <Group gap="sm" align="center" justify="space-between" wrap="wrap" mb="md">
          {controls}
        </Group>
      )}
      {children}
      {footer}
    </Card>
  );
}

interface ListTableFooterProps {
  pageSize: number;
  pageSizeOptions: string[];
  onPageSizeChange: (value: string | null) => void;
  rangeStart: number;
  rangeEnd: number;
  total: number;
  page: number;
  totalPages: number;
  onPageChange: (page: number) => void;
  /** Extra inline content (e.g. a loading spinner) next to the range text. */
  extra?: ReactNode;
}

/** Standard table footer: page-size selector, "Showing X–Y of Z", pagination. */
export function ListTableFooter({
  pageSize,
  pageSizeOptions,
  onPageSizeChange,
  rangeStart,
  rangeEnd,
  total,
  page,
  totalPages,
  onPageChange,
  extra,
}: ListTableFooterProps) {
  return (
    <Group justify="space-between" mt="md" align="center">
      <Group gap="xs" align="center">
        <Select
          w={90}
          size="sm"
          variant="filled"
          data={pageSizeOptions}
          value={String(pageSize)}
          onChange={onPageSizeChange}
          allowDeselect={false}
          searchable={false}
          aria-label="Entries per page"
        />
        <Text size="sm" c="dimmed">
          Entries per page
        </Text>
        <Text size="sm" c="dimmed">
          · Showing {rangeStart}–{rangeEnd} of {total}
        </Text>
        {extra}
      </Group>
      {totalPages > 1 && (
        <Pagination
          value={page}
          onChange={onPageChange}
          total={totalPages}
          size="sm"
        />
      )}
    </Group>
  );
}