import { CirclePause, CirclePlay, Mouse, MousePointer2 } from 'lucide-react';
import type { InteractionMode, ViewerSelection } from '../../viewer/MuJoCoViewer';
import { Badge, Kbd } from '../../components/ui';
const labels: Record<InteractionMode, string> = {
  select: '选择',
  joint: '关节拖动',
  force: '外力施加',
};
const primaryGestures: Record<InteractionMode, string> = {
  select: '左键旋转',
  joint: '左键拖动关节',
  force: '左键拖动施力',
};
export function ViewportHUD({
  paused,
  mode,
  selection,
  ready,
}: {
  paused: boolean;
  mode: InteractionMode;
  selection: ViewerSelection | null;
  ready: boolean;
}) {
  if (!ready) return null;
  return (
    <>
      <div
        aria-label="视口状态"
        className="pointer-events-none absolute left-3 top-3 z-10 flex max-w-[70%] flex-wrap items-center gap-1.5"
      >
        <Badge tone={paused ? 'neutral' : 'success'}>
          {paused ? <CirclePause className="h-3 w-3" /> : <CirclePlay className="h-3 w-3" />}
          {paused ? '已暂停' : '仿真中'}
        </Badge>
        <Badge tone="accent">
          <MousePointer2 className="h-3 w-3" />
          {labels[mode]}
        </Badge>
        {selection && (
          <Badge title={`body ${selection.bodyId} · geom ${selection.geomId}`}>
            {selection.bodyName}
          </Badge>
        )}
      </div>
      <div
        aria-label="视口操作提示"
        className="pointer-events-none absolute bottom-3 left-1/2 z-10 hidden -translate-x-1/2 items-center gap-2 whitespace-nowrap rounded-full border border-border-strong bg-panel px-3 py-1.5 text-[10px] text-text-secondary shadow-xl lg:flex"
      >
        <Mouse aria-hidden="true" className="h-3 w-3 text-text-secondary" />
        <span>{primaryGestures[mode]}</span>
        <span aria-hidden="true" className="text-border-strong">
          ·
        </span>
        <span>右键平移</span>
        <span aria-hidden="true" className="text-border-strong">
          ·
        </span>
        <span>滚轮缩放</span>
        {mode !== 'select' && (
          <>
            <span aria-hidden="true" className="text-border-strong">
              ·
            </span>
            <Kbd>1</Kbd>
            <span>旋转视角</span>
          </>
        )}
      </div>
    </>
  );
}