import { useState } from 'react';

import { Stack, Typography } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { IconCopy, IconEdit, IconTrash } from '@tabler/icons-react';

import SectionItem, { type SectionItemProps } from '.';

const meta = {
  component: SectionItem,
  title: 'Composed Components/SectionItem',
  tags: ['autodocs'],
  argTypes: {
    title: { control: 'text' },
    expanded: { control: 'boolean' },
    isSelected: { control: 'boolean' },
    hasError: { control: 'boolean' },
    errorTooltip: { control: 'text' },
    draggable: { control: false },
    hasDefaultBorder: { control: 'boolean' },
    backgroundColor: { control: 'text' },
    dragId: { control: false },
    dragData: { control: false },
    children: { control: false },
    footer: { control: false },
    menuOptions: { control: false },
    onClick: { control: false },
    onToggleExpand: { control: false },
    sx: { control: false },
  },
  parameters: {
    layout: 'padded',
    docs: {
      controls: { expanded: true },
    },
  },
  decorators: [
    Story => (
      <Stack sx={{ width: 1, maxWidth: 600, mx: 'auto', p: 2 }}>
        <Story />
      </Stack>
    ),
  ],
} satisfies Meta<typeof SectionItem>;

export default meta;

type Story = StoryObj<typeof meta>;

const SampleContent = () => (
  <Stack sx={{ gap: 1 }}>
    <Typography variant="globalXS">
      This is the collapsible content area. You can place any form fields,
      lists, or custom UI here.
    </Typography>
  </Stack>
);

const Stateful = (
  props: Omit<SectionItemProps, 'expanded' | 'onToggleExpand'> & {
    defaultExpanded?: boolean;
  },
) => {
  const { defaultExpanded = false, ...rest } = props;
  const [expanded, setExpanded] = useState(defaultExpanded);
  return (
    <SectionItem
      {...rest}
      expanded={expanded}
      backgroundColor="white"
      onToggleExpand={() => setExpanded(prev => !prev)}
      onClick={() => setExpanded(prev => !prev)}
    />
  );
};

export const Default: Story = {
  args: {
    title: 'Section title',
    expanded: false,
    onToggleExpand: () => undefined,
  },
  render: args => (
    <Stateful {...args}>
      <SampleContent />
    </Stateful>
  ),
};

export const Selected: Story = {
  args: {
    title: 'Selected section',
    expanded: false,
    isSelected: true,
    onToggleExpand: () => undefined,
  },
  render: args => (
    <Stateful
      {...args}
      defaultExpanded
    >
      <SampleContent />
    </Stateful>
  ),
};

export const WithError: Story = {
  args: {
    title: 'Section with error',
    expanded: false,
    hasError: true,
    errorTooltip: 'This section has validation errors',
    onToggleExpand: () => undefined,
  },
  render: args => (
    <Stateful {...args}>
      <SampleContent />
    </Stateful>
  ),
};

export const WithMenuOptions: Story = {
  args: {
    title: 'Section with menu',
    expanded: false,
    onToggleExpand: () => undefined,
    menuOptions: [
      { Icon: IconEdit, title: 'Edit', onClick: () => alert('Edit') },
      {
        Icon: IconCopy,
        title: 'Duplicate',
        onClick: () => alert('Duplicate'),
      },
      {
        Icon: IconTrash,
        title: 'Delete',
        onClick: () => alert('Delete'),
        disabled: true,
      },
    ],
  },
  render: args => (
    <Stateful
      {...args}
      defaultExpanded
    >
      <SampleContent />
    </Stateful>
  ),
};

export const WithFooter: Story = {
  args: {
    title: 'Section with footer',
    expanded: false,
    onToggleExpand: () => undefined,
    footer: (
      <Typography
        variant="globalXS"
        color="text.secondary"
      >
        Footer content goes here
      </Typography>
    ),
  },
  render: args => (
    <Stateful
      {...args}
      defaultExpanded
    >
      <SampleContent />
    </Stateful>
  ),
};

const InteractiveDemo = () => {
  const [expandedId, setExpandedId] = useState<string | null>('section-1');
  const [selectedId, setSelectedId] = useState<string | null>('section-1');

  const sections = [
    { id: 'section-1', title: 'Personal information' },
    { id: 'section-2', title: 'Work experience' },
    { id: 'section-3', title: 'Education' },
  ];

  return (
    <Stack sx={{ gap: 1 }}>
      {sections.map(section => (
        <SectionItem
          key={section.id}
          title={section.title}
          expanded={expandedId === section.id}
          isSelected={selectedId === section.id}
          onToggleExpand={() =>
            setExpandedId(prev => (prev === section.id ? null : section.id))
          }
          backgroundColor="white"
          hasDefaultBorder
          onClick={() => setSelectedId(section.id)}
          menuOptions={[
            {
              Icon: IconEdit,
              title: 'Edit',
              onClick: () => alert(`Edit ${section.title}`),
            },
            {
              Icon: IconTrash,
              title: 'Delete',
              onClick: () => alert(`Delete ${section.title}`),
            },
          ]}
        >
          <Typography variant="globalXS">
            Content for {section.title}
          </Typography>
        </SectionItem>
      ))}
    </Stack>
  );
};

export const Interactive: Story = {
  args: {
    title: '',
    expanded: false,
    onToggleExpand: () => undefined,
  },
  render: () => <InteractiveDemo />,
};