import { Fragment } from 'react';

import { Box, Typography } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { IconPlus } from '@tabler/icons-react';

import { type AIFabProps } from './types';
import { AIFab } from '.';

const SIZES = ['large', 'small'] as const;

const STATES: { label: string; props: Partial<AIFabProps> }[] = [
  { label: 'Enabled', props: {} },
  { label: 'Loading', props: { loading: true } },
  { label: 'Disabled', props: { disabled: true } },
];

const meta: Meta<typeof AIFab> = {
  title: 'Design System/AI/Buttons/AIFab',
  component: AIFab,
  tags: ['autodocs'],
  args: {
    children: 'Nuevo',
    size: 'large',
    icon: 'sparkles',
    endIcon: <IconPlus />,
  },
  argTypes: {
    size: {
      control: 'radio',
      options: ['small', 'large'],
      table: { defaultValue: { summary: 'large' } },
    },
    icon: {
      control: 'radio',
      options: ['sparkles', 'ai-pencil', 'ai-photo'],
      table: { defaultValue: { summary: 'sparkles' } },
    },
    loading: {
      control: 'boolean',
      description: 'Shows the progress/stop state',
    },
    endIcon: { table: { disable: true } },
    onStop: { table: { disable: true } },
  },
};

export default meta;

type Story = StoryObj<typeof meta>;

const ColumnHeader = ({ label }: { label: string }) => (
  <Typography
    variant="caption"
    sx={{ fontWeight: 700, textAlign: 'center', color: 'text.secondary' }}
  >
    {label}
  </Typography>
);

const RowHeader = ({ label }: { label: string }) => (
  <Typography
    variant="subtitle2"
    sx={{ textTransform: 'capitalize' }}
  >
    {label}
  </Typography>
);

/** Size rows × state columns (FAB is primary-only). Hover to see the gradient/sparkle. */
const StateMatrix = (args: AIFabProps) => (
  <Box
    sx={{
      display: 'inline-grid',
      gridTemplateColumns: `auto repeat(${STATES.length}, 1fr)`,
      gap: 3,
      alignItems: 'center',
    }}
  >
    <span />
    {STATES.map(({ label }) => (
      <ColumnHeader
        key={label}
        label={label}
      />
    ))}

    {SIZES.map(size => (
      <Fragment key={size}>
        <RowHeader label={size} />
        {STATES.map(({ label, props }) => (
          <Box
            key={label}
            sx={{ display: 'flex', justifyContent: 'center' }}
          >
            <AIFab
              {...args}
              size={size}
              {...props}
            />
          </Box>
        ))}
      </Fragment>
    ))}
  </Box>
);

export const Playground: Story = {
  args: {},
};

export const Overview: Story = {
  parameters: { controls: { disable: true } },
  render: StateMatrix,
};

export const Dark: Story = {
  parameters: { controls: { disable: true } },
  render: StateMatrix,
  globals: { themeMode: 'dark' },
};