import { useState } from 'react'
import { useApp } from '../context/AppContext'
import { colorToCss } from '../utils/color'
import { connectionStatus } from '../utils/connection'
import MessageList from './MessageList'
import MessageInput from './MessageInput'

export default function ChatArea() {
  const { state, userId } = useApp()
  const conn = state.connections.find(c => c.id === state.selectedId)
  const [pendingFile, setPendingFile] = useState(null)
  const [dragCount, setDragCount] = useState(0)
  const isDragging = dragCount > 0

  function onDragEnter(e) {
    if (Array.from(e.dataTransfer?.types ?? []).includes('Files')) {
      setDragCount(c => c + 1)
    }
  }
  function onDragLeave() {
    setDragCount(c => Math.max(0, c - 1))
  }
  function onDragOver(e) {
    if (Array.from(e.dataTransfer?.types ?? []).includes('Files')) {
      e.preventDefault()
    }
  }
  function onDrop(e) {
    e.preventDefault()
    setDragCount(0)
    const file = e.dataTransfer?.files?.[0]
    if (file && state.selectedId) setPendingFile(file)
  }

  let header = null
  if (conn) {
    const otherId = conn.requestorId === userId ? conn.recipientId : conn.requestorId
    const other = state.userMap[otherId]
    const status = connectionStatus(conn, userId)
    header = (
      <div className="flex items-center gap-3 px-4 py-3 border-b border-gray-700/60 shrink-0">
        <div
          className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-semibold shrink-0"
          style={{ backgroundColor: colorToCss(other?.color) }}
        >
          {other?.name?.[0]?.toUpperCase() ?? '?'}
        </div>
        <div>
          <p className="text-sm font-semibold text-white">{other?.name ?? '…'}</p>
          {other?.pronouns && (
            <p className="text-xs text-gray-500">{other.pronouns}</p>
          )}
        </div>
        {status && (
          <span className={`ml-auto text-xs ${status.cls}`}>● {status.label}</span>
        )}
      </div>
    )
  }

  return (
    <div
      className="flex-1 flex flex-col bg-gray-800 min-w-0 relative"
      onDragEnter={onDragEnter}
      onDragLeave={onDragLeave}
      onDragOver={onDragOver}
      onDrop={onDrop}
    >
      {header}
      {state.selectedId ? (
        <>
          <MessageList />
          <MessageInput pendingFile={pendingFile} setPendingFile={setPendingFile} />
        </>
      ) : (
        <div className="flex-1 flex items-center justify-center text-gray-600 text-sm">
          Select a conversation
        </div>
      )}
      {isDragging && state.selectedId && (
        <div className="absolute inset-0 z-30 flex items-center justify-center bg-blue-500/20 border-2 border-dashed border-blue-400 pointer-events-none">
          <p className="text-blue-200 text-sm font-semibold">Drop file to attach</p>
        </div>
      )}
    </div>
  )
}