/* global React, ReactDOM, IOSDevice,
   HomeScreen, CategorySelectScreen, QuestionScreen, CorrectFeedback, WrongFeedback,
   ResultsScreen, RewardsScreen, LeaderboardScreen, ProfileScreen,
   CATEGORIES, QUESTIONS, USER */
const { useState, useMemo } = React;

function App() {
  const [route, setRoute] = useState({name:'home'});
  const [match, setMatch] = useState(null); // {category, qIndex, score, streak, bestStreak, correct}
  const [user] = useState(USER);

  const goHome = ()=>setRoute({name:'home'});
  const goCats = ()=>setRoute({name:'cats'});
  const goRewards = ()=>setRoute({name:'rewards'});
  const goRank = ()=>setRoute({name:'rank'});
  const goProfile = ()=>setRoute({name:'profile'});

  const startMatch = (cat)=>{
    setMatch({ category: cat, qIndex:0, score:0, streak:0, bestStreak:0, correct:0 });
    setRoute({name:'question'});
  };

  const onAnswer = ({correct, timeLeft})=>{
    const m = match;
    const points = correct ? 100 + Math.floor(timeLeft*5) + (m.streak*20) : 0;
    const next = {
      ...m,
      score: m.score + points,
      streak: correct ? m.streak+1 : 0,
      bestStreak: Math.max(m.bestStreak, correct ? m.streak+1 : m.streak),
      correct: m.correct + (correct?1:0),
      lastPoints: points,
    };
    setMatch(next);
    setRoute({name: correct ? 'correct' : 'wrong', q: QUESTIONS[m.category.id][m.qIndex]});
  };

  const nextQuestion = ()=>{
    const total = QUESTIONS[match.category.id].length;
    if (match.qIndex+1 >= total) {
      setRoute({name:'results'});
    } else {
      setMatch({...match, qIndex: match.qIndex+1});
      setRoute({name:'question'});
    }
  };

  const replay = ()=>{ startMatch(match.category); };

  let screen;
  if (route.name==='home') {
    screen = <HomeScreen user={user} onPlay={()=>startMatch(CATEGORIES[0])} onCategories={goCats} onRewards={goRewards} onLeaderboard={goRank} onProfile={goProfile}/>;
  } else if (route.name==='cats') {
    screen = <CategorySelectScreen user={user} onPick={startMatch} onBack={goHome} onLeaderboard={goRank} onProfile={goProfile}/>;
  } else if (route.name==='question') {
    const q = QUESTIONS[match.category.id][match.qIndex];
    screen = <QuestionScreen
      key={match.qIndex}
      category={match.category}
      qIndex={match.qIndex} total={QUESTIONS[match.category.id].length}
      question={q} score={match.score} streak={match.streak}
      onAnswer={onAnswer}/>;
  } else if (route.name==='correct') {
    screen = <CorrectFeedback category={match.category} points={match.lastPoints} streak={match.streak} fact={route.q.fact} onNext={nextQuestion}/>;
  } else if (route.name==='wrong') {
    screen = <WrongFeedback correctAnswer={route.q.options[route.q.correct]} fact={route.q.fact} onNext={nextQuestion} livesLeft={2}/>;
  } else if (route.name==='results') {
    const total = QUESTIONS[match.category.id].length;
    screen = <ResultsScreen
      category={match.category}
      correctCount={match.correct} total={total}
      points={match.score} bestStreak={match.bestStreak}
      xpEarned={Math.floor(match.score/8)} coinsEarned={match.correct*30}
      onPlayAgain={replay} onHome={goHome} onShare={()=>{}}/>;
  } else if (route.name==='rewards') {
    screen = <RewardsScreen user={user} onBack={goHome} onClaim={()=>{}} onLeaderboard={goRank} onProfile={goProfile}/>;
  } else if (route.name==='rank') {
    screen = <LeaderboardScreen user={user} onBack={goHome} onHome={goHome} onProfile={goProfile}/>;
  } else if (route.name==='profile') {
    screen = <ProfileScreen user={user} onBack={goHome} onHome={goHome} onLeaderboard={goRank}/>;
  }

  return screen;
}

window.App = App;