"use client"
// LandingPage.tsx
import React, { useState, useEffect, useRef } from 'react';
import Header from './Header';
import History from './History';
import Models from './Models';
import Conversation from './Conversation';
import InputForm from './InputForm';
import './styles/master.css';

const LandingPage: React.FC = () => {
  const [showDivs, setShowDivs] = useState(true);
  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 messages = [
    'User: Hello!',
    'AI: Hi there!',
    'User: How are you?',
    'AI: I’m good, thank you!'
  ];

  const handleResendClick = () => {
    console.log('Resend button clicked');
    // Handle resend action
  };

  const handleEditClick = () => {
    console.log('Edit button clicked');
    // Handle edit action
  };

  const handleCopyClick = () => {
    console.log('Copy button clicked');
    // Handle copy action
  };

  return (
    <div className="App">
      <Header toggleDivs={toggleDivs} showDivs={showDivs} />
      <div className="container">
        <div className={`left-panel ${showDivs ? '' : 'hidden'}`}>
          <History />
          <Models />
        </div>
        <div className={`conversation-container ${showDivs ? 'expanded' : 'collapsed'}`}>
          <Conversation
            ref={conversationRef}
            messages={messages}
            onResendClick={handleResendClick}
            onEditClick={handleEditClick}
            onCopyClick={handleCopyClick}
          />
          <InputForm />
        </div>
      </div>
    </div>
  );
};

export default LandingPage;