import React, { useEffect, useRef } from 'react';
import { useChatAssistantContext } from '../../Contexts/ChatAssistantContext';
import { useIsDesktopViewport } from '../../hooks/useIsDesktopViewport';
import ChatAssistantToggle from './ChatAssistantToggle';
import ChatAssistantPanel from './ChatAssistantPanel';
import ChatAssistantFloatingPanel from './ChatAssistantFloatingPanel';
import styles from './ChatAssistant.module.css';

const ChatAssistantShell: React.FC = () => {
  const { isDesktop } = useIsDesktopViewport();
  const toggleRef = useRef<HTMLButtonElement>(null);
  const inputRef = useRef<HTMLTextAreaElement>(null);

  const {
    messages,
    isOpen,
    isSending,
    preferredMode,
    effectiveMode,
    sendMessage,
    retryLastMessage,
    startNewConversation,
    toggleOpen,
    close,
    setPreferredMode,
  } = useChatAssistantContext();

  useEffect(() => {
    if (isOpen) {
      window.setTimeout(() => inputRef.current?.focus(), 0);
      return;
    }

    toggleRef.current?.focus();
  }, [isOpen]);

  if (!isDesktop) {
    return null;
  }

  return (
    <div className={styles.chatAssistantRoot}>
      {!isOpen && (
        <ChatAssistantToggle ref={toggleRef} isOpen={isOpen} onClick={toggleOpen} />
      )}

      {isOpen && effectiveMode === 'embedded' && (
        <ChatAssistantPanel
          preferredMode={preferredMode}
          effectiveMode={effectiveMode}
          messages={messages}
          isSending={isSending}
          inputRef={inputRef}
          onPreferredModeChange={setPreferredMode}
          onNewConversation={startNewConversation}
          onClose={close}
          onSend={sendMessage}
          onRetry={retryLastMessage}
        />
      )}

      {isOpen && effectiveMode === 'floating' && (
        <ChatAssistantFloatingPanel
          preferredMode={preferredMode}
          effectiveMode={effectiveMode}
          messages={messages}
          isSending={isSending}
          inputRef={inputRef}
          onPreferredModeChange={setPreferredMode}
          onNewConversation={startNewConversation}
          onClose={close}
          onSend={sendMessage}
          onRetry={retryLastMessage}
        />
      )}
    </div>
  );
};

export default ChatAssistantShell;