import React, { useEffect, useRef, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { SearchView } from './conversation/SearchView';
import LoadingGoose from './LoadingGoose';
import PopularChatTopics from './PopularChatTopics';
import ProgressiveMessageList from './ProgressiveMessageList';
import { View, ViewOptions } from '../utils/navigationUtils';
import { ContextManagerProvider } from './context_management/ContextManager';
import { MainPanelLayout } from './Layout/MainPanelLayout';
import ChatInput from './ChatInput';
import { ScrollArea, ScrollAreaHandle } from './ui/scroll-area';
import { useFileDrop } from '../hooks/useFileDrop';
import { Message, Session } from '../api';
import { ChatState } from '../types/chatState';
import { ChatType } from '../types/chat';
import { useIsMobile } from '../hooks/use-mobile';
import { useSidebar } from './ui/sidebar';
import { cn } from '../utils';
import { useChatStream } from '../hooks/useChatStream';
import { loadSession } from '../utils/sessionCache';

interface BaseChatProps {
  chat: ChatType;
  setChat: (chat: ChatType) => void;
  setView: (view: View, viewOptions?: ViewOptions) => void;
  setIsGoosehintsModalOpen?: (isOpen: boolean) => void;
  onMessageStreamFinish?: () => void;
  onMessageSubmit?: (message: string) => void;
  renderHeader?: () => React.ReactNode;
  renderBeforeMessages?: () => React.ReactNode;
  renderAfterMessages?: () => React.ReactNode;
  customChatInputProps?: Record<string, unknown>;
  customMainLayoutProps?: Record<string, unknown>;
  contentClassName?: string;
  disableSearch?: boolean;
  showPopularTopics?: boolean;
  suppressEmptyState?: boolean;
  autoSubmit?: boolean;
  resumeSessionId?: string; // Optional session ID to resume on mount
}

function BaseChatContent({
  chat,
  setChat,
  setView,
  setIsGoosehintsModalOpen,
  renderHeader,
  renderBeforeMessages,
  renderAfterMessages,
  customChatInputProps = {},
  customMainLayoutProps = {},
  disableSearch = false,
  resumeSessionId,
}: BaseChatProps) {
  const location = useLocation();
  const scrollRef = useRef<ScrollAreaHandle>(null);

  const disableAnimation = location.state?.disableAnimation || false;
  // const [hasStartedUsingRecipe, setHasStartedUsingRecipe] = React.useState(false);
  // const [currentRecipeTitle, setCurrentRecipeTitle] = React.useState<string | null>(null);
  // const { isCompacting, handleManualCompaction } = useContextManager();
  const isMobile = useIsMobile();
  const { state: sidebarState } = useSidebar();

  const contentClassName = cn('pr-1 pb-10', (isMobile || sidebarState === 'collapsed') && 'pt-11');

  // Use shared file drop
  const { droppedFiles, setDroppedFiles, handleDrop, handleDragOver } = useFileDrop();

  // Use shared cost tracking
  // const { sessionCosts } = useCostTracking({
  //   sessionInputTokens,
  //   sessionOutputTokens,
  //   localInputTokens,
  //   localOutputTokens,
  //   session: sessionMetadata,
  // });

  // Session loading state
  const [sessionLoadError, setSessionLoadError] = useState<string | null>(null);
  const hasLoadedSessionRef = useRef(false);

  const [messages, setMessages] = useState(chat.messages || []);

  // Load session on mount if resumeSessionId is provided
  useEffect(() => {
    const needsLoad = resumeSessionId && !hasLoadedSessionRef.current;

    if (needsLoad) {
      hasLoadedSessionRef.current = true;
      setSessionLoadError(null);

      // Set chat to empty session to indicate loading state
      // todo: set to null instead and handle that in other places
      const emptyChat: ChatType = {
        sessionId: resumeSessionId,
        name: 'Loading...',
        messageHistoryIndex: 0,
        messages: [],
        recipe: null,
        recipeParameters: null,
      };
      setChat(emptyChat);

      loadSession(resumeSessionId)
        .then((session: Session) => {
          const conversation = session.conversation || [];
          const loadedChat: ChatType = {
            sessionId: session.id,
            name: session.name || 'Untitled Chat',
            messageHistoryIndex: 0,
            messages: conversation,
            recipe: null,
            recipeParameters: null,
          };

          setChat(loadedChat);
        })
        .catch((error: Error) => {
          const errorMessage = error.message || 'Failed to load session';
          setSessionLoadError(errorMessage);
        });
    }
  }, [resumeSessionId, setChat]);

  // Update messages when chat changes (e.g., when resuming a session)
  useEffect(() => {
    if (chat.messages) {
      setMessages(chat.messages);
    }
  }, [chat.messages, chat.sessionId]);

  const { chatState, handleSubmit, stopStreaming } = useChatStream({
    sessionId: chat.sessionId || '',
    messages,
    setMessages,
    onStreamFinish: () => {},
  });

  const handleFormSubmit = (e: React.FormEvent) => {
    const customEvent = e as unknown as CustomEvent;
    const textValue = customEvent.detail?.value || '';

    // if (recipe && textValue.trim()) {
    //   setHasStartedUsingRecipe(true);
    // }
    //
    // if (onMessageSubmit && textValue.trim()) {
    //   onMessageSubmit(textValue);
    // }

    handleSubmit(textValue);
  };

  // TODO(Douwe): send this to the chatbox instead, possibly autosubmit? or backend
  const append = (_txt: string) => {};

  useEffect(() => {
    window.electron.logInfo(
      'Initial messages when resuming session: ' + JSON.stringify(messages, null, 2)
    );
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Track if this is the initial render for session resuming
  const initialRenderRef = useRef(true);

  const recipe = chat?.recipe;

  // Auto-scroll when messages are loaded (for session resuming)
  const handleRenderingComplete = React.useCallback(() => {
    // Only force scroll on the very first render
    if (initialRenderRef.current && messages.length > 0) {
      initialRenderRef.current = false;
      if (scrollRef.current?.scrollToBottom) {
        scrollRef.current.scrollToBottom();
      }
    } else if (scrollRef.current?.isFollowing) {
      if (scrollRef.current?.scrollToBottom) {
        scrollRef.current.scrollToBottom();
      }
    }
  }, [messages.length]);

  //const toolCount = useToolCount(chat.sessionId);

  // Wrapper for append that tracks recipe usage
  // const appendWithTracking = (text: string | Message) => {
  //   // Mark that user has started using the recipe when they use append
  //   if (recipe) {
  //     setHasStartedUsingRecipe(true);
  //   }
  //   append(text);
  // };

  // Listen for global scroll-to-bottom requests (e.g., from MCP UI prompt actions)
  useEffect(() => {
    const handleGlobalScrollRequest = () => {
      // Add a small delay to ensure content has been rendered
      setTimeout(() => {
        if (scrollRef.current?.scrollToBottom) {
          scrollRef.current.scrollToBottom();
        }
      }, 200);
    };

    window.addEventListener('scroll-chat-to-bottom', handleGlobalScrollRequest);
    return () => window.removeEventListener('scroll-chat-to-bottom', handleGlobalScrollRequest);
  }, []);

  const renderProgressiveMessageList = (chat: ChatType) => (
    <>
      <ProgressiveMessageList
        messages={messages}
        chat={chat}
        // toolCallNotifications={toolCallNotifications}
        // appendMessage={(newMessage) => {
        //   const updatedMessages = [...messages, newMessage];
        //   setMessages(updatedMessages);
        // }}
        isUserMessage={(m: Message) => m.role === 'user'}
        isStreamingMessage={chatState !== ChatState.Idle}
        // onMessageUpdate={onMessageUpdate}
        onRenderingComplete={handleRenderingComplete}
      />
    </>
  );

  const showPopularTopics = messages.length === 0;
  // TODO(Douwe): get this from the backend
  const isCompacting = false;

  const initialPrompt = messages.length == 0 && recipe?.prompt ? recipe.prompt : '';
  return (
    <div className="h-full flex flex-col min-h-0">
      <h2>Warning: BaseChat2!</h2>
      <MainPanelLayout
        backgroundColor={'bg-background-muted'}
        removeTopPadding={true}
        {...customMainLayoutProps}
      >
        {/* Custom header */}
        {renderHeader && renderHeader()}

        {/* Chat container with sticky recipe header */}
        <div className="flex flex-col flex-1 mb-0.5 min-h-0 relative">
          <ScrollArea
            ref={scrollRef}
            className={`flex-1 bg-background-default rounded-b-2xl min-h-0 relative ${contentClassName}`}
            autoScroll
            onDrop={handleDrop}
            onDragOver={handleDragOver}
            data-drop-zone="true"
            paddingX={6}
            paddingY={0}
          >
            {/*/!* Recipe agent header - sticky at top of chat container *!/*/}
            {/*{recipe?.title && (*/}
            {/*  <div className="sticky top-0 z-10 bg-background-default px-0 -mx-6 mb-6 pt-6">*/}
            {/*    <AgentHeader*/}
            {/*      title={recipe.title}*/}
            {/*      profileInfo={*/}
            {/*        recipe.profile ? `${recipe.profile} - ${recipe.mcps || 12} MCPs` : undefined*/}
            {/*      }*/}
            {/*      onChangeProfile={() => {*/}
            {/*        console.log('Change profile clicked');*/}
            {/*      }}*/}
            {/*      showBorder={true}*/}
            {/*    />*/}
            {/*  </div>*/}
            {/*)}*/}

            {/* Custom content before messages */}
            {renderBeforeMessages && renderBeforeMessages()}

            {/*/!* Recipe Activities - always show when recipe is active and accepted *!/*/}
            {/*{recipe && recipeAccepted && !suppressEmptyState && (*/}
            {/*  <div className={hasStartedUsingRecipe ? 'mb-6' : ''}>*/}
            {/*    <RecipeActivities*/}
            {/*      append={(text: string) => appendWithTracking(text)}*/}
            {/*      activities={Array.isArray(recipe.activities) ? recipe.activities : null}*/}
            {/*      title={recipe.title}*/}
            {/*      parameterValues={recipeParameters || {}}*/}
            {/*    />*/}
            {/*  </div>*/}
            {/*)}*/}

            {sessionLoadError && (
              <div className="flex flex-col items-center justify-center p-8">
                <div className="text-red-700 dark:text-red-300 bg-red-400/50 p-4 rounded-lg mb-4 max-w-md">
                  <h3 className="font-semibold mb-2">Failed to Load Session</h3>
                  <p className="text-sm">{sessionLoadError}</p>
                </div>
                <button
                  onClick={() => {
                    setSessionLoadError(null);
                    hasLoadedSessionRef.current = false;
                  }}
                  className="px-4 py-2 text-center cursor-pointer text-textStandard border border-borderSubtle hover:bg-bgSubtle rounded-lg transition-all duration-150"
                >
                  Retry
                </button>
              </div>
            )}

            {/* Messages or Popular Topics */}
            {
              messages.length > 0 || recipe ? (
                <>
                  {disableSearch ? (
                    renderProgressiveMessageList(chat)
                  ) : (
                    // Render messages with SearchView wrapper when search is enabled
                    <SearchView>{renderProgressiveMessageList(chat)}</SearchView>
                  )}

                  {/*{error && (*/}
                  {/*  <>*/}
                  {/*    <div className="flex flex-col items-center justify-center p-4">*/}
                  {/*      <div className="text-red-700 dark:text-red-300 bg-red-400/50 p-3 rounded-lg mb-2">*/}
                  {/*        {error.message || 'Honk! Goose experienced an error while responding'}*/}
                  {/*      </div>*/}

                  {/*      /!* Action buttons for all errors including token limit errors *!/*/}
                  {/*      <div className="flex gap-2 mt-2">*/}
                  {/*        <div*/}
                  {/*          className="px-3 py-2 text-center whitespace-nowrap cursor-pointer text-textStandard border border-borderSubtle hover:bg-bgSubtle rounded-full inline-block transition-all duration-150"*/}
                  {/*          onClick={async () => {*/}
                  {/*            clearError();*/}

                  {/*            await handleManualCompaction(*/}
                  {/*              messages,*/}
                  {/*              setMessages,*/}
                  {/*              append,*/}
                  {/*              chat.sessionId*/}
                  {/*            );*/}
                  {/*          }}*/}
                  {/*        >*/}
                  {/*          Summarize Conversation*/}
                  {/*        </div>*/}
                  {/*        <div*/}
                  {/*          className="px-3 py-2 text-center whitespace-nowrap cursor-pointer text-textStandard border border-borderSubtle hover:bg-bgSubtle rounded-full inline-block transition-all duration-150"*/}
                  {/*          onClick={async () => {*/}
                  {/*            // Find the last user message*/}
                  {/*            const lastUserMessage = messages.reduceRight(*/}
                  {/*              (found, m) => found || (m.role === 'user' ? m : null),*/}
                  {/*              null as Message | null*/}
                  {/*            );*/}
                  {/*            if (lastUserMessage) {*/}
                  {/*              await append(lastUserMessage);*/}
                  {/*            }*/}
                  {/*          }}*/}
                  {/*        >*/}
                  {/*          Retry Last Message*/}
                  {/*        </div>*/}
                  {/*      </div>*/}
                  {/*    </div>*/}
                  {/*  </>*/}
                  {/*)}*/}

                  <div className="block h-8" />
                </>
              ) : !recipe && showPopularTopics ? (
                /* Show PopularChatTopics when no messages, no recipe, and showPopularTopics is true (Pair view) */
                <PopularChatTopics append={(text: string) => append(text)} />
              ) : null /* Show nothing when messages.length === 0 && suppressEmptyState === true */
            }

            {/* Custom content after messages */}
            {renderAfterMessages && renderAfterMessages()}
          </ScrollArea>

          {/* Fixed loading indicator at bottom left of chat container */}
          {(messages.length === 0 || isCompacting) && !sessionLoadError && (
            <div className="absolute bottom-1 left-4 z-20 pointer-events-none">
              <LoadingGoose
                message={
                  messages.length === 0
                    ? 'loading conversation...'
                    : isCompacting
                      ? 'goose is compacting the conversation...'
                      : undefined
                }
                chatState={chatState}
              />
            </div>
          )}
        </div>

        <div
          className={`relative z-10 ${disableAnimation ? '' : 'animate-[fadein_400ms_ease-in_forwards]'}`}
        >
          <ChatInput
            sessionId={chat?.sessionId || ''}
            handleSubmit={handleFormSubmit}
            chatState={chatState}
            onStop={stopStreaming}
            //commandHistory={commandHistory}
            initialValue={initialPrompt}
            setView={setView}
            // numTokens={sessionTokenCount}
            // inputTokens={sessionInputTokens || localInputTokens}
            // outputTokens={sessionOutputTokens || localOutputTokens}
            droppedFiles={droppedFiles}
            onFilesProcessed={() => setDroppedFiles([])} // Clear dropped files after processing
            messages={messages}
            setMessages={(_m) => {}}
            disableAnimation={disableAnimation}
            //sessionCosts={sessionCosts}
            setIsGoosehintsModalOpen={setIsGoosehintsModalOpen}
            recipe={recipe}
            //recipeAccepted={recipeAccepted}
            initialPrompt={initialPrompt}
            //toolCount={toolCount || 0}
            toolCount={0}
            //autoSubmit={autoSubmit}
            autoSubmit={false}
            //append={append}
            {...customChatInputProps}
          />
        </div>
      </MainPanelLayout>

      {/*/!* Recipe Warning Modal *!/*/}
      {/*<RecipeWarningModal*/}
      {/*  isOpen={isRecipeWarningModalOpen}*/}
      {/*  onConfirm={handleRecipeAccept}*/}
      {/*  onCancel={handleRecipeCancel}*/}
      {/*  recipeDetails={{*/}
      {/*    title: recipe?.title,*/}
      {/*    description: recipe?.description,*/}
      {/*    instructions: recipe?.instructions || undefined,*/}
      {/*  }}*/}
      {/*  hasSecurityWarnings={hasSecurityWarnings}*/}
      {/*/>*/}

      {/*/!* Recipe Parameter Modal *!/*/}
      {/*{isParameterModalOpen && filteredParameters.length > 0 && (*/}
      {/*  <ParameterInputModal*/}
      {/*    parameters={filteredParameters}*/}
      {/*    onSubmit={handleParameterSubmit}*/}
      {/*    onClose={() => setIsParameterModalOpen(false)}*/}
      {/*  />*/}
      {/*)}*/}

      {/*/!* Create Recipe from Session Modal *!/*/}
      {/*<CreateRecipeFromSessionModal*/}
      {/*  isOpen={isCreateRecipeModalOpen}*/}
      {/*  onClose={() => setIsCreateRecipeModalOpen(false)}*/}
      {/*  sessionId={chat.sessionId}*/}
      {/*  onRecipeCreated={handleRecipeCreated}*/}
      {/*/>*/}
    </div>
  );
}

export default function BaseChat(props: BaseChatProps) {
  return (
    <ContextManagerProvider>
      <BaseChatContent {...props} />
    </ContextManagerProvider>
  );
}