import type { Meta, StoryObj } from '@storybook/react'
import { useState } from 'react'
import { Button, Typography } from '../../components'
import { usePlaceholderRows } from './usePlaceholderRows'

const meta: Meta = {
  title: 'Hooks/usePlaceholderRows',
}

export default meta

type MockData = { id: number; name: string }

const mockData: MockData[] = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
]

export const Default: StoryObj = {
  render: function PlaceholderRowsDemo() {
    const [isLoading, setIsLoading] = useState(true)

    const tableData = usePlaceholderRows({
      data: mockData,
      isLoading,
      pageSize: 5,
    })

    return (
      <div className="flex flex-col gap-4 p-8">
        <Typography variant="h3">usePlaceholderRows Demo</Typography>
        <Typography variant="body-s" className="text-muted-foreground">
          Toggle loading state to see placeholder rows vs actual data.
        </Typography>

        <Button
          variant="secondary"
          size="sm"
          className="w-fit"
          onClick={() => setIsLoading(!isLoading)}
        >
          {isLoading ? 'Show Data' : 'Show Loading'}
        </Button>

        <div className="rounded-lg border border-border">
          <table className="w-full">
            <thead>
              <tr className="border-b border-border bg-muted">
                <th className="px-4 py-2 text-left">ID</th>
                <th className="px-4 py-2 text-left">Name</th>
              </tr>
            </thead>
            <tbody>
              {tableData.data.map((row, index) => (
                <tr
                  key={index}
                  className="border-b border-border last:border-0"
                >
                  <td className="px-4 py-2">
                    {tableData.isLoading ? (
                      <div className="h-4 w-8 animate-pulse rounded bg-muted" />
                    ) : (
                      (row as MockData).id
                    )}
                  </td>
                  <td className="px-4 py-2">
                    {tableData.isLoading ? (
                      <div className="h-4 w-24 animate-pulse rounded bg-muted" />
                    ) : (
                      (row as MockData).name
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <Typography variant="body-xs" className="text-muted-foreground">
          Rows: {tableData.data.length} | Loading: {String(tableData.isLoading)}
        </Typography>
      </div>
    )
  },
}

export const WithCustomCount: StoryObj = {
  render: function CustomPlaceholderCount() {
    const [isLoading, setIsLoading] = useState(true)

    const tableData = usePlaceholderRows({
      data: [] as MockData[],
      isLoading,
      placeholderCount: 3,
    })

    return (
      <div className="flex flex-col gap-4 p-8">
        <Typography variant="h3">Custom Placeholder Count</Typography>
        <Typography variant="body-s" className="text-muted-foreground">
          Using placeholderCount to override the default behavior.
        </Typography>

        <Button
          variant="secondary"
          size="sm"
          className="w-fit"
          onClick={() => setIsLoading(!isLoading)}
        >
          Toggle Loading
        </Button>

        <div className="flex flex-col gap-2">
          {tableData.data.map((_, index) => (
            <div
              key={index}
              className="h-12 w-full animate-pulse rounded-lg bg-muted"
            />
          ))}
        </div>

        <Typography variant="body-xs" className="text-muted-foreground">
          Always shows exactly 3 placeholder rows when loading.
        </Typography>
      </div>
    )
  },
}