import { SupportCategories } from '@supabase/shared-types/out/constants'
import { SupportLink } from 'components/interfaces/Support/SupportLink'
import { PropsWithChildren } from 'react'

import {
  AlertDescription_Shadcn_,
  AlertTitle_Shadcn_,
  Alert_Shadcn_,
  Button,
  WarningIcon,
} from 'ui'

export interface AlertErrorProps {
  projectRef?: string
  subject?: string
  error?: { message: string } | null
  className?: string
  showIcon?: boolean
  additionalActions?: React.ReactNode
}

// [Joshen] To standardize the language for all error UIs

export const AlertError = ({
  projectRef,
  subject,
  error,
  className,
  showIcon = true,
  children,
  additionalActions,
}: PropsWithChildren<AlertErrorProps>) => {
  const formattedErrorMessage = error?.message?.includes('503')
    ? '503 Service Temporarily Unavailable'
    : error?.message

  return (
    <Alert_Shadcn_ className={className} variant="warning" title={subject}>
      {showIcon && <WarningIcon className="h-4 w-4" strokeWidth={2} />}
      <AlertTitle_Shadcn_ className="text-foreground">{subject}</AlertTitle_Shadcn_>
      <AlertDescription_Shadcn_ className="flex flex-col gap-3 break-words">
        <div>
          {error?.message && <p className="text-left">Error: {formattedErrorMessage}</p>}
          <p className="text-left">
            Try refreshing your browser, but if the issue persists for more than a few minutes,
            please reach out to us via support.
          </p>
        </div>
        {children}
        <div className="flex gap-2">
          {additionalActions}
          <Button asChild type="warning" className="w-min">
            <SupportLink
              queryParams={{
                category: SupportCategories.DASHBOARD_BUG,
                projectRef,
                subject,
                error: error?.message,
              }}
            >
              Contact support
            </SupportLink>
          </Button>
        </div>
      </AlertDescription_Shadcn_>
    </Alert_Shadcn_>
  )
}

export default AlertError