import type { Meta, StoryObj } from '@storybook/react';
import Link from '../index.js';
import { LinkProps } from '../types.js';
import { withLinkStyles } from './LinkDecorator.js';
import { SBContainer, SBFocusWrapper } from '@sb-utils';
import { SBCard } from '@sb-utils/SBCard.js';

const meta: Meta<LinkProps> = {
  title: 'Component Library/Link',
  component: Link,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: `The Link component provides a simple wrapper for making content clickable. Use it for wrapping icons, images, or text with links without button-like styling.`,
      },
    },
  },
  decorators: [withLinkStyles],
};

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

export const Default: Story = {
  args: {
    children: 'Visit HubSpot',
    href: 'https://www.hubspot.com',
    target: '_blank',
    rel: 'noopener noreferrer',
    className: 'test-class',
  },
};

export const WithLinkField: Story = {
  name: 'With Link Field',
  args: {
    children: 'Using linkField prop',
    linkField: {
      url: {
        href: 'https://www.hubspot.com',
      },
      open_in_new_tab: true,
      no_follow: false,
    },
  },
  parameters: {
    docs: {
      description: {
        story: `Demonstrates using the \`linkField\` prop pattern, which is useful when passing CMS field data directly to the component.

\`\`\`tsx
<Link linkField={{
  url: { href: 'https://example.com' },
  open_in_new_tab: true,
  no_follow: false
}}>
  Link Text
</Link>
\`\`\``,
      },
    },
  },
};

const menuItems = [
  { label: 'Home', href: '/home' },
  { label: 'Products', href: '/products' },
  { label: 'Services', href: '/services' },
  { label: 'About Us', href: '/about' },
  { label: 'Contact', href: '/contact' },
];

export const InContext: Story = {
  name: 'In Context',
  render: () => (
    <SBContainer flex direction="column" gap="large" maxWidth="800px">
      <SBContainer addBackground>
        <h4>Wrapping Cards</h4>
        <SBContainer
          flex
          direction="row"
          gap="medium"
          style={{ flexWrap: 'wrap' }}
        >
          <Link href="https://www.hubspot.com">
            <SBCard
              title="Clickable Card"
              description="The entire card is wrapped in a link, making it clickable."
            />
          </Link>
        </SBContainer>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Navigation Menu</h4>
        <nav
          style={{
            display: 'flex',
            flexDirection: 'row',
            gap: '16px',
            padding: '16px',
            backgroundColor: 'white',
            borderRadius: '8px',
          }}
        >
          {menuItems.map(({ href, label }) => (
            <Link
              key={href}
              href={href}
              style={{
                padding: '8px 12px',
                borderRadius: '4px',
                transition: 'background-color 0.2s',
              }}
            >
              {label}
            </Link>
          ))}
        </nav>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Image Gallery</h4>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: '12px',
            maxWidth: '500px',
          }}
        >
          {Array.from({ length: 8 }, (_, i) => {
            const key = i + 1;
            return (
              <Link
                key={key}
                href={`/image/${key}`}
              >
                <div
                  style={{
                    aspectRatio: '1',
                    backgroundColor: '#f5f8fa',
                    borderRadius: '4px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    color: '#7c98b6',
                    fontSize: '12px',
                    border: '1px solid #cbd6e2',
                    transition: 'opacity 0.2s',
                  }}
                  onMouseOver={e => (e.currentTarget.style.opacity = '0.7')}
                  onMouseOut={e => (e.currentTarget.style.opacity = '1')}
                >
                  {key}
                </div>
              </Link>
            );
          })}
        </div>
      </SBContainer>
    </SBContainer>
  ),
};

export const InteractionStates: Story = {
  name: 'Interaction States',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Hover State</h4>
        <p>Hover over the link to see the hover effect</p>
        <Link href="https://www.hubspot.com">
          Hover me
        </Link>
      </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>
          <Link href="https://www.hubspot.com">
            Focused link
          </Link>
        </SBFocusWrapper>
      </SBContainer>
    </SBContainer>
  ),
};
