'use client'

import * as React from 'react'
import { buttonVariants } from '../Button'
import { Typography } from '../Typography'
import { Cube } from './Cube'
import { Glitched404Text } from './Glitched404Text'
import { handleMousemove } from './utils'

export interface PageNotFoundProps {
  /** Optional replacement for the default "Return home" link. */
  customLink?: React.ReactNode
}

/**
 * Full 404 screen with Chainlink-styled animated artwork and a default
 * secondary "Return home" action.
 */
export const PageNotFound = ({ customLink }: PageNotFoundProps) => {
  React.useEffect(() => {
    if (typeof window !== 'undefined') {
      window.document.title = `Page not found | Chainlink`
      window.document.body.addEventListener('mousemove', handleMousemove)
      return () =>
        window.document.body.removeEventListener('mousemove', handleMousemove)
    }
    return undefined
  }, [])

  React.useEffect(() => {
    if (typeof window !== 'undefined') {
      window.scrollTo(0, 0)
    }
  }, [])

  return (
    <section className="relative flex min-h-[700px] flex-col items-center justify-center gap-16 pt-16">
      <div className="flex flex-col gap-10">
        <Cube />
        <Glitched404Text />
      </div>

      <div className="text-center">
        <Typography variant="h1" className="text-center">
          Page not found
        </Typography>
        <Typography variant="body" className="mt-10 text-center">
          We can’t seem to find the page you’re looking for.
        </Typography>
      </div>

      {customLink ? (
        customLink
      ) : (
        <a href="/" className={buttonVariants({ variant: 'secondary' })}>
          Return home
        </a>
      )}
    </section>
  )
}