'use client'

import { useState, useCallback, useRef, useEffect } from 'react'
import { useThread } from '@standardagents/react'
import { MessageList } from './MessageList'
import { MessageInput } from './MessageInput'
import { type Thread, getThreadTitle } from '../hooks/useThreads'

interface ChatProps {
  thread?: Thread
  onUpdateTitle?: (title: string) => void
  /** Called when the pushed run state changes, so the thread list can refresh. */
  onRunStateChange?: () => void
  sidebarOpen?: boolean
}

export function Chat({ thread, onUpdateTitle, onRunStateChange, sidebarOpen = true }: ChatProps) {
  const { status, runStatus } = useThread()
  const runState = runStatus?.state
  const lastRunState = useRef(runState)

  // Event-driven sidebar refresh: one read per run-state transition.
  useEffect(() => {
    if (lastRunState.current !== undefined && runState !== lastRunState.current) {
      onRunStateChange?.()
    }
    lastRunState.current = runState
  }, [runState, onRunStateChange])
  const [isEditingTitle, setIsEditingTitle] = useState(false)
  const [titleValue, setTitleValue] = useState('')
  const inputRef = useRef<HTMLInputElement>(null)

  const agentName = thread?.agent?.title || thread?.agent?.name || 'Agent'
  const threadTitle = thread ? getThreadTitle(thread) : 'Untitled'

  // Focus input when entering edit mode
  useEffect(() => {
    if (isEditingTitle && inputRef.current) {
      inputRef.current.focus()
      inputRef.current.select()
    }
  }, [isEditingTitle])

  const handleStartEdit = useCallback(() => {
    const currentTitle = thread ? getThreadTitle(thread) : ''
    setTitleValue(currentTitle === 'Untitled' ? '' : currentTitle)
    setIsEditingTitle(true)
  }, [thread])

  const handleSaveTitle = useCallback(() => {
    const trimmed = titleValue.trim()
    if (trimmed && onUpdateTitle) {
      onUpdateTitle(trimmed)
    }
    setIsEditingTitle(false)
  }, [titleValue, onUpdateTitle])

  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleSaveTitle()
    } else if (e.key === 'Escape') {
      setIsEditingTitle(false)
    }
  }, [handleSaveTitle])

  // Connection status LED color
  const ledColor = status === 'connected'
    ? 'bg-emerald-500'
    : status === 'connecting' || status === 'reconnecting'
      ? 'bg-yellow-500 animate-pulse'
      : 'bg-red-500'

  return (
    <div className="flex-1 flex flex-col w-full">
      {/* Header bar - frosted glass effect, fixed on scroll */}
      <div className={`
        sticky top-0 z-20 h-[47px] flex items-center border-b border-[var(--border-primary)] bg-[var(--bg-primary)]/60 backdrop-blur-md
        transition-[padding] duration-300 ease-out
        ${sidebarOpen ? 'px-4' : 'pl-14 pr-4'}
      `}>
        <div className="flex items-center justify-between w-full">
          {/* Editable title on the left */}
          <div className="flex items-center gap-2 min-w-0">
            {isEditingTitle ? (
              <input
                ref={inputRef}
                type="text"
                value={titleValue}
                onChange={(e) => setTitleValue(e.target.value)}
                onBlur={handleSaveTitle}
                onKeyDown={handleKeyDown}
                className="text-sm font-medium text-[var(--text-primary)] bg-transparent outline-none w-full max-w-xs"
                placeholder="Enter title..."
              />
            ) : (
              <>
                <span className="text-sm font-medium text-[var(--text-primary)] truncate max-w-xs">
                  {threadTitle}
                </span>
                <button
                  onClick={handleStartEdit}
                  className="p-1 text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors shrink-0"
                  title="Edit title"
                >
                  <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
                    <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
                    <path d="m15 5 4 4" />
                  </svg>
                </button>
              </>
            )}
          </div>

          {/* Agent name and connection status on the right */}
          <div className="flex items-center gap-3 ml-4">
            {runState === 'running' && (
              <span className="text-xs text-violet-500 hidden sm:inline">Running</span>
            )}
            <span className="text-sm text-[var(--text-tertiary)] hidden sm:inline">{agentName}</span>
            <div
              className={`w-2 h-2 rounded-full ${ledColor}`}
              title={status === 'connected' ? 'Connected' : status === 'connecting' || status === 'reconnecting' ? 'Connecting...' : 'Disconnected'}
            />
          </div>
        </div>
      </div>

      <div
        className="flex-1 overflow-y-auto"
        style={{
          maskImage: 'linear-gradient(to bottom, black calc(100% - 80px), transparent 100%)',
          WebkitMaskImage: 'linear-gradient(to bottom, black calc(100% - 80px), transparent 100%)',
        }}
      >
        <div className="max-w-3xl mx-auto w-full pb-20">
          <MessageList />
        </div>
      </div>

      <div className="sticky bottom-0 z-20 pb-4 px-4 pointer-events-none">
        {/* Opaque blocker behind input - covers bottom half of input area down */}
        <div className="absolute bottom-0 left-0 right-0 h-12 bg-[var(--bg-primary)] pointer-events-none" />
        <div className="relative max-w-3xl mx-auto w-full pointer-events-auto">
          <MessageInput />
        </div>
      </div>
    </div>
  )
}