import { useEffect, useRef, useState } from 'react'
import { cn } from '@/lib/utils'
import { useI18n } from '@/i18n/useI18n'

interface SlashCommand {
  name: string
  description?: string
  template: string
  agent?: string
  builtIn?: boolean
}

interface SlashCommandPopoverProps {
  commands: SlashCommand[]
  filter: string
  onSelect: (command: { name: string; template: string }) => void
  onClose: () => void
  visible: boolean
}

const MAX_VISIBLE_ITEMS = 8

export function SlashCommandPopover({
  commands,
  filter,
  onSelect,
  onClose,
  visible
}: SlashCommandPopoverProps): React.JSX.Element | null {
  const { t } = useI18n()
  const [selectedIndex, setSelectedIndex] = useState(0)
  const listRef = useRef<HTMLDivElement>(null)

  // Filter commands by substring match
  const filterText = filter.startsWith('/') ? filter.slice(1) : filter
  const filtered = commands
    .filter((c) => c.name.toLowerCase().includes(filterText.toLowerCase()))
    .slice(0, MAX_VISIBLE_ITEMS)

  // Reset selection when filter changes
  useEffect(() => {
    setSelectedIndex(0)
  }, [filter])

  const getDescription = (command: SlashCommand): string | undefined => {
    if (!command.builtIn) return command.description

    switch (command.name) {
      case 'undo':
        return t('slashCommandPopover.descriptions.undo')
      case 'redo':
        return t('slashCommandPopover.descriptions.redo')
      case 'clear':
        return t('slashCommandPopover.descriptions.clear')
      case 'ask':
        return t('slashCommandPopover.descriptions.ask')
      default:
        return command.description
    }
  }

  // Scroll selected item into view
  useEffect(() => {
    if (!listRef.current) return
    const items = listRef.current.querySelectorAll('[data-slash-item]')
    const item = items[selectedIndex]
    if (item && typeof item.scrollIntoView === 'function') {
      item.scrollIntoView({ block: 'nearest' })
    }
  }, [selectedIndex])

  // Keyboard navigation
  useEffect(() => {
    if (!visible) return

    const handleKeyDown = (e: KeyboardEvent): void => {
      if (e.key === 'ArrowDown') {
        e.preventDefault()
        e.stopPropagation()
        setSelectedIndex((prev) => Math.min(prev + 1, filtered.length - 1))
      } else if (e.key === 'ArrowUp') {
        e.preventDefault()
        e.stopPropagation()
        setSelectedIndex((prev) => Math.max(prev - 1, 0))
      } else if (e.key === 'Enter' && filtered.length > 0) {
        e.preventDefault()
        e.stopPropagation()
        const cmd = filtered[selectedIndex]
        if (cmd) {
          onSelect({ name: cmd.name, template: cmd.template })
        }
      } else if (e.key === 'Escape') {
        e.preventDefault()
        e.stopPropagation()
        onClose()
      }
    }

    window.addEventListener('keydown', handleKeyDown, true)
    return () => {
      window.removeEventListener('keydown', handleKeyDown, true)
    }
  }, [visible, filtered, selectedIndex, onSelect, onClose])

  if (!visible) return null

  return (
    <div
      className="absolute bottom-full left-0 right-0 mb-1 z-50"
      data-testid="slash-command-popover"
    >
      <div
        ref={listRef}
        className="mx-3 rounded-lg border bg-popover text-popover-foreground shadow-md max-h-64 overflow-y-auto"
      >
        {filtered.length === 0 ? (
          <div className="px-3 py-2 text-xs text-muted-foreground">
            {commands.length === 0
              ? t('slashCommandPopover.loading')
              : t('slashCommandPopover.noMatches')}
          </div>
        ) : (
          filtered.map((cmd, index) => (
            <div
              key={cmd.name}
              data-slash-item
              data-testid={`slash-item-${cmd.name}`}
              className={cn(
                'flex items-center gap-2 px-3 py-2 cursor-pointer text-sm',
                index === selectedIndex && 'bg-accent text-accent-foreground'
              )}
              onMouseEnter={() => setSelectedIndex(index)}
              onClick={() => onSelect({ name: cmd.name, template: cmd.template })}
            >
              <span className="font-mono text-xs text-muted-foreground">/{cmd.name}</span>
              {cmd.agent && (
                <span
                  className={cn(
                    'text-[10px] px-1 rounded',
                    cmd.agent === 'plan'
                      ? 'bg-violet-500/20 text-violet-400'
                      : 'bg-blue-500/20 text-blue-400'
                  )}
                >
                  {cmd.agent === 'plan'
                    ? t('slashCommandPopover.badges.plan')
                    : cmd.agent === 'build'
                      ? t('slashCommandPopover.badges.build')
                      : cmd.agent}
                </span>
              )}
              {cmd.builtIn && (
                <span className="text-[10px] px-1 rounded bg-emerald-500/20 text-emerald-400">
                  {t('slashCommandPopover.badges.builtIn')}
                </span>
              )}
              {getDescription(cmd) && (
                <span className="text-xs text-muted-foreground truncate">
                  {getDescription(cmd)}
                </span>
              )}
            </div>
          ))
        )}
      </div>
    </div>
  )
}
