"use client";

import { useTranslations } from "next-intl";
import { ShieldCheck } from "lucide-react";
import { cn } from "@/lib/utils";

/**
 * Mandatory confirmation before submitting a Lotse-drafted report (Spec §15.3). The checkbox only sends
 * `aiReviewed=on`; the server (submitReport → applyLotseReview) enforces it.
 */
export function LotseReviewConfirm({ invalid = false }: { invalid?: boolean }) {
  const t = useTranslations("lotse");
  return (
    <div className={cn("rounded-xl border p-3", invalid ? "border-[var(--risk)]" : "border-[var(--ui-accent)]")}>
      <label className="flex min-h-12 cursor-pointer items-center gap-3 text-[14.5px] font-semibold">
        <input type="checkbox" name="aiReviewed" className="size-6 shrink-0 accent-[var(--ui-accent)]" aria-invalid={invalid} aria-describedby="lotse-review-hint" />
        {t("review.label")}
      </label>
      <p id="lotse-review-hint" className="mt-1 flex items-center gap-1.5 text-[12.5px] text-muted-foreground">
        <ShieldCheck className="size-4 shrink-0" aria-hidden />
        {t("review.hint")}
      </p>
    </div>
  );
}