interstellar_ai/app/page.tsx

"use client";
import React, { useState, useEffect, useRef } from 'react';
import Header from './components/Header';
import AI from './components/AI';
import FAQ from './components/Faq'; // Ensure the import path is correct
import Documentation from './components/Documentation'; // Ensure the import path is correct
import History from './components/History';
import Models from './components/Models';
import Credits from './components/Credits';
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme, applyBasicCustomTheme } from './components/settings/theme'
import './styles/master.css';

const LandingPage: React.FC = () => {
  const [showDivs, setShowDivs] = useState(true);
  const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here
  const conversationRef = useRef<HTMLDivElement>(null);


  const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
  const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
  const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
  const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
  const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");

  useEffect(()=>{
    setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe")
    setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe")
    setAccentColor(localStorage.getItem("accentColor") || "#fefefe")
    setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe")
    setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe")
  })
  

  const toggleDivs = () => {
    setShowDivs(prevState => !prevState);
  };

  const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => { // Added 'Credits' here as well
    setView(view);
    if (view !== 'AI') {
      setShowDivs(false);
    }
  };

  const [selectedTheme, setSelectedTheme] = useState<string>('');

    useEffect(() => {
      const savedTheme = localStorage.getItem('selectedTheme');
      if (savedTheme) {
        setSelectedTheme(savedTheme);
        // Apply the saved theme on initial load
        switch (savedTheme) {
          case 'IOMARKET':
            applyIOMarketTheme();
            break;
          case 'WHITE':
            applyWhiteTheme();
            break;
          case 'BLACK':
            applyBlackTheme();
            break;
          case 'CUSTOM':
            applyCustomTheme();
            break;
          case 'BASIC-CUSTOM':
            applyBasicCustomTheme(
                primaryColor,
                secondaryColor,
                accentColor,
                basicBackgroundColor,
                basicTextColor
              );
            break;
          default:
            applyIOMarketTheme();
            break;
        }
      }   
    }, []); // Runs only once when the component mounts          

  return (
    <>
        <Header
          toggleDivs={toggleDivs}
          showDivs={showDivs}
          onViewChange={handleViewChange}
          showHistoryModelsToggle={true}
          showToggle={view === 'AI'} // Pass the condition here
          />
      <div className="container">
        <div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}>
          {showDivs && (
            <div className="history-models">
              <History />
              <Models />
            </div>
          )}
        </div>
        <div className={`conversation-container ${showDivs ? 'collapsed' : 'expanded'}`} ref={conversationRef}>
          {view === 'AI' && <AI />}
          {view === 'FAQ' && <FAQ />}
          {view === 'Documentation' && <Documentation />}
          {view === 'Credits' && <Credits />} {/* Now Credits will render properly */}
        </div>
      </div>
    </>
  );
};

export default LandingPage;