'use client';

import type { ClassResult } from '@/types/inference';
import { classResultLabel } from '@/lib/classification';
import { useStableTopClass } from '@/hooks/use-stable-top-class';
import { useTranslation } from '@/lib/i18n';

interface ClassificationOverlayProps {
  classifications: ClassResult[];
  width: number;
  height: number;
  confidenceThreshold: number;
}

/**
 * Classification overlay — no bounding boxes.
 *
 * Classification models produce a whole-image verdict rather than localised
 * objects, so we annotate the frame with a single top-1 chip instead of
 * drawing rectangles. Rendered as absolutely positioned DOM (not canvas) so
 * that CJK label text, rounded corners and theming come from CSS rather than
 * hand-rolled `fillText` layout, and so screen readers can announce the result.
 *
 * The chip sits on the top-right, because CameraFeed already occupies the
 * top-left with the source-type badge.
 */
export function ClassificationOverlay({
  classifications,
  width,
  height,
  confidenceThreshold,
}: ClassificationOverlayProps) {
  const { t } = useTranslation();
  const top = useStableTopClass(classifications, { confidenceThreshold });

  return (
    <div
      style={{ width, height }}
      className="absolute left-0 top-0 pointer-events-none"
      data-testid="classification-overlay"
    >
      <div
        className="absolute right-2 top-2 max-w-[70%] rounded-md bg-black/70 px-3 py-2 text-white shadow-lg"
        // Announce the verdict for screen-reader users; `polite` avoids
        // interrupting on every frame of a video stream.
        role="status"
        aria-live="polite"
        aria-atomic="true"
      >
        {top ? (
          <div className="flex items-baseline gap-2">
            <span className="truncate text-base font-semibold" data-testid="classification-overlay-label">
              {classResultLabel(top)}
            </span>
            <span className="shrink-0 text-sm tabular-nums opacity-80" data-testid="classification-overlay-confidence">
              {(top.confidence * 100).toFixed(1)}%
            </span>
          </div>
        ) : (
          <span className="text-sm opacity-80" data-testid="classification-overlay-empty">
            {t('inference.unrecognized')}
          </span>
        )}
      </div>
    </div>
  );
}