"use client";

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

interface DesktopChatModalProps {
  onSendMessage: (message: string) => void;
  isTyping?: boolean;
  title?: string;
  placeholder?: string;
  className?: string;
  disabled?: boolean;
  showSuggestedQuestions?: boolean;
  suggestedQuestionsContext?: string;
  allowMinimize?: boolean;
  width?: string;
  height?: string;
  /** Whether to announce messages to screen readers */
  announceMessages?: boolean;
  /** Custom breakpoints for responsive design */
  breakpoints?: {
    mobile: string;
    tablet: string;
    desktop: string;
  };
}

export function DesktopChatModal({
  onSendMessage,
  isTyping = false,
  title,
  placeholder,
  className = "",
  disabled = false,
  showSuggestedQuestions = true,
  suggestedQuestionsContext = "welcome",
  allowMinimize = true,
  width = "800px",
  height = "600px",
  announceMessages = true,
  breakpoints = {
    mobile: "95vw",
    tablet: "600px",
    desktop: "800px",
  },
}: DesktopChatModalProps) {
  // Use modal state context
  const {
    modalState,
    closeModal,
    minimizeModal,
    maximizeModal,
    bringToFront,
    currentSession,
    addMessage,
  } = useModalState();

  // 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 [screenSize, setScreenSize] = useState<"mobile" | "tablet" | "desktop">(
    "desktop"
  );
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const messagesContainerRef = useRef<HTMLDivElement>(null);
  const modalRef = useRef<HTMLDivElement>(null);
  const announcementRef = useRef<HTMLDivElement>(null);

  // Get messages from current session
  const messages = currentSession?.messages || [];

  // Responsive design detection
  useEffect(() => {
    const handleResize = () => {
      const width = window.innerWidth;
      if (width < 768) {
        setScreenSize("mobile");
      } else if (width < 1024) {
        setScreenSize("tablet");
      } else {
        setScreenSize("desktop");
      }
    };

    // Initial check
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

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

  // Announce new messages to screen readers
  useEffect(() => {
    if (announceMessages && messages.length > 0 && announcementRef.current) {
      const lastMessage = messages[messages.length - 1];
      if (lastMessage.sender === "ai") {
        announcementRef.current.textContent = `AI responded: ${lastMessage.content}`;
        // Clear after a delay to avoid cluttering screen readers
        setTimeout(() => {
          if (announcementRef.current) {
            announcementRef.current.textContent = "";
          }
        }, 1000);
      }
    }
  }, [messages, announceMessages]);

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

  // Handle escape key to close modal
  useEffect(() => {
    const handleEscape = (event: KeyboardEvent) => {
      if (
        event.key === "Escape" &&
        modalState.isOpen &&
        !modalState.isMinimized
      ) {
        closeModal();
      }
    };

    if (modalState.isOpen) {
      document.addEventListener("keydown", handleEscape);
      // Prevent body scroll when modal is open
      document.body.style.overflow = "hidden";
    }

    return () => {
      document.removeEventListener("keydown", handleEscape);
      document.body.style.overflow = "unset";
    };
  }, [modalState.isOpen, modalState.isMinimized, closeModal]);

  // Enhanced focus trap for accessibility
  useEffect(() => {
    if (modalState.isOpen && !modalState.isMinimized && modalRef.current) {
      const focusableElements = modalRef.current.querySelectorAll(
        'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])'
      );
      const firstElement = focusableElements[0] as HTMLElement;
      const lastElement = focusableElements[
        focusableElements.length - 1
      ] as HTMLElement;

      const handleTabKey = (e: KeyboardEvent) => {
        if (e.key === "Tab") {
          if (e.shiftKey) {
            if (document.activeElement === firstElement) {
              lastElement?.focus();
              e.preventDefault();
            }
          } else {
            if (document.activeElement === lastElement) {
              firstElement?.focus();
              e.preventDefault();
            }
          }
        }
      };

      document.addEventListener("keydown", handleTabKey);
      return () => document.removeEventListener("keydown", handleTabKey);
    }
  }, [modalState.isOpen, modalState.isMinimized]);

  const handleSendMessage = useCallback(() => {
    const trimmedValue = inputValue.trim();
    if (trimmedValue && !disabled) {
      // Add user message to state
      addMessage({
        content: trimmedValue,
        sender: "user",
        type: "text",
      });

      // Call external handler
      onSendMessage(trimmedValue);
      setInputValue("");
    }
  }, [inputValue, onSendMessage, disabled, addMessage]);

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

  const handleMinimize = useCallback(() => {
    if (modalState.isMinimized) {
      maximizeModal();
    } else {
      minimizeModal();
    }
  }, [modalState.isMinimized, minimizeModal, maximizeModal]);

  const handleBackdropClick = useCallback(
    (event: React.MouseEvent) => {
      if (event.target === event.currentTarget && !modalState.isMinimized) {
        closeModal();
      }
    },
    [closeModal, modalState.isMinimized]
  );

  const handleModalClick = useCallback(() => {
    bringToFront();
  }, [bringToFront]);

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

  // Get responsive modal dimensions
  const getModalDimensions = () => {
    if (modalState.isMinimized) {
      return { width: "320px", height: "64px" };
    }

    switch (screenSize) {
      case "mobile":
        return {
          width: breakpoints.mobile,
          height: "85vh",
          maxWidth: "95vw",
          maxHeight: "85vh",
        };
      case "tablet":
        return {
          width: breakpoints.tablet,
          height: "70vh",
          maxWidth: "90vw",
          maxHeight: "80vh",
        };
      default:
        return {
          width: modalState.size.width || width,
          height: modalState.size.height || height,
          maxWidth: "90vw",
          maxHeight: "90vh",
        };
    }
  };

  const modalDimensions = getModalDimensions();

  const TypingIndicator = () => (
    <div
      className="flex items-center space-x-2 px-6 py-4"
      role="status"
      aria-live="polite"
    >
      <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-6 animate-in slide-in-from-bottom-1 duration-300`}
        role="article"
        aria-label={`${isUser ? "Your message" : "AI message"}: ${
          message.content
        }`}
      >
        <div
          className={`
            max-w-[85%] sm:max-w-[70%] px-4 sm:px-5 py-3 sm:py-4 rounded-2xl shadow-sm
            ${
              isUser
                ? "bg-gradient-to-r from-blue-500 to-blue-600 text-white"
                : isError
                ? "bg-red-50 border border-red-200 text-red-800"
                : isSystem
                ? "bg-gray-50 border border-gray-200 text-gray-600"
                : "bg-gray-50 border border-gray-200 text-gray-800"
            }
            ${isUser ? "rounded-br-md" : "rounded-bl-md"}
          `}
        >
          <RTLText className="text-sm leading-relaxed whitespace-pre-wrap break-words">
            {message.content}
          </RTLText>
          <div
            className={`text-xs mt-2 opacity-70 ${
              isUser ? "text-blue-100" : "text-gray-500"
            }`}
          >
            <time dateTime={message.timestamp.toISOString()}>
              {formatTimestamp(message.timestamp)}
            </time>
          </div>
        </div>
      </div>
    );
  };

  if (!modalState.isOpen) return null;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0"
      onClick={handleBackdropClick}
      style={{ zIndex: modalState.zIndex }}
      role="presentation"
    >
      {/* Backdrop */}
      <div className="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm transition-opacity duration-300" />

      {/* Screen Reader Announcements */}
      <div
        ref={announcementRef}
        className="sr-only"
        aria-live="polite"
        aria-atomic="true"
      />

      {/* Modal */}
      <div
        ref={modalRef}
        className={`
          relative 
          bg-white 
          rounded-2xl sm:rounded-3xl
          shadow-2xl 
          border 
          border-gray-200
          transition-all 
          duration-300 
          ease-in-out
          ${screenSize === "mobile" ? "mx-2" : ""}
          ${className}
        `}
        style={{
          width: modalDimensions.width,
          height: modalDimensions.height,
          maxWidth: modalDimensions.maxWidth,
          maxHeight: modalDimensions.maxHeight,
        }}
        role="dialog"
        aria-labelledby="desktop-chat-title"
        aria-describedby="desktop-chat-description"
        aria-modal="true"
        onClick={handleModalClick}
      >
        {/* Hidden description for screen readers */}
        <div id="desktop-chat-description" className="sr-only">
          AI chatbot conversation interface. Use Tab to navigate between
          elements, Escape to close.
        </div>

        {/* Header */}
        <div
          className={`
            flex items-center justify-between 
            px-4 sm:px-6 py-3 sm:py-4
            bg-gradient-to-r from-blue-500 to-blue-600 
            text-white 
            rounded-t-2xl sm:rounded-t-3xl
            ${modalState.isMinimized ? "rounded-b-2xl sm:rounded-b-3xl" : ""}
          `}
        >
          <div className="flex items-center space-x-2 sm:space-x-3 min-w-0">
            <div className="w-3 h-3 bg-green-400 rounded-full animate-pulse flex-shrink-0"></div>
            <h2
              id="desktop-chat-title"
              className="text-base sm:text-lg font-semibold truncate"
              title={displayTitle}
            >
              {displayTitle}
            </h2>
            {currentSession && screenSize !== "mobile" && (
              <span className="text-xs sm:text-sm opacity-75 hidden sm:inline">
                ({messages.length} messages)
              </span>
            )}
          </div>

          <div className="flex items-center space-x-1 sm:space-x-2 flex-shrink-0">
            {allowMinimize && (
              <Button
                variant="ghost"
                size="sm"
                onClick={handleMinimize}
                className="text-white hover:bg-white/20 p-1.5 sm:p-2 rounded-full min-w-0"
                aria-label={
                  modalState.isMinimized ? t("maximize") : t("minimize")
                }
              >
                <svg
                  className={`w-3 h-3 sm:w-4 sm:h-4 transition-transform duration-200 ${
                    modalState.isMinimized ? "rotate-180" : ""
                  }`}
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  aria-hidden="true"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M19 9l-7 7-7-7"
                  />
                </svg>
              </Button>
            )}

            <Button
              variant="ghost"
              size="sm"
              onClick={closeModal}
              className="text-white hover:bg-white/20 p-1.5 sm:p-2 rounded-full min-w-0"
              aria-label={t("close")}
            >
              <svg
                className="w-3 h-3 sm:w-4 sm:h-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </Button>
          </div>
        </div>

        {/* Body - Hidden when minimized */}
        {!modalState.isMinimized && (
          <div className="flex flex-col h-full">
            {/* Messages Area */}
            <div
              ref={messagesContainerRef}
              className="flex-1 overflow-y-auto p-3 sm:p-6 space-y-3 sm:space-y-4 min-h-0"
              style={{
                maxHeight:
                  screenSize === "mobile"
                    ? "calc(100% - 100px)"
                    : "calc(100% - 140px)",
              }}
              role="log"
              aria-live="polite"
              aria-label="Chat conversation"
            >
              {messages.length === 0 ? (
                <div className="text-center text-gray-500 py-8 sm:py-12">
                  <div className="text-4xl sm:text-6xl mb-4 sm:mb-6">💬</div>
                  <RTLText className="text-base sm:text-lg mb-6 sm:mb-8 font-medium">
                    {t("welcomeMessage")}
                  </RTLText>

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

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

            {/* Input Area */}
            <div className="border-t border-gray-200 p-3 sm:p-6">
              <div className="flex space-x-2 sm:space-x-4">
                <input
                  ref={inputRef}
                  type="text"
                  value={inputValue}
                  onChange={(e) => setInputValue(e.target.value)}
                  onKeyPress={handleKeyPress}
                  placeholder={displayPlaceholder}
                  disabled={disabled}
                  className={`
                    flex-1 
                    px-3 sm:px-4 py-2 sm:py-3
                    border border-gray-300 
                    rounded-xl sm:rounded-2xl
                    text-sm sm:text-base
                    focus:outline-none 
                    focus:ring-2 
                    focus:ring-blue-500 
                    focus:border-transparent
                    disabled:bg-gray-100 
                    disabled:cursor-not-allowed
                    transition-colors
                    ${isRTL ? "text-right" : "text-left"}
                  `}
                  dir={isRTL ? "rtl" : "ltr"}
                  aria-label={displayPlaceholder}
                  aria-describedby="input-instructions"
                />
                <Button
                  onClick={handleSendMessage}
                  disabled={!inputValue.trim() || disabled}
                  className="px-3 sm:px-6 py-2 sm:py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-xl sm:rounded-2xl disabled:opacity-50 disabled:cursor-not-allowed transition-colors min-w-0"
                  aria-label={t("send")}
                >
                  <svg
                    className="w-4 h-4 sm:w-5 sm:h-5"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    aria-hidden="true"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
                    />
                  </svg>
                </Button>
              </div>

              {/* Hidden instructions for screen readers */}
              <div id="input-instructions" className="sr-only">
                Type your message and press Enter or click Send button to send.
                Press Escape to close the chat.
              </div>

              {/* Input hint for mobile users */}
              {screenSize === "mobile" && (
                <p className="text-xs text-gray-500 mt-2 text-center">
                  Press Enter to send • Escape to close
                </p>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default DesktopChatModal;