ui/src/components/HelpModal.tsx

import { useTranslation } from 'react-i18next'

interface Props {
  open: boolean
  onClose: () => void
}

const GUIDELINES = [
  { en: 'Draw bounding boxes tightly around the target', ua: 'Малюйте рамки щільно навколо цілі' },
  { en: 'Do not include shadow in the box unless the target is the shadow itself', ua: 'Не включайте тінь у рамку, якщо ціль не є тінню' },
  { en: 'If the target is partially occluded, annotate the visible part', ua: 'Якщо ціль частково перекрита, анотуйте видиму частину' },
  { en: 'Choose the correct class for each detection', ua: 'Обирайте правильний клас для кожної детекції' },
  { en: 'Set the affiliation (Friendly/Hostile/Unknown) for military targets', ua: 'Встановіть приналежність (Свій/Ворожий/Невідомий) для військових цілей' },
  { en: 'Validate annotations before they are used for training', ua: 'Валідуйте анотації перед використанням для навчання' },
]

export default function HelpModal({ open, onClose }: Props) {
  const { i18n } = useTranslation()

  if (!open) return null

  const lang = i18n.language === 'ua' ? 'ua' : 'en'

  return (
    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-[100]" onClick={onClose}>
      <div className="bg-az-panel border border-az-border rounded-lg p-5 w-[500px] max-h-[80vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
        <h2 className="text-white font-semibold text-lg mb-4">How to Annotate</h2>
        <ol className="space-y-2">
          {GUIDELINES.map((g, i) => (
            <li key={i} className="flex gap-2 text-sm text-az-text">
              <span className="text-az-orange font-semibold shrink-0">{i + 1}.</span>
              <span>{g[lang]}</span>
            </li>
          ))}
        </ol>

        <h3 className="text-white font-semibold mt-5 mb-2">Keyboard Shortcuts</h3>
        <div className="grid grid-cols-2 gap-1 text-xs text-az-text">
          <span className="text-az-muted">Space</span><span>Play / Pause</span>
          <span className="text-az-muted">← →</span><span>Frame step</span>
          <span className="text-az-muted">Ctrl + ← →</span><span>5 second skip</span>
          <span className="text-az-muted">Enter</span><span>Save annotation</span>
          <span className="text-az-muted">Delete</span><span>Delete selected</span>
          <span className="text-az-muted">X</span><span>Delete all detections</span>
          <span className="text-az-muted">1-9</span><span>Select detection class</span>
          <span className="text-az-muted">M</span><span>Mute / Unmute</span>
          <span className="text-az-muted">Ctrl + Scroll</span><span>Zoom canvas</span>
          <span className="text-az-muted">Esc</span><span>Close dialog / editor</span>
          <span className="text-az-muted">V</span><span>Validate (Dataset)</span>
          <span className="text-az-muted">PageUp/Down</span><span>Navigate media / pages</span>
        </div>

        <div className="mt-4 flex justify-end">
          <button onClick={onClose} className="bg-az-border text-az-text text-xs px-3 py-1 rounded hover:bg-az-muted">
            Close
          </button>
        </div>
      </div>
    </div>
  )
}