import { useState } from "react";
import { MessageCircle, X, Send } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";

interface Message {
  role: "user" | "bot";
  content: string;
}

const FAQ: Record<string, string> = {
  "book": "To book a room, please call us at 08127095901 or 08163195952, or visit the 'Book A Room' page on our website. We have Deluxe Suites, Executive Rooms, Standard Rooms and Premium Suites available.",
  "room": "We offer Deluxe Suites, Executive Rooms, Standard Rooms, and Premium Suites. Each room comes with AC, TV, Wi-Fi, and en-suite bathroom. Call 08127095901 for rates.",
  "price": "Room rates vary by type and season. Please call 08127095901 or 08163195952 for current pricing and availability.",
  "food": "Our restaurant, TheMewsCafe, serves both local Nigerian and international dishes. You can order online through our website or call 08127095901.",
  "order": "To place a food order from TheMewsCafe, visit our 'Order Online' page or call us at 08127095901. We serve breakfast, lunch, and dinner.",
  "address": "We are located at Plot 1079, Umar Shuaibu Avenue, Utako, Abuja, Nigeria.",
  "location": "We are located at Plot 1079, Umar Shuaibu Avenue, Utako, Abuja, Nigeria.",
  "contact": "You can reach us at 08127095901 or 08163195952. Email: info@tranquilmewshotel.com",
  "pool": "Yes! We have a beautiful pool area with lounge chairs, available for all hotel guests.",
  "event": "We host meetings, events, and conferences. Contact us at 08127095901 to discuss your event requirements.",
  "check": "Standard check-in is 2:00 PM and check-out is 12:00 PM. Early check-in and late check-out are subject to availability.",
  "wifi": "Complimentary Wi-Fi is available throughout the hotel for all guests.",
  "parking": "Free parking is available for hotel guests.",
  "restaurant": "TheMewsCafe is our in-house restaurant offering a variety of local and international cuisines. Open from 7AM to 11PM daily.",
  "menu": "Our menu includes Nigerian dishes (Jollof Rice, Egusi, Pounded Yam), Continental, Chinese, and Indian cuisines. Visit the Menu page for full details.",
  "hello": "Hello! Welcome to Tranquil Mews Hotel. How can I help you today? You can ask about rooms, booking, food orders, our facilities, or anything else!",
  "hi": "Hi there! Welcome to Tranquil Mews Hotel. How can I assist you? Feel free to ask about rooms, dining, events, or booking.",
};

function getResponse(input: string): string {
  const lower = input.toLowerCase();
  for (const [key, response] of Object.entries(FAQ)) {
    if (lower.includes(key)) return response;
  }
  return "Thank you for your interest in Tranquil Mews Hotel! For specific inquiries, please call us at 08127095901 or 08163195952. You can also ask me about rooms, booking, food orders, pool, events, location, or our restaurant.";
}

export default function Chatbot() {
  const [open, setOpen] = useState(false);
  const [messages, setMessages] = useState<Message[]>([
    { role: "bot", content: "Welcome to Tranquil Mews Hotel! 🏨 How can I help you today? Ask about rooms, booking, food orders, events, or anything else!" },
  ]);
  const [input, setInput] = useState("");

  const send = () => {
    if (!input.trim()) return;
    const userMsg: Message = { role: "user", content: input };
    const botMsg: Message = { role: "bot", content: getResponse(input) };
    setMessages((prev) => [...prev, userMsg, botMsg]);
    setInput("");
  };

  return (
    <>
      {/* Floating button */}
      <button
        onClick={() => setOpen(!open)}
        className="fixed bottom-6 right-6 z-50 w-14 h-14 rounded-full bg-primary text-primary-foreground flex items-center justify-center shadow-lg hover:scale-110 transition-transform"
      >
        {open ? <X size={24} /> : <MessageCircle size={24} />}
      </button>

      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0, y: 20, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 20, scale: 0.95 }}
            className="fixed bottom-24 right-6 z-50 w-80 sm:w-96 h-[28rem] flex flex-col glass-card overflow-hidden"
          >
            {/* Header */}
            <div className="p-4 bg-primary text-primary-foreground font-heading font-semibold text-lg">
              Tranquil Mews Hotel
            </div>

            {/* Messages */}
            <div className="flex-1 overflow-y-auto p-4 space-y-3">
              {messages.map((msg, i) => (
                <div key={i} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
                  <div className={`max-w-[80%] px-3 py-2 rounded-lg text-sm ${msg.role === "user" ? "bg-primary text-primary-foreground" : "bg-secondary text-secondary-foreground"}`}>
                    {msg.content}
                  </div>
                </div>
              ))}
            </div>

            {/* Input */}
            <div className="p-3 border-t border-border flex gap-2">
              <input
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && send()}
                placeholder="Ask about rooms, booking, food..."
                className="flex-1 bg-input text-foreground px-3 py-2 rounded-lg text-sm outline-none focus:ring-1 focus:ring-ring"
              />
              <button onClick={send} className="bg-primary text-primary-foreground p-2 rounded-lg hover:bg-primary/80 transition-colors">
                <Send size={16} />
              </button>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}