import { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import ScrollToTop from './components/ScrollToTop'
import { initLiff } from './lib/liff'
import HomePage from './pages/HomePage'
import ShopPage from './pages/ShopPage'
import CategoryPage from './pages/CategoryPage'
import ProductDetailPage from './pages/ProductDetailPage'
import SearchPage from './pages/SearchPage'
import ScentGuidePage from './pages/ScentGuidePage'
import ArticleReaderPage from './pages/ArticleReaderPage'
import NotFoundPage from './pages/NotFoundPage'
import CheckoutPage from './pages/CheckoutPage'
import CouponsPage from './pages/CouponsPage'
import OrderSuccessPage from './pages/OrderSuccessPage'
import TrackOrderPage from './pages/TrackOrderPage'
import WishlistPage from './pages/WishlistPage'
import CustomPage from './pages/CustomPage'
import ProfilePage from './pages/ProfilePage'
import CartDrawer from './components/CartDrawer'
import ThemeInjector from './components/ThemeInjector'

function App() {
  const { i18n } = useTranslation();

  useEffect(() => {
    const liffId = import.meta.env.VITE_LIFF_ID;
    if (liffId) {
      initLiff(liffId);
    } else {
      console.warn("VITE_LIFF_ID is not defined in environment variables. LINE Login won't work.");
    }
  }, []);

  useEffect(() => {
    const lang = i18n.language;
    document.documentElement.lang = lang;
  }, [i18n.language]);

  return (
    <BrowserRouter>
      <ThemeInjector />
      <ScrollToTop />
      <CartDrawer />
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/shop" element={<ShopPage />} />
        <Route path="/category/:id" element={<CategoryPage />} />
        <Route path="/products/:id" element={<ProductDetailPage />} />
        <Route path="/coupons" element={<CouponsPage />} />
        <Route path="/checkout" element={<CheckoutPage />} />
        <Route path="/order/:id" element={<OrderSuccessPage />} />
        <Route path="/track" element={<TrackOrderPage />} />
        <Route path="/wishlist" element={<WishlistPage />} />
        <Route path="/search" element={<SearchPage />} />
        <Route path="/scent-guide" element={<ScentGuidePage />} />
        <Route path="/article/:slug" element={<ArticleReaderPage />} />
        <Route path="/profile" element={<ProfilePage />} />
        <Route path="/:slug" element={<CustomPage />} />
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App