'use client'

import { useState, useCallback, useEffect, useRef } from 'react'
import type { AttachmentPayload } from '@standardagents/react'
import { apiFetch } from '../lib/api'
import { withThreadName, type CreatedThread, type SideBacking, type Thread } from '../hooks/useThreads'
import { Logo } from './Logo'

/** One entry of `GET /api/agents`. */
interface Agent {
  id: string
  name: string
  title?: string | null
  description?: string | null
  primary?: boolean
  side_a_backing?: SideBacking
  side_b_backing?: SideBacking
}

interface PendingAttachment extends AttachmentPayload {
  id: string
  preview?: string // object URL for preview
}

interface EmptyStateProps {
  selectedAgentId: string
  onAgentChange: (agentId: string) => void
  onThreadCreated: (thread: Thread) => void
}

/**
 * Agents a person can chat with: primary (not subagent-only) agents with a
 * human side. Spec 0.2.0 replaced the agent `type` with per-side backings.
 */
function isChatAgent(agent: Agent): boolean {
  if (agent.primary === false) return false
  if (!agent.side_a_backing && !agent.side_b_backing) return true
  return agent.side_a_backing === 'human' || agent.side_b_backing === 'human'
}

// Read file as base64
function readFileAsBase64(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => {
      const result = reader.result as string
      const base64 = result.split(',')[1]
      resolve(base64)
    }
    reader.onerror = reject
    reader.readAsDataURL(file)
  })
}

// Get image dimensions
function getImageDimensions(file: File): Promise<{ width: number; height: number } | null> {
  return new Promise((resolve) => {
    if (!file.type.startsWith('image/')) {
      resolve(null)
      return
    }
    const img = new Image()
    img.onload = () => {
      resolve({ width: img.naturalWidth, height: img.naturalHeight })
      URL.revokeObjectURL(img.src)
    }
    img.onerror = () => resolve(null)
    img.src = URL.createObjectURL(file)
  })
}

export function EmptyState({
  selectedAgentId,
  onAgentChange,
  onThreadCreated,
}: EmptyStateProps) {
  const [message, setMessage] = useState('')
  const [attachments, setAttachments] = useState<PendingAttachment[]>([])
  const [isCreating, setIsCreating] = useState(false)
  const [agents, setAgents] = useState<Agent[]>([])
  const [agentsLoading, setAgentsLoading] = useState(true)
  const [dropdownOpen, setDropdownOpen] = useState(false)
  const dropdownRef = useRef<HTMLDivElement>(null)
  const textareaRef = useRef<HTMLTextAreaElement>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    const fetchAgents = async () => {
      try {
        const response = await apiFetch('/api/agents')
        if (!response.ok) throw new Error('Failed to fetch agents')
        const data = await response.json() as { agents?: Agent[] }
        const agentList = (data.agents || []).filter(isChatAgent)
        setAgents(agentList)
        if (!selectedAgentId && agentList.length > 0) {
          onAgentChange(agentList[0].id)
        }
      } catch (err) {
        console.error('Failed to load agents:', err)
      } finally {
        setAgentsLoading(false)
      }
    }
    fetchAgents()
  }, [selectedAgentId, onAgentChange])

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
        setDropdownOpen(false)
      }
    }
    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [])

  useEffect(() => {
    const textarea = textareaRef.current
    if (textarea) {
      textarea.style.height = 'auto'
      textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px'
    }
  }, [message])

  const selectedAgent = agents.find(a => a.id === selectedAgentId)

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

    const newAttachments: PendingAttachment[] = []

    for (const file of Array.from(files)) {
      try {
        const base64 = await readFileAsBase64(file)
        const dimensions = await getImageDimensions(file)
        const preview = file.type.startsWith('image/')
          ? URL.createObjectURL(file)
          : undefined

        newAttachments.push({
          id: crypto.randomUUID(),
          name: file.name,
          mimeType: file.type || 'application/octet-stream',
          data: base64,
          width: dimensions?.width,
          height: dimensions?.height,
          preview,
        })
      } catch (err) {
        console.error('Failed to read file:', err)
      }
    }

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

  const removeAttachment = useCallback((id: string) => {
    setAttachments(prev => {
      const attachment = prev.find(a => a.id === id)
      if (attachment?.preview) {
        URL.revokeObjectURL(attachment.preview)
      }
      return prev.filter(a => a.id !== id)
    })
  }, [])

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

    setIsCreating(true)
    const title = message.slice(0, 50) + (message.length > 50 ? '...' : '') || 'New conversation'
    const currentAttachments = [...attachments]

    try {
      // Create the thread already named, then send the first message.
      const tags = withThreadName([], title)
      const threadRes = await apiFetch('/api/threads', {
        method: 'POST',
        body: JSON.stringify({ agent_id: selectedAgentId, tags }),
      })
      if (!threadRes.ok) throw new Error('Failed to create thread')
      const { threadId } = await threadRes.json() as CreatedThread

      const attachmentPayloads: AttachmentPayload[] = currentAttachments.map(a => ({
        name: a.name,
        mimeType: a.mimeType,
        data: a.data,
        ...(a.width && a.height ? { width: a.width, height: a.height } : {}),
      }))
      const messageRes = await apiFetch(`/api/threads/${threadId}/messages`, {
        method: 'POST',
        body: JSON.stringify({
          role: 'user',
          content: message,
          ...(attachmentPayloads.length > 0 ? { attachments: attachmentPayloads } : {}),
        }),
      })
      if (!messageRes.ok) throw new Error('Failed to send message')

      const selectedAgent = agents.find(a => a.id === selectedAgentId)
      const now = Math.floor(Date.now() / 1000) // API uses seconds
      onThreadCreated({
        id: threadId,
        agent_id: selectedAgentId,
        user_id: null,
        tags,
        created_at: now,
        last_activity_at: now,
        executing: true,
        agent: {
          name: selectedAgent?.name,
          title: selectedAgent?.title ?? undefined,
          side_a_backing: selectedAgent?.side_a_backing,
          side_b_backing: selectedAgent?.side_b_backing,
        },
      })
      setMessage('')
      setAttachments([])
    } catch (error) {
      console.error('Failed to create thread:', error)
    } finally {
      setIsCreating(false)
    }
  }, [message, attachments, selectedAgentId, isCreating, onThreadCreated, agents])

  return (
    <div className="flex-1 flex flex-col items-center px-4 py-8">
      <div className="w-full max-w-2xl mt-[15vh]">
        {/* Logo and Greeting */}
        <div className="text-center mb-12">
          <Logo className="h-16 text-[var(--text-secondary)] mx-auto mb-20" />
          <h1 className="text-2xl font-medium text-[var(--text-secondary)]">
            What can I help with?
          </h1>
        </div>

        {/* Input box */}
        <div className="relative bg-[var(--bg-tertiary)] rounded-2xl border border-[var(--border-primary)] shadow-lg shadow-black/10">
          {/* Attachment drawer */}
          {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) => (
                  <div key={attachment.id} className="relative group">
                    {attachment.preview ? (
                      <img
                        src={attachment.preview}
                        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>
          )}

          {/* Agent selector row */}
          <div className="px-4 pt-3 pb-1" ref={dropdownRef}>
            <button
              onClick={() => setDropdownOpen(!dropdownOpen)}
              disabled={agentsLoading || agents.length === 0}
              className="inline-flex items-center gap-1.5 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors disabled:opacity-50"
            >
              {agentsLoading ? (
                <span className="text-[var(--text-tertiary)]">Loading agents...</span>
              ) : agents.length === 0 ? (
                <span className="text-[var(--text-tertiary)]">No agents available</span>
              ) : (
                <>
                  <span className="text-[var(--text-primary)] font-medium">{selectedAgent?.title || selectedAgent?.name || 'Select agent'}</span>
                  <svg className={`w-3.5 h-3.5 text-[var(--text-tertiary)] transition-transform ${dropdownOpen ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>
                </>
              )}
            </button>

            {/* Dropdown menu */}
            {dropdownOpen && agents.length > 0 && (
              <div className="absolute left-4 top-12 z-50 min-w-[280px] max-w-[360px] bg-[var(--bg-elevated)] border border-[var(--border-secondary)] rounded-xl shadow-xl overflow-hidden animate-fade-in">
                {agents.map((agent) => (
                  <button
                    key={agent.id}
                    onClick={() => {
                      onAgentChange(agent.id)
                      setDropdownOpen(false)
                    }}
                    className={`w-full px-4 py-3 text-left transition-colors ${
                      agent.id === selectedAgentId
                        ? 'bg-[var(--bg-active)]'
                        : 'hover:bg-[var(--bg-hover)]'
                    }`}
                  >
                    <div className={`text-sm font-medium ${agent.id === selectedAgentId ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'}`}>
                      {agent.title || agent.name}
                    </div>
                    {agent.description && (
                      <div className="text-xs text-[var(--text-muted)] mt-0.5 line-clamp-2">
                        {agent.description}
                      </div>
                    )}
                  </button>
                ))}
              </div>
            )}
          </div>

          {/* Textarea */}
          <form onSubmit={handleSubmit}>
            <textarea
              ref={textareaRef}
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === 'Enter' && !e.shiftKey) {
                  e.preventDefault()
                  handleSubmit(e)
                }
              }}
              placeholder="Message..."
              rows={1}
              disabled={isCreating || !selectedAgentId}
              className="w-full px-4 py-3 bg-transparent resize-none text-[var(--text-primary)] placeholder-[var(--text-tertiary)] focus:outline-none disabled:opacity-50 text-[15px] leading-relaxed"
            />

            {/* Actions row */}
            <div className="flex items-center justify-between px-3 pb-3">
              {/* Attachment button */}
              <div>
                <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={isCreating || !selectedAgentId}
                  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"
                  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>
              </div>

              {/* Submit button */}
              <button
                type="submit"
                disabled={(!message.trim() && attachments.length === 0) || !selectedAgentId || isCreating}
                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"
              >
                {isCreating ? (
                  <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" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
                  </svg>
                )}
              </button>
            </div>
          </form>
        </div>

        {/* Subtle hint */}
        <p className="text-center text-xs text-[var(--text-muted)] mt-4">
          Press Enter to send, Shift+Enter for new line
        </p>
      </div>
    </div>
  )
}