"use client"; // Add this at the top to mark this file as a Client Component

import React, { useState, useEffect, useRef } from 'react';
import './styles.css'; // Make sure this matches your CSS file path

const App = () => {
  const [showDivs, setShowDivs] = useState(true); // Default to true to show divs on load
  const conversationRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Scroll to bottom when the component mounts or updates
    const scrollToBottom = () => {
      const conversation = conversationRef.current;
      if (conversation) {
        conversation.scrollTop = conversation.scrollHeight;
      }
    };

    scrollToBottom(); // Scroll to the bottom when the page loads

    // Use MutationObserver to efficiently observe changes in the conversation element
    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);
  };

  return (
    <div className="App">
      <header>
        <div className="header-menu">
          <ul>
            <li>
              <a href="/">
                <img src="/img/logo.png" alt="logo" />
              </a>
            </li>
            <li>
              <a href="/documentation">Documentation</a>
            </li>
            <li>
              <a href="/faq">FAQ</a>
            </li>
            <li>
              <button onClick={toggleDivs}>{showDivs ? "Hide Divs" : "Show Divs"}</button>
            </li>
          </ul>
        </div>
      </header>

      <div className="container">
        {showDivs && (
          <div className="history-background">
            <div className="history">
              <ul>
                <li>
                  <a href="#">history1</a>
                </li>
                {/* Add more history items here */}
              </ul>
            </div>
          </div>
        )}

        {showDivs && (
          <div className="model-background">
            <div className="models">
              <div className="titel">
                <h1>Different AI models</h1>
              </div>
              <form action="">
                <div className="grid">
                  <button className="code-model model-box">
                    <div className="overlay">
                      <h3>Code</h3>
                      <img src="/img/wifi.svg" alt="Wi-Fi" />
                    </div>
                  </button>
                  <button className="math-model model-box">
                    <div className="overlay">
                      <h3>Math</h3>
                      <img src="/img/nowifi.svg" alt="No Wi-Fi" />
                    </div>
                  </button>
                  <button className="language-model model-box">
                    <div className="overlay">
                      <h3>Language</h3>
                    </div>
                  </button>
                  <button className="default-model model-box">
                    <div className="overlay">
                      <h3>Default</h3>
                    </div>
                  </button>
                  <button className="default-model model-box">
                    <div className="overlay">
                      <h3>Default</h3>
                    </div>
                  </button>
                  <button className="default-model model-box">
                    <div className="overlay">
                      <h3>Default</h3>
                    </div>
                  </button>
                  <button className="default-model model-box">
                    <div className="overlay">
                      <h3>Default</h3>
                    </div>
                  </button>
                </div>
              </form>
            </div>
          </div>
        )}

        <div className="output">
          <div className="conversation resize" ref={conversationRef}>
            {/* Render messages here */}
            {/* Replace the following example with dynamic rendering */}
            <div className="user-message">User: Example message</div>
            <div className="ai-message">AI: Example response</div>
          </div>
        </div>

        <form className="input" method="POST" action="" id="inputForm">
          <input
            type="text"
            name="user_message"
            placeholder="Type your message here..."
          />
          <button type="submit" name="option" value="chat">
            <img src="/img/send.svg" alt="send" />
          </button>
          <button type="submit" name="option" value="voice">
            <img src="/img/microphone.svg" alt="microphone" />
          </button>
        </form>
      </div>
    </div>
  );
};

export default App;