import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Sparkles, X } from "lucide-react";
import { FRONTEND_VERSION, SEEN_VERSION_KEY } from "../lib/version";

// Eye-catching, dismissible bar shown once after the running build's version changes
// (compares the baked frontend version to the last one the user acknowledged).
export default function VersionBanner({ onOpen }: { onOpen: () => void }) {
  const { t } = useTranslation();
  const [dismissed, setDismissed] = useState(false);
  const seen = localStorage.getItem(SEEN_VERSION_KEY);
  // Don't nag in un-stamped dev builds, or once this version has been seen.
  const show = FRONTEND_VERSION !== "dev" && seen !== FRONTEND_VERSION && !dismissed;
  if (!show) return null;

  function markSeen() {
    localStorage.setItem(SEEN_VERSION_KEY, FRONTEND_VERSION);
    setDismissed(true);
  }

  return (
    <div className="shrink-0 flex items-center gap-2 px-4 py-2 text-sm bg-accent/15 border-b border-accent/30 text-fg">
      <Sparkles className="w-4 h-4 text-accent shrink-0" />
      <span className="min-w-0">{t("header.banner.updated", { version: FRONTEND_VERSION })}</span>
      <button
        onClick={() => {
          onOpen();
          markSeen();
        }}
        className="ml-1 px-2.5 py-1 rounded-lg font-semibold bg-accent text-accent-fg hover:opacity-90 transition"
      >
        {t("header.banner.releaseNotes")}
      </button>
      <button
        onClick={markSeen}
        title={t("header.banner.dismiss")}
        className="ml-auto p-1 rounded-md text-muted hover:text-fg hover:bg-card transition"
      >
        <X className="w-4 h-4" />
      </button>
    </div>
  );
}