import React, { useState } from "react";
import axios from "axios";
import "./Chatbot.css";

const Chatbot = ({ context }) => {
  const [messages, setMessages] = useState([
    {
      role: "assistant",
      content:
        "Hi! I’m here to help you with suggestions, analyzing career options, and any questions you have about your career. How can I assist you today?",
    },
  ]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);

  // NEW: track whether the chatbot is minimized or expanded
  const [isMinimized, setIsMinimized] = useState(false);

  const toggleMinimize = () => {
    setIsMinimized((prev) => !prev);
  };

  const sendMessage = async (content) => {
    const userMessage = { role: "user", content };

    // Build your context summary
    const contextSummary = `
  You are an advanced AI career advisor for AptivaAI.
  Your role is to provide analysis based on user data:
  - ...
  (Continue with your existing context data as before)
  `;

    // Combine with existing messages
    const messagesToSend = [
      { role: "system", content: contextSummary },
      ...messages,
      userMessage,
    ];

    try {
      setLoading(true);
      const response = await axios.post(
        "https://api.openai.com/v1/chat/completions",
        {
          model: "gpt-3.5-turbo",
          messages: messagesToSend,
          temperature: 0.7,
        },
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${process.env.REACT_APP_OPENAI_API_KEY}`,
          },
        }
      );

      const botMessage = response.data.choices[0].message;
      // The returned message has {role: "assistant", content: "..."}
      setMessages([...messages, userMessage, botMessage]);
    } catch (error) {
      console.error("Chatbot Error:", error);
      setMessages([
        ...messages,
        userMessage,
        {
          role: "assistant",
          content: "Error: Unable to fetch response. Please try again.",
        },
      ]);
    } finally {
      setLoading(false);
      setInput("");
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (input.trim()) {
      sendMessage(input.trim());
    }
  };

  return (
    <div className={`chatbot-container ${isMinimized ? "minimized" : ""}`}>
      {/* Header Bar for Minimize/Maximize */}
      <div className="chatbot-header">
        <span className="chatbot-title">Career Chatbot</span>
        <button className="minimize-btn" onClick={toggleMinimize}>
          {isMinimized ? "▼" : "▲"}
        </button>
      </div>

      {/* If not minimized, show the chat messages and input */}
      {!isMinimized && (
        <>
          <div className="chat-messages">
            {messages.map((msg, index) => {
              // default to 'bot' if role not user or assistant
              const roleClass =
                msg.role === "user" ? "user" : msg.role === "assistant" ? "bot" : "bot";
              return (
                <div key={index} className={`message ${roleClass}`}>
                  {msg.content}
                </div>
              );
            })}
            {loading && <div className="message bot typing">Typing...</div>}
          </div>

          <form onSubmit={handleSubmit} className="chat-input-form">
            <input
              type="text"
              placeholder="Ask a question..."
              value={input}
              onChange={(e) => setInput(e.target.value)}
              disabled={loading}
            />
            <button type="submit" disabled={loading}>
              Send
            </button>
          </form>
        </>
      )}
    </div>
  );
};

export default Chatbot;