import type { Meta, StoryObj } from '@storybook/react';
import Accordion, {
  AccordionItem,
  AccordionTitle,
  AccordionContent,
} from '../index.js';
import { AccordionProps } from '../types.js';
import { withAccordionStyles } from './AccordionDecorator.js';
import { SBContainer, SBFocusWrapper } from '@sb-utils';

const meta: Meta<AccordionProps> = {
  title: 'Component Library/Accordion',
  component: Accordion,
  parameters: {
    docs: {
      description: {
        component:
          'The Accordion component creates expandable/collapsible sections using native HTML details/summary elements. It supports multiple variants, icon styles, and flexible content.',
      },
    },
  },
  decorators: [withAccordionStyles],
};

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

export const Default: Story = {
  render: args => (
    <SBContainer flex width="800px">
      <Accordion {...args}>
        <AccordionItem>
          <AccordionTitle>What is HubSpot?</AccordionTitle>
          <AccordionContent>
            <p>
              HubSpot is a leading CRM platform that provides software and
              support to help businesses grow better.
            </p>
          </AccordionContent>
        </AccordionItem>
        <AccordionItem>
          <AccordionTitle>How do I get started?</AccordionTitle>
          <AccordionContent>
            <p>
              Sign up for a free account and explore our comprehensive
              onboarding guides and tutorials.
            </p>
          </AccordionContent>
        </AccordionItem>
        <AccordionItem>
          <AccordionTitle>Is there a free plan?</AccordionTitle>
          <AccordionContent>
            <p>
              Yes! HubSpot offers free tools for CRM, marketing, sales, and
              customer service.
            </p>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </SBContainer>
  ),
};

export const IconOptions: Story = {
  name: 'Icon Options',
  render: () => (
    <SBContainer flex gap="extralarge" width="800px">
      <SBContainer addBackground>
        <h4>Chevron Icon (Default)</h4>
        <Accordion gap="16px">
          <AccordionItem>
            <AccordionTitle>Chevron rotates on open</AccordionTitle>
            <AccordionContent>
              <p>
                The chevron icon rotates 180 degrees when the accordion item is
                expanded.
              </p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem>
            <AccordionTitle>Another chevron item</AccordionTitle>
            <AccordionContent>
              <p>This provides a subtle visual cue for the expanded state.</p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Plus/Minus Icon</h4>
        <Accordion gap="16px">
          <AccordionItem>
            <AccordionTitle icon="plus">Plus becomes minus</AccordionTitle>
            <AccordionContent>
              <p>
                The plus icon switches to a minus icon when expanded, clearly
                indicating toggle state.
              </p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem>
            <AccordionTitle icon="plus">Another plus item</AccordionTitle>
            <AccordionContent>
              <p>This style is often preferred for FAQ sections.</p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Caret Icon</h4>
        <Accordion gap="16px">
          <AccordionItem>
            <AccordionTitle icon="caret">Caret Icon</AccordionTitle>
            <AccordionContent>
              <p>
                The caret icon provides a simple visual cue for the expanded
                state.
              </p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem>
            <AccordionTitle icon="caret">Another caret item</AccordionTitle>
            <AccordionContent>
              <p>This is just some caret cake.</p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </SBContainer>
    </SBContainer>
  ),
};

export const Variants: Story = {
  name: 'Style Variants',
  render: () => (
    <SBContainer flex gap="extralarge" width="800px">
      <SBContainer addBackground>
        <h4>Variant 1 (Default)</h4>
        <Accordion>
          <AccordionItem>
            <AccordionTitle>Clean minimal styling</AccordionTitle>
            <AccordionContent>
              <p>
                Subtle border with transparent background. Great for most use
                cases.
              </p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Variant 2</h4>
        <Accordion>
          <AccordionItem variant="card2">
            <AccordionTitle>Soft background styling</AccordionTitle>
            <AccordionContent>
              <p>
                Light background fill with rounded corners for a softer look.
              </p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Variant 3</h4>
        <Accordion>
          <AccordionItem variant="card3">
            <AccordionTitle>Bold accent styling</AccordionTitle>
            <AccordionContent>
              <p>Accent-colored border with sharp corners for emphasis.</p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Variant 4</h4>
        <Accordion>
          <AccordionItem variant="card4">
            <AccordionTitle>Rounded card styling</AccordionTitle>
            <AccordionContent>
              <p>
                Larger border radius with background fill for a card-like
                appearance.
              </p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </SBContainer>
    </SBContainer>
  ),
};

export const Spacing: Story = {
  name: 'Gap Spacing',
  render: () => (
    <SBContainer flex gap="extralarge" width="800px">
      <SBContainer addBackground>
        <h4>Compact Spacing (8px)</h4>
        <Accordion gap="8px">
          <AccordionItem>
            <AccordionTitle>First item</AccordionTitle>
            <AccordionContent>
              <p>Tightly spaced content.</p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem>
            <AccordionTitle>Second item</AccordionTitle>
            <AccordionContent>
              <p>Minimal gap between items.</p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem>
            <AccordionTitle>Third item</AccordionTitle>
            <AccordionContent>
              <p>Works well for dense content.</p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Default Spacing (24px)</h4>
        <Accordion gap="24px">
          <AccordionItem>
            <AccordionTitle>First item</AccordionTitle>
            <AccordionContent>
              <p>Standard comfortable spacing.</p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem>
            <AccordionTitle>Second item</AccordionTitle>
            <AccordionContent>
              <p>Good for most use cases.</p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem>
            <AccordionTitle>Third item</AccordionTitle>
            <AccordionContent>
              <p>Easy to scan and read.</p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Generous Spacing (48px)</h4>
        <Accordion gap="48px">
          <AccordionItem>
            <AccordionTitle>First item</AccordionTitle>
            <AccordionContent>
              <p>Lots of breathing room.</p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem>
            <AccordionTitle>Second item</AccordionTitle>
            <AccordionContent>
              <p>Creates visual separation between sections.</p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem>
            <AccordionTitle>Third item</AccordionTitle>
            <AccordionContent>
              <p>Great for featured content.</p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </SBContainer>
    </SBContainer>
  ),
};

export const DynamicRendering: Story = {
  name: 'Dynamic Rendering (Real-World Pattern)',
  render: () => {
    const faqs = [
      {
        question: 'What payment methods do you accept?',
        answer:
          'We accept all major credit cards, PayPal, and bank transfers for annual plans.',
      },
      {
        question: 'Can I cancel my subscription anytime?',
        answer:
          'Yes, you can cancel your subscription at any time. Your access will continue until the end of your billing period.',
      },
      {
        question: 'Do you offer refunds?',
        answer:
          'We offer a 30-day money-back guarantee for all new subscriptions.',
      },
      {
        question: 'How do I upgrade my plan?',
        answer:
          'You can upgrade your plan at any time from your account settings. The price difference will be prorated.',
      },
    ];

    return (
      <SBContainer flex width="800px">
        <SBContainer addBackground>
          <h4>FAQ Section (Mapped from Array)</h4>
          <Accordion>
            {faqs.map(({ question, answer }, index) => (
              <AccordionItem key={index}>
                <AccordionTitle icon="plus">{question}</AccordionTitle>
                <AccordionContent>
                  <p>{answer}</p>
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </SBContainer>
      </SBContainer>
    );
  },
};

export const NestedContent: Story = {
  name: 'Rich Nested Content',
  render: () => (
    <SBContainer flex width="800px">
      <SBContainer addBackground>
        <h4>Accordion with Rich Content</h4>
        <Accordion>
          <AccordionItem>
            <AccordionTitle>Getting Started Guide</AccordionTitle>
            <AccordionContent>
              <p>
                Welcome to HubSpot! Here are the steps to get started with your
                account:
              </p>
              <ol>
                <li>Complete your profile setup</li>
                <li>Connect your email and calendar</li>
                <li>Import your existing contacts</li>
                <li>Set up your first campaign</li>
              </ol>
              <p>
                <strong>Pro tip:</strong> Start with our interactive tutorials
                for the best onboarding experience.
              </p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem>
            <AccordionTitle>System Requirements</AccordionTitle>
            <AccordionContent>
              <p>HubSpot works best with the following browsers:</p>
              <ul>
                <li>Google Chrome (latest version)</li>
                <li>Mozilla Firefox (latest version)</li>
                <li>Safari (latest version)</li>
                <li>Microsoft Edge (latest version)</li>
              </ul>
              <p>
                <em>Note: Internet Explorer is not supported.</em>
              </p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem>
            <AccordionTitle>Contact Support</AccordionTitle>
            <AccordionContent>
              <p>Need help? Our support team is available 24/7.</p>
              <p>
                <strong>Email:</strong> support@hubspot.com
                <br />
                <strong>Phone:</strong> 1-888-HUBSPOT
                <br />
                <strong>Chat:</strong> Available in your HubSpot account
              </p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </SBContainer>
    </SBContainer>
  ),
};

export const EdgeCases: Story = {
  name: 'Edge Cases',
  render: () => (
    <SBContainer flex gap="extralarge" width="800px">
      <SBContainer addBackground>
        <h4>Long Title Text</h4>
        <Accordion>
          <AccordionItem>
            <AccordionTitle>
              This is an extremely long accordion title that demonstrates how
              the component handles overflow and text wrapping when the title
              content becomes too lengthy to fit on a single line
            </AccordionTitle>
            <AccordionContent>
              <p>
                The title should wrap gracefully while keeping the icon aligned.
              </p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Long Content Text</h4>
        <Accordion>
          <AccordionItem>
            <AccordionTitle>Click to see long content</AccordionTitle>
            <AccordionContent>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
                Curabitur pretium tincidunt lacus. Nulla gravida orci a odio.
                Nullam varius, turpis et commodo pharetra, est eros bibendum
                elit, nec luctus magna felis sollicitudin mauris.
              </p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Empty Content</h4>
        <Accordion>
          <AccordionItem>
            <AccordionTitle>This item has no content</AccordionTitle>
            <AccordionContent />
          </AccordionItem>
        </Accordion>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Single Item</h4>
        <Accordion>
          <AccordionItem>
            <AccordionTitle>Only one accordion item</AccordionTitle>
            <AccordionContent>
              <p>Sometimes you only need a single collapsible section.</p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Special Characters</h4>
        <Accordion>
          <AccordionItem>
            <AccordionTitle icon="plus">
              Special chars: !@#$%^&*()_+-=[]{}|;
            </AccordionTitle>
            <AccordionContent>
              <p>
                Content with special characters: &lt;html&gt; &amp; "quotes" and
                'apostrophes'
              </p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Many Items</h4>
        <Accordion>
          {Array.from({ length: 5 }, (_, i) => {
            const count = i + 1;

            return (
              <AccordionItem key={i}>
                <AccordionTitle>Item {count}</AccordionTitle>
                <AccordionContent>
                  <p>Content for item {count}</p>
                </AccordionContent>
              </AccordionItem>
            );
          })}
        </Accordion>
      </SBContainer>
    </SBContainer>
  ),
};

export const InteractionStates: Story = {
  name: 'Interaction States',
  render: () => (
    <SBContainer flex direction="column" gap="large" width="800px">
      <SBContainer addBackground>
        <h4>Keyboard Navigation</h4>
        <p>
          <strong>Try:</strong> Press Tab to focus on accordion titles, then
          press Enter or Space to expand/collapse them
        </p>
        <Accordion>
          <AccordionItem>
            <AccordionTitle>First accordion item</AccordionTitle>
            <AccordionContent>
              <p>
                Accordion titles (summary elements) are natively keyboard
                accessible. Tab to focus, Enter/Space to toggle.
              </p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem>
            <AccordionTitle>Second accordion item</AccordionTitle>
            <AccordionContent>
              <p>
                Focus rings appear automatically when navigating with the
                keyboard, providing clear visual feedback.
              </p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem>
            <AccordionTitle>Third accordion item</AccordionTitle>
            <AccordionContent>
              <p>
                This demonstrates how users can navigate through all accordion
                items using only the keyboard.
              </p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Focus State</h4>
        <p>
          In production, this focus outline appears when navigating with the
          keyboard (Tab key). This Storybook demo auto-applies the focus state
          to show how it looks.
        </p>
        <SBFocusWrapper>
          <Accordion>
            <AccordionItem>
              <AccordionTitle>Focused accordion item</AccordionTitle>
              <AccordionContent>
                <p>
                  This accordion title automatically receives focus to
                  demonstrate the focus ring appearance.
                </p>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </SBFocusWrapper>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Hover State</h4>
        <p>Hover over accordion titles to see the hover effect</p>
        <Accordion>
          <AccordionItem>
            <AccordionTitle>Hover over this title</AccordionTitle>
            <AccordionContent>
              <p>The title shows a subtle background change on hover.</p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </SBContainer>
    </SBContainer>
  ),
};
