import type { Meta, StoryObj } from '@storybook/react';
import Image from '../index.js';
import { withImageStyles } from './ImageDecorator.js';
import { SBContainer, SBFocusWrapper } from '@sb-utils';
import placeholderImage from './assets/cat-smile.jpg';

const meta: Meta<typeof Image> = {
  title: 'Component Library/Image',
  component: Image,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'The Image component displays images with support for responsive behavior, lazy loading, and accessibility features.',
      },
    },
  },
  decorators: [withImageStyles],
};

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

export const Default: Story = {
  args: {
    src: placeholderImage,
    alt: 'A placeholder image demonstrating default Image component behavior',
    width: 600,
    height: 400,
    loading: 'lazy',
    responsive: true,
  },
};

export const ResponsiveBehavior: Story = {
  name: 'Responsive Behavior',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Responsive (Default)</h4>
        <p>
          Image scales down to fit container width while maintaining aspect
          ratio
        </p>
        <SBContainer maxWidth="300px" style={{ border: '2px dashed #ccc' }}>
          <Image
            src={placeholderImage}
            alt="Responsive image"
            width={800}
            height={600}
            responsive={true}
          />
        </SBContainer>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Non-Responsive</h4>
        <p>
          Image maintains its exact 800x600 dimensions, overflowing the 300px
          container
        </p>
        <SBContainer
          maxWidth="300px"
          style={{ border: '2px dashed #ccc', overflow: 'auto' }}
        >
          <Image
            src={placeholderImage}
            alt="Non-responsive image at full 800x600 size"
            width={800}
            height={600}
            responsive={false}
            style={{ width: '800px', height: '600px' }}
          />
        </SBContainer>
        <p style={{ marginTop: '8px', fontSize: '14px', color: '#666' }}>
          Scroll horizontally to see the full 800px width
        </p>
      </SBContainer>
    </SBContainer>
  ),
};

export const AccessibilityAltText: Story = {
  name: 'Accessibility',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>With Title Attribute</h4>
        <p>Title provides additional context on hover</p>
        <Image
          src={placeholderImage}
          alt="Sample image with tooltip"
          title="Hover over me to see the title tooltip"
          width={400}
          height={300}
          responsive={true}
        />
        <p style={{ marginTop: '8px', fontSize: '14px', color: '#666' }}>
          Hover over the image to see the title tooltip
        </p>
      </SBContainer>
    </SBContainer>
  ),
};

export const EdgeCases: Story = {
  name: 'Edge Cases',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Missing Image (404)</h4>
        <p>Browser will display broken image icon with alt text</p>
        <Image
          src="fake-doesn't-exist.jpg"
          alt="This image failed to load - alt text is displayed"
          width={400}
          height={300}
          responsive={true}
        />
      </SBContainer>
    </SBContainer>
  ),
};

export const WithCustomStyling: Story = {
  name: 'Custom Styling',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Rounded Corners</h4>
        <Image
          src={placeholderImage}
          alt="Image with rounded corners"
          width={400}
          height={300}
          responsive={true}
          style={{ borderRadius: '16px' }}
        />
      </SBContainer>

      <SBContainer addBackground>
        <h4>With Border</h4>
        <Image
          src={placeholderImage}
          alt="Image with border"
          width={400}
          height={300}
          responsive={true}
          style={{ border: '4px solid #3498db', borderRadius: '8px' }}
        />
      </SBContainer>

      <SBContainer addBackground>
        <h4>With Shadow</h4>
        <Image
          src={placeholderImage}
          alt="Image with drop shadow"
          width={400}
          height={300}
          responsive={true}
          style={{
            boxShadow: '0 10px 30px rgba(0,0,0,0.3)',
            borderRadius: '8px',
          }}
        />
      </SBContainer>
    </SBContainer>
  ),
};

export const InteractionStates: Story = {
  name: 'Interaction States (Wrapped in Link)',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Clickable Image</h4>
        <p>Image wrapped in a link becomes clickable and shows hover effects</p>
        <a href="https://www.hubspot.com" style={{ textDecoration: 'none' }}>
          <Image
            src={placeholderImage}
            alt="Clickable image"
            width={400}
            height={300}
            responsive={true}
            style={{ borderRadius: '8px' }}
          />
        </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' }}>
            <Image
              src={placeholderImage}
              alt="Focused image wrapped in link"
              width={400}
              height={300}
              responsive={true}
              style={{ borderRadius: '8px' }}
            />
          </a>
        </SBFocusWrapper>
      </SBContainer>
    </SBContainer>
  ),
};
