/**
 * Live Chatbot Widget — Tidio-inspired greeting with quick-reply buttons
 * Shows: "What can we help you with today?" + Orders, Shipping, Returning, Cancelling buttons
 */
import { useState, useRef, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { trpc } from "@/lib/trpc";
import { Bot, X, Send, Loader2, User, Headphones, Sparkles, ChevronDown, MoreVertical, Star } from "lucide-react";
import { Streamdown } from "streamdown";

const QUICK_REPLIES = [
  { label: "Orders", value: "I need help with my order" },
  { label: "Shipping", value: "I have a shipping question" },
  { label: "Returning", value: "I want to return an item" },
  { label: "Cancelling", value: "I need to cancel my order" },
];

export default function ChatbotWidgetLive() {
  const { t } = useTranslation();
  const [isOpen, setIsOpen] = useState(false);
  const [inputText, setInputText] = useState("");
  const [sessionId, setSessionId] = useState<string | null>(null);
  const [localMessages, setLocalMessages] = useState<Array<{ id: number; sender: string; content: string; createdAt: string }>>([]);
  const [isTyping, setIsTyping] = useState(false);
  const [showQuickReplies, setShowQuickReplies] = useState(true);
  const [pendingMessage, setPendingMessage] = useState<string | null>(null);
  const [csatRating, setCsatRating] = useState<number | null>(null);
  const [csatHover, setCsatHover] = useState<number | null>(null);
  const [csatSubmitted, setCsatSubmitted] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const isNearBottomRef = useRef(true);

  const startSession = trpc.chat.startSession.useMutation({
    onSuccess: (data) => {
      setSessionId(data.sessionId);
      if (pendingMessage) {
        sendMessage.mutate({ sessionId: data.sessionId, content: pendingMessage });
        setPendingMessage(null);
      }
    },
  });

  const { data: messagesData } = trpc.chat.getMessages.useQuery(
    { sessionId: sessionId || "" },
    { enabled: !!sessionId, refetchInterval: 3000 }
  );

  const sendMessage = trpc.chat.sendMessage.useMutation({
    onSuccess: () => { setIsTyping(false); },
    onError: () => { setIsTyping(false); },
  });

  const rateSatisfaction = trpc.chat.rateSatisfaction.useMutation({
    onSuccess: () => { setCsatSubmitted(true); },
  });

  // Pre-fill rating if already submitted in a previous session
  useEffect(() => {
    if (messagesData?.csatRating != null && !csatSubmitted) {
      setCsatRating(messagesData.csatRating);
      setCsatSubmitted(true);
    }
  }, [messagesData?.csatRating]);

  // Sync server messages to local state
  useEffect(() => {
    if (messagesData?.messages) {
      setLocalMessages(messagesData.messages.map((m: any) => ({
        id: m.id,
        sender: m.sender,
        content: m.content,
        createdAt: m.createdAt?.toString() || new Date().toISOString(),
      })));
    }
  }, [messagesData]);

  // Auto-scroll — only when user is already near the bottom
  useEffect(() => {
    if (isNearBottomRef.current) {
      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
    }
  }, [localMessages, isTyping]);

  const handleScroll = () => {
    const el = scrollContainerRef.current;
    if (!el) return;
    isNearBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 100;
  };

  const handleOpen = () => {
    setIsOpen(true);
    if (!sessionId) {
      startSession.mutate({});
    }
  };

  const handleSend = (text?: string) => {
    const content = text || inputText.trim();
    if (!content || !sessionId || isTyping) return;
    setInputText("");
    setIsTyping(true);
    setShowQuickReplies(false);

    // Always scroll to bottom when user sends a message
    isNearBottomRef.current = true;

    // Optimistically add user message
    setLocalMessages(prev => [...prev, {
      id: Date.now(),
      sender: "visitor",
      content,
      createdAt: new Date().toISOString(),
    }]);

    sendMessage.mutate({ sessionId, content });
  };

  const handleQuickReply = (reply: typeof QUICK_REPLIES[0]) => {
    const text = reply.value;
    setShowQuickReplies(false);
    setIsTyping(true);
    isNearBottomRef.current = true;
    setLocalMessages(prev => [...prev, {
      id: Date.now(), sender: "visitor", content: text, createdAt: new Date().toISOString(),
    }]);
    if (sessionId) {
      sendMessage.mutate({ sessionId, content: text });
    } else {
      // Session still starting — queue until onSuccess fires
      setPendingMessage(text);
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  // Determine if we should show the greeting state (no user messages yet)
  const hasUserMessages = localMessages.some(m => m.sender === "visitor");

  return (
    <>
      {/* Chat window */}
      {isOpen && (
        <div
          className="fixed bottom-20 right-4 z-50 w-[380px] max-w-[calc(100vw-2rem)] rounded-2xl shadow-2xl overflow-hidden flex flex-col"
          style={{
            height: "520px",
            background: "#FFFBEB",
            border: "1px solid #e7e0d5",
            boxShadow: "0 20px 60px rgba(0,0,0,0.15)",
          }}
        >
          {/* Header — Tidio-inspired gradient */}
          <div
            className="px-4 py-3 flex items-center justify-between relative"
            style={{
              background: "linear-gradient(135deg, #14532D 0%, #166534 50%, #15803d 100%)",
            }}
          >
            <div className="flex items-center gap-2.5">
              <div className="relative">
                <div className="w-10 h-10 rounded-full flex items-center justify-center overflow-hidden" style={{ background: "rgba(255,255,255,0.2)" }}>
                  <Sparkles className="w-5 h-5 text-white" />
                </div>
                {/* Online indicator */}
                <div className="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full border-2 border-green-800" style={{ background: "#4ade80" }} />
              </div>
              <div>
                <div className="text-sm font-semibold text-white" style={{ fontFamily: "'Source Sans 3', sans-serif" }}>
                  Ellie
                </div>
                <div className="flex items-center gap-1">
                  <div className="w-1.5 h-1.5 rounded-full" style={{ background: "#4ade80" }} />
                  <span className="text-[10px] text-green-200">
                    {messagesData?.status === "escalated" ? t("widget.statusConnected") : t("widget.statusOnline")}
                  </span>
                </div>
              </div>
            </div>
            <div className="flex items-center gap-1">
              <button className="p-1.5 rounded-lg hover:bg-white/10 transition-colors">
                <MoreVertical className="w-4 h-4 text-white/70" />
              </button>
              <button onClick={() => setIsOpen(false)} className="p-1.5 rounded-lg hover:bg-white/10 transition-colors">
                <ChevronDown className="w-4 h-4 text-white/70" />
              </button>
            </div>
          </div>

          {/* Messages */}
          <div ref={scrollContainerRef} onScroll={handleScroll} className="flex-1 overflow-y-auto p-3 space-y-3">
            {startSession.isPending ? (
              <div className="flex items-center justify-center py-8">
                <Loader2 className="w-5 h-5 animate-spin" style={{ color: "#14532D" }} />
                <span className="ml-2 text-sm" style={{ color: "#78716C" }}>{t("widget.loading")}</span>
              </div>
            ) : (
              <>
                {/* Greeting bubble — always shown at top */}
                {!hasUserMessages && (
                  <div className="flex gap-2 justify-start">
                    <div
                      className="w-6 h-6 rounded-full flex items-center justify-center shrink-0 mt-1"
                      style={{ background: "#14532D", color: "#fff" }}
                    >
                      <Sparkles className="w-3 h-3" />
                    </div>
                    <div
                      className="max-w-[80%] px-3 py-2.5 rounded-xl text-[13px] leading-relaxed"
                      style={{
                        background: "#f5f0e8",
                        color: "#292524",
                        fontFamily: "'Source Sans 3', sans-serif",
                        borderBottomLeftRadius: "4px",
                      }}
                    >
                      <span>{t("widget.greeting")}</span>
                    </div>
                  </div>
                )}

                {/* Quick reply buttons — Tidio-style */}
                {showQuickReplies && !hasUserMessages && (
                  <div className="flex flex-wrap gap-2 justify-center py-2">
                    {QUICK_REPLIES.map((reply) => (
                      <button
                        key={reply.label}
                        onClick={() => handleQuickReply(reply)}
                        disabled={isTyping}
                        className="px-4 py-2 rounded-full text-[13px] font-medium transition-all hover:shadow-md active:scale-95 disabled:opacity-50"
                        style={{
                          background: "#fff",
                          color: "#0369a1",
                          border: "1.5px solid #0369a1",
                          fontFamily: "'Source Sans 3', sans-serif",
                        }}
                      >
                        {t(`quickReplies.${reply.label.toLowerCase()}`)}
                      </button>
                    ))}
                  </div>
                )}

                {/* Conversation messages */}
                {localMessages.map((msg) => {
                  const isVisitor = msg.sender === "visitor";
                  const isBot = msg.sender === "bot";
                  return (
                    <div key={msg.id} className={`flex gap-2 ${isVisitor ? "justify-end" : "justify-start"}`}>
                      {!isVisitor && (
                        <div
                          className="w-6 h-6 rounded-full flex items-center justify-center shrink-0 mt-1"
                          style={{ background: isBot ? "#14532D" : "#C2410C", color: "#fff" }}
                        >
                          {isBot ? <Sparkles className="w-3 h-3" /> : <Headphones className="w-3 h-3" />}
                        </div>
                      )}
                      <div
                        className="max-w-[80%] px-3 py-2 rounded-xl text-[13px] leading-relaxed"
                        style={{
                          background: isVisitor ? "#14532D" : "#f5f0e8",
                          color: isVisitor ? "#fff" : "#292524",
                          fontFamily: "'Source Sans 3', sans-serif",
                          borderBottomRightRadius: isVisitor ? "4px" : undefined,
                          borderBottomLeftRadius: !isVisitor ? "4px" : undefined,
                        }}
                      >
                        {isBot || msg.sender === "agent" ? (
                          <div className="prose prose-sm max-w-none" style={{ color: "inherit" }}>
                            <Streamdown>{msg.content}</Streamdown>
                          </div>
                        ) : (
                          msg.content
                        )}
                      </div>
                      {isVisitor && (
                        <div className="w-6 h-6 rounded-full flex items-center justify-center shrink-0 mt-1" style={{ background: "#78716C20", color: "#78716C" }}>
                          <User className="w-3 h-3" />
                        </div>
                      )}
                    </div>
                  );
                })}
                {/* CSAT rating card — shown when conversation is resolved */}
                {messagesData?.status === "resolved" && (
                  <div className="mx-1 mt-2 p-3 rounded-xl text-center" style={{ background: "#f5f0e8", border: "1px solid #e7e0d5" }}>
                    {csatSubmitted ? (
                      <p className="text-[12px] font-medium" style={{ color: "#14532D" }}>
                        {t("widget.csatThanks")}
                      </p>
                    ) : (
                      <>
                        <p className="text-[12px] font-medium mb-2" style={{ color: "#292524" }}>
                          {t("widget.csatPrompt")}
                        </p>
                        <div className="flex justify-center gap-1 mb-2">
                          {[1, 2, 3, 4, 5].map(star => (
                            <button
                              key={star}
                              onMouseEnter={() => setCsatHover(star)}
                              onMouseLeave={() => setCsatHover(null)}
                              onClick={() => {
                                setCsatRating(star);
                                if (sessionId) {
                                  rateSatisfaction.mutate({ sessionId, rating: star });
                                }
                              }}
                              className="p-0.5 transition-transform hover:scale-110"
                              aria-label={`Rate ${star} star${star > 1 ? "s" : ""}`}
                            >
                              <Star
                                className="w-6 h-6"
                                style={{
                                  fill: (csatHover ?? csatRating ?? 0) >= star ? "#f59e0b" : "none",
                                  color: (csatHover ?? csatRating ?? 0) >= star ? "#f59e0b" : "#d6d3d1",
                                }}
                              />
                            </button>
                          ))}
                        </div>
                        <p className="text-[10px]" style={{ color: "#a8a29e" }}>{t("widget.csatTapStar")}</p>
                      </>
                    )}
                  </div>
                )}
              </>
            )}
            {isTyping && (
              <div className="flex gap-2 items-start">
                <div className="w-6 h-6 rounded-full flex items-center justify-center shrink-0" style={{ background: "#14532D", color: "#fff" }}>
                  <Sparkles className="w-3 h-3" />
                </div>
                <div className="px-3 py-2 rounded-xl" style={{ background: "#f5f0e8" }}>
                  <div className="flex gap-1">
                    <span className="w-1.5 h-1.5 rounded-full animate-bounce" style={{ background: "#a8a29e", animationDelay: "0ms" }} />
                    <span className="w-1.5 h-1.5 rounded-full animate-bounce" style={{ background: "#a8a29e", animationDelay: "150ms" }} />
                    <span className="w-1.5 h-1.5 rounded-full animate-bounce" style={{ background: "#a8a29e", animationDelay: "300ms" }} />
                  </div>
                </div>
              </div>
            )}
            <div ref={messagesEndRef} />
          </div>

          {/* Input area */}
          <div className="p-3 border-t" style={{ borderColor: "#e7e0d5" }}>
            {messagesData?.status === "resolved" ? (
              <div className="text-center py-1.5">
                <span className="text-xs" style={{ color: "#a8a29e" }}>{t("widget.conversationClosed")}</span>
              </div>
            ) : (
              <>
                {showQuickReplies && !hasUserMessages && (
                  <div className="text-center py-1">
                    <span className="text-xs" style={{ color: "#a8a29e", fontFamily: "'Source Sans 3', sans-serif" }}>
                      {t("widget.hitButtons")}
                    </span>
                  </div>
                )}
                <div className="flex gap-2">
                  <input
                    type="text"
                    value={inputText}
                    onChange={(e) => setInputText(e.target.value)}
                    onKeyDown={handleKeyDown}
                    placeholder={t("widget.placeholder")}
                    className="flex-1 px-3 py-2 rounded-xl text-sm border"
                    style={{ borderColor: "#e7e0d5", fontFamily: "'Source Sans 3', sans-serif", background: "#fff" }}
                    disabled={isTyping || startSession.isPending}
                  />
                  <button
                    onClick={() => handleSend()}
                    disabled={!inputText.trim() || isTyping || !sessionId}
                    className="w-9 h-9 rounded-xl flex items-center justify-center transition-all disabled:opacity-40"
                    style={{ background: "#14532D", color: "#fff" }}
                  >
                    <Send className="w-4 h-4" />
                  </button>
                </div>
              </>
            )}
            <div className="text-center mt-2">
              <span className="text-[10px]" style={{ color: "#d6d3d1" }}>{t("widget.poweredBy")}</span>
            </div>
          </div>
        </div>
      )}

      {/* Floating button */}
      <button
        onClick={handleOpen}
        className="fixed bottom-4 right-4 z-50 w-14 h-14 rounded-full flex items-center justify-center shadow-lg transition-all hover:scale-105"
        style={{
          background: "#14532D",
          color: "#fff",
          boxShadow: "0 4px 20px rgba(20, 83, 45, 0.35)",
        }}
      >
        {isOpen ? <X className="w-5 h-5" /> : <Bot className="w-6 h-6" />}
      </button>
    </>
  );
}
