"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(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");

  // Synchronize state with local storage on mount
  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') => {
    setView(view);
    if (view !== 'AI') {
      setShowDivs(false);
    }
  };

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

  // Apply theme based on selectedTheme and color settings
  useEffect(() => {
    const savedTheme = localStorage.getItem('selectedTheme');
    if (savedTheme) {
      setSelectedTheme(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;