"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 './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);

  useEffect(() => {
    const scrollToBottom = () => {
      const conversation = conversationRef.current;
      if (conversation) {
        conversation.scrollTop = conversation.scrollHeight;
      }
    };

    scrollToBottom();

    const observer = new MutationObserver(scrollToBottom);
    if (conversationRef.current) {
      observer.observe(conversationRef.current, {
        childList: true,
        subtree: true,
      });
    }

    return () => {
      if (conversationRef.current) {
        observer.disconnect();
      }
    };
  }, []);

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

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

  return (
    <div className="container">
      <Header
        toggleDivs={toggleDivs}
        showDivs={showDivs}
        onViewChange={handleViewChange}
        showHistoryModelsToggle={true}
        showToggle={view === 'AI'} // Pass the condition here
      />
      <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;