import type { Meta, StoryObj } from '@storybook/react';
import Card from '../index.js';
import { CardProps } from '../types.js';
import { withCardStyles } from './CardDecorator.js';
import { SBContainer, SBFocusWrapper } from '@sb-utils';

const CardDivider = () => (
  <hr
    style={{
      width: '100%',
      margin: '16px 0',
      border: 'none',
      borderTop: '1px solid #e0e0e0',
    }}
  />
);

const CardHeading = ({ children }: { children: React.ReactNode }) => (
  <h3 style={{ margin: 0 }}>{children}</h3>
);

const CardContent = ({ children }: { children: React.ReactNode }) => (
  <p style={{ margin: 0 }}>{children}</p>
);

const meta: Meta<CardProps> = {
  title: 'Component Library/Card',
  component: Card,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'The Card component provides a flexible container with optional title and content areas. It supports different variants and customizable border radius.',
      },
    },
  },
  decorators: [withCardStyles],
};

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

export const Default: Story = {
  args: {
    variant: 'card1',
  },
  render: args => (
    <Card {...args}>
      <CardHeading>Card Title</CardHeading>
      <CardDivider />
      <CardContent>This is the card content area.</CardContent>
    </Card>
  ),
};

export const Variants: Story = {
  name: 'Card Variants',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Card Style 1 (Light)</h4>
        <Card variant="card1">
          <CardHeading>Card Style 1</CardHeading>
          <CardDivider />
          <CardContent>Light background with dark text.</CardContent>
        </Card>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Card Style 2 (Subtle)</h4>
        <Card variant="card2">
          <CardHeading>Card Style 2</CardHeading>
          <CardDivider />
          <CardContent>Subtle background with dark text.</CardContent>
        </Card>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Card Style 3 (Dark)</h4>
        <Card variant="card3">
          <CardHeading>Card Style 3</CardHeading>
          <CardDivider />
          <CardContent>Dark background with light text.</CardContent>
        </Card>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Card Style 4 (Darker)</h4>
        <Card variant="card4">
          <CardHeading>Card Style 4</CardHeading>
          <CardDivider />
          <CardContent>Darker background with light text.</CardContent>
        </Card>
      </SBContainer>
    </SBContainer>
  ),
};

export const DynamicRendering: Story = {
  name: 'Dynamic Rendering (Real-World Pattern)',
  render: () => {
    const cards = [
      {
        title: 'Feature One',
        content:
          'Powerful analytics to track your performance and make data-driven decisions.',
      },
      {
        title: 'Feature Two',
        content: 'Seamless integration with your existing tools and workflows.',
      },
      {
        title: 'Feature Three',
        content: 'World-class support team available 24/7 to help you succeed.',
      },
    ];

    return (
      <SBContainer flex direction="column" gap="large">
        <SBContainer addBackground>
          <h4>Cards Mapped from Array</h4>
          <div
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
              gap: '16px',
            }}
          >
            {cards.map(card => (
              <div key={card.title}>
                <Card>
                  <CardHeading>{card.title}</CardHeading>
                  <CardDivider />
                  <CardContent>{card.content}</CardContent>
                </Card>
              </div>
            ))}
          </div>
        </SBContainer>
      </SBContainer>
    );
  },
};

export const ComplexContent: Story = {
  name: 'Complex Content',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Card with Rich Content</h4>
        <Card>
          <CardHeading>Product Launch Announcement</CardHeading>
          <CardDivider />
          <div style={{ margin: 0 }}>
            <p>
              We are excited to announce the launch of our new product line.
              This release includes:
            </p>
            <ul>
              <li>Advanced analytics dashboard</li>
              <li>Real-time collaboration features</li>
              <li>Enhanced security protocols</li>
            </ul>
            <p>
              <strong>Available now</strong> for all premium subscribers.
            </p>
          </div>
        </Card>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Card with Multiple Elements</h4>
        <Card>
          <CardHeading>Multi-Section Card</CardHeading>
          <CardDivider />
          <div style={{ margin: 0 }}>
            <p>Introduction paragraph with context.</p>
            <h5>Benefits</h5>
            <ul>
              <li>Benefit one</li>
              <li>Benefit two</li>
            </ul>
            <button style={{ marginTop: '12px' }}>Learn More</button>
          </div>
        </Card>
      </SBContainer>
    </SBContainer>
  ),
};

export const EdgeCases: Story = {
  name: 'Edge Cases',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Long Text Content</h4>
        <Card>
          <CardHeading>
            This is a very long title that demonstrates how the card handles
            overflow and wrapping of text content across multiple lines
          </CardHeading>
          <CardDivider />
          <CardContent>
            This is a very long content section that demonstrates how the card
            handles overflow and wrapping of content across multiple lines when
            the text becomes too long to fit on a single line. The card should
            maintain proper spacing and alignment even when the content spans
            multiple lines in the card element. Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua.
          </CardContent>
        </Card>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Empty Card (no children)</h4>
        <Card />
      </SBContainer>
    </SBContainer>
  ),
};

export const InteractionStates: Story = {
  name: 'Interaction States (Wrapped in Link)',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Clickable Card</h4>
        <p>
          Card wrapped in a link becomes clickable and shows hover/focus states
        </p>
        <a href="https://www.hubspot.com" style={{ textDecoration: 'none' }}>
          <Card>
            <CardHeading>Clickable Feature Card</CardHeading>
            <CardDivider />
            <CardContent>
              This entire card is wrapped in a link. Click anywhere on the card
              to navigate.
            </CardContent>
          </Card>
        </a>
      </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>
          <a href="https://www.hubspot.com" style={{ textDecoration: 'none' }}>
            <Card>
              <CardHeading>Focused Card</CardHeading>
              <CardDivider />
              <CardContent>
                This card shows the focus outline when navigating with the
                keyboard.
              </CardContent>
            </Card>
          </a>
        </SBFocusWrapper>
      </SBContainer>
    </SBContainer>
  ),
};
