'use client';

import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Search, Command, ArrowRight, X } from 'lucide-react';
import { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';

interface CommandModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export function CommandModal({ isOpen, onClose }: CommandModalProps) {
  const [query, setQuery] = useState('');
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onClose();
      }
    };
    if (isOpen) {
      document.addEventListener('keydown', down);
      document.body.style.overflow = 'hidden';
    }
    return () => {
      document.removeEventListener('keydown', down);
      document.body.style.overflow = 'unset';
    };
  }, [isOpen, onClose]);

  // Mock results
  const results = [
    { label: 'Go to Dashboard', shortcut: 'G D' },
    { label: 'Find Driver...', shortcut: 'Cmd F' },
    { label: 'Create League', shortcut: 'C L' },
  ].filter(r => r.label.toLowerCase().includes(query.toLowerCase()));

  if (!mounted) return null;
  if (!isOpen) return null;

  return createPortal(
    <div className="fixed inset-0 z-[9999] flex items-start justify-center pt-[20vh] px-4">
      {/* Backdrop */}
      <div 
        className="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity" 
        onClick={onClose}
      />
      
      {/* Modal Content */}
      <div className="relative w-full max-w-lg bg-surface-charcoal border border-outline-steel rounded-xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
        <div className="flex items-center border-b border-outline-steel px-4 py-3 gap-3">
          <Search className="text-text-low" size={18} />
          <input
            autoFocus
            type="text"
            placeholder="Type a command or search..."
            className="flex-1 bg-transparent border-none outline-none text-text-high placeholder:text-text-low/50 text-base h-6"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
          />
          <button onClick={onClose} className="text-text-low hover:text-text-high transition-colors">
            <span className="sr-only">Close</span>
            <kbd className="hidden sm:inline-block px-1.5 py-0.5 text-[10px] font-mono bg-white/5 rounded border border-white/5">ESC</kbd>
          </button>
        </div>

        <div className="p-2">
          {results.length > 0 ? (
            <div className="flex flex-col gap-1">
              <div className="px-2 py-1.5 text-[10px] font-mono uppercase tracking-wider text-text-low/50 font-bold">
                Suggestions
              </div>
              {results.map((result, i) => (
                <button
                  key={i}
                  className="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-white/5 text-left group transition-colors"
                  onClick={onClose}
                >
                  <span className="text-sm text-text-med group-hover:text-text-high font-medium">
                    {result.label}
                  </span>
                  <div className="flex items-center gap-2">
                    <span className="text-[10px] font-mono text-text-low bg-white/5 px-1.5 py-0.5 rounded border border-white/5">
                      {result.shortcut}
                    </span>
                    <ArrowRight size={14} className="text-text-low opacity-0 group-hover:opacity-100 transition-opacity -translate-x-2 group-hover:translate-x-0" />
                  </div>
                </button>
              ))}
            </div>
          ) : (
            <div className="px-4 py-8 text-center text-text-low text-sm">
              No results found.
            </div>
          )}
        </div>
        
        <div className="px-4 py-2 bg-white/2 border-t border-white/5 flex items-center justify-between text-[10px] text-text-low">
          <div className="flex gap-3">
            <span><strong className="text-text-med">↑↓</strong> to navigate</span>
            <span><strong className="text-text-med">↵</strong> to select</span>
          </div>
          <span>GridPilot Command</span>
        </div>
      </div>
    </div>,
    document.body
  );
}