import { useTranslation } from "react-i18next";
import { CheckCircle2, AlertTriangle } from "lucide-react";
import Banner from "./ui/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();
  // A reset link opened here can only be ACTED on signed out, so say that rather than nothing —
  // silence is precisely what made the verify half a bug. The token stays in the address bar, so
  // signing out from this same tab picks it up.
  //
  // Tested on `resetPending` ALONE, not `!outcome && resetPending`. The two can both be set (a
  // reset link pasted over an unread confirmation, or a slow verify resolving after one), and this
  // one goes first because it is the banner with something to DO. `dismiss` then peels it and the
  // outcome shows underneath — where `!outcome &&` would have hidden this one until the other was
  // dismissed, and dismissing that used to clear both.
  if (entry.resetPending) {
    return (
      <Banner
        tone="warning"
        icon={AlertTriangle}
        role="status"
        onDismiss={entry.dismiss}
        dismissTitle={t("header.banner.dismiss")}
      >
        {t("header.verify.resetSignedOut")}
      </Banner>
    );
  }
  if (!entry.outcome) return null;

  const ok = entry.outcome === "ok" || entry.outcome === "ok_reset";
  const text =
    entry.outcome === "invalid"
      ? t("header.verify.invalid")
      : entry.outcome === "unreachable"
        ? t("header.verify.unreachable")
        : 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>
  );
}