import { Meta, StoryObj } from '@storybook/react';
import { useState } from 'react';

import { CheckIcon, MusicIcon, SparklesIcon, StarIcon } from '@/icons';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '../button/Button';
import AuraModal from './AuraModal';

const meta: Meta<typeof AuraModal> = {
  title: 'Components/Modal/AuraModal',
  component: AuraModal,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof AuraModal>;

function AuraModalDemo(
  props: React.ComponentProps<typeof AuraModal> & {
    buttonText?: string;
    showCloseButton?: boolean;
  }
) {
  const {
    buttonText = 'Open Modal',
    children,
    showCloseButton = false,
  } = props;
  const [open, setOpen] = useState(false);

  return (
    <div className='p-4'>
      <Button
        variant={ButtonVariant.Primary}
        shape={ButtonShape.Pill}
        onClick={() => setOpen(true)}
      >
        {buttonText}
      </Button>

      <AuraModal {...props} open={open} onOpenChange={setOpen}>
        {children}
        {showCloseButton && (
          <Button
            variant={ButtonVariant.Primary}
            shape={ButtonShape.Pill}
            className='w-full'
            size={ButtonSize.Large}
            onClick={() => setOpen(false)}
          >
            Close
          </Button>
        )}
      </AuraModal>
    </div>
  );
}

export const Default: Story = {
  render: (args) => (
    <AuraModalDemo {...args} buttonText='Open Modal' title='Example Modal'>
      <p>
        This is an example of the AuraModal component built with Radix UI Dialog
        primitives.
      </p>
      <p>
        By default, the modal now has a beautiful aura background with the same
        layered approach as in AuraSubscriptions component.
      </p>
      <p>
        The gradient overlay is applied on top of the image, creating a
        consistent look throughout the application.
      </p>
    </AuraModalDemo>
  ),
};

export const WithIcon: Story = {
  render: (args) => (
    <AuraModalDemo
      {...args}
      buttonText='Open Modal with Icon'
      title='Modal with Icon'
      icon={<SparklesIcon className='h-16 w-16' />}
    >
      <div className='p-4'>
        <p className='mb-4'>
          This modal displays a large icon above the title.
        </p>
        <p className='mb-4'>
          Icons can help users understand the context of the modal at a glance.
        </p>
      </div>
    </AuraModalDemo>
  ),
};

export const SuccessModal: Story = {
  render: (args) => (
    <AuraModalDemo
      {...args}
      buttonText='Open Success Modal'
      title='Success!'
      icon={<CheckIcon className='h-16 w-16' />}
      showCloseButton
    >
      <p className='mb-4'>
        This modal uses the SuccessIcon from the icon library.
      </p>
      <p className='mb-4'>
        The same icon is used in the CreditsFlow component when a purchase is
        successful.
      </p>
    </AuraModalDemo>
  ),
};

export const CustomAuraBackground: Story = {
  render: (args) => (
    <AuraModalDemo
      {...args}
      buttonText='Open Modal with Custom Aura'
      title='Custom Aura Background'
      auraImage='https://cdn-o.suno.com/auras-v2/Aura-1.png'
      icon={<StarIcon className='h-16 w-16' />}
    >
      <p className='mb-4'>
        This modal has a custom aura background image applied to it.
      </p>
      <p className='mb-4'>
        The background image can be set via the auraImage prop.
      </p>
    </AuraModalDemo>
  ),
};

export const CustomWidth: Story = {
  render: (args) => (
    <AuraModalDemo
      {...args}
      buttonText='Open Wide Modal'
      title='Wide Modal'
      contentWrapperClasses='max-w-[800px]'
      icon={<MusicIcon className='h-16 w-16 text-accent-blue' />}
    >
      <div className='p-4'>
        <p className='mb-4'>This modal has a custom width of 800px.</p>
        <p className='mb-4'>
          The width prop can be used to set a custom width for the modal.
        </p>
      </div>
    </AuraModalDemo>
  ),
};