"use client"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Loader2, User, Bot, Zap, Settings, ChevronDown, ChevronRight, Upload, AtSign, Plus, X, GitBranch } from "lucide-react"
import { ProtectedRoute } from "@/components/protected-route"
import { useTask } from "@/contexts/task-context"
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context"
import { useAuth } from "@/contexts/auth-context"
import { useChat, EndpointType } from "@/contexts/chat-context"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"


interface Message {
  role: "user" | "assistant"
  content: string
  timestamp: Date
  functionCalls?: FunctionCall[]
  isStreaming?: boolean
}

interface FunctionCall {
  name: string
  arguments?: Record<string, unknown>
  result?: Record<string, unknown> | ToolCallResult[]
  status: "pending" | "completed" | "error"
  argumentsString?: string
  id?: string
  type?: string
}

interface ToolCallResult {
  text_key?: string
  data?: {
    file_path?: string
    text?: string
    [key: string]: unknown
  }
  default_value?: string
  [key: string]: unknown
}



interface SelectedFilters {
  data_sources: string[]
  document_types: string[]
  owners: string[]
}

interface KnowledgeFilterData {
  id: string
  name: string
  description: string
  query_data: string
  owner: string
  created_at: string
  updated_at: string
}

interface RequestBody {
  prompt: string
  stream?: boolean
  previous_response_id?: string
  filters?: SelectedFilters
  limit?: number
  scoreThreshold?: number
}

function ChatPage() {
  const isDebugMode = process.env.NODE_ENV === 'development' || process.env.NEXT_PUBLIC_OPENRAG_DEBUG === 'true'
  const { user } = useAuth()
  const { endpoint, setEndpoint, currentConversationId, conversationData, setCurrentConversationId, addConversationDoc, forkFromResponse, refreshConversations, previousResponseIds, setPreviousResponseIds } = useChat()
  const [messages, setMessages] = useState<Message[]>([
    {
      role: "assistant",
      content: "How can I assist?",
      timestamp: new Date()
    }
  ])
  const [input, setInput] = useState("")
  const [loading, setLoading] = useState(false)
  const [asyncMode, setAsyncMode] = useState(true)
  const [streamingMessage, setStreamingMessage] = useState<{
    content: string
    functionCalls: FunctionCall[]
    timestamp: Date
  } | null>(null)
  const [expandedFunctionCalls, setExpandedFunctionCalls] = useState<Set<string>>(new Set())
  // previousResponseIds now comes from useChat context
  const [isUploading, setIsUploading] = useState(false)
  const [isDragOver, setIsDragOver] = useState(false)
  const [isFilterDropdownOpen, setIsFilterDropdownOpen] = useState(false)
  const [availableFilters, setAvailableFilters] = useState<KnowledgeFilterData[]>([])
  const [filterSearchTerm, setFilterSearchTerm] = useState("")
  const [selectedFilterIndex, setSelectedFilterIndex] = useState(0)
  const [isFilterHighlighted, setIsFilterHighlighted] = useState(false)
  const [dropdownDismissed, setDropdownDismissed] = useState(false)
  const [isUserInteracting, setIsUserInteracting] = useState(false)
  const [isForkingInProgress, setIsForkingInProgress] = useState(false)
  const [lastForkTimestamp, setLastForkTimestamp] = useState<number>(0)
  const dragCounterRef = useRef(0)
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLTextAreaElement>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)
  const dropdownRef = useRef<HTMLDivElement>(null)
  const streamAbortRef = useRef<AbortController | null>(null)
  const streamIdRef = useRef(0)
  const { addTask, isMenuOpen } = useTask()
  const { selectedFilter, parsedFilterData, isPanelOpen, setSelectedFilter } = useKnowledgeFilter()



  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

  const handleEndpointChange = (newEndpoint: EndpointType) => {
    setEndpoint(newEndpoint)
    // Clear the conversation when switching endpoints to avoid response ID conflicts
    setMessages([])
    setPreviousResponseIds({ chat: null, langflow: null })
  }

  const handleFileUpload = async (file: File) => {
    console.log("handleFileUpload called with file:", file.name)
    
    if (isUploading) return
    
    setIsUploading(true)
    setLoading(true)
    
    // Add initial upload message
    const uploadStartMessage: Message = {
      role: "assistant", 
      content: `🔄 Starting upload of **${file.name}**...`,
      timestamp: new Date()
    }
    setMessages(prev => [...prev, uploadStartMessage])
    
    try {
      const formData = new FormData()
      formData.append('file', file)
      formData.append('endpoint', endpoint)
      
      // Add previous_response_id if we have one for this endpoint
      const currentResponseId = previousResponseIds[endpoint]
      if (currentResponseId) {
        formData.append('previous_response_id', currentResponseId)
      }
      
      const response = await fetch('/api/upload_context', {
        method: 'POST',
        body: formData,
      })
      
      console.log("Upload response status:", response.status)
      
      if (!response.ok) {
        const errorText = await response.text()
        console.error("Upload failed with status:", response.status, "Response:", errorText)
        throw new Error(`Upload failed: ${response.status} - ${errorText}`)
      }
      
      const result = await response.json()
      console.log("Upload result:", result)
      
      if (response.status === 201) {
        // New flow: Got task ID, start tracking with centralized system
        const taskId = result.task_id || result.id
        
        if (!taskId) {
          console.error("No task ID in 201 response:", result)
          throw new Error("No task ID received from server")
        }
        
        // Add task to centralized tracking
        addTask(taskId)
        
        // Update message to show task is being tracked
        const pollingMessage: Message = {
          role: "assistant",
          content: `⏳ Upload initiated for **${file.name}**. Processing in background... (Task ID: ${taskId})`,
          timestamp: new Date()
        }
        setMessages(prev => [...prev.slice(0, -1), pollingMessage])
        
      } else if (response.ok) {
        // Original flow: Direct response  
        
        const uploadMessage: Message = {
          role: "assistant",
          content: `📄 Document uploaded: **${result.filename}** (${result.pages} pages, ${result.content_length.toLocaleString()} characters)\n\n${result.confirmation}`,
          timestamp: new Date()
        }
        
        setMessages(prev => [...prev.slice(0, -1), uploadMessage])
        
        // Add file to conversation docs
        if (result.filename) {
          addConversationDoc(result.filename)
        }
        
        // Update the response ID for this endpoint
        if (result.response_id) {
          setPreviousResponseIds(prev => ({
            ...prev,
            [endpoint]: result.response_id
          }))
        }
        // Sidebar should show this conversation after upload creates it
        try { refreshConversations() } catch {}
        
      } else {
        throw new Error(`Upload failed: ${response.status}`)
      }
      
    } catch (error) {
      console.error('Upload failed:', error)
      const errorMessage: Message = {
        role: "assistant",
        content: `❌ Upload failed: ${error instanceof Error ? error.message : 'Unknown error'}`,
        timestamp: new Date()
      }
      setMessages(prev => [...prev.slice(0, -1), errorMessage])
    } finally {
      setIsUploading(false)
      setLoading(false)
    }
  }

  // Remove the old pollTaskStatus function since we're using centralized system

  const handleDragEnter = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    dragCounterRef.current++
    if (dragCounterRef.current === 1) {
      setIsDragOver(true)
    }
  }
  
  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
  }
  
  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    dragCounterRef.current--
    if (dragCounterRef.current === 0) {
      setIsDragOver(false)
    }
  }
  
  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    dragCounterRef.current = 0
    setIsDragOver(false)
    
    const files = Array.from(e.dataTransfer.files)
    if (files.length > 0) {
      handleFileUpload(files[0]) // Upload first file only
    }
  }

  const handleFilePickerClick = () => {
    fileInputRef.current?.click()
  }

  const handleFilePickerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (files && files.length > 0) {
      handleFileUpload(files[0])
    }
    // Reset the input so the same file can be selected again
    if (fileInputRef.current) {
      fileInputRef.current.value = ''
    }
  }

  const loadAvailableFilters = async () => {
    try {
      const response = await fetch("/api/knowledge-filter/search", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          query: "",
          limit: 20
        }),
      })

      const result = await response.json()
      if (response.ok && result.success) {
        setAvailableFilters(result.filters)
      } else {
        console.error("Failed to load knowledge filters:", result.error)
        setAvailableFilters([])
      }
    } catch (error) {
      console.error('Failed to load knowledge filters:', error)
      setAvailableFilters([])
    }
  }

  const handleFilterDropdownToggle = () => {
    if (!isFilterDropdownOpen) {
      loadAvailableFilters()
    }
    setIsFilterDropdownOpen(!isFilterDropdownOpen)
  }

  const handleFilterSelect = (filter: KnowledgeFilterData | null) => {
    setSelectedFilter(filter)
    setIsFilterDropdownOpen(false)
    setFilterSearchTerm("")
    setIsFilterHighlighted(false)
    
    // Remove the @searchTerm from the input and replace with filter pill
    const words = input.split(' ')
    const lastWord = words[words.length - 1]
    
    if (lastWord.startsWith('@')) {
      // Remove the @search term
      words.pop()
      setInput(words.join(' ') + (words.length > 0 ? ' ' : ''))
    }
  }

  useEffect(() => {
    // Only auto-scroll if not in the middle of user interaction
    if (!isUserInteracting) {
      const timer = setTimeout(() => {
        scrollToBottom()
      }, 50) // Small delay to avoid conflicts with click events
      
      return () => clearTimeout(timer)
    }
  }, [messages, streamingMessage, isUserInteracting])

  // Reset selected index when search term changes
  useEffect(() => {
    setSelectedFilterIndex(0)
  }, [filterSearchTerm])

  // Auto-focus the input on component mount
  useEffect(() => {
    inputRef.current?.focus()
  }, [])

  // Explicitly handle external new conversation trigger
  useEffect(() => {
    const handleNewConversation = () => {
      // Abort any in-flight streaming so it doesn't bleed into new chat
      if (streamAbortRef.current) {
        streamAbortRef.current.abort()
      }
      // Reset chat UI even if context state was already 'new'
      setMessages([
        {
          role: "assistant",
          content: "How can I assist?",
          timestamp: new Date(),
        },
      ])
      setInput("")
      setStreamingMessage(null)
      setExpandedFunctionCalls(new Set())
      setIsFilterHighlighted(false)
      setLoading(false)
    }

    const handleFocusInput = () => {
      inputRef.current?.focus()
    }

    window.addEventListener('newConversation', handleNewConversation)
    window.addEventListener('focusInput', handleFocusInput)
    return () => {
      window.removeEventListener('newConversation', handleNewConversation)
      window.removeEventListener('focusInput', handleFocusInput)
    }
  }, [])

  // Load conversation when conversationData changes
  useEffect(() => {
    const now = Date.now()
    
    // Don't reset messages if user is in the middle of an interaction (like forking)
    if (isUserInteracting || isForkingInProgress) {
      console.log("Skipping conversation load due to user interaction or forking")
      return
    }
    
    // Don't reload if we just forked recently (within 1 second)
    if (now - lastForkTimestamp < 1000) {
      console.log("Skipping conversation load - recent fork detected")
      return
    }
    
    if (conversationData && conversationData.messages) {
      console.log("Loading conversation with", conversationData.messages.length, "messages")
      // Convert backend message format to frontend Message interface
      const convertedMessages: Message[] = conversationData.messages.map((msg: {
        role: string;
        content: string;
        timestamp?: string;
        response_id?: string;
      }) => ({
        role: msg.role as "user" | "assistant",
        content: msg.content,
        timestamp: new Date(msg.timestamp || new Date()),
        // Add any other necessary properties
      }))
      
      setMessages(convertedMessages)
      
      // Set the previous response ID for this conversation
      setPreviousResponseIds(prev => ({
        ...prev,
        [conversationData.endpoint]: conversationData.response_id
      }))
    }
    // Reset messages when starting a new conversation (but not during forking)
    else if (currentConversationId === null && !isUserInteracting && !isForkingInProgress && now - lastForkTimestamp > 1000) {
      console.log("Resetting to default message for new conversation")
      setMessages([
        {
          role: "assistant",
          content: "How can I assist?",
          timestamp: new Date()
        }
      ])
    }
  }, [conversationData, currentConversationId, isUserInteracting, isForkingInProgress, lastForkTimestamp, setPreviousResponseIds])

  // Listen for file upload events from navigation
  useEffect(() => {
    const handleFileUploadStart = (event: CustomEvent) => {
      const { filename } = event.detail
      console.log("Chat page received file upload start event:", filename)
      
      setLoading(true)
      setIsUploading(true)
      
      // Add initial upload message
      const uploadStartMessage: Message = {
        role: "assistant", 
        content: `🔄 Starting upload of **${filename}**...`,
        timestamp: new Date()
      }
      setMessages(prev => [...prev, uploadStartMessage])
    }

    const handleFileUploaded = (event: CustomEvent) => {
      const { result } = event.detail
      console.log("Chat page received file upload event:", result)
      
      // Replace the last message with upload complete message
      const uploadMessage: Message = {
        role: "assistant",
        content: `📄 Document uploaded: **${result.filename}** (${result.pages} pages, ${result.content_length.toLocaleString()} characters)\n\n${result.confirmation}`,
        timestamp: new Date()
      }
      
      setMessages(prev => [...prev.slice(0, -1), uploadMessage])
      
      // Update the response ID for this endpoint
      if (result.response_id) {
        setPreviousResponseIds(prev => ({
          ...prev,
          [endpoint]: result.response_id
        }))
      }
    }

    const handleFileUploadComplete = () => {
      console.log("Chat page received file upload complete event")
      setLoading(false)
      setIsUploading(false)
    }

    const handleFileUploadError = (event: CustomEvent) => {
      const { filename, error } = event.detail
      console.log("Chat page received file upload error event:", filename, error)
      
      // Replace the last message with error message
      const errorMessage: Message = {
        role: "assistant",
        content: `❌ Upload failed for **${filename}**: ${error}`,
        timestamp: new Date()
      }
      setMessages(prev => [...prev.slice(0, -1), errorMessage])
    }

    window.addEventListener('fileUploadStart', handleFileUploadStart as EventListener)
    window.addEventListener('fileUploaded', handleFileUploaded as EventListener)
    window.addEventListener('fileUploadComplete', handleFileUploadComplete as EventListener)
    window.addEventListener('fileUploadError', handleFileUploadError as EventListener)
    
    return () => {
      window.removeEventListener('fileUploadStart', handleFileUploadStart as EventListener)
      window.removeEventListener('fileUploaded', handleFileUploaded as EventListener)
      window.removeEventListener('fileUploadComplete', handleFileUploadComplete as EventListener)
      window.removeEventListener('fileUploadError', handleFileUploadError as EventListener)
    }
  }, [endpoint, setPreviousResponseIds])

  // Handle click outside to close dropdown
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (isFilterDropdownOpen && 
          dropdownRef.current && 
          !dropdownRef.current.contains(event.target as Node) &&
          !inputRef.current?.contains(event.target as Node)) {
        setIsFilterDropdownOpen(false)
        setFilterSearchTerm("")
        setSelectedFilterIndex(0)
      }
    }

    document.addEventListener('mousedown', handleClickOutside)
    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [isFilterDropdownOpen])


  const handleSSEStream = async (userMessage: Message) => {
    const apiEndpoint = endpoint === "chat" ? "/api/chat" : "/api/langflow"
    
    try {
      // Abort any existing stream before starting a new one
      if (streamAbortRef.current) {
        streamAbortRef.current.abort()
      }
      const controller = new AbortController()
      streamAbortRef.current = controller
      const thisStreamId = ++streamIdRef.current
      const requestBody: RequestBody = {
        prompt: userMessage.content,
        stream: true,
        ...(parsedFilterData?.filters && (() => {
          const filters = parsedFilterData.filters
          const processed: SelectedFilters = {
            data_sources: [],
            document_types: [],
            owners: []
          }
          // Only copy non-wildcard arrays
          processed.data_sources = filters.data_sources.includes("*") ? [] : filters.data_sources
          processed.document_types = filters.document_types.includes("*") ? [] : filters.document_types
          processed.owners = filters.owners.includes("*") ? [] : filters.owners
          
          // Only include filters if any array has values
          const hasFilters = processed.data_sources.length > 0 || 
                            processed.document_types.length > 0 || 
                            processed.owners.length > 0
          return hasFilters ? { filters: processed } : {}
        })()),
        limit: parsedFilterData?.limit ?? 10,
        scoreThreshold: parsedFilterData?.scoreThreshold ?? 0
      }
      
      // Add previous_response_id if we have one for this endpoint
      const currentResponseId = previousResponseIds[endpoint]
      if (currentResponseId) {
        requestBody.previous_response_id = currentResponseId
      }
      
      const response = await fetch(apiEndpoint, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(requestBody),
        signal: controller.signal,
      })

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }

      const reader = response.body?.getReader()
      if (!reader) {
        throw new Error("No reader available")
      }

      const decoder = new TextDecoder()
      let buffer = ""
      let currentContent = ""
      const currentFunctionCalls: FunctionCall[] = []
      let newResponseId: string | null = null
      
      // Initialize streaming message
      if (!controller.signal.aborted && thisStreamId === streamIdRef.current) {
        setStreamingMessage({
          content: "",
          functionCalls: [],
          timestamp: new Date()
        })
      }

      try {
        while (true) {
          const { done, value } = await reader.read()
          if (controller.signal.aborted || thisStreamId !== streamIdRef.current) break
          if (done) break
          buffer += decoder.decode(value, { stream: true })
          
          // Process complete lines (JSON objects)
          const lines = buffer.split('\n')
          buffer = lines.pop() || "" // Keep incomplete line in buffer
          
          for (const line of lines) {
            if (line.trim()) {
              try {
                const chunk = JSON.parse(line)
                console.log("Received chunk:", chunk.type || chunk.object, chunk)
                
                // Extract response ID if present
                if (chunk.id) {
                  newResponseId = chunk.id
                } else if (chunk.response_id) {
                  newResponseId = chunk.response_id
                }
                
                // Handle OpenAI Chat Completions streaming format
                if (chunk.object === "response.chunk" && chunk.delta) {
                  // Handle function calls in delta
                  if (chunk.delta.function_call) {
                    console.log("Function call in delta:", chunk.delta.function_call)
                    
                    // Check if this is a new function call
                    if (chunk.delta.function_call.name) {
                      console.log("New function call:", chunk.delta.function_call.name)
                      const functionCall: FunctionCall = {
                        name: chunk.delta.function_call.name,
                        arguments: undefined,
                        status: "pending",
                        argumentsString: chunk.delta.function_call.arguments || ""
                      }
                      currentFunctionCalls.push(functionCall)
                      console.log("Added function call:", functionCall)
                    }
                    // Or if this is arguments continuation
                    else if (chunk.delta.function_call.arguments) {
                      console.log("Function call arguments delta:", chunk.delta.function_call.arguments)
                      const lastFunctionCall = currentFunctionCalls[currentFunctionCalls.length - 1]
                      if (lastFunctionCall) {
                        if (!lastFunctionCall.argumentsString) {
                          lastFunctionCall.argumentsString = ""
                        }
                        lastFunctionCall.argumentsString += chunk.delta.function_call.arguments
                        console.log("Accumulated arguments:", lastFunctionCall.argumentsString)
                        
                        // Try to parse arguments if they look complete
                        if (lastFunctionCall.argumentsString.includes("}")) {
                          try {
                            const parsed = JSON.parse(lastFunctionCall.argumentsString)
                            lastFunctionCall.arguments = parsed
                            lastFunctionCall.status = "completed"
                            console.log("Parsed function arguments:", parsed)
                          } catch (e) {
                            console.log("Arguments not yet complete or invalid JSON:", e)
                          }
                        }
                      }
                    }
                  }
                  
                  // Handle tool calls in delta  
                  else if (chunk.delta.tool_calls && Array.isArray(chunk.delta.tool_calls)) {
                    console.log("Tool calls in delta:", chunk.delta.tool_calls)
                    
                    for (const toolCall of chunk.delta.tool_calls) {
                      if (toolCall.function) {
                        // Check if this is a new tool call
                        if (toolCall.function.name) {
                          console.log("New tool call:", toolCall.function.name)
                          const functionCall: FunctionCall = {
                            name: toolCall.function.name,
                            arguments: undefined,
                            status: "pending",
                            argumentsString: toolCall.function.arguments || ""
                          }
                          currentFunctionCalls.push(functionCall)
                          console.log("Added tool call:", functionCall)
                        }
                        // Or if this is arguments continuation
                        else if (toolCall.function.arguments) {
                          console.log("Tool call arguments delta:", toolCall.function.arguments)
                          const lastFunctionCall = currentFunctionCalls[currentFunctionCalls.length - 1]
                          if (lastFunctionCall) {
                            if (!lastFunctionCall.argumentsString) {
                              lastFunctionCall.argumentsString = ""
                            }
                            lastFunctionCall.argumentsString += toolCall.function.arguments
                            console.log("Accumulated tool arguments:", lastFunctionCall.argumentsString)
                            
                            // Try to parse arguments if they look complete
                            if (lastFunctionCall.argumentsString.includes("}")) {
                              try {
                                const parsed = JSON.parse(lastFunctionCall.argumentsString)
                                lastFunctionCall.arguments = parsed
                                lastFunctionCall.status = "completed"
                                console.log("Parsed tool arguments:", parsed)
                              } catch (e) {
                                console.log("Tool arguments not yet complete or invalid JSON:", e)
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                  
                  // Handle content/text in delta
                  else if (chunk.delta.content) {
                    console.log("Content delta:", chunk.delta.content)
                    currentContent += chunk.delta.content
                  }
                  
                  // Handle finish reason
                  if (chunk.delta.finish_reason) {
                    console.log("Finish reason:", chunk.delta.finish_reason)
                    // Mark any pending function calls as completed
                    currentFunctionCalls.forEach(fc => {
                      if (fc.status === "pending" && fc.argumentsString) {
                        try {
                          fc.arguments = JSON.parse(fc.argumentsString)
                          fc.status = "completed"
                          console.log("Completed function call on finish:", fc)
                        } catch (e) {
                          fc.arguments = { raw: fc.argumentsString }
                          fc.status = "error"
                          console.log("Error parsing function call on finish:", fc, e)
                        }
                      }
                    })
                  }
                }
                
                // Handle Realtime API format (this is what you're actually getting!)
                else if (chunk.type === "response.output_item.added" && chunk.item?.type === "function_call") {
                  console.log("🟢 CREATING function call (added):", chunk.item.id, chunk.item.tool_name || chunk.item.name)
                  
                  // Try to find an existing pending call to update (created by earlier deltas)
                  let existing = currentFunctionCalls.find(fc => fc.id === chunk.item.id)
                  if (!existing) {
                    existing = [...currentFunctionCalls].reverse().find(fc => 
                      fc.status === "pending" && 
                      !fc.id && 
                      (fc.name === (chunk.item.tool_name || chunk.item.name))
                    )
                  }
                  
                  if (existing) {
                    existing.id = chunk.item.id
                    existing.type = chunk.item.type
                    existing.name = chunk.item.tool_name || chunk.item.name || existing.name
                    existing.arguments = chunk.item.inputs || existing.arguments
                    console.log("🟢 UPDATED existing pending function call with id:", existing.id)
                  } else {
                    const functionCall: FunctionCall = {
                      name: chunk.item.tool_name || chunk.item.name || "unknown",
                      arguments: chunk.item.inputs || undefined,
                      status: "pending",
                      argumentsString: "",
                      id: chunk.item.id,
                      type: chunk.item.type
                    }
                    currentFunctionCalls.push(functionCall)
                    console.log("🟢 Function calls now:", currentFunctionCalls.map(fc => ({ id: fc.id, name: fc.name })))
                  }
                }
                
                // Handle function call arguments streaming (Realtime API)
                else if (chunk.type === "response.function_call_arguments.delta") {
                  console.log("Function args delta (Realtime API):", chunk.delta)
                  const lastFunctionCall = currentFunctionCalls[currentFunctionCalls.length - 1]
                  if (lastFunctionCall) {
                    if (!lastFunctionCall.argumentsString) {
                      lastFunctionCall.argumentsString = ""
                    }
                    lastFunctionCall.argumentsString += chunk.delta || ""
                    console.log("Accumulated arguments (Realtime API):", lastFunctionCall.argumentsString)
                  }
                }
                
                // Handle function call arguments completion (Realtime API)
                else if (chunk.type === "response.function_call_arguments.done") {
                  console.log("Function args done (Realtime API):", chunk.arguments)
                  const lastFunctionCall = currentFunctionCalls[currentFunctionCalls.length - 1]
                  if (lastFunctionCall) {
                    try {
                      lastFunctionCall.arguments = JSON.parse(chunk.arguments || "{}")
                      lastFunctionCall.status = "completed"
                      console.log("Parsed function arguments (Realtime API):", lastFunctionCall.arguments)
                    } catch (e) {
                      lastFunctionCall.arguments = { raw: chunk.arguments }
                      lastFunctionCall.status = "error"
                      console.log("Error parsing function arguments (Realtime API):", e)
                    }
                  }
                }
                
                // Handle function call completion (Realtime API)
                else if (chunk.type === "response.output_item.done" && chunk.item?.type === "function_call") {
                  console.log("🔵 UPDATING function call (done):", chunk.item.id, chunk.item.tool_name || chunk.item.name)
                  console.log("🔵 Looking for existing function calls:", currentFunctionCalls.map(fc => ({ id: fc.id, name: fc.name })))
                  
                  // Find existing function call by ID or name
                  const functionCall = currentFunctionCalls.find(fc => 
                    fc.id === chunk.item.id || 
                    fc.name === chunk.item.tool_name ||
                    fc.name === chunk.item.name
                  )
                  
                  if (functionCall) {
                    console.log("🔵 FOUND existing function call, updating:", functionCall.id, functionCall.name)
                    // Update existing function call with completion data
                    functionCall.status = chunk.item.status === "completed" ? "completed" : "error"
                    functionCall.id = chunk.item.id
                    functionCall.type = chunk.item.type
                    functionCall.name = chunk.item.tool_name || chunk.item.name || functionCall.name
                    functionCall.arguments = chunk.item.inputs || functionCall.arguments
                    
                    // Set results if present
                    if (chunk.item.results) {
                      functionCall.result = chunk.item.results
                    }
                  } else {
                    console.log("🔴 WARNING: Could not find existing function call to update:", chunk.item.id, chunk.item.tool_name, chunk.item.name)
                  }
                }
                
                // Handle tool call completion with results
                else if (chunk.type === "response.output_item.done" && chunk.item?.type?.includes("_call") && chunk.item?.type !== "function_call") {
                  console.log("Tool call done with results:", chunk.item)
                  
                  // Find existing function call by ID, or by name/type if ID not available
                  const functionCall = currentFunctionCalls.find(fc => 
                    fc.id === chunk.item.id || 
                    (fc.name === chunk.item.tool_name) ||
                    (fc.name === chunk.item.name) ||
                    (fc.name === chunk.item.type) ||
                    (fc.name.includes(chunk.item.type.replace('_call', '')) || chunk.item.type.includes(fc.name))
                  )
                  
                  if (functionCall) {
                    // Update existing function call
                    functionCall.arguments = chunk.item.inputs || functionCall.arguments
                    functionCall.status = chunk.item.status === "completed" ? "completed" : "error"
                    functionCall.id = chunk.item.id
                    functionCall.type = chunk.item.type
                    
                    // Set the results
                    if (chunk.item.results) {
                      functionCall.result = chunk.item.results
                    }
                  } else {
                    // Create new function call if not found
                    const newFunctionCall = {
                      name: chunk.item.tool_name || chunk.item.name || chunk.item.type || "unknown",
                      arguments: chunk.item.inputs || {},
                      status: "completed" as const,
                      id: chunk.item.id,
                      type: chunk.item.type,
                      result: chunk.item.results
                    }
                    currentFunctionCalls.push(newFunctionCall)
                  }
                }
                
                // Handle function call output item added (new format)
                else if (chunk.type === "response.output_item.added" && chunk.item?.type?.includes("_call") && chunk.item?.type !== "function_call") {
                  console.log("🟡 CREATING tool call (added):", chunk.item.id, chunk.item.tool_name || chunk.item.name, chunk.item.type)
                  
                  // Dedupe by id or pending with same name
                  let existing = currentFunctionCalls.find(fc => fc.id === chunk.item.id)
                  if (!existing) {
                    existing = [...currentFunctionCalls].reverse().find(fc => 
                      fc.status === "pending" && 
                      !fc.id && 
                      (fc.name === (chunk.item.tool_name || chunk.item.name || chunk.item.type))
                    )
                  }
                  
                  if (existing) {
                    existing.id = chunk.item.id
                    existing.type = chunk.item.type
                    existing.name = chunk.item.tool_name || chunk.item.name || chunk.item.type || existing.name
                    existing.arguments = chunk.item.inputs || existing.arguments
                    console.log("🟡 UPDATED existing pending tool call with id:", existing.id)
                  } else {
                    const functionCall = {
                      name: chunk.item.tool_name || chunk.item.name || chunk.item.type || "unknown",
                      arguments: chunk.item.inputs || {},
                      status: "pending" as const,
                      id: chunk.item.id,
                      type: chunk.item.type
                    }
                    currentFunctionCalls.push(functionCall)
                    console.log("🟡 Function calls now:", currentFunctionCalls.map(fc => ({ id: fc.id, name: fc.name, type: fc.type })))
                  }
                }
                
                // Handle function call results
                else if (chunk.type === "response.function_call.result" || chunk.type === "function_call_result") {
                  console.log("Function call result:", chunk.result || chunk)
                  const lastFunctionCall = currentFunctionCalls[currentFunctionCalls.length - 1]
                  if (lastFunctionCall) {
                    lastFunctionCall.result = chunk.result || chunk.output || chunk.response
                    lastFunctionCall.status = "completed"
                  }
                }
                
                // Handle tool call results  
                else if (chunk.type === "response.tool_call.result" || chunk.type === "tool_call_result") {
                  console.log("Tool call result:", chunk.result || chunk)
                  const lastFunctionCall = currentFunctionCalls[currentFunctionCalls.length - 1]
                  if (lastFunctionCall) {
                    lastFunctionCall.result = chunk.result || chunk.output || chunk.response
                    lastFunctionCall.status = "completed" 
                  }
                }
                
                // Handle generic results that might be in different formats
                else if ((chunk.type && chunk.type.includes("result")) || chunk.result) {
                  console.log("Generic result:", chunk)
                  const lastFunctionCall = currentFunctionCalls[currentFunctionCalls.length - 1]
                  if (lastFunctionCall && !lastFunctionCall.result) {
                    lastFunctionCall.result = chunk.result || chunk.output || chunk.response || chunk
                    lastFunctionCall.status = "completed"
                  }
                }
                
                // Handle text output streaming (Realtime API)
                else if (chunk.type === "response.output_text.delta") {
                  console.log("Text delta (Realtime API):", chunk.delta)
                  currentContent += chunk.delta || ""
                }
                
                // Log unhandled chunks
                else if (chunk.type !== null && chunk.object !== "response.chunk") {
                  console.log("Unhandled chunk format:", chunk)
                }
                
                // Update streaming message
                if (!controller.signal.aborted && thisStreamId === streamIdRef.current) {
                  setStreamingMessage({
                    content: currentContent,
                    functionCalls: [...currentFunctionCalls],
                    timestamp: new Date()
                  })
                }
                
              } catch (parseError) {
                console.warn("Failed to parse chunk:", line, parseError)
              }
            }
          }
        }
      } finally {
        reader.releaseLock()
      }

      // Finalize the message
      const finalMessage: Message = {
        role: "assistant",
        content: currentContent,
        functionCalls: currentFunctionCalls,
        timestamp: new Date()
      }
      
      if (!controller.signal.aborted && thisStreamId === streamIdRef.current) {
        setMessages(prev => [...prev, finalMessage])
        setStreamingMessage(null)
      }
      
      // Store the response ID for the next request for this endpoint
      if (newResponseId && !controller.signal.aborted && thisStreamId === streamIdRef.current) {
        setPreviousResponseIds(prev => ({
          ...prev,
          [endpoint]: newResponseId
        }))
      }
      
      // Trigger sidebar refresh to include this conversation (with small delay to ensure backend has processed)
      setTimeout(() => {
        try { refreshConversations() } catch {}
      }, 100)
      
    } catch (error) {
      // If stream was aborted (e.g., starting new conversation), do not append errors or final messages
      if (streamAbortRef.current?.signal.aborted) {
        return
      }
      console.error("SSE Stream error:", error)
      setStreamingMessage(null)
      
      const errorMessage: Message = {
        role: "assistant",
        content: "Sorry, I couldn't connect to the chat service. Please try again.",
        timestamp: new Date()
      }
      setMessages(prev => [...prev, errorMessage])
    }
  }


  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!input.trim() || loading) return

    const userMessage: Message = {
      role: "user",
      content: input.trim(),
      timestamp: new Date()
    }

    setMessages(prev => [...prev, userMessage])
    setInput("")
    setLoading(true)
    setIsFilterHighlighted(false)

    if (asyncMode) {
      await handleSSEStream(userMessage)
    } else {
      // Original non-streaming logic
      try {
        const apiEndpoint = endpoint === "chat" ? "/api/chat" : "/api/langflow"
        
        const requestBody: RequestBody = {
          prompt: userMessage.content,
          ...(parsedFilterData?.filters && (() => {
            const filters = parsedFilterData.filters
            const processed: SelectedFilters = {
              data_sources: [],
              document_types: [],
              owners: []
            }
            // Only copy non-wildcard arrays
          processed.data_sources = filters.data_sources.includes("*") ? [] : filters.data_sources
          processed.document_types = filters.document_types.includes("*") ? [] : filters.document_types
          processed.owners = filters.owners.includes("*") ? [] : filters.owners
          
          // Only include filters if any array has values
          const hasFilters = processed.data_sources.length > 0 || 
                            processed.document_types.length > 0 || 
                            processed.owners.length > 0
          return hasFilters ? { filters: processed } : {}
          })()),
          limit: parsedFilterData?.limit ?? 10,
          scoreThreshold: parsedFilterData?.scoreThreshold ?? 0
        }
        
        // Add previous_response_id if we have one for this endpoint
        const currentResponseId = previousResponseIds[endpoint]
        if (currentResponseId) {
          requestBody.previous_response_id = currentResponseId
        }
        
        const response = await fetch(apiEndpoint, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(requestBody),
        })

        const result = await response.json()
        
        if (response.ok) {
          const assistantMessage: Message = {
            role: "assistant",
            content: result.response,
            timestamp: new Date()
          }
          setMessages(prev => [...prev, assistantMessage])
          
          // Store the response ID if present for this endpoint
          if (result.response_id) {
            setPreviousResponseIds(prev => ({
              ...prev,
              [endpoint]: result.response_id
            }))
          }
          // Trigger sidebar refresh to include/update this conversation (with small delay to ensure backend has processed)
          setTimeout(() => {
            try { refreshConversations() } catch {}
          }, 100)
        } else {
          console.error("Chat failed:", result.error)
          const errorMessage: Message = {
            role: "assistant",
            content: "Sorry, I encountered an error. Please try again.",
            timestamp: new Date()
          }
          setMessages(prev => [...prev, errorMessage])
        }
      } catch (error) {
        console.error("Chat error:", error)
        const errorMessage: Message = {
          role: "assistant",
          content: "Sorry, I couldn't connect to the chat service. Please try again.",
          timestamp: new Date()
        }
        setMessages(prev => [...prev, errorMessage])
      }
    }
    
    setLoading(false)
  }

  const toggleFunctionCall = (functionCallId: string) => {
    setExpandedFunctionCalls(prev => {
      const newSet = new Set(prev)
      if (newSet.has(functionCallId)) {
        newSet.delete(functionCallId)
      } else {
        newSet.add(functionCallId)
      }
      return newSet
    })
  }

  const handleForkConversation = (messageIndex: number, event?: React.MouseEvent) => {
    // Prevent any default behavior and stop event propagation
    if (event) {
      event.preventDefault()
      event.stopPropagation()
    }
    
    // Set interaction state to prevent auto-scroll interference
    const forkTimestamp = Date.now()
    setIsUserInteracting(true)
    setIsForkingInProgress(true)
    setLastForkTimestamp(forkTimestamp)
    
    console.log("Fork conversation called for message index:", messageIndex)
    
    // Get messages up to and including the selected assistant message
    const messagesToKeep = messages.slice(0, messageIndex + 1)
    
    // The selected message should be an assistant message (since fork button is only on assistant messages)
    const forkedMessage = messages[messageIndex]
    if (forkedMessage.role !== 'assistant') {
      console.error('Fork button should only be on assistant messages')
      setIsUserInteracting(false)
      setIsForkingInProgress(false)
      setLastForkTimestamp(0)
      return
    }
    
    // For forking, we want to continue from the response_id of the assistant message we're forking from
    // Since we don't store individual response_ids per message yet, we'll use the current conversation's response_id
    // This means we're continuing the conversation thread from that point
    const responseIdToForkFrom = currentConversationId || previousResponseIds[endpoint]
    
    // Create a new conversation by properly forking
    setMessages(messagesToKeep)
    
    // Use the chat context's fork method which handles creating a new conversation properly
    if (forkFromResponse) {
      forkFromResponse(responseIdToForkFrom || '')
    } else {
      // Fallback to manual approach
      setCurrentConversationId(null) // This creates a new conversation thread
      
      // Set the response_id we want to continue from as the previous response ID
      // This tells the backend to continue the conversation from this point
      setPreviousResponseIds(prev => ({
        ...prev,
        [endpoint]: responseIdToForkFrom
      }))
    }
    
    console.log("Forked conversation with", messagesToKeep.length, "messages")
    
    // Reset interaction state after a longer delay to ensure all effects complete
    setTimeout(() => {
      setIsUserInteracting(false)
      setIsForkingInProgress(false)
      console.log("Fork interaction complete, re-enabling auto effects")
    }, 500)
    
    // The original conversation remains unchanged in the sidebar
    // This new forked conversation will get its own response_id when the user sends the next message
  }

  const renderFunctionCalls = (functionCalls: FunctionCall[], messageIndex?: number) => {
    if (!functionCalls || functionCalls.length === 0) return null
    
    return (
      <div className="mb-3 space-y-2">
        {functionCalls.map((fc, index) => {
          const functionCallId = `${messageIndex || 'streaming'}-${index}`
          const isExpanded = expandedFunctionCalls.has(functionCallId)
          
          // Determine display name - show both name and type if available
          const displayName = fc.type && fc.type !== fc.name 
            ? `${fc.name} (${fc.type})`
            : fc.name
          
          return (
            <div key={index} className="rounded-lg bg-blue-500/10 border border-blue-500/20 p-3">
              <div 
                className="flex items-center gap-2 cursor-pointer hover:bg-blue-500/5 -m-3 p-3 rounded-lg transition-colors"
                onClick={() => toggleFunctionCall(functionCallId)}
              >
                <Settings className="h-4 w-4 text-blue-400" />
                <span className="text-sm font-medium text-blue-400 flex-1">
                  Function Call: {displayName}
                </span>
                {fc.id && (
                  <span className="text-xs text-blue-300/70 font-mono">
                    {fc.id.substring(0, 8)}...
                  </span>
                )}
                <div className={`px-2 py-1 rounded text-xs font-medium ${
                  fc.status === "completed" ? "bg-green-500/20 text-green-400" :
                  fc.status === "error" ? "bg-red-500/20 text-red-400" :
                  "bg-yellow-500/20 text-yellow-400"
                }`}>
                  {fc.status}
                </div>
                {isExpanded ? (
                  <ChevronDown className="h-4 w-4 text-blue-400" />
                ) : (
                  <ChevronRight className="h-4 w-4 text-blue-400" />
                )}
              </div>
              
              {isExpanded && (
                <div className="mt-3 pt-3 border-t border-blue-500/20">
                  {/* Show type information if available */}
                  {fc.type && (
                    <div className="text-xs text-muted-foreground mb-3">
                      <span className="font-medium">Type:</span>
                      <span className="ml-2 px-2 py-1 bg-muted/30 rounded font-mono">
                        {fc.type}
                      </span>
                    </div>
                  )}
                  
                  {/* Show ID if available */}
                  {fc.id && (
                    <div className="text-xs text-muted-foreground mb-3">
                      <span className="font-medium">ID:</span>
                      <span className="ml-2 px-2 py-1 bg-muted/30 rounded font-mono">
                        {fc.id}
                      </span>
                    </div>
                  )}
                  
                  {/* Show arguments - either completed or streaming */}
                  {(fc.arguments || fc.argumentsString) && (
                    <div className="text-xs text-muted-foreground mb-3">
                      <span className="font-medium">Arguments:</span>
                      <pre className="mt-1 p-2 bg-muted/30 rounded text-xs overflow-x-auto">
                        {fc.arguments 
                          ? JSON.stringify(fc.arguments, null, 2)
                          : fc.argumentsString || "..."
                        }
                      </pre>
                    </div>
                  )}
                  
                  {fc.result && (
                    <div className="text-xs text-muted-foreground">
                      <span className="font-medium">Result:</span>
                      {Array.isArray(fc.result) ? (
                        <div className="mt-1 space-y-2">
                          {(() => {
                            // Handle different result formats
                            let resultsToRender = fc.result
                            
                            // Check if this is function_call format with nested results
                            // Function call format: results = [{ results: [...] }]
                            // Tool call format: results = [{ text_key: ..., data: {...} }]
                            if (fc.result.length > 0 && 
                                fc.result[0]?.results && 
                                Array.isArray(fc.result[0].results) &&
                                !fc.result[0].text_key) {
                              resultsToRender = fc.result[0].results
                            }
                            
                            type ToolResultItem = {
                              text_key?: string
                              data?: { file_path?: string; text?: string }
                              filename?: string
                              page?: number
                              score?: number
                              source_url?: string | null
                              text?: string
                            }
                            const items = resultsToRender as unknown as ToolResultItem[]
                            return items.map((result, idx: number) => (
                              <div key={idx} className="p-2 bg-muted/30 rounded border border-muted/50">
                                {/* Handle tool_call format (file_path in data) */}
                                {result.data?.file_path && (
                                  <div className="font-medium text-blue-400 mb-1 text-xs">
                                    📄 {result.data.file_path || "Unknown file"}
                                  </div>
                                )}
                                
                                {/* Handle function_call format (filename directly) */}
                                {result.filename && !result.data?.file_path && (
                                  <div className="font-medium text-blue-400 mb-1 text-xs">
                                    📄 {result.filename}
                                    {result.page && ` (page ${result.page})`}
                                    {result.score && (
                                      <span className="ml-2 text-xs text-muted-foreground">
                                        Score: {result.score.toFixed(3)}
                                      </span>
                                    )}
                                  </div>
                                )}
                                
                                {/* Handle tool_call text format */}
                                {result.data?.text && (
                                  <div className="text-xs text-foreground whitespace-pre-wrap max-h-32 overflow-y-auto">
                                    {result.data.text.length > 300 
                                      ? result.data.text.substring(0, 300) + "..." 
                                      : result.data.text
                                    }
                                  </div>
                                )}
                                
                                {/* Handle function_call text format */}
                                {result.text && !result.data?.text && (
                                  <div className="text-xs text-foreground whitespace-pre-wrap max-h-32 overflow-y-auto">
                                    {result.text.length > 300 
                                      ? result.text.substring(0, 300) + "..." 
                                      : result.text
                                    }
                                  </div>
                                )}
                                
                                {/* Show additional metadata for function_call format */}
                                {result.source_url && (
                                  <div className="text-xs text-muted-foreground mt-1">
                                    <a href={result.source_url} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">
                                      Source URL
                                    </a>
                                  </div>
                                )}
                                
                                {result.text_key && (
                                  <div className="text-xs text-muted-foreground mt-1">
                                    Key: {result.text_key}
                                  </div>
                                )}
                              </div>
                            ))
                          })()}
                          <div className="text-xs text-muted-foreground">
                            Found {(() => {
                              let resultsToCount = fc.result
                              if (fc.result.length > 0 && 
                                  fc.result[0]?.results && 
                                  Array.isArray(fc.result[0].results) &&
                                  !fc.result[0].text_key) {
                                resultsToCount = fc.result[0].results
                              }
                              return resultsToCount.length
                            })()} result{(() => {
                              let resultsToCount = fc.result
                              if (fc.result.length > 0 && 
                                  fc.result[0]?.results && 
                                  Array.isArray(fc.result[0].results) &&
                                  !fc.result[0].text_key) {
                                resultsToCount = fc.result[0].results
                              }
                              return resultsToCount.length !== 1 ? 's' : ''
                            })()}
                          </div>
                        </div>
                      ) : (
                        <pre className="mt-1 p-2 bg-muted/30 rounded text-xs overflow-x-auto">
                          {JSON.stringify(fc.result, null, 2)}
                        </pre>
                      )}
                    </div>
                  )}
                </div>
              )}
            </div>
          )
        })}
      </div>
    )
  }

  const suggestionChips = [
    "Show me this quarter's top 10 deals",
    "Summarize recent client interactions",
    "Search OpenSearch for mentions of our competitors"
  ]

  const handleSuggestionClick = (suggestion: string) => {
    setInput(suggestion)
    inputRef.current?.focus()
  }

  return (
    <div className={`fixed inset-0 md:left-72 top-[53px] flex flex-col transition-all duration-300 ${
      isMenuOpen && isPanelOpen ? 'md:right-[704px]' : // Both open: 384px (menu) + 320px (KF panel)
      isMenuOpen ? 'md:right-96' : // Only menu open: 384px
      isPanelOpen ? 'md:right-80' : // Only KF panel open: 320px
      'md:right-6' // Neither open: 24px
    }`}>
      {/* Debug header - only show in debug mode */}
      {isDebugMode && (
        <div className="flex items-center justify-between mb-6 px-6 pt-6">
          <div className="flex items-center gap-2">
          </div>
          <div className="flex items-center gap-4">
            {/* Async Mode Toggle */}
            <div className="flex items-center gap-2 bg-muted/50 rounded-lg p-1">
              <Button
                variant={!asyncMode ? "default" : "ghost"}
                size="sm"
                onClick={() => setAsyncMode(false)}
                className="h-7 text-xs"
              >
                Streaming Off 
              </Button>
              <Button
                variant={asyncMode ? "default" : "ghost"}
                size="sm"
                onClick={() => setAsyncMode(true)}
                className="h-7 text-xs"
              >
                <Zap className="h-3 w-3 mr-1" />
                Streaming On
              </Button>
            </div>
            {/* Endpoint Toggle */}
            <div className="flex items-center gap-2 bg-muted/50 rounded-lg p-1">
              <Button
                variant={endpoint === "chat" ? "default" : "ghost"}
                size="sm"
                onClick={() => handleEndpointChange("chat")}
                className="h-7 text-xs"
              >
                Chat
              </Button>
              <Button
                variant={endpoint === "langflow" ? "default" : "ghost"}
                size="sm"
                onClick={() => handleEndpointChange("langflow")}
                className="h-7 text-xs"
              >
                Langflow
              </Button>
            </div>
          </div>
        </div>
      )}

      <div className={`flex-1 flex flex-col min-h-0 px-6 ${!isDebugMode ? 'pt-6' : ''}`}>
        <div className="flex-1 flex flex-col gap-4 min-h-0 overflow-hidden">
          {/* Messages Area */}
          <div 
            className={`flex-1 overflow-y-auto overflow-x-hidden scrollbar-hide space-y-6 min-h-0 transition-all relative ${
              isDragOver 
                ? 'bg-primary/10 border-2 border-dashed border-primary rounded-lg p-4' 
                : ''
            }`}
            onDragEnter={handleDragEnter}
            onDragOver={handleDragOver}
            onDragLeave={handleDragLeave}
            onDrop={handleDrop}
          >
            {messages.length === 0 && !streamingMessage ? (
              <div className="flex items-center justify-center h-full text-muted-foreground">
                <div className="text-center">
                  {isDragOver ? (
                    <>
                      <Upload className="h-12 w-12 mx-auto mb-4 text-primary" />
                      <p className="text-primary font-medium">Drop your document here</p>
                      <p className="text-sm mt-2">I&apos;ll process it and add it to our conversation context</p>
                    </>
                  ) : isUploading ? (
                    <>
                      <Loader2 className="h-12 w-12 mx-auto mb-4 animate-spin" />
                      <p>Processing your document...</p>
                      <p className="text-sm mt-2">This may take a few moments</p>
                    </>
                  ) : null}
                </div>
              </div>
            ) : (
              <>
                {messages.map((message, index) => (
                  <div key={index} className="space-y-6 group">
                    {message.role === "user" && (
                      <div className="flex gap-3">
                        <Avatar className="w-8 h-8 flex-shrink-0">
                          <AvatarImage src={user?.picture} alt={user?.name} />
                          <AvatarFallback className="text-sm bg-primary/20 text-primary">
                            {user?.name ? user.name.charAt(0).toUpperCase() : <User className="h-4 w-4" />}
                          </AvatarFallback>
                        </Avatar>
                        <div className="flex-1">
                          <p className="text-foreground whitespace-pre-wrap break-words overflow-wrap-anywhere">{message.content}</p>
                        </div>
                      </div>
                    )}
                    
                    {message.role === "assistant" && (
                      <div className="flex gap-3">
                        <div className="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center flex-shrink-0">
                          <Bot className="h-4 w-4 text-accent-foreground" />
                        </div>
                        <div className="flex-1 min-w-0">
                          {renderFunctionCalls(message.functionCalls || [], index)}
                          <p className="text-foreground whitespace-pre-wrap break-words overflow-wrap-anywhere">{message.content}</p>
                        </div>
                        {endpoint === 'chat' && (
                          <div className="flex-shrink-0 ml-2">
                            <button
                              onClick={(e) => handleForkConversation(index, e)}
                              className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-accent rounded text-muted-foreground hover:text-foreground"
                              title="Fork conversation from here"
                            >
                              <GitBranch className="h-3 w-3" />
                            </button>
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                ))}
                
                {/* Streaming Message Display */}
                {streamingMessage && (
                  <div className="flex gap-3">
                    <div className="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center flex-shrink-0">
                      <Bot className="h-4 w-4 text-accent-foreground" />
                    </div>
                    <div className="flex-1">
                      {renderFunctionCalls(streamingMessage.functionCalls, messages.length)}
                      <p className="text-foreground whitespace-pre-wrap break-words overflow-wrap-anywhere">
                        {streamingMessage.content}
                        <span className="inline-block w-2 h-4 bg-blue-400 ml-1 animate-pulse"></span>
                      </p>
                    </div>
                  </div>
                )}
                
                {/* Loading animation - shows immediately after user submits */}
                {loading && (
                  <div className="flex gap-3">
                    <div className="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center flex-shrink-0">
                      <Bot className="h-4 w-4 text-accent-foreground" />
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center gap-2">
                        <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
                        <span className="text-sm text-muted-foreground">Thinking...</span>
                      </div>
                    </div>
                  </div>
                )}
                <div ref={messagesEndRef} />
              </>
            )}
            
            {/* Drag overlay for existing messages */}
            {isDragOver && messages.length > 0 && (
              <div className="absolute inset-0 bg-primary/20 backdrop-blur-sm flex items-center justify-center rounded-lg">
                <div className="text-center">
                  <Upload className="h-8 w-8 mx-auto mb-2 text-primary" />
                  <p className="text-primary font-medium">Drop document to add context</p>
                </div>
              </div>
            )}
          </div>
        </div>

      </div>
      
      {/* Suggestion chips - always show unless streaming */}
      {!streamingMessage && (
        <div className="flex-shrink-0 p-6 pb-4 flex justify-center">
          <div className="w-full max-w-[75%] relative">
            <div className="flex gap-2 justify-start overflow-hidden">
              {suggestionChips.map((suggestion, index) => (
                <button
                  key={index}
                  onClick={() => handleSuggestionClick(suggestion)}
                  className="px-4 py-2 bg-muted/30 hover:bg-muted/50 rounded-lg text-sm text-muted-foreground hover:text-foreground transition-colors whitespace-nowrap"
                >
                  {suggestion}
                </button>
              ))}
            </div>
            {/* Fade out gradient on the right */}
            <div className="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent pointer-events-none"></div>
          </div>
        </div>
      )}
      
      {/* Input Area - Fixed at bottom */}
      <div className="flex-shrink-0 p-6 pb-8 flex justify-center">
        <div className="w-full max-w-[75%]">
          <form onSubmit={handleSubmit} className="relative">
            <div className="relative w-full bg-muted/20 rounded-lg border border-border/50 focus-within:ring-1 focus-within:ring-ring">
              {selectedFilter && (
                <div className="flex items-center gap-2 px-4 pt-3 pb-1">
                  <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium transition-colors ${
                    isFilterHighlighted 
                      ? 'bg-blue-500/40 text-blue-300 ring-2 ring-blue-400/50' 
                      : 'bg-blue-500/20 text-blue-400'
                  }`}>
                    @filter:{selectedFilter.name}
                    <button
                      type="button"
                      onClick={() => {
                        setSelectedFilter(null)
                        setIsFilterHighlighted(false)
                      }}
                      className="ml-1 hover:bg-blue-500/30 rounded-full p-0.5"
                    >
                      <X className="h-3 w-3" />
                    </button>
                  </span>
                </div>
              )}
              <textarea
                ref={inputRef}
                value={input}
                onChange={(e) => {
                  const newValue = e.target.value
                  setInput(newValue)
                  
                  // Clear filter highlight when user starts typing
                  if (isFilterHighlighted) {
      setIsFilterHighlighted(false)
      try { refreshConversations() } catch {}
    }
                  
                  // Find if there's an @ at the start of the last word
                  const words = newValue.split(' ')
                  const lastWord = words[words.length - 1]
                  
                  if (lastWord.startsWith('@') && !dropdownDismissed) {
                    const searchTerm = lastWord.slice(1) // Remove the @
                    console.log('Setting search term:', searchTerm)
                    setFilterSearchTerm(searchTerm)
                    setSelectedFilterIndex(0)
                    
                    if (!isFilterDropdownOpen) {
                      loadAvailableFilters()
                      setIsFilterDropdownOpen(true)
                    }
                  } else if (isFilterDropdownOpen) {
                    // Close dropdown if @ is no longer present
                    console.log('Closing dropdown - no @ found')
                    setIsFilterDropdownOpen(false)
                    setFilterSearchTerm("")
                  }
                  
                  // Reset dismissed flag when user moves to a different word
                  if (dropdownDismissed && !lastWord.startsWith('@')) {
                    setDropdownDismissed(false)
                  }
                }}
                onKeyDown={(e) => {
                  // Handle backspace for filter clearing
                  if (e.key === 'Backspace' && selectedFilter && input.trim() === '') {
                    e.preventDefault()
                    
                    if (isFilterHighlighted) {
                      // Second backspace - remove the filter
                      setSelectedFilter(null)
                      setIsFilterHighlighted(false)
                    } else {
                      // First backspace - highlight the filter
                      setIsFilterHighlighted(true)
                    }
                    return
                  }
                  
                  if (isFilterDropdownOpen) {
                    const filteredFilters = availableFilters.filter(filter => 
                      filter.name.toLowerCase().includes(filterSearchTerm.toLowerCase())
                    )
                    
                    if (e.key === 'Escape') {
                      e.preventDefault()
                      setIsFilterDropdownOpen(false)
                      setFilterSearchTerm("")
                      setSelectedFilterIndex(0)
                      setDropdownDismissed(true)
                      
                      // Keep focus on the textarea so user can continue typing normally
                      inputRef.current?.focus()
                      return
                    }
                    
                    if (e.key === 'ArrowDown') {
                      e.preventDefault()
                      setSelectedFilterIndex(prev => 
                        prev < filteredFilters.length - 1 ? prev + 1 : 0
                      )
                      return
                    }
                    
                    if (e.key === 'ArrowUp') {
                      e.preventDefault()
                      setSelectedFilterIndex(prev => 
                        prev > 0 ? prev - 1 : filteredFilters.length - 1
                      )
                      return
                    }
                    
                    if (e.key === 'Enter') {
                      // Check if we're at the end of an @ mention (space before cursor or end of input)
                      const cursorPos = e.currentTarget.selectionStart || 0
                      const textBeforeCursor = input.slice(0, cursorPos)
                      const words = textBeforeCursor.split(' ')
                      const lastWord = words[words.length - 1]
                      
                      if (lastWord.startsWith('@') && filteredFilters[selectedFilterIndex]) {
                        e.preventDefault()
                        handleFilterSelect(filteredFilters[selectedFilterIndex])
                        return
                      }
                    }
                    
                    if (e.key === ' ') {
                      // Select filter on space if we're typing an @ mention
                      const cursorPos = e.currentTarget.selectionStart || 0
                      const textBeforeCursor = input.slice(0, cursorPos)
                      const words = textBeforeCursor.split(' ')
                      const lastWord = words[words.length - 1]
                      
                      if (lastWord.startsWith('@') && filteredFilters[selectedFilterIndex]) {
                        e.preventDefault()
                        handleFilterSelect(filteredFilters[selectedFilterIndex])
                        return
                      }
                    }
                  }
                  
                  if (e.key === 'Enter' && !e.shiftKey && !isFilterDropdownOpen) {
                    e.preventDefault()
                    if (input.trim() && !loading) {
                      // Trigger form submission by finding the form and calling submit
                      const form = e.currentTarget.closest('form')
                      if (form) {
                        form.requestSubmit()
                      }
                    }
                  }
                }}
                placeholder="Type to ask a question..."
                disabled={loading}
                className={`w-full bg-transparent px-4 ${selectedFilter ? 'py-2 pb-4' : 'py-4'} min-h-[100px] focus-visible:outline-none resize-none`}
                rows={1}
              />
            </div>
            <input
              ref={fileInputRef}
              type="file"
              onChange={handleFilePickerChange}
              className="hidden"
              accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
            />
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={handleFilterDropdownToggle}
              className="absolute bottom-3 left-3 h-8 w-8 p-0 rounded-full hover:bg-muted/50"
            >
              <AtSign className="h-4 w-4" />
            </Button>
            {isFilterDropdownOpen && (
              <div ref={dropdownRef} className="absolute bottom-14 left-0 w-64 bg-popover border border-border rounded-md shadow-md z-50 p-2">
                <div className="space-y-1">
                  {filterSearchTerm && (
                    <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
                      Searching: @{filterSearchTerm}
                    </div>
                  )}
                  {availableFilters.length === 0 ? (
                    <div className="px-2 py-3 text-sm text-muted-foreground">
                      No knowledge filters available
                    </div>
                  ) : (
                    <>
                      {!filterSearchTerm && (
                        <button
                          onClick={() => handleFilterSelect(null)}
                          className={`w-full text-left px-2 py-2 text-sm rounded hover:bg-muted/50 flex items-center justify-between ${
                            selectedFilterIndex === -1 ? 'bg-muted/50' : ''
                          }`}
                        >
                          <span>No filter</span>
                          {!selectedFilter && (
                            <div className="w-2 h-2 rounded-full bg-blue-500" />
                          )}
                        </button>
                      )}
                      {availableFilters
                        .filter(filter => 
                          filter.name.toLowerCase().includes(filterSearchTerm.toLowerCase())
                        )
                        .map((filter, index) => (
                          <button
                            key={filter.id}
                            onClick={() => handleFilterSelect(filter)}
                            className={`w-full text-left px-2 py-2 text-sm rounded hover:bg-muted/50 flex items-center justify-between ${
                              index === selectedFilterIndex ? 'bg-muted/50' : ''
                            }`}
                          >
                            <div>
                              <div className="font-medium">{filter.name}</div>
                              {filter.description && (
                                <div className="text-xs text-muted-foreground truncate">
                                  {filter.description}
                                </div>
                              )}
                            </div>
                            {selectedFilter?.id === filter.id && (
                              <div className="w-2 h-2 rounded-full bg-blue-500" />
                            )}
                          </button>
                        ))}
                      {availableFilters.filter(filter => 
                        filter.name.toLowerCase().includes(filterSearchTerm.toLowerCase())
                      ).length === 0 && filterSearchTerm && (
                        <div className="px-2 py-3 text-sm text-muted-foreground">
                          No filters match &quot;{filterSearchTerm}&quot;
                        </div>
                      )}
                    </>
                  )}
                </div>
              </div>
            )}
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={handleFilePickerClick}
              disabled={isUploading}
              className="absolute bottom-3 left-12 h-8 w-8 p-0 rounded-full hover:bg-muted/50"
            >
              <Plus className="h-4 w-4" />
            </Button>
            <Button
              type="submit"
              disabled={!input.trim() || loading}
              className="absolute bottom-3 right-3 rounded-lg h-10 px-4"
            >
              {loading ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                "Send"
              )}
            </Button>
          </form>
        </div>
      </div>
    </div>
  )
}

export default function ProtectedChatPage() {
  return (
    <ProtectedRoute>
      <ChatPage />
    </ProtectedRoute>
  )
}