import { type Meta, type StoryObj } from '@storybook/react-vite'

import ErrorPage from './ErrorPage'
import { DocsTemplate } from '../../../.storybook'

const meta: Meta<typeof ErrorPage> = {
  title: 'Components/ErrorPage',
  component: ErrorPage,
  parameters: {
    layout: 'fullscreen',
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>ErrorPage</code> component provides a professional,
              full-screen error page layout for critical application failures,
              server errors, and other scenarios requiring user attention and
              support contact information. It creates a consistent, branded
              experience that helps maintain user trust during error situations.
              <br />
              <br />
              The component is designed to be highly customizable while
              maintaining a consistent structure that includes company branding,
              clear error messaging, support contact information, and copyright
              details. It's particularly useful for 500 errors, application
              crashes, or maintenance pages.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              <strong>Professional Layout:</strong> Full-screen design with
              structured sections for logo, error content, support information,
              and footer copyright.
            </span>,
            <span key='second-bullet'>
              <strong>Branded Experience:</strong> Prominently displays company
              logo to maintain brand consistency during error scenarios.
            </span>,
            <span key='third-bullet'>
              <strong>Support Integration:</strong> Built-in EmailLink
              sub-component for consistent support contact styling and easy
              mailto functionality.
            </span>,
            <span key='fourth-bullet'>
              <strong>Internationalization Ready:</strong> Uses translation
              service for default text content, supporting multiple languages
              and localization.
            </span>,
            <span key='fifth-bullet'>
              <strong>Flexible Messaging:</strong> Customizable title, message,
              and support text to handle various error types and severity
              levels.
            </span>,
            <span key='sixth-bullet'>
              <strong>Accessibility Focused:</strong> Proper heading structure
              and semantic HTML for screen readers and assistive technologies.
            </span>,
          ]}
        />
      ),
    },
  },
  argTypes: {
    logo: {
      description: 'Company or application logo element',
      control: false,
    },
    icon: {
      description: 'Optional custom error icon (defaults to warning icon)',
      control: false,
    },
    title: {
      description: 'Error page title text',
      control: 'text',
    },
    message: {
      description: 'Main error description message',
      control: 'text',
    },
    supportMessage: {
      description: 'Support contact information (use ErrorPage.EmailLink)',
      control: false,
    },
    thankYouMessage: {
      description: 'Thank you message after support info',
      control: 'text',
    },
    copyrightYear: {
      description: 'Copyright year (defaults to current year)',
      control: { type: 'number', min: 2020, max: 2030 },
    },
    copyrightName: {
      description: 'Copyright holder name',
      control: 'text',
    },
    qaTestId: {
      description: 'Test identifier for QA automation',
      control: 'text',
    },
  },
}

export default meta
type Story = StoryObj<typeof ErrorPage>

const SampleLogo = (
  <img
    src='https://images.pattern.com/pattern_exp_logos/pxm.svg'
    alt='Pattern Logo'
    style={{ width: '200px' }}
  />
)

export const Default: Story = {
  args: {
    logo: SampleLogo,
    title: 'Oops! Our server is currently down.',
    message:
      'We apologize for the inconvenience and are working to resolve this issue.',
    supportMessage: (
      <>
        Please try again later or contact{' '}
        <ErrorPage.EmailLink email='support@pattern.com' /> if the problem
        persists.
      </>
    ),
  },
}