import React from 'react';
import { Tooltip, Tag, theme } from 'antd';
import type { TooltipProps } from 'antd';
import { formatShortcut, shortcuts } from '@/lib/keyboardShortcuts';

const { useToken } = theme;

interface ShortcutTooltipProps extends Omit<TooltipProps, 'title'> {
  /** The shortcut ID from keyboardShortcuts registry */
  shortcutId?: string;
  /** Or provide the shortcut keys directly (e.g., 'mod+k') */
  shortcutKeys?: string;
  /** The label to show before the shortcut */
  label?: string;
  /** Children to wrap */
  children: React.ReactNode;
}

/**
 * ShortcutTooltip - Tooltip wrapper that shows keyboard shortcut hints
 *
 * Usage:
 * <ShortcutTooltip shortcutId="newInvoice" label="Ny faktura">
 *   <Button>Ny faktura</Button>
 * </ShortcutTooltip>
 *
 * Or with direct keys:
 * <ShortcutTooltip shortcutKeys="mod+i" label="Ny faktura">
 *   <Button>Ny faktura</Button>
 * </ShortcutTooltip>
 */
export function ShortcutTooltip({
  shortcutId,
  shortcutKeys,
  label,
  children,
  ...tooltipProps
}: ShortcutTooltipProps) {
  // Get keys from ID or direct prop
  const keys = shortcutId ? shortcuts[shortcutId]?.keys : shortcutKeys;

  // If no shortcut, just render children
  if (!keys) {
    return <>{children}</>;
  }

  const formattedKeys = formatShortcut(keys);
  const shortcutLabel = label || (shortcutId ? shortcuts[shortcutId]?.label : '');

  const tooltipContent = (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      {shortcutLabel && <span>{shortcutLabel}</span>}
      <div style={{ display: 'flex', gap: 4 }}>
        {formattedKeys.split(' ').map((key, i) => (
          <Tag
            key={i}
            style={{
              margin: 0,
              padding: '0 6px',
              fontSize: 11,
              fontFamily: 'monospace',
              backgroundColor: 'rgba(255, 255, 255, 0.15)',
              border: 'none',
              borderRadius: 3,
              color: 'inherit',
            }}
          >
            {key}
          </Tag>
        ))}
      </div>
    </div>
  );

  return (
    <Tooltip title={tooltipContent} {...tooltipProps}>
      {children}
    </Tooltip>
  );
}

/**
 * Inline keyboard shortcut badge for use in menus, buttons, etc.
 */
interface ShortcutBadgeProps {
  /** The shortcut ID from keyboardShortcuts registry */
  shortcutId?: string;
  /** Or provide the shortcut keys directly */
  shortcutKeys?: string;
  /** Custom style */
  style?: React.CSSProperties;
}

export function ShortcutBadge({
  shortcutId,
  shortcutKeys,
  style,
}: ShortcutBadgeProps) {
  const { token } = useToken();

  const keys = shortcutId ? shortcuts[shortcutId]?.keys : shortcutKeys;

  if (!keys) {
    return null;
  }

  const formattedKeys = formatShortcut(keys);

  return (
    <span
      style={{
        display: 'inline-flex',
        gap: 2,
        marginLeft: 8,
        ...style,
      }}
    >
      {formattedKeys.split(' ').map((key, i) => (
        <Tag
          key={i}
          style={{
            margin: 0,
            padding: '0 4px',
            fontSize: 10,
            fontFamily: 'monospace',
            backgroundColor: token.colorFillSecondary,
            border: 'none',
            borderRadius: 3,
            color: token.colorTextSecondary,
            lineHeight: '16px',
          }}
        >
          {key}
        </Tag>
      ))}
    </span>
  );
}

export default ShortcutTooltip;
