import { useEffect, useState } from 'react'
import { Link, Navigate, useParams } from 'react-router-dom'
import { api } from '../api'
import { useAuth } from '../auth'
import { ForestFortuneGame } from '../games/forest-fortune/ForestFortuneGame'
import type { GameInfo } from '../types'

export function GamePage() {
  const { slug } = useParams<{ slug: string }>()
  const { user, loading } = useAuth()
  const [game, setGame] = useState<GameInfo | null>(null)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    if (!slug) return
    void api
      .getGame(slug)
      .then(setGame)
      .catch((err: unknown) => setError(err instanceof Error ? err.message : 'Не найдено'))
  }, [slug])

  if (!loading && user && !user.agreement_accepted) {
    return <Navigate to="/" replace />
  }

  const playable = game?.status === 'available' && game.slug === 'forest-fortune'

  return (
    <main className="game-page">
      <Link to="/home" className="back-link">
        ← Назад
      </Link>
      {error && <p className="error">{error}</p>}
      {game && playable && <ForestFortuneGame game={game} />}
      {game && !playable && (
        <section className="game-stub">
          <img src="/logo.png" alt="" className="game-stub__mark" />
          <h1>{game.title}</h1>
          <p>{game.description}</p>
          <p className="game-stub__badge">В разработке</p>
        </section>
      )}
    </main>
  )
}