import React, { useState } from "react";

function Chatbot() {
  const [isOpen, setIsOpen] = useState(false);
  const [messages, setMessages] = useState([
    { id: 1, text: "Hello! How can I help you with your financials today?", sender: "bot" }
  ]);
  const [input, setInput] = useState("");

  const handleSend = () => {
    if (!input.trim()) return;
    setMessages([...messages, { id: Date.now(), text: input, sender: "user" }]);
    setInput("");
    setTimeout(() => {
      setMessages(prev => [...prev, { id: Date.now(), text: "I'm a demo bot. I cannot answer queries right now.", sender: "bot" }]);
    }, 1000);
  };

  return (
    <>
      {/* Floating Icon */}
      <div 
        onClick={() => setIsOpen(!isOpen)}
        style={{
          position: "fixed",
          bottom: "20px",
          right: "20px",
          width: "50px",
          height: "50px",
          borderRadius: "25px",
          backgroundColor: "#3b82f6",
          color: "white",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
          cursor: "pointer",
          zIndex: 9999,
          fontSize: "24px"
        }}
      >
        💬
      </div>

      {/* Chat Window */}
      {isOpen && (
        <div style={{
          position: "fixed",
          bottom: "80px",
          right: "20px",
          width: "300px",
          height: "400px",
          backgroundColor: "white",
          borderRadius: "12px",
          boxShadow: "0 8px 24px rgba(0,0,0,0.2)",
          display: "flex",
          flexDirection: "column",
          zIndex: 9999,
          overflow: "hidden",
          border: "1px solid #e2e8f0"
        }}>
          {/* Header */}
          <div style={{
            backgroundColor: "#3b82f6",
            color: "white",
            padding: "12px 16px",
            fontWeight: "600",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center"
          }}>
            <span>AI Assistant</span>
            <button 
              onClick={() => setIsOpen(false)}
              style={{ background: "none", border: "none", color: "white", cursor: "pointer", fontSize: "16px" }}
            >
              ✕
            </button>
          </div>

          {/* Messages */}
          <div style={{
            flex: 1,
            padding: "16px",
            overflowY: "auto",
            display: "flex",
            flexDirection: "column",
            gap: "10px",
            backgroundColor: "#f8fafc"
          }}>
            {messages.map(msg => (
              <div key={msg.id} style={{
                alignSelf: msg.sender === "user" ? "flex-end" : "flex-start",
                backgroundColor: msg.sender === "user" ? "#3b82f6" : "#e2e8f0",
                color: msg.sender === "user" ? "white" : "#1e293b",
                padding: "8px 12px",
                borderRadius: "16px",
                maxWidth: "80%",
                fontSize: "13px"
              }}>
                {msg.text}
              </div>
            ))}
          </div>

          {/* Input Area */}
          <div style={{
            padding: "12px",
            borderTop: "1px solid #e2e8f0",
            display: "flex",
            gap: "8px",
            backgroundColor: "white"
          }}>
            <input 
              type="text"
              value={input}
              onChange={e => setInput(e.target.value)}
              onKeyPress={e => e.key === "Enter" && handleSend()}
              placeholder="Type a message..."
              style={{
                flex: 1,
                padding: "8px 12px",
                borderRadius: "20px",
                border: "1px solid #cbd5e1",
                outline: "none",
                fontSize: "13px"
              }}
            />
            <button 
              onClick={handleSend}
              style={{
                backgroundColor: "#3b82f6",
                color: "white",
                border: "none",
                borderRadius: "20px",
                padding: "0 14px",
                cursor: "pointer",
                fontWeight: "600",
                fontSize: "13px"
              }}
            >
              Send
            </button>
          </div>
        </div>
      )}
    </>
  );
}

export default Chatbot;