/* ========================================
   App Component — padhle (Refined Workspace)
   ======================================== */

import { useState } from "react";
import Sidebar from "./components/sidebar/Sidebar";
import TopNav from "./components/top-nav/TopNav";
import ChatHistory from "./components/chat-history/ChatHistory";
import ChatInput from "./components/chat-input/ChatInput";

function App() {
  const [messages, setMessages] = useState([]);
  const [activeSubject, setActiveSubject] = useState("Choose Subject");
  const [activeChat, setActiveChat] = useState(null);
  const [activeGrade, setActiveGrade] = useState("Choose standard");
  const [activeChapter, setActiveChapter] = useState("Choose Chapter");

  const handleSend = (text) => {
    if (!text.trim()) return;

    setMessages((prev) => [...prev, { id: Date.now(), role: "user", text }]);

    setTimeout(() => {
      setMessages((prev) => [
        ...prev,
        {
          id: Date.now() + 1,
          role: "assistant",
          text: "This is a simulated response. Connect the backend to get real AI answers!",
        },
      ]);
    }, 1000);
  };

  const handlePromptClick = (promptText) => {
    handleSend(promptText);
  };

  return (
    <div className="page">
      <Sidebar
        activeSubject={activeSubject}
        onSubjectChange={setActiveSubject}
        activeChat={activeChat}
        onChatSelect={setActiveChat}
      />

      <div className="page__main">
        <TopNav
          activeGrade={activeGrade}
          onGradeChange={setActiveGrade}
          activeSubject={activeSubject}
          onSubjectChange={setActiveSubject}
          activeChapter={activeChapter}
          onChapterChange={setActiveChapter}
        />

        <div className="main-content">
          <ChatHistory
            messages={messages}
            activeSubject={activeSubject}
            activeGrade={activeGrade}
            activeChapter={activeChapter}
            onPromptClick={handlePromptClick}
          />
        </div>

        <ChatInput
          onSend={handleSend}
          placeholder={`Ask anything about ${activeGrade} ${activeSubject} – ${activeChapter}...`}
        />
      </div>
    </div>
  );
}

export default App;