import { useId, useState, type ReactNode } from 'react';
import { Button } from '@/components/ui/Button';
import { Select } from '@/components/ui/Select';

type QueryPanelProps = {
  title: ReactNode;
  summary?: ReactNode;
  children: ReactNode;
};

type PaginationProps = {
  total?: number;
  page?: number;
  totalPages?: number;
  previousDisabled?: boolean;
  nextDisabled?: boolean;
  onPrevious?: () => void;
  onNext?: () => void;
  onPageChange?: (page: number) => void;
  pageSize?: number;
  pageSizeOptions?: number[];
  onPageSizeChange?: (pageSize: number) => void;
};

type InlineTextPreviewProps = {
  label: ReactNode;
  leading?: ReactNode;
  children: ReactNode;
};

export function QueryPanel({ title, summary, children }: QueryPanelProps) {
  return (
    <div className="surface ui-query-panel">
      <h2>{title}</h2>
      <div className="ui-query-panel__grid">{children}</div>
      {summary ? <p className="ui-query-panel__summary">{summary}</p> : null}
    </div>
  );
}

function PaginationJump({
  page,
  pages,
  onPageChange,
}: {
  page: number;
  pages: number;
  onPageChange: (page: number) => void;
}) {
  const [targetPage, setTargetPage] = useState(String(page));
  return (
    <label className="ui-pagination__jump">
      第{' '}
      <input
        aria-label="跳转页码"
        min="1"
        max={pages}
        onChange={(event) => setTargetPage(event.target.value)}
        onKeyDown={(event) => {
          if (event.key === 'Enter') onPageChange(Number(targetPage));
        }}
        type="number"
        value={targetPage}
      />{' '}
      / {pages} 页
    </label>
  );
}

export function Pagination({
  total,
  page = 1,
  totalPages,
  previousDisabled = true,
  nextDisabled = true,
  onPrevious,
  onNext,
  onPageChange,
  pageSize,
  pageSizeOptions = [10, 25, 50, 100],
  onPageSizeChange,
}: PaginationProps) {
  const pageSizeId = useId();
  const pages = Math.max(1, totalPages ?? (typeof total === 'number' ? Math.ceil(total / (pageSize ?? 10)) : page));

  function changePage(nextPage: number) {
    onPageChange?.(Math.min(pages, Math.max(1, nextPage)));
  }

  return (
    <div className="ui-pagination">
      {typeof total === 'number' ? <span>显示 {total} 条记录</span> : <span />}
      <div>
        {typeof pageSize === 'number' && onPageSizeChange ? (
          <>
            <label className="sr-only" htmlFor={pageSizeId}>
              每页数量
            </label>
            <Select
              id={pageSizeId}
              value={String(pageSize)}
              options={pageSizeOptions.map((value) => ({ value: String(value), label: `${value} 条/页` }))}
              onChange={(event) => onPageSizeChange(Number(event.target.value))}
            />
          </>
        ) : null}
        <Button disabled={previousDisabled} onClick={onPrevious} size="sm" variant="ghost">
          上一页
        </Button>
        {onPageChange ? (
          <Button disabled={page <= 1} onClick={() => changePage(1)} size="sm" variant="ghost">
            首页
          </Button>
        ) : null}
        <Button size="sm" variant="secondary">
          {page}
        </Button>
        {onPageChange ? <PaginationJump key={page} page={page} pages={pages} onPageChange={changePage} /> : null}
        {onPageChange ? (
          <Button disabled={page >= pages} onClick={() => changePage(pages)} size="sm" variant="ghost">
            末页
          </Button>
        ) : null}
        <Button disabled={nextDisabled} onClick={onNext} size="sm" variant="ghost">
          下一页
        </Button>
      </div>
    </div>
  );
}

export function InlineTextPreview({ label, leading, children }: InlineTextPreviewProps) {
  return (
    <div className="ui-inline-text-preview">
      <span>{label}</span>
      <p>
        {leading}
        {children}
      </p>
    </div>
  );
}