import React, { useEffect, useState } from 'react'
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom'
import HomePage from './pages/HomePage'
import TagPage from './pages/TagPage'
import TopNav from './components/TopNav'
import TagSidebar from './components/TagSidebar'
import PostPage from './pages/PostPage'
import PostNewPage from './pages/PostNewPage'
import PostDetailPage from './pages/PostDetailPage'
import WikiShowPage from './pages/WikiShowPage'
import { API_BASE_URL } from './config'
import axios from 'axios'
import { Toaster } from '@/components/ui/toaster'
import { camelizeKeys } from 'humps'

type Tag = { id:        number
             name:      string
             category:  string }

type Post = { id:         number
              url:        string
              title:      string
              thumbnail:  string
              tags:       Tag[]
              viewed:     boolean }

type User = { id:               number
              name:             string | null
              inheritanceCode:  string
              role:             string }


const App = () => {
  const [posts, setPosts] = useState<Post[]> ([])
  const [user, setUser] = useState<User | null> (null)

  useEffect (() => {
    const createUser = () => (
        axios.post (`${ API_BASE_URL }/users`)
        .then (res => {

          if (res.data.code)
            {
              localStorage.setItem ('user_code', res.data.code)
              setUser (camelizeKeys (res.data.user))
            }
        }))

    const code = localStorage.getItem ('user_code')
    if (code)
      {
        void (axios.post (`${ API_BASE_URL }/users/verify`, { code })
              .then (res => {
                if (res.data.valid)
                  setUser (camelizeKeys (res.data.user))
                else
                  createUser ()
              }))
      }
    else
      createUser ()

    alert ('このサイトはまだ作りかけです!!!!\n出てけ!!!!!!!!!!!!!!!!!!!!')
  }, [])

  return (
      <>
        <Router>
          <div className="flex flex-col h-screen w-screen">
            <TopNav user={user} setUser={setUser} />
            <div className="flex flex-1">
              <Routes>
                <Route path="/posts/new" />
                <Route path="/posts" element={<TagSidebar posts={posts} setPosts={setPosts} />} />
                <Route path="/posts/:id" element={<TagSidebar posts={posts} setPosts={setPosts} />} />
              </Routes>
              <main className="flex-1 overflow-y-auto p-4">
                <Routes>
                  <Route path="/" element={<Navigate to="/posts" replace />} />
                  <Route path="/posts" element={<PostPage posts={posts} setPosts={setPosts} />} />
                  <Route path="/posts/new" element={<PostNewPage />} />
                  <Route path="/posts/:id" element={<PostDetailPage posts={posts} setPosts={setPosts} />} />
                  <Route path="/tags/:tag" element={<TagPage />} />
                  <Route path="/wiki/:name" element={<WikiShowPage />} />
                </Routes>
              </main>
            </div>
          </div>
        </Router>
        <Toaster />
      </>)
}


export default App