import React, { useState } from "react";
import { Header } from "./components/Header";
import { Sidebar } from "./components/Sidebar";
import { Footer } from "./components/Footer";
import { MainPage } from "./components/pages/MainPage";
import { ConstructionPage } from "./components/pages/ConstructionPage";
import { RenovationPage } from "./components/pages/RenovationPage";
import { DesignPage } from "./components/pages/DesignPage";
import { MaterialsPage } from "./components/pages/MaterialsPage";
import { GalleryPage } from "./components/pages/GalleryPage";
import { ForumPage } from "./components/pages/ForumPage";
import { ContactsPage } from "./components/pages/ContactsPage";
import { ArticleDetailPage } from "./components/pages/ArticleDetailPage";

export default function App() {
  const [currentPage, setCurrentPage] = useState("main");
  const [currentArticle, setCurrentArticle] = useState(null);

  const handleNavigation = (page: string) => {
    setCurrentPage(page);
    setCurrentArticle(null); // Clear article when navigating to a new page
  };

  const handleArticleClick = (articleData: any) => {
    setCurrentArticle(articleData);
    setCurrentPage("article");
  };

  const handleBackFromArticle = () => {
    setCurrentArticle(null);
    setCurrentPage("main"); // Return to main page or previous page
  };

  const renderCurrentPage = () => {
    if (currentPage === "article" && currentArticle) {
      return (
        <ArticleDetailPage
          article={currentArticle}
          onBack={handleBackFromArticle}
        />
      );
    }

    switch (currentPage) {
      case "main":
        return <MainPage onArticleClick={handleArticleClick} />;
      case "construction":
        return (
          <ConstructionPage
            onArticleClick={handleArticleClick}
          />
        );
      case "renovation":
        return (
          <RenovationPage onArticleClick={handleArticleClick} />
        );
      case "design":
        return (
          <DesignPage onArticleClick={handleArticleClick} />
        );
      case "materials":
        return (
          <MaterialsPage onArticleClick={handleArticleClick} />
        );
      case "gallery":
        return <GalleryPage />;
      case "forum":
        return <ForumPage />;
      case "contacts":
        return <ContactsPage />;
      case "archive":
        return <ForumPage />;
      case "sitemap":
        return <ContactsPage />;
      default:
        return <MainPage onArticleClick={handleArticleClick} />;
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col">
      <Header
        currentPage={currentPage}
        onNavigate={handleNavigation}
      />

      <main className="flex-1 flex">
        {currentPage !== "article" && (
          <Sidebar onNavigate={handleNavigation} />
        )}
        {renderCurrentPage()}
      </main>

      <Footer />
    </div>
  );
}