const page = Number(new URLSearchParams(window.location.search).get('page') ?? '1')

function App() {
  const [wordList, setWordList] = React.useState([])
  const [theme, setTheme] = React.useState(() => {
    const savedTheme = localStorage.getItem('theme')
    if (savedTheme === 'light' || savedTheme === 'dark') {
      return savedTheme
    }
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
  })

  React.useEffect(() => {
    fetch(`./words/word-${page}.txt`)
      .then(res => res.text())
      .then(data => {
        setWordList(data.split('\n').filter(Boolean).map(word => {
          const [idx, english, ...explanation] = word.split(' ')
          return {
            idx,
            english,
            explanation: explanation.join(' ')
          }
        }))
      })
  }, [])

  const jumpToPage = (page) => {
    window.location.search = `page=${page}`
  }

  const handlePrev = () => {
    jumpToPage(page - 1)
  }

  const handleNext = () => {
    jumpToPage(page + 1)
  }

  const [inputPage, setInputPage] = React.useState(page)
  const handleSearch = () => {
    jumpToPage(Number(inputPage))
  }

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme)
    localStorage.setItem('theme', theme)
  }, [theme])

  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'dark' ? 'light' : 'dark')
  }

  return <>
    <div className="header">
      <div className="btn" onClick={handlePrev}>Prev</div>
      <div className="btn" onClick={handleNext}>Next</div>

      <div className="page">Page: {page}</div>

      <input type="text" className="input" value={inputPage} onChange={e => setInputPage(e.target.value)} />
      <div className="btn" onClick={handleSearch}>Jump</div>
      <div className="btn" onClick={toggleTheme}>
        {theme === 'dark' ? 'Light' : 'Dark'}
      </div>
    </div>

    <div className="content">
      {wordList.map((word, index) => (
        <div className="word-item" key={index}>
          <div className="word-item-idx">{word.idx}</div>
          <div className="word-item-english">{word.english}</div>
          <div className="word-item-explanation">{word.explanation}</div>
        </div>
      ))}
    </div>
  </>
}

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App />)