import React, { useState, useEffect, useCallback, useRef } from 'react';
import Sidebar from './components/Sidebar';
import HeroSection from './components/HeroSection';
import BlogSection from './components/BlogSection';
import NewsSection from './components/NewsSection';
import ResearchSection from './components/ResearchSection'; 
import BusinessSection from './components/BusinessSection'; 
import ConnectSection from './components/ConnectSection';
import AboutUsSection from './components/AboutUsSection'; 
import OurMissionSection from './components/OurMissionSection'; 
import CareersSection from './components/CareersSection'; 
import BusinessLandingSection from './components/BusinessLandingSection'; 
import BusinessServicesSection from './components/BusinessServicesSection'; 
import EducationBusinessSection from './components/EducationBusinessSection'; 
import EducationStudentsSection from './components/EducationStudentsSection'; 
import ResearchAllSection from './components/ResearchAllSection'; 
import NewsAllSection from './components/NewsAllSection';       
import StoriesAllSection from './components/StoriesAllSection';   
import AcceleratorAboutSection from './components/AcceleratorAboutSection';
import AcceleratorProjectsSection from './components/AcceleratorProjectsSection';
import AcceleratorInvestmentSection from './components/AcceleratorInvestmentSection';
import TermsOfUseSection from './components/TermsOfUseSection';
import PrivacyPolicySection from './components/PrivacyPolicySection';
import Logo from './components/Logo';
import { Bars3Icon, XMarkIcon, SidebarToggleIcon } from './components/icons'; 
import { CurrentView, Post, NewsArticle, ResearchPaper, BusinessStory, ServiceItemData, ClientLogo, BusinessCourse, StudentProgram, AcceleratorProject, InvestmentProject, Vacancy } from './types';
import { SECTION_IDS, FOOTER_CONTENT, UI_TEXTS } from './constants'; 
import ChatInput from './components/ChatInput';


// Import Strapi service
import { 
  fetchPosts, fetchNewsArticles, fetchResearchPapers, fetchBusinessStories, 
  fetchServiceItems, fetchClientLogos, fetchBusinessCourses, fetchStudentPrograms,
  fetchAcceleratorProjects, fetchInvestmentProjects, fetchVacancies
} from './strapiService';

// Import Detail Page Components
import BlogPostDetail from './components/BlogPostDetail';
import NewsArticleDetail from './components/NewsArticleDetail';
import ResearchPaperDetail from './components/ResearchPaperDetail';
import BusinessStoryDetail from './components/BusinessStoryDetail';
import VacancyDetail from './components/VacancyDetail'; 


const App: React.FC = () => {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [isDesktopSidebarCollapsed, setIsDesktopSidebarCollapsed] = useState(false);
  const [currentView, setCurrentView] = useState<CurrentView>('main');
  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
  const [showStickyChat, setShowStickyChat] = useState(false);
  const [isStickyChatExpanded, setIsStickyChatExpanded] = useState(false);
  const stickyChatRef = useRef<HTMLDivElement>(null);


  // State for Strapi data
  const [posts, setPosts] = useState<Post[]>([]);
  const [newsArticles, setNewsArticles] = useState<NewsArticle[]>([]);
  const [researchPapers, setResearchPapers] = useState<ResearchPaper[]>([]);
  const [businessStories, setBusinessStories] = useState<BusinessStory[]>([]);
  const [serviceItems, setServiceItems] = useState<ServiceItemData[]>([]);
  const [clientLogos, setClientLogos] = useState<ClientLogo[]>([]);
  const [businessCourses, setBusinessCourses] = useState<BusinessCourse[]>([]);
  const [studentPrograms, setStudentPrograms] = useState<StudentProgram[]>([]);
  const [acceleratorProjects, setAcceleratorProjects] = useState<AcceleratorProject[]>([]);
  const [investmentProjects, setInvestmentProjects] = useState<InvestmentProject[]>([]);
  const [vacancies, setVacancies] = useState<Vacancy[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);


  const toggleSidebar = useCallback(() => {
    setIsSidebarOpen(prev => !prev);
  }, []);

  const handleSetCurrentView = useCallback((view: CurrentView) => {
    setCurrentView(view);
    if (!view.endsWith('Detail') && view !== 'termsOfUse' && view !== 'privacyPolicy') {
      setSelectedItemId(null);
    }
  }, []);
  
  const handleSetSelectedItemId = useCallback((id: string | null) => {
    setSelectedItemId(id);
  }, []);

  useEffect(() => {
    const loadData = async () => {
      setIsLoading(true);
      setError(null);
      try {
        const [
          fetchedPosts, 
          fetchedNews, 
          fetchedResearch, 
          fetchedBusinessStories,
          fetchedServiceItems,
          fetchedClientLogos,
          fetchedBusinessCourses,
          fetchedStudentPrograms,
          fetchedAcceleratorProjects,
          fetchedInvestmentProjects,
          fetchedVacanciesData
        ] = await Promise.all([
          fetchPosts(),
          fetchNewsArticles(),
          fetchResearchPapers(),
          fetchBusinessStories(),
          fetchServiceItems(),
          fetchClientLogos(),
          fetchBusinessCourses(),
          fetchStudentPrograms(),
          fetchAcceleratorProjects(),
          fetchInvestmentProjects(),
          fetchVacancies(),
        ]);
        setPosts(fetchedPosts);
        setNewsArticles(fetchedNews);
        setResearchPapers(fetchedResearch);
        setBusinessStories(fetchedBusinessStories);
        setServiceItems(fetchedServiceItems);
        setClientLogos(fetchedClientLogos);
        setBusinessCourses(fetchedBusinessCourses);
        setStudentPrograms(fetchedStudentPrograms);
        setAcceleratorProjects(fetchedAcceleratorProjects);
        setInvestmentProjects(fetchedInvestmentProjects);
        setVacancies(fetchedVacanciesData);

      } catch (err) {
        console.error("Failed to load data from Strapi:", err);
        setError("Не удалось загрузить данные. Пожалуйста, попробуйте позже.");
      } finally {
        setIsLoading(false);
      }
    };
    loadData();
  }, []);


  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 768) { 
        setIsSidebarOpen(false); 
      }
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  useEffect(() => {
    // On non-main pages, the sticky chat should always be visible.
    if (currentView !== 'main') {
      setShowStickyChat(true);
      // We don't need a scroll listener on these pages for this feature.
      return;
    }

    // On the main page, show the sticky chat only after scrolling past the hero.
    const handleScroll = () => {
      const heroSection = document.getElementById(SECTION_IDS.hero);
      if (heroSection) {
        const shouldShow = heroSection.getBoundingClientRect().bottom < 0;
        setShowStickyChat(current => current === shouldShow ? current : shouldShow);
      } else {
        // Fallback if hero section is not found on main page for some reason
        setShowStickyChat(false); 
      }
    };
    
    // Set initial state for 'main' view (in case user reloads scrolled down)
    handleScroll();

    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [currentView]); // Dependency on currentView ensures this logic re-runs on page change
  
  // Hook for handling clicks outside of the sticky chat input to collapse it
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (isStickyChatExpanded && stickyChatRef.current && !stickyChatRef.current.contains(event.target as Node)) {
        setIsStickyChatExpanded(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [isStickyChatExpanded]);

  useEffect(() => {
    let targetId: string | null = null;
    const baseTitle = 'iiEasy';
    let newTitle = `iiEasy: Разработка Сайтов, Приложений, ИИ-Решений | ИИ Исследования и Обучение Уфа`; // Default

    const findItemTitle = (items: {id: string; title: string}[], id: string | null) => items.find(item => item.id === id)?.title;

    switch(currentView) {
      case 'about': targetId = SECTION_IDS.aboutUsPage; newTitle = `О нас | ${baseTitle}`; break;
      case 'mission': targetId = SECTION_IDS.ourMissionPage; newTitle = `Наша Миссия | ${baseTitle}`; break;
      case 'careers': targetId = SECTION_IDS.careersPage; newTitle = `Карьера | ${baseTitle}`; break;
      case 'businessLanding': targetId = SECTION_IDS.businessLandingPage; newTitle = `Кейсы для Бизнеса | ${baseTitle}`; break;
      case 'businessServices': targetId = SECTION_IDS.businessServicesPage; newTitle = `Услуги для Бизнеса | ${baseTitle}`; break;
      case 'educationBusiness': targetId = SECTION_IDS.educationBusinessPage; newTitle = `Обучение для Бизнеса | ${baseTitle}`; break;
      case 'educationStudents': targetId = SECTION_IDS.educationStudentsPage; newTitle = `Обучение для Студентов | ${baseTitle}`; break;
      case 'researchAll': targetId = SECTION_IDS.researchAllPage; newTitle = `Все Исследования | ${baseTitle}`; break;
      case 'newsAll': targetId = SECTION_IDS.newsAllPage; newTitle = `Все Новости | ${baseTitle}`; break;
      case 'storiesAll': targetId = SECTION_IDS.storiesAllPage; newTitle = `Все Истории | ${baseTitle}`; break;
      case 'acceleratorAbout': targetId = SECTION_IDS.acceleratorAboutPage; newTitle = `Об Акселераторе | ${baseTitle}`; break;
      case 'acceleratorProjects': targetId = SECTION_IDS.acceleratorProjectsPage; newTitle = `Проекты Акселератора | ${baseTitle}`; break;
      case 'acceleratorInvestment': targetId = SECTION_IDS.acceleratorInvestmentPage; newTitle = `Инвестиции в стартапы | ${baseTitle}`; break;
      case 'blogPostDetail':
        targetId = SECTION_IDS.blogPostDetailPage;
        newTitle = `${findItemTitle(posts, selectedItemId) || 'История'} | ${baseTitle}`;
        break;
      case 'newsArticleDetail':
        targetId = SECTION_IDS.newsArticleDetailPage;
        newTitle = `${findItemTitle(newsArticles, selectedItemId) || 'Новость'} | ${baseTitle}`;
        break;
      case 'researchPaperDetail':
        targetId = SECTION_IDS.researchPaperDetailPage;
        newTitle = `${findItemTitle(researchPapers, selectedItemId) || 'Исследование'} | ${baseTitle}`;
        break;
      case 'businessStoryDetail':
        targetId = SECTION_IDS.businessStoryDetail;
        newTitle = `${findItemTitle(businessStories, selectedItemId) || 'Кейс'} | ${baseTitle}`;
        break;
      case 'vacancyDetail':
        targetId = SECTION_IDS.vacancyDetailPage;
        newTitle = `${findItemTitle(vacancies, selectedItemId) || 'Вакансия'} | ${baseTitle}`;
        break;
      case 'termsOfUse': targetId = SECTION_IDS.termsOfUsePage; newTitle = `Правила использования | ${baseTitle}`; break;      
      case 'privacyPolicy': targetId = SECTION_IDS.privacyPolicyPage; newTitle = `Политика конфиденциальности | ${baseTitle}`; break;
      case 'main': 
        window.scrollTo({ top: 0, behavior: 'smooth' }); 
        break; 
    }
    
    document.title = newTitle;
    
    if (targetId) {
      const element = document.getElementById(targetId);
      if (element) {
          element.scrollIntoView({behavior: 'smooth', block: 'start'});
      } else {
          setTimeout(() => {
               document.getElementById(targetId)?.scrollIntoView({behavior: 'smooth', block: 'start'});
          }, 150); 
      }
    } else if (currentView !== 'main') { 
      window.scrollTo({ top: 0, behavior: 'smooth' }); 
    }
  }, [currentView, selectedItemId, posts, newsArticles, researchPapers, businessStories, vacancies]);
  
  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-white">
        <div className="text-center">
          <Logo width={150} height={112} />
          <p className="mt-4 text-xl font-semibold text-slate-700 animate-pulse">Загрузка данных...</p>
        </div>
      </div>
    );
  }

  if (error) {
     return (
      <div className="min-h-screen flex items-center justify-center bg-white p-4">
        <div className="text-center bg-white p-8 rounded-lg">
           <Logo width={100} height={75} className="mx-auto mb-4 filter grayscale" />
          <h2 className="text-2xl font-bold text-red-600 mb-3">Ошибка загрузки</h2>
          <p className="text-slate-700 mb-6">{error}</p>
          <button 
            onClick={() => window.location.reload()}
            className="px-6 py-2 bg-white text-red-600 border border-red-500 rounded-lg hover:bg-red-50 transition-colors font-semibold"
          >
            Попробовать снова
          </button>
        </div>
      </div>
    );
  }


  return (
    <div className="min-h-screen text-slate-800 font-inter bg-white">
      <Sidebar 
        isOpen={isSidebarOpen} 
        onClose={() => setIsSidebarOpen(false)}
        currentView={currentView}
        setCurrentView={handleSetCurrentView}
        isDesktopCollapsed={isDesktopSidebarCollapsed}
      />

      {/* Desktop toggle button */}
      <button
        type="button"
        onClick={() => setIsDesktopSidebarCollapsed(prev => !prev)}
        className={`fixed top-6 left-4 z-50 p-2 bg-white border border-slate-200 text-slate-600 hover:text-black hover:bg-slate-100 rounded-lg shadow-sm transition-all duration-300 ease-in-out hidden md:block
                    ${isDesktopSidebarCollapsed ? '' : 'md:translate-x-72'}`}
        aria-label="Toggle navigation sidebar"
        aria-expanded={!isDesktopSidebarCollapsed}
      >
        <SidebarToggleIcon className={`w-5 h-5 transition-transform duration-300 ${isDesktopSidebarCollapsed ? 'rotate-180' : ''}`} />
      </button>

      <div className={`transition-all duration-300 ease-in-out ${isDesktopSidebarCollapsed ? 'md:pl-0' : 'md:pl-72'}`}>
        <div className="flex flex-col min-h-screen">
          
          {isSidebarOpen && (
            <div 
              className="fixed inset-0 z-30 bg-black/30 md:hidden" 
              onClick={toggleSidebar}
              aria-hidden="true"
            ></div>
          )}
          
          <button
            id="sidebar-toggle-button"
            onClick={toggleSidebar}
            className="fixed top-4 left-4 z-50 p-2 bg-white/80 rounded-full text-slate-800 hover:text-black focus:ring-slate-500 transition-all focus:outline-none focus:ring-2 md:hidden"
            aria-label={isSidebarOpen ? UI_TEXTS.sidebarToggleCloseAriaLabel : UI_TEXTS.sidebarToggleOpenAriaLabel}
            aria-expanded={isSidebarOpen}
          >
            {isSidebarOpen ? <XMarkIcon className="h-7 w-7" /> : <Bars3Icon className="h-7 w-7" />}
          </button>

          <main className="flex-grow">
            {currentView === 'main' && (
              <>
                <HeroSection setCurrentView={handleSetCurrentView} isChatHidden={showStickyChat} />
                <BlogSection posts={posts} setCurrentView={handleSetCurrentView} setSelectedItemId={handleSetSelectedItemId} />
                <NewsSection newsArticles={newsArticles} setCurrentView={handleSetCurrentView} setSelectedItemId={handleSetSelectedItemId} />
                <ResearchSection researchPapers={researchPapers} setCurrentView={handleSetCurrentView} setSelectedItemId={handleSetSelectedItemId} />
                <BusinessSection businessStories={businessStories} setCurrentView={handleSetCurrentView} setSelectedItemId={handleSetSelectedItemId} /> 
                <ConnectSection />
              </>
            )}
            {currentView === 'about' && <AboutUsSection />}
            {currentView === 'mission' && <OurMissionSection />}
            {currentView === 'careers' && <CareersSection vacancies={vacancies} setCurrentView={handleSetCurrentView} setSelectedItemId={handleSetSelectedItemId} />}
            
            {currentView === 'businessLanding' && <BusinessLandingSection businessStories={businessStories} setCurrentView={handleSetCurrentView} setSelectedItemId={handleSetSelectedItemId} />}
            {currentView === 'businessServices' && <BusinessServicesSection serviceItems={serviceItems} clientLogos={clientLogos} />}
            
            {currentView === 'educationBusiness' && <EducationBusinessSection businessCourses={businessCourses} />}
            {currentView === 'educationStudents' && <EducationStudentsSection studentPrograms={studentPrograms} />}
            
            {currentView === 'researchAll' && <ResearchAllSection researchPapers={researchPapers} setCurrentView={handleSetCurrentView} setSelectedItemId={handleSetSelectedItemId} />}
            {currentView === 'newsAll' && <NewsAllSection newsArticles={newsArticles} setCurrentView={handleSetCurrentView} setSelectedItemId={handleSetSelectedItemId} />}
            {currentView === 'storiesAll' && <StoriesAllSection posts={posts} setCurrentView={handleSetCurrentView} setSelectedItemId={handleSetSelectedItemId} />}
            
            {currentView === 'acceleratorAbout' && <AcceleratorAboutSection />}
            {currentView === 'acceleratorProjects' && <AcceleratorProjectsSection acceleratorProjects={acceleratorProjects} />}
            {currentView === 'acceleratorInvestment' && <AcceleratorInvestmentSection investmentProjects={investmentProjects} />}

            {/* Detail Pages */}
            {currentView === 'blogPostDetail' && selectedItemId && (
              <BlogPostDetail 
                itemId={selectedItemId} 
                allPosts={posts}
                setCurrentView={handleSetCurrentView} 
                setSelectedItemId={handleSetSelectedItemId} 
              />
            )}
            {currentView === 'newsArticleDetail' && selectedItemId && (
              <NewsArticleDetail 
                itemId={selectedItemId} 
                allNews={newsArticles}
                setCurrentView={handleSetCurrentView} 
                setSelectedItemId={handleSetSelectedItemId} 
              />
            )}
            {currentView === 'researchPaperDetail' && selectedItemId && (
              <ResearchPaperDetail 
                itemId={selectedItemId} 
                allResearchPapers={researchPapers}
                setCurrentView={handleSetCurrentView} 
                setSelectedItemId={handleSetSelectedItemId} 
              />
            )}
            {currentView === 'businessStoryDetail' && selectedItemId && (
              <BusinessStoryDetail 
                itemId={selectedItemId} 
                allBusinessStories={businessStories} 
                setCurrentView={handleSetCurrentView} 
                setSelectedItemId={handleSetSelectedItemId} 
              />
            )}
            {currentView === 'vacancyDetail' && selectedItemId && (
              <VacancyDetail 
                itemId={selectedItemId} 
                allVacancies={vacancies}
                setCurrentView={handleSetCurrentView} 
                setSelectedItemId={handleSetSelectedItemId} 
              />
            )}
            {/* Legal Pages */}
            {currentView === 'termsOfUse' && <TermsOfUseSection setCurrentView={handleSetCurrentView} />}
            {currentView === 'privacyPolicy' && <PrivacyPolicySection setCurrentView={handleSetCurrentView} />}
          </main>

          <footer className="py-6 bg-white text-slate-600">
            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center md:text-left">
                <div className="md:text-left">
                  <h3 className="text-sm font-semibold text-slate-500 mb-3 font-quicksand">{FOOTER_CONTENT.legalTitle}</h3>
                  <ul className="space-y-2 text-xs">
                    {FOOTER_CONTENT.legalLinks.map(link => (
                      <li key={link.href}>
                        <a 
                          href={link.href} 
                          onClick={(e) => {
                            e.preventDefault();
                            handleSetCurrentView(link.targetView);
                          }}
                          className="text-slate-600 hover:text-black transition-colors cursor-pointer"
                        >
                          {link.text}
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="flex flex-col items-center text-center">
                  <Logo width={60} height={60} className="mb-3" />
                  <p className="font-quicksand text-sm font-semibold text-slate-800">{FOOTER_CONTENT.copyrightText(new Date().getFullYear())}</p>
                  <p className="text-xs mt-2 text-slate-500">{FOOTER_CONTENT.tagline}</p>
                </div>
                <div className="md:text-right">
                  <h3 className="text-sm font-semibold text-slate-500 mb-3 font-quicksand">{FOOTER_CONTENT.socialTitle}</h3>
                  <div className="flex justify-center md:justify-end space-x-4">
                    {FOOTER_CONTENT.socialLinks.map(social => (
                      <a 
                        key={social.name} 
                        href={social.href} 
                        target="_blank" 
                        rel="noopener noreferrer" 
                        aria-label={social.ariaLabel} 
                        className="text-slate-600 hover:text-black transition-colors"
                      >
                        <social.icon className="w-5 h-5" />
                      </a>
                    ))}
                  </div>
                  <div className="mt-6 text-xs">
                    <p>{FOOTER_CONTENT.address}</p>
                    <p className="mt-1">
                      <a href={FOOTER_CONTENT.emailHref} className="text-slate-600 hover:text-black transition-colors">
                        {FOOTER_CONTENT.email}
                      </a>
                    </p>
                    {FOOTER_CONTENT.companyName && FOOTER_CONTENT.companyInn && (
                      <p className="mt-1">
                        {FOOTER_CONTENT.companyName} <span className="text-slate-500">ИНН:</span> {FOOTER_CONTENT.companyInn}
                      </p>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </footer>
        </div>
      </div>
       {/* Sticky Chat Area */}
      <div 
        ref={stickyChatRef}
        className={`fixed bottom-0 left-0 right-0 z-20 transition-all duration-500 ease-in-out ${showStickyChat ? 'translate-y-0' : 'translate-y-full'}`}
      >
        <div className={`transition-all duration-300 ease-in-out ${isDesktopSidebarCollapsed ? 'md:pl-0' : 'md:pl-72'}`}>
            {isStickyChatExpanded ? (
                 <div className="p-4 bg-gradient-to-t from-white via-white/95 to-transparent pointer-events-none">
                    <div className="w-full max-w-3xl mx-auto pointer-events-auto">
                        <ChatInput setCurrentView={setCurrentView} isSticky={true} autoFocusOnMount={true} />
                    </div>
                 </div>
            ) : (
                <div className="w-full p-4 flex justify-center pointer-events-none">
                    <button
                        onClick={() => setIsStickyChatExpanded(true)}
                        className="pointer-events-auto bg-slate-100 text-slate-800 font-quicksand font-semibold px-6 py-3 rounded-full shadow-lg hover:bg-slate-200 transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2"
                        aria-label="Открыть чат"
                    >
                        Поможем найти
                    </button>
                </div>
            )}
        </div>
      </div>
    </div>
  );
};

export default App;