import { useTranslation } from "react-i18next";
import { API_BASE_URL } from "../../api/client";
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 this API's own `/mobile/download` (a plain
 * redirect straight to the latest release's actual `.apk`, resolved
 * server-side — see `mobile.service.ts`) externally, 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). The system browser follows the redirect and handles the
 * download + Android's own install prompt.
 */
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={`${API_BASE_URL}/mobile/download`}
          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>
  );
}