"use client";

import { haptic } from "@/lib/haptics";
import { useI18n } from "@/lib/i18n";
import { reportQuestion, unreportQuestion } from "@/lib/question-reports";
import type { Activity } from "@/lib/schemas";
import { showToast } from "@/lib/toast";

/**
 * The red "!" report control that sits under the card (bottom-right of the
 * exercise): records the question, sends the operator a copy and — in the
 * study feeds — skips past it. Undo lives in the toast. 44px, because it is a
 * thumb target.
 *
 * `deckId` is a deck id in the feeds and the homework record's id for a
 * homework exercise; `onSkip` is omitted where there is no queue to skip.
 */
export function ReportQuestionButton({
  deckId,
  deckTitle,
  activity,
  onSkip,
  labelKey = "feed.report",
}: {
  deckId: string;
  deckTitle?: string;
  activity: Activity;
  onSkip?: () => void;
  /** i18n key for the accessible name ("Report question" / "Report exercise"). */
  labelKey?: string;
}) {
  const { t } = useI18n();

  return (
    <button
      type="button"
      onClick={() => {
        haptic("tap");
        reportQuestion({ deckId, deckTitle, activity });
        showToast({
          message: t("feed.reported"),
          actionLabel: t("toast.undo"),
          onAction: () => unreportQuestion(deckId, activity.id),
        });
        onSkip?.();
      }}
      aria-label={t(labelKey)}
      title={t(labelKey)}
      className="grid size-11 shrink-0 place-items-center rounded-xl border-2 border-rose-400/80 text-base font-black leading-none text-rose-600 transition hover:bg-rose-50 dark:border-rose-400/50 dark:text-rose-300 dark:hover:bg-rose-400/10"
    >
      <span aria-hidden>!</span>
    </button>
  );
}