'use client'

import { useState, useRef, useEffect, useCallback } from 'react'
import { useThread } from '@standardagents/react'

export function MessageInput() {
  const [input, setInput] = useState('')
  const [sending, setSending] = useState(false)
  const {
    runStatus,
    sendMessage,
    stopExecution,
    addAttachment,
    attachments,
    removeAttachment,
  } = useThread()
  const textareaRef = useRef<HTMLTextAreaElement>(null)
  // Pushed by the runtime; drives the stop button instead of history loading.
  const running = runStatus?.state === 'running'
  const fileInputRef = useRef<HTMLInputElement>(null)

  const handleSubmit = useCallback(async (e: React.FormEvent) => {
    e.preventDefault()
    if ((!input.trim() && attachments.length === 0) || running || sending) return

    const message = input
    setInput('')
    setSending(true)

    try {
      // SDK's sendMessage automatically includes queued attachments and clears them
      await sendMessage({ role: 'user', content: message })
    } catch (error) {
      console.error('Failed to send message:', error)
      setInput(message)
    } finally {
      setSending(false)
    }
  }, [input, attachments.length, running, sending, sendMessage])

  const handleFileSelect = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (!files || files.length === 0) return

    // SDK handles base64 encoding, dimensions, and preview URLs
    for (const file of Array.from(files)) {
      await addAttachment(file)
    }

    // Reset file input and refocus textarea
    if (fileInputRef.current) {
      fileInputRef.current.value = ''
    }
    textareaRef.current?.focus()
  }, [addAttachment])

  // Auto-resize textarea
  useEffect(() => {
    const textarea = textareaRef.current
    if (textarea) {
      textarea.style.height = 'auto'
      const newHeight = Math.min(Math.max(textarea.scrollHeight, 24), 200)
      textarea.style.height = newHeight + 'px'
    }
  }, [input])

  // Focus textarea when not loading
  useEffect(() => {
    if (!running && !sending) {
      textareaRef.current?.focus()
    }
  }, [running, sending])

  const isDisabled = running || sending
  const canSend = (input.trim() || attachments.length > 0) && !isDisabled

  return (
    <div className="bg-[var(--bg-tertiary)]/80 backdrop-blur-md rounded-2xl border border-[var(--border-primary)] shadow-lg shadow-black/10 overflow-hidden">
      {/* Attachment drawer - extends from top of input */}
      {attachments.length > 0 && (
        <div className="px-3 pt-3 pb-2 border-b border-[var(--border-secondary)]">
          <div className="flex flex-wrap gap-2">
            {attachments.map((attachment) => {
              const previewUrl = attachment.previewUrl
              const isImage = attachment.isImage
              return (
                <div
                  key={attachment.id}
                  className="relative group"
                >
                  {isImage && previewUrl ? (
                    <img
                      src={previewUrl}
                      alt={attachment.name}
                      className="h-16 w-auto rounded-lg object-cover border border-[var(--border-secondary)]"
                    />
                  ) : (
                    <div className="h-16 px-3 flex items-center gap-2 rounded-lg bg-[var(--bg-hover)] border border-[var(--border-secondary)]">
                      <svg className="w-4 h-4 text-[var(--text-secondary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                      </svg>
                      <span className="text-xs text-[var(--text-secondary)] max-w-[100px] truncate">{attachment.name}</span>
                    </div>
                  )}
                  <button
                    type="button"
                    onClick={() => removeAttachment(attachment.id)}
                    className="absolute -top-1.5 -right-1.5 w-5 h-5 bg-[var(--bg-active)] hover:bg-[var(--bg-hover)] rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                  >
                    <svg className="w-3 h-3 text-[var(--text-primary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </button>
                </div>
              )
            })}
          </div>
        </div>
      )}

      {/* Input row */}
      <form onSubmit={handleSubmit}>
        <div className="flex items-center gap-2 px-2 py-1.5">
          {/* Attachment button */}
          <input
            ref={fileInputRef}
            type="file"
            multiple
            accept="image/*,.pdf,.txt,.md,.json,.csv"
            onChange={handleFileSelect}
            className="hidden"
          />
          <button
            type="button"
            onClick={() => fileInputRef.current?.click()}
            disabled={isDisabled}
            className="p-2 text-[var(--text-tertiary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)] rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
            title="Attach files"
          >
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" />
            </svg>
          </button>

          {/* Textarea */}
          <textarea
            ref={textareaRef}
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault()
                handleSubmit(e)
              }
            }}
            placeholder="Message..."
            rows={1}
            disabled={isDisabled}
            className="flex-1 bg-transparent resize-none text-[var(--text-primary)] placeholder-[var(--text-tertiary)] focus:outline-none disabled:opacity-50 text-[15px] leading-normal py-2.5 max-h-[200px] overflow-y-auto scrollbar-hide"
            style={{ scrollbarWidth: 'none' }}
          />

          {/* Stop / Send button */}
          {running ? (
            <button
              type="button"
              onClick={stopExecution}
              className="p-2 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)] rounded-xl transition-colors shrink-0"
              title="Stop generating"
            >
              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <rect x="6" y="6" width="12" height="12" rx="2" />
              </svg>
            </button>
          ) : (
            <button
              type="submit"
              disabled={!canSend}
              className="p-2 rounded-xl bg-[var(--text-primary)] text-[var(--bg-primary)] hover:opacity-90 disabled:opacity-30 disabled:cursor-not-allowed transition-all duration-150 shrink-0"
            >
              {sending ? (
                <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                </svg>
              ) : (
                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" />
                </svg>
              )}
            </button>
          )}
        </div>
      </form>
    </div>
  )
}