import { useState, useEffect, useRef, useCallback } from 'react';
import { useBotStore, type SlashCommand } from '../stores/bot.ts';

interface SlashCommandPopupProps {
  serverId: string;
  filter: string;
  onSelect: (command: SlashCommand) => void;
  onClose: () => void;
  position?: { bottom: number; left: number };
}

export function SlashCommandPopup({
  serverId,
  filter,
  onSelect,
  onClose,
  position,
}: SlashCommandPopupProps) {
  const fetchServerCommands = useBotStore((s) => s.fetchServerCommands);
  const [commands, setCommands] = useState<SlashCommand[]>([]);
  const [selectedIndex, setSelectedIndex] = useState(0);
  const listRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let cancelled = false;
    fetchServerCommands(serverId).then((cmds) => {
      if (!cancelled) setCommands(cmds);
    });
    return () => { cancelled = true; };
  }, [serverId, fetchServerCommands]);

  const filtered = commands
    .filter((c) => c.name.toLowerCase().includes(filter.toLowerCase()))
    .slice(0, 8);

  useEffect(() => {
    setSelectedIndex(0);
  }, [filter]);

  const handleSelect = useCallback(
    (cmd: SlashCommand) => {
      onSelect(cmd);
    },
    [onSelect]
  );

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (filtered.length === 0) return;

      if (e.key === 'ArrowDown') {
        e.preventDefault();
        setSelectedIndex((prev) => Math.min(prev + 1, filtered.length - 1));
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        setSelectedIndex((prev) => Math.max(prev - 1, 0));
      } else if (e.key === 'Enter' || e.key === 'Tab') {
        e.preventDefault();
        if (filtered[selectedIndex]) {
          handleSelect(filtered[selectedIndex]);
        }
      } else if (e.key === 'Escape') {
        e.preventDefault();
        onClose();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [filtered, selectedIndex, handleSelect, onClose]);

  if (filtered.length === 0) return null;

  return (
    <div
      ref={listRef}
      className="absolute bg-gb-bg border border-gb-bg-t shadow-lg z-50 min-w-[240px] max-h-[200px] overflow-y-auto"
      style={{
        bottom: position?.bottom ?? 48,
        left: position?.left ?? 16,
      }}
    >
      <div className="px-2 py-1 text-xs text-gb-fg-f font-mono border-b border-gb-bg-t">
        SLASH COMMANDS
      </div>
      {filtered.map((cmd, index) => (
        <button
          key={cmd.id}
          onClick={() => handleSelect(cmd)}
          onMouseEnter={() => setSelectedIndex(index)}
          className={`
            w-full px-2 py-1 text-left text-xs font-mono flex items-center gap-2
            transition-colors
            ${
              index === selectedIndex
                ? 'bg-gb-orange text-gb-bg'
                : 'text-gb-fg hover:bg-gb-bg-s'
            }
          `}
        >
          <span className="text-gb-green">/</span>
          <span className="font-bold">{cmd.name}</span>
          {cmd.description && (
            <span
              className={`truncate ${
                index === selectedIndex ? 'text-gb-bg-t' : 'text-gb-fg-f'
              }`}
            >
              — {cmd.description}
            </span>
          )}
        </button>
      ))}
    </div>
  );
}