import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

import { URLs } from '../../__data__/urls'
import { useChallenge } from '../../context/ChallengeContext'
import { Header } from '../../components/Header'
import { ChainSelector } from '../../components/ChainSelector'
import { storage } from '../../utils/storage'
import type { ChallengeChain } from '../../__data__/types'

export const ChainsPage = () => {
  const navigate = useNavigate()
  const { nickname } = useChallenge()

  // Проверяем авторизацию
  useEffect(() => {
    const workplaceNumber = storage.getWorkplaceNumber()
    if (!workplaceNumber) {
      navigate(URLs.workplace, { replace: true })
      return
    }
    if (!nickname) {
      navigate(URLs.login, { replace: true })
    }
  }, [navigate, nickname])

  const handleSelectChain = (chain: ChallengeChain) => {
    storage.setSelectedChainId(chain.id)
    // Переходим к первому заданию цепочки
    if (chain.tasks.length > 0) {
      storage.setSelectedTaskId(chain.tasks[0].id)
      navigate(URLs.task(chain.id, chain.tasks[0].id))
    }
  }

  if (!nickname) {
    return null
  }

  return (
    <>
      <Header />
      <ChainSelector onSelectChain={handleSelectChain} />
    </>
  )
}