import { useState, useEffect } from "react";
import {
  HashRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import TopNav from "./components/topnav";
import SideNav from "./components/sidenav";
import Results from "./components/results";
import Settings from "./components/settings";

function App() {
  const [isSideNavOpen, setIsSideNavOpen] = useState(false);
  const [validConfig, setValidConfig] = useState(null); // null = loading

  useEffect(() => {
    chrome.storage.local.get("valid_config", (result) => {
      if (chrome.runtime.lastError) {
        console.error("Error reading valid_config:", chrome.runtime.lastError);
        setValidConfig(false); // fallback
      } else {
        setValidConfig(result.valid_config === true);
      }
    });
  }, []);

  if (validConfig === null) {
    return (
      <div className="flex items-center justify-center h-screen bg-black text-white">
        Loading...
      </div>
    );
  }

  return (
    <Router>
      <div className="min-w-full min-h-full w-full h-full flex flex-grow bg-black/95 flex-col relative">
        <div className="w-full min-h-16 max-h-16 h-16 shrink-0 flex sticky top-0 z-20 border-b border-b-white bg-black overflow-x-hidden">
          <TopNav onMenuClick={() => setIsSideNavOpen(true)} />
        </div>

        <div id="currentpagecontainer" className="w-full grow overflow-y-auto">
          <Routes>
            {!validConfig ? (
              <>
                <Route
                  path="/settings"
                  element={
                    <Settings onConfigSaved={() => setValidConfig(true)} />
                  }
                />
                <Route path="*" element={<Navigate to="/settings" replace />} />
              </>
            ) : (
              <>
                <Route path="/" element={<Navigate to="/results" replace />} />
                <Route path="/results" element={<Results />} />
                <Route path="/settings" element={<Settings />} />
              </>
            )}
          </Routes>
        </div>

        <div
          className={`fixed top-0 left-0 w-full h-full z-50 bg-black transform transition-transform duration-300 ease-in-out ${
            isSideNavOpen ? "translate-x-0" : "-translate-x-full"
          }`}
        >
          <SideNav onClose={() => setIsSideNavOpen(false)} />
        </div>
      </div>
    </Router>
  );
}

export default App;