"use client";

import { CheckCircle2, XCircle } from "lucide-react";
import { useTranslations } from "next-intl";
import type { ReportActionState } from "@/lib/reports/action-state";
import { BlockerList } from "./blocker-list";

const FIELD_MESSAGES: Record<string, string> = {
  reason: "errors.reasonRequired",
  signerName: "errors.signerRequired",
  image: "errors.imageRequired",
  aiReviewed: "errors.aiReviewRequired",
};

/** Inline feedback for report actions (errors directly at the form, Brandbook §12.5). */
export function ActionMessage({ state, okText }: { state: ReportActionState; okText?: string }) {
  const t = useTranslations("reports");
  if (state.status === "ok") {
    if (!okText) return null;
    return (
      <p role="status" className="flex items-center gap-2 text-[13px] font-semibold text-[var(--ok)]">
        <CheckCircle2 className="size-4" aria-hidden />
        {okText}
      </p>
    );
  }
  if (state.status !== "error") return null;
  if (state.blockers?.length) return <BlockerList blockers={state.blockers} title={t("errors.blocked")} />;
  const key = state.field && FIELD_MESSAGES[state.field] ? FIELD_MESSAGES[state.field] : state.code === "forbidden" && state.field === undefined ? "errors.forbidden" : `errors.${state.code}`;
  return (
    <p role="alert" className="flex items-center gap-2 rounded-lg border border-[var(--risk)] px-3 py-2 text-[13px] font-semibold text-[var(--risk)]">
      <XCircle className="size-4 shrink-0" aria-hidden />
      {t(key)}
    </p>
  );
}