import { memo } from 'react';
import { X, Terminal, Trash2, HelpCircle, FileDown, PlusCircle, Zap } from 'lucide-react';

const COMMANDS = [
  { name: '/compact', description: 'Summarize conversation to free context', icon: Zap, color: 'text-purple-400' },
  { name: '/clear', description: 'Clear chat history', icon: Trash2, color: 'text-red-400' },
  { name: '/help', description: 'Show this help', icon: HelpCircle, color: 'text-cyan-400' },
  { name: '/new', description: 'Start new session (coming soon)', icon: PlusCircle, color: 'text-green-400', disabled: true },
  { name: '/export', description: 'Export chat (coming soon)', icon: FileDown, color: 'text-yellow-400', disabled: true },
];

export const HelpDialog = memo(function HelpDialog({ open, onClose }) {
  if (!open) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      />

      {/* Dialog */}
      <div className="relative bg-dark-800 border border-dark-600 rounded-xl shadow-2xl w-full max-w-md mx-4 overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between px-5 py-4 border-b border-dark-700">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-cyan-500/20 rounded-lg">
              <Terminal className="w-5 h-5 text-cyan-400" />
            </div>
            <h2 className="text-lg font-semibold text-dark-100">Slash Commands</h2>
          </div>
          <button
            onClick={onClose}
            className="p-1.5 text-dark-400 hover:text-dark-200 hover:bg-dark-700 rounded-lg transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Commands list */}
        <div className="p-4 space-y-2">
          {COMMANDS.map((cmd) => {
            const Icon = cmd.icon;
            return (
              <div
                key={cmd.name}
                className={`flex items-center gap-3 p-3 rounded-lg bg-dark-900/50 ${cmd.disabled ? 'opacity-50' : ''}`}
              >
                <Icon className={`w-5 h-5 ${cmd.color}`} />
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <code className="text-sm font-mono text-dark-100">{cmd.name}</code>
                    {cmd.disabled && (
                      <span className="text-[10px] px-1.5 py-0.5 bg-dark-700 text-dark-400 rounded">soon</span>
                    )}
                  </div>
                  <p className="text-xs text-dark-400 mt-0.5">{cmd.description}</p>
                </div>
              </div>
            );
          })}
        </div>

        {/* Footer */}
        <div className="px-5 py-3 bg-dark-900/50 border-t border-dark-700">
          <p className="text-xs text-dark-500 text-center">
            Type <code className="text-orange-400">/</code> in the input field to see suggestions
          </p>
        </div>
      </div>
    </div>
  );
});
