// App.js
import React, { useState, useEffect } from "react";
import Navbar from "./components/Navbar";
import HomePage from "./pages/HomePage";
import VoiceChatPage from "./pages/VoiceChatPage";
import CodingAssistantPage from "./pages/CodingAssistantPage";
import LoginPage from "./pages/LoginPage";
import { getUserStatus, logout } from "./services/apiService"; 

const Icon = ({ path, onClick, className }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={`w-6 h-6 cursor-pointer transition-colors duration-200 ${className}`}
    onClick={onClick}
  >
    <path d={path} />
  </svg>
);

export default function App() {
  const [currentPage, setCurrentPage] = useState("home");
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [userId, setUserId] = useState(null);

  const authenticatedPages = ["voice-chat", "coding-assistant"];

  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const userIdFromUrl = urlParams.get('user_id');

    if (userIdFromUrl && !localStorage.getItem('userId')) {
      localStorage.setItem('userId', userIdFromUrl);
      console.log('User ID from URL saved to localStorage:', userIdFromUrl);
      window.history.replaceState({}, document.title, window.location.pathname);
    }
  }, []);

  useEffect(() => {
    const checkLoginStatus = async () => {
      const storedUserId = localStorage.getItem("userId");

      if (storedUserId) {
        try {
          const status = await getUserStatus(storedUserId);
          if (status.is_logged_in) {
            setIsLoggedIn(true);
            setUserId(storedUserId);
            if (currentPage === "login") {
              setCurrentPage("home");
            }
          } else {
            setIsLoggedIn(false);
            setUserId(null);
            localStorage.removeItem("userId");
            if (authenticatedPages.includes(currentPage)) {
              setCurrentPage("login");
            }
          }
        } catch (error) {
          console.error("Failed to check user status:", error);
          setIsLoggedIn(false);
          setUserId(null);
          localStorage.removeItem("userId");
          if (authenticatedPages.includes(currentPage)) {
            setCurrentPage("login");
          }
        }
      } else {
        setIsLoggedIn(false);
        setUserId(null);
        if (authenticatedPages.includes(currentPage)) {
          setCurrentPage("login");
        }
      }
    };

    checkLoginStatus();
  }, [currentPage]);

  const handleLogout = async () => {
    try {
      await logout();
      setIsLoggedIn(false);
      setUserId(null);
      localStorage.removeItem("userId");
      setCurrentPage("home");
    } catch (error) {
      console.error("Logout failed:", error);
    }
  };

  const handleNavigate = (page) => {
    if (authenticatedPages.includes(page) && !isLoggedIn) {
      setCurrentPage("login");
    } else {
      setCurrentPage(page);
    }
  };

  const toggleSidebar = () => {
    setIsSidebarOpen(!isSidebarOpen);
  };

  const renderPage = () => {
    switch (currentPage) {
      case "home":
        // Pass both isLoggedIn and handleLogout to HomePage
        return <HomePage onNavigate={handleNavigate} isLoggedIn={isLoggedIn} onLogout={handleLogout} />;
      case "voice-chat":
        return <VoiceChatPage Icon={Icon} />;
      case "coding-assistant":
        return <CodingAssistantPage onNavigate={handleNavigate} Icon={Icon} />;
      case "login":
        return <LoginPage />;
      default:
        return <HomePage onNavigate={handleNavigate} isLoggedIn={isLoggedIn} onLogout={handleLogout} />;
    }
  };

  return (
    <div className="flex min-h-screen bg-gray-100 dark:bg-gray-900 font-sans">
      {currentPage !== "login" && (
        <Navbar
          isOpen={isSidebarOpen}
          onToggle={toggleSidebar}
          onNavigate={handleNavigate}
          onLogout={handleLogout}
          isLoggedIn={isLoggedIn}
          Icon={Icon}
        />
      )}
      <div className="flex-grow">
        {renderPage()}
      </div>
    </div>
  );
}