const { useState, useEffect } = React;

function getHashRoute() {
  const hash = window.location.hash.replace("#/", "").replace("#", "");
  return hash || "home";
}

function Router() {
  const [page, setPage] = useState(getHashRoute());
  const [user, setUser] = useState(null);
  const [authChecked, setAuthChecked] = useState(false);

  // Check auth on mount
  useEffect(() => {
    const token = localStorage.getItem("auth_token");
    if (!token) {
      setAuthChecked(true);
      return;
    }
    fetch("/api/auth/me", {
      headers: { Authorization: "Bearer " + token }
    })
      .then(r => r.ok ? r.json() : Promise.reject())
      .then(data => { setUser(data.user); setAuthChecked(true); })
      .catch(() => {
        localStorage.removeItem("auth_token");
        localStorage.removeItem("auth_user");
        setAuthChecked(true);
      });
  }, []);

  useEffect(() => {
    const handler = () => setPage(getHashRoute());
    window.addEventListener("hashchange", handler);
    return () => window.removeEventListener("hashchange", handler);
  }, []);

  const navigate = (route) => {
    window.location.hash = `#/${route}`;
  };

  const goHome = () => navigate("");

  const handleLogout = async () => {
    const token = localStorage.getItem("auth_token");
    await fetch("/api/logout", {
      method: "POST",
      headers: { Authorization: "Bearer " + token }
    }).catch(() => {});
    localStorage.removeItem("auth_token");
    localStorage.removeItem("auth_user");
    setUser(null);
  };

  const handleLogin = (userData) => {
    setUser(userData);
  };

  // Loading spinner while checking auth
  if (!authChecked) {
    return (
      <div style={{
        minHeight: "100vh", background: "#0F172A",
        display: "flex", alignItems: "center", justifyContent: "center"
      }}>
        <div style={{ textAlign: "center" }}>
          <div style={{
            width: 40, height: 40, border: "3px solid #334155",
            borderTop: "3px solid #3B82F6", borderRadius: "50%",
            animation: "spin 0.8s linear infinite", margin: "0 auto 16px"
          }} />
          <p style={{ color: "#94A3B8", fontSize: 14 }}>Loading...</p>
        </div>
        <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
      </div>
    );
  }

  // Show login if not authenticated
  if (!user) {
    return <window.LoginPage onLogin={handleLogin} />;
  }

  switch (page) {
    case "engineering":
      return <window.ProcessMapperApp onBack={goHome} />;
    case "sourcing":
      return <window.StrategicSourcingAgent onBack={goHome} />;
    default:
      return <window.LandingPage onNavigate={navigate} user={user} onLogout={handleLogout} />;
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Router />);