import { useState } from 'react'
import ScaleWrapper from './components/layout/ScaleWrapper'
import Intro from './components/screens/Intro'
import Cover from './components/screens/Cover'
import Game from './components/screens/Game'
import Result from './components/screens/Result'
import { consumirIntento, intentosAgotados } from './hooks/useIntentos'
import { setScore, setLessonStatus, finishSCORM } from './scorm/scorm'
import { useSCORM } from './hooks/useSCORM'

type Screen = 'intro' | 'cover' | 'game' | 'result'

interface ResultState {
  aprobado: boolean
  sinIntentos: boolean
}

export default function App() {
  useSCORM()
  const [screen, setScreen] = useState<Screen>(() =>
    intentosAgotados() ? 'result' : 'intro'
  )
  const [resultState, setResultState] = useState<ResultState>({
    aprobado: false,
    sinIntentos: intentosAgotados(),
  })

  function handleIntroContinue() {
    setScreen('cover')
  }

  function handleStart() {
    consumirIntento()
    setScreen('game')
  }

  function handleGameEnd(aprobado: boolean, correctas: number) {
    setScore(Math.round((correctas / 12) * 100), 100, 0)
    setLessonStatus(aprobado ? 'passed' : 'failed')
    finishSCORM()
    setResultState({ aprobado, sinIntentos: intentosAgotados() })
    setScreen('result')
  }

  function handleReintentar() {
    setScreen('cover')
  }

  return (
    <>
      {screen === 'intro' && (
        <ScaleWrapper
          backgroundImage="./img/fondo1.jpg"
          barProps={{
            preguntaActual: 1,
            totalPreguntas: 4,
            mensaje: 'Da clic en la flecha para continuar',
            puedeAnterior: false,
            puedeSiguiente: true,
            onNext: handleIntroContinue,
          }}
        >
          <Intro />
        </ScaleWrapper>
      )}
      {screen === 'cover' && (
        <ScaleWrapper
          backgroundImage="./img/fondo2.jpg"
          barProps={{
            preguntaActual: 2,
            totalPreguntas: 4,
            mensaje: 'Presiona Comenzar para iniciar',
            puedeAnterior: true,
            onPrev: () => setScreen('intro'),
            puedeSiguiente: true,
            onNext: handleStart,
          }}
        >
          <Cover onStart={handleStart} />
        </ScaleWrapper>
      )}
      {screen === 'game' && (
        <ScaleWrapper
          backgroundImage="./img/fondo3.jpg"
          barProps={{
            preguntaActual: 3,
            totalPreguntas: 4,
            mensaje: 'Gira la ruleta y responde correctamente',
            puedeAnterior: false,
            puedeSiguiente: false,
          }}
        >
          <Game onEnd={handleGameEnd} />
        </ScaleWrapper>
      )}
      {screen === 'result' && (
        <ScaleWrapper
          backgroundImage="./img/fondo4.jpg"
          barProps={{
            preguntaActual: 4,
            totalPreguntas: 4,
            mensaje: 'Puedes cerrar esta ventana',
            puedeAnterior: true,
            onPrev: () => setScreen('cover'),
            puedeSiguiente: false,
          }}
        >
          <Result
            aprobado={resultState.aprobado}
            sinIntentos={resultState.sinIntentos}
            onReintentar={handleReintentar}
          />
        </ScaleWrapper>
      )}
    </>
  )
}
