'use client';

import { Modal } from '@/components/shared/Modal';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Search, Command, ArrowRight } from 'lucide-react';
import { useState, useEffect } from 'react';

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

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

  // 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()));

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title="Command Palette"
      size="md"
      icon={<Command size={20} />}
    >
      <Box className="flex flex-col gap-4">
        <Box className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-text-low" size={16} />
          <input
            autoFocus
            type="text"
            placeholder="Type a command or search..."
            className="w-full bg-surface-charcoal border border-outline-steel rounded-md pl-10 pr-4 py-3 text-text-high placeholder:text-text-low focus:border-primary-accent focus:outline-none transition-colors"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
          />
        </Box>

        <Box className="flex flex-col gap-1">
          <Text size="xs" className="text-text-low font-mono uppercase tracking-wider px-2 mb-1">
            Suggestions
          </Text>
          {results.map((result, i) => (
            <button
              key={i}
              className="flex items-center justify-between px-3 py-2 rounded-md hover:bg-white/5 text-left group transition-colors"
              onClick={onClose}
            >
              <Text size="sm" className="text-text-med group-hover:text-text-high">
                {result.label}
              </Text>
              <Box className="flex items-center gap-2">
                <Text size="xs" className="text-text-low font-mono bg-white/5 px-1.5 py-0.5 rounded">
                  {result.shortcut}
                </Text>
                <ArrowRight size={14} className="text-text-low opacity-0 group-hover:opacity-100 transition-opacity" />
              </Box>
            </button>
          ))}
        </Box>
      </Box>
    </Modal>
  );
}