"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');
  const conversationRef = useRef<HTMLDivElement>(null);

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

  // Synchronize state with local storage on mount
  useEffect(() => {
    if (typeof localStorage !== 'undefined') {
      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");
    }
  }, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]);

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

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

  // Apply theme based on selectedTheme and color settings
  useEffect(() => {
    if (typeof localStorage !== 'undefined') {
      const savedTheme = localStorage.getItem('selectedTheme');
      if (savedTheme) {
        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;
        }
      }
    }
  }, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); // Watch color states and apply themes accordingly

  return (
    <>
      <Header
        toggleDivs={toggleDivs}
        showDivs={showDivs}
        onViewChange={handleViewChange}
        showHistoryModelsToggle={true}
        showToggle={view === 'AI'}
      />
      <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 />}
        </div>
      </div>
    </>
  );
};

export default LandingPage;