"use client";

import React, { useState, useRef, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/Button";
import SuggestedQuestions from "./suggested-questions";
import { useI18n, RTLText } from "./i18n-context";

export interface Message {
  id: string;
  content: string;
  sender: "user" | "ai";
  timestamp: Date;
  type?: "text" | "error" | "system";
  isStreaming?: boolean;
}

interface ChatDockProps {
  isOpen: boolean;
  onClose: () => void;
  onMinimize?: () => void;
  onSendMessage: (message: string) => void;
  messages: Message[];
  isTyping?: boolean;
  title?: string;
  placeholder?: string;
  className?: string;
  maxHeight?: string;
  position?: "bottom-right" | "bottom-left" | "center";
  showHeader?: boolean;
  allowMinimize?: boolean;
  disabled?: boolean;
  showSuggestedQuestions?: boolean;
  suggestedQuestionsContext?: string;
}

export function ChatDock({
  isOpen,
  onClose,
  onMinimize,
  onSendMessage,
  messages,
  isTyping = false,
  title,
  placeholder,
  className = "",
  maxHeight = "600px",
  position = "bottom-right",
  showHeader = true,
  allowMinimize = true,
  disabled = false,
  showSuggestedQuestions = true,
  suggestedQuestionsContext = "welcome",
}: ChatDockProps) {
  // Use i18n context
  const { t, isRTL, currentLanguage } = useI18n();

  // Use default values from translations if not provided
  const displayTitle = title || t("chatbot");
  const displayPlaceholder = placeholder || t("placeholder");

  const [inputValue, setInputValue] = useState("");
  const [isMinimized, setIsMinimized] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const messagesContainerRef = useRef<HTMLDivElement>(null);

  // Auto-scroll to bottom when new messages arrive
  useEffect(() => {
    if (messagesEndRef.current && !isMinimized) {
      messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
    }
  }, [messages, isMinimized]);

  // Focus input when dock opens
  useEffect(() => {
    if (isOpen && !isMinimized && inputRef.current) {
      const timer = setTimeout(() => {
        inputRef.current?.focus();
      }, 100);
      return () => clearTimeout(timer);
    }
  }, [isOpen, isMinimized]);

  const handleSendMessage = useCallback(() => {
    const trimmedValue = inputValue.trim();
    if (trimmedValue && !disabled) {
      onSendMessage(trimmedValue);
      setInputValue("");
    }
  }, [inputValue, onSendMessage, disabled]);

  const handleKeyPress = useCallback(
    (event: React.KeyboardEvent) => {
      if (event.key === "Enter" && !event.shiftKey) {
        event.preventDefault();
        handleSendMessage();
      }
    },
    [handleSendMessage]
  );

  const handleMinimize = useCallback(() => {
    setIsMinimized(!isMinimized);
    if (onMinimize) {
      onMinimize();
    }
  }, [isMinimized, onMinimize]);

  const getPositionClasses = () => {
    switch (position) {
      case "bottom-left":
        return "bottom-24 left-6";
      case "center":
        return "top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2";
      default:
        return "bottom-24 right-6";
    }
  };

  const formatTimestamp = (timestamp: Date) => {
    return timestamp.toLocaleTimeString("ko-KR", {
      hour: "2-digit",
      minute: "2-digit",
    });
  };

  const TypingIndicator = () => (
    <div className="flex items-center space-x-2 px-4 py-3">
      <div className="flex space-x-1">
        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce [animation-delay:-0.3s]"></div>
        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce [animation-delay:-0.15s]"></div>
        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
      </div>
      <RTLText className="text-sm text-gray-500">{t("typing")}</RTLText>
    </div>
  );

  const MessageBubble = ({ message }: { message: Message }) => {
    const isUser = message.sender === "user";
    const isError = message.type === "error";
    const isSystem = message.type === "system";

    return (
      <div
        className={`flex ${
          isUser ? "justify-end" : "justify-start"
        } mb-4 animate-in slide-in-from-bottom-1 duration-300`}
      >
        <div
          className={`
            max-w-[85%] px-4 py-3 rounded-2xl shadow-sm
            ${
              isUser
                ? "bg-blue-600 text-white rounded-br-md"
                : isError
                ? "bg-red-50 text-red-800 border border-red-200 rounded-bl-md"
                : isSystem
                ? "bg-gray-50 text-gray-600 border border-gray-200 rounded-bl-md"
                : "bg-gray-100 text-gray-800 rounded-bl-md"
            }
            ${message.isStreaming ? "animate-pulse" : ""}
          `}
        >
          <div className="text-sm leading-relaxed whitespace-pre-wrap break-words">
            {message.content}
          </div>
          <div
            className={`text-xs mt-1 opacity-70 ${
              isUser ? "text-blue-100" : "text-gray-500"
            }`}
          >
            {formatTimestamp(message.timestamp)}
          </div>
        </div>
      </div>
    );
  };

  if (!isOpen) return null;

  return (
    <div
      className={`
        fixed z-40 
        ${getPositionClasses()}
        w-96 
        bg-white 
        rounded-2xl 
        shadow-2xl 
        border 
        border-gray-200
        transition-all 
        duration-300 
        ease-in-out
        ${isMinimized ? "h-16" : ""}
        ${className}
      `}
      style={{ maxHeight: isMinimized ? "64px" : maxHeight }}
      role="dialog"
      aria-labelledby="chat-title"
      aria-describedby="chat-description"
    >
      {/* Header */}
      {showHeader && (
        <div className="flex items-center justify-between p-4 border-b border-gray-200 bg-gray-50 rounded-t-2xl">
          <div className="flex items-center space-x-3">
            <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
            <h3
              id="chat-title"
              className={`font-semibold text-gray-800 ${
                isRTL ? "text-right" : "text-left"
              }`}
              dir={isRTL ? "rtl" : "ltr"}
            >
              {displayTitle}
            </h3>
          </div>

          <div className="flex items-center space-x-2">
            {allowMinimize && (
              <Button
                onClick={handleMinimize}
                variant="outline"
                className="w-8 h-8 p-0 rounded-full border-gray-300"
                aria-label={isMinimized ? t("maximize") : t("minimize")}
              >
                <svg
                  className={`w-4 h-4 transition-transform duration-200 ${
                    isMinimized ? "rotate-180" : ""
                  }`}
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M19 9l-7 7-7-7"
                  />
                </svg>
              </Button>
            )}

            <Button
              onClick={onClose}
              variant="outline"
              className="w-8 h-8 p-0 rounded-full border-gray-300"
              aria-label={t("close")}
            >
              <svg
                className="w-4 h-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </Button>
          </div>
        </div>
      )}

      {/* Messages Container */}
      {!isMinimized && (
        <div
          ref={messagesContainerRef}
          className="flex-1 overflow-y-auto p-4 space-y-4"
          style={{ height: "calc(100% - 140px)" }}
          id="chat-description"
          aria-label={t("messageFromBot")}
        >
          {messages.length === 0 ? (
            <div className="text-center text-gray-500 py-8">
              <div className="text-4xl mb-4">💬</div>
              <RTLText className="text-sm mb-6">{t("welcomeMessage")}</RTLText>

              {/* Suggested Questions for first-time users */}
              {showSuggestedQuestions && (
                <div className="mt-6">
                  <SuggestedQuestions
                    onQuestionSelect={onSendMessage}
                    context={suggestedQuestionsContext}
                    variant="chips"
                    maxQuestions={3}
                    className="justify-center"
                  />
                </div>
              )}
            </div>
          ) : (
            messages.map((message) => (
              <MessageBubble key={message.id} message={message} />
            ))
          )}

          {isTyping && <TypingIndicator />}
          <div ref={messagesEndRef} />
        </div>
      )}

      {/* Input Area */}
      {!isMinimized && (
        <div className="p-4 border-t border-gray-200 bg-gray-50 rounded-b-2xl">
          <div className="flex items-center space-x-3">
            <input
              ref={inputRef}
              type="text"
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              onKeyDown={handleKeyPress}
              placeholder={displayPlaceholder}
              disabled={disabled || isTyping}
              className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              aria-label={t("sendMessage")}
              dir={isRTL ? "rtl" : "ltr"}
            />

            <Button
              onClick={handleSendMessage}
              disabled={!inputValue.trim() || disabled || isTyping}
              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200"
              aria-label={t("send")}
            >
              <svg
                className="w-5 h-5"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
                />
              </svg>
            </Button>
          </div>

          <RTLText className="mt-2 text-xs text-gray-500 text-center">
            {currentLanguage === "ko"
              ? "Enter로 전송 • Shift+Enter로 줄바꿈"
              : currentLanguage === "ja"
              ? "Enterで送信 • Shift+Enterで改行"
              : currentLanguage === "ar"
              ? "اضغط Enter للإرسال • Shift+Enter للسطر الجديد"
              : "Press Enter to send • Shift+Enter for new line"}
          </RTLText>
        </div>
      )}
    </div>
  );
}

export default ChatDock;