import { useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import { APP_NAME, APP_TAGLINE } from '../app/branding'
import { ROUTE_PATHS } from '../app/route-paths'
import { IntroActions } from '../features/intro/IntroActions'
import { useCameraGate } from '../features/intro/useCameraGate'
import { useHardwareAccelerationWarning } from '../features/intro/useHardwareAccelerationWarning'
import { playSound, SFX_BUTTON_DEFAULT } from '../lib/sounds'
import styles from './IntroPage.module.css'

export function IntroPage() {
  const navigate = useNavigate()
  const { videoRef, cameraReady, cameraDenied, enableCamera } = useCameraGate()
  const { noHwAccel, dismissNoHwAccel } = useHardwareAccelerationWarning()

  const handleEnableCamera = useCallback(() => {
    playSound(SFX_BUTTON_DEFAULT)
    enableCamera()
  }, [enableCamera])

  const goFullscreen = () => {
    document.documentElement.requestFullscreen().catch(() => {})
    navigate(ROUTE_PATHS.home)
  }

  const goWindowed = () => {
    navigate(ROUTE_PATHS.home)
  }

  return (
    <div className={styles.root}>
      {/* hidden video element to hold the stream */}
      <video ref={videoRef} autoPlay playsInline muted hidden />
      <div className={styles.inner}>
        <div className={styles.header}>
          <h1 className={`${styles.title} font-display`}>{APP_NAME}</h1>
          <p className={`${styles.description} font-body`}>{APP_TAGLINE}</p>
        </div>

        <IntroActions
          cameraReady={cameraReady}
          cameraDenied={cameraDenied}
          noHwAccel={noHwAccel}
          onEnableCamera={handleEnableCamera}
          onDismissNoHwAccel={dismissNoHwAccel}
          onStartFullscreen={() => {
            playSound(SFX_BUTTON_DEFAULT)
            goFullscreen()
          }}
          onStartWindowed={() => {
            playSound(SFX_BUTTON_DEFAULT)
            goWindowed()
          }}
        />
      </div>
    </div>
  )
}
