import React from 'react'

import styles from './_errorPage.module.scss'
import Icon from '../Icons/Icon'
import { c } from '../../translations/LibraryTranslationService'

interface ErrorPageProps {
  /**
   * Company or application logo to display at the top of the error page.
   * Typically an SVG or image element with appropriate branding.
   */
  logo: React.ReactNode
  /**
   * Optional icon to display above the error title.
   * Defaults to a warning/error icon if not provided.
   */
  icon?: React.ReactNode
  /**
   * Optional title text for the error page.
   * Defaults to a translated error title if not provided.
   */
  title?: string
  /**
   * Optional main error message describing what went wrong.
   * Defaults to a translated generic error message if not provided.
   */
  message?: string
  /**
   * Required support message with contact information for users to get help.
   * Often includes email addresses, phone numbers, or links to support resources.
   * Use ErrorPage.EmailLink for consistent email styling.
   */
  supportMessage: React.ReactNode
  /**
   * Optional thank you message displayed after support information.
   * Defaults to a translated thank you message if not provided.
   */
  thankYouMessage?: string
  /**
   * Optional copyright year for the footer.
   * Defaults to the current year if not provided.
   */
  copyrightYear?: number
  /**
   * Optional copyright holder name for the footer.
   * Defaults to a translated company name if not provided.
   */
  copyrightName?: string
  /**
   * Optional test identifier for QA testing and automation.
   * Applied as 'qa-test-id' attribute to the root container.
   */
  qaTestId?: string
}

/**
 * Default error icon component that displays a warning/error icon
 */
const ErrorIcon: React.FC = () => <Icon icon='errorWarning' />

/**
 * Pre-styled email link component for support contact information.
 * Automatically creates a mailto link with consistent styling.
 */
const EmailLink: React.FC<{ email: string }> = ({ email }) => (
  <a href={`mailto:${email}`} className={styles.supportLink}>
    {email}
  </a>
)

/**
 * ErrorPage is a full-screen error page component designed for displaying
 * application-level errors, 500 errors, or other critical failures that
 * require user attention and support contact information.
 *
 * The component provides a consistent layout with:
 * - Company/app logo at the top
 * - Prominent error icon and messaging in the center
 * - Support contact information
 * - Copyright footer at the bottom
 *
 * The ErrorPage also exposes an EmailLink sub-component for consistent
 * email styling within support messages.
 *
 * @param props - Configuration options for the error page
 * @returns A React JSX element containing the complete error page layout
 */
const ErrorPage: React.FC<ErrorPageProps> & { EmailLink: typeof EmailLink } = ({
  logo,
  icon = <ErrorIcon />,
  title = c('erroTitle'),
  message = c('errorMessage'),
  supportMessage,
  thankYouMessage = c('errorThankYou'),
  copyrightYear = new Date().getFullYear(),
  copyrightName = c('pattern'),
  qaTestId = 'error-page',
}) => {
  return (
    <div className={styles.errorPage} qa-test-id={qaTestId}>
      <div className={styles.logo}>{logo}</div>
      <div className={styles.content}>
        <div className={styles.icon}>{icon}</div>
        <h1 className={styles.title}>{title}</h1>
        <p className={styles.message}>{message}</p>
        <p className={styles.message}>{supportMessage}</p>
        <p className={styles.message}>{thankYouMessage}</p>
      </div>
      <div className={styles.footer}>
        <p className={styles.copyright}>
          © {copyrightYear}, {copyrightName}
        </p>
      </div>
    </div>
  )
}

ErrorPage.EmailLink = EmailLink

export default ErrorPage