import type { Meta, StoryObj } from '@storybook/react'
import { useState } from 'react'
import { Typography } from '../Typography'
import { Pagination } from './Pagination'
import { PaginationControls } from './PaginationControls'
import { PaginationDisplay } from './PaginationDisplay'

const meta: Meta<typeof Pagination> = {
  title: 'Blocks/Pagination',
  component: Pagination,
  parameters: {
    layout: 'padded',
    docs: {
      source: { type: 'code' },
    },
  },
  argTypes: {
    pageControlMode: {
      control: { type: 'select' },
      options: ['select', 'display'],
      table: {
        type: { summary: 'select | display' },
        defaultValue: { summary: 'select' },
      },
    },
    totalCount: {
      control: 'number',
      description:
        'Total number of records. When absent, "of X" is hidden and the page control falls back to a static label.',
    },
    currentPageCount: {
      control: 'number',
      description:
        'Number of records in the current page. Useful when totalCount is unknown.',
    },
    canNextPage: {
      control: 'boolean',
      description:
        'Controls the next button when totalCount is absent. Mirrors TanStack table.getCanNextPage().',
    },
    isLoading: {
      control: 'boolean',
      description: 'Disables pagination interactions while data is loading.',
    },
    pageSize: {
      control: 'number',
    },
    onPageChange: { control: false },
    className: { control: false },
  },
}

export default meta
type Story = StoryObj<typeof Pagination>

export const Default: Story = {
  render: (args) => {
    function DefaultStory() {
      const [pageIndex, setPageIndex] = useState(0)
      return (
        <Pagination
          {...args}
          pageIndex={pageIndex}
          pageSize={10}
          totalCount={45}
          onPageChange={setPageIndex}
        />
      )
    }
    return <DefaultStory />
  },
}

export const DisplayMode: Story = {
  render: (args) => {
    function DisplayModeStory() {
      const [pageIndex, setPageIndex] = useState(0)
      return (
        <Pagination
          {...args}
          pageIndex={pageIndex}
          canNextPage={pageIndex < 4}
          pageControlMode="display"
          onPageChange={setPageIndex}
        />
      )
    }
    return <DisplayModeStory />
  },
}

export const WithoutTotal: Story = {
  render: (args) => {
    function WithoutTotalStory() {
      const [pageIndex, setPageIndex] = useState(0)
      const canNextPage = pageIndex < 4 // e.g. from data?.has_more when totalCount unknown
      const currentPageCount = pageIndex < 4 ? 10 : 7
      return (
        <Pagination
          {...args}
          pageIndex={pageIndex}
          pageSize={10}
          currentPageCount={currentPageCount}
          canNextPage={canNextPage}
          onPageChange={setPageIndex}
        />
      )
    }
    return <WithoutTotalStory />
  },
}

export const DisplayOnly: Story = {
  render: () => (
    <PaginationDisplay
      pageIndex={1}
      pageSize={10}
      currentPageCount={3}
      className="w-fit"
    />
  ),
}

export const ControlsOnlyDisplay: Story = {
  render: (args) => {
    function ControlsOnlyDisplayStory() {
      const [pageIndex, setPageIndex] = useState(0)

      return (
        <PaginationControls
          {...args}
          pageIndex={pageIndex}
          canNextPage={pageIndex < 4}
          pageControlMode="display"
          onPageChange={setPageIndex}
        />
      )
    }

    return <ControlsOnlyDisplayStory />
  },
}

export const ControlsOnlySelect: Story = {
  render: (args) => {
    function ControlsOnlySelectStory() {
      const [pageIndex, setPageIndex] = useState(0)

      return (
        <PaginationControls
          {...args}
          pageIndex={pageIndex}
          pageSize={10}
          totalCount={45}
          onPageChange={setPageIndex}
        />
      )
    }

    return <ControlsOnlySelectStory />
  },
}

export const Comparisons: Story = {
  render: (args) => {
    function ComparisonsStory() {
      const [defaultPageIndex, setDefaultPageIndex] = useState(0)
      const [displayModePageIndex, setDisplayModePageIndex] = useState(0)
      const [withoutTotalPageIndex, setWithoutTotalPageIndex] = useState(0)

      const withoutTotalCanNextPage = withoutTotalPageIndex < 4
      const withoutTotalCurrentPageCount = withoutTotalPageIndex < 4 ? 10 : 7

      return (
        <div className="flex w-full max-w-3xl flex-col gap-6">
          <div className="flex flex-col gap-2">
            <Typography variant="body-semi-s">Default</Typography>
            <Pagination
              {...args}
              pageIndex={defaultPageIndex}
              pageSize={10}
              totalCount={45}
              onPageChange={setDefaultPageIndex}
            />
          </div>

          <div className="flex flex-col gap-2">
            <Typography variant="body-semi-s">
              Page Control in Display Mode
            </Typography>
            <Pagination
              {...args}
              pageIndex={displayModePageIndex}
              pageSize={10}
              totalCount={45}
              onPageChange={setDisplayModePageIndex}
              pageControlMode="display"
            />
          </div>

          <div className="flex flex-col gap-2">
            <Typography variant="body-semi-s">
              No Total (Page Control in Display Mode)
            </Typography>
            <Pagination
              {...args}
              pageIndex={withoutTotalPageIndex}
              pageSize={10}
              currentPageCount={withoutTotalCurrentPageCount}
              canNextPage={withoutTotalCanNextPage}
              onPageChange={setWithoutTotalPageIndex}
            />
          </div>

          <div className="flex flex-col gap-2">
            <Typography variant="body-semi-s">Loading</Typography>
            <Pagination
              {...args}
              isLoading={true}
              pageIndex={withoutTotalPageIndex}
              pageSize={10}
              currentPageCount={withoutTotalCurrentPageCount}
              canNextPage={withoutTotalCanNextPage}
              onPageChange={setWithoutTotalPageIndex}
            />
          </div>
        </div>
      )
    }

    return <ComparisonsStory />
  },
}