import type { Meta, StoryObj } from '@storybook/react';
import Logo from '../index.js';
import { LogoProps } from '../types.js';
import { withLogoStyles } from './LogoDecorator.js';
import { SBContainer, SBFocusWrapper } from '@sb-utils';

const meta: Meta<LogoProps> = {
  title: 'Component Library/Logo',
  component: Logo,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: `The Logo component displays a brand logo with configurable sizing. It automatically wraps the logo in a link if provided in the brand settings, and supports both real brand logos and dummy logo data for development.`,
      },
    },
  },
  decorators: [withLogoStyles],
};

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

export const Default: Story = {
  args: {
    useDummyLogo: true,
    loading: 'eager',
  },
};

export const SizeVariations: Story = {
  name: 'Size Variations',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>No Max Constraints</h4>
        <p>Logo uses its natural dimensions</p>
        <Logo useDummyLogo />
      </SBContainer>

      <SBContainer addBackground>
        <h4>Max Width Only (120px)</h4>
        <p>Width is constrained, height scales proportionally</p>
        <Logo useDummyLogo maxWidth="120px" />
      </SBContainer>

      <SBContainer addBackground>
        <h4>Max Height Only (60px)</h4>
        <p>Height is constrained, width scales proportionally</p>
        <Logo useDummyLogo maxHeight="60px" />
      </SBContainer>

      <SBContainer addBackground>
        <h4>Max Width (150px) and Max Height (50px)</h4>
        <p>Both dimensions are constrained, logo fits within bounds</p>
        <Logo useDummyLogo maxWidth="150px" maxHeight="50px" />
      </SBContainer>
    </SBContainer>
  ),
};

export const CompanyNameFallback: Story = {
  name: 'Company Name Fallback',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>No Logo — Company Name Displayed</h4>
        <p>When no brand logo src is available, the company name is shown</p>
        <Logo companyName="Acme Corporation" />
      </SBContainer>

      <SBContainer addBackground>
        <h4>With Logo Present</h4>
        <p>
          When a logo src is available, the logo image is shown (companyName is
          ignored)
        </p>
        <Logo useDummyLogo companyName="Acme Corporation" />
      </SBContainer>
    </SBContainer>
  ),
};

export const InteractionStates: Story = {
  name: 'Interaction States',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>With Link (Clickable)</h4>
        <p>The logo is wrapped in a link and shows hover/focus states</p>
        <p>
          <strong>Try:</strong> Hover over and tab to focus
        </p>
        <Logo useDummyLogo />
      </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>
          <Logo useDummyLogo />
        </SBFocusWrapper>
      </SBContainer>
    </SBContainer>
  ),
};
