import { useTranslation } from "react-i18next";
import "./update-banner.scss";
import { useAppUpdateCheck } from "./useAppUpdateCheck";

/**
 * Discreet, dismissible notice shown when a newer Android build has been
 * tagged than the one installed (see `useAppUpdateCheck`'s own doc comment
 * for the full mechanism — native only, `null` on the web, so this renders
 * nothing there). A plain non-modal banner, not `Dialog.tsx`'s native
 * `<dialog>`: a version check is informative, never something that should
 * block the rest of the page.
 *
 * "Mettre à jour" opens the download link externally (the system browser
 * handles the download + Android's own install prompt) rather than an
 * in-app `PackageInstaller` flow — no `REQUEST_INSTALL_PACKAGES` permission,
 * no extra native code, for a marginal UX gain (see issue #66's own
 * hors-scope).
 */
export function UpdateBanner() {
  const { t } = useTranslation();
  const { availableVersion, dismiss } = useAppUpdateCheck();

  if (!availableVersion) return null;

  return (
    <div className="update-banner" role="status">
      <span className="update-banner__text">
        {t("appUpdate.banner.text", { version: availableVersion })}
      </span>
      <div className="update-banner__actions">
        <a
          className="update-banner__update"
          href="https://git.dev.kyuno.fr/kyuno/batchCooking/releases/latest/download/batchcooking.apk"
          target="_blank"
          rel="noreferrer"
        >
          {t("appUpdate.banner.update")}
        </a>
        <button type="button" className="update-banner__dismiss" onClick={dismiss}>
          {t("appUpdate.banner.dismiss")}
        </button>
      </div>
    </div>
  );
}