import { useTranslation } from "react-i18next";
import { CheckCircle2, AlertTriangle } from "lucide-react";
import Banner from "./Banner";
import type { VerifyEntry } from "../lib/useVerifyEntry";

// The top-of-app outcome of an emailed verification link opened in a browser that ALREADY holds a
// session. That case used to be silent: the token was only ever consumed inside Welcome.tsx, which a
// signed-in visit never reaches, so the link opened a tab, the fragment was stripped, and nothing
// happened. Signed OUT, the same outcome is rendered by the auth card's own banners instead — this
// bar is only for the signed-in half.
//
// No "send a new link" action here, unlike the auth card: this viewer is signed in, so the sign-in
// screen (where resending lives) is not where they are, and the message is a report, not a task. A
// wrong-account case is why the address is named.
export default function VerifyBanner({ entry }: { entry: VerifyEntry }) {
  const { t } = useTranslation();
  if (!entry.outcome) return null;

  const ok = entry.outcome !== "invalid";
  const text =
    entry.outcome === "invalid"
      ? t("header.verify.invalid")
      : entry.email
        ? t("header.verify.confirmedNamed", { email: entry.email })
        : t("header.verify.confirmed");

  return (
    <Banner
      tone={ok ? "accent" : "warning"}
      icon={ok ? CheckCircle2 : AlertTriangle}
      role="status"
      onDismiss={entry.dismiss}
      dismissTitle={t("header.banner.dismiss")}
    >
      {text}
      {entry.outcome === "ok_reset" && (
        <span className="text-muted"> {t("header.verify.reset")}</span>
      )}
    </Banner>
  );
}