import { useEffect, useState } from "react";
import { Button } from "./ui";
import { applyServiceWorkerUpdate, PWA_EVENT } from "../lib/pwa";

/**
 * 装到手机/桌面以后，发版就不是"让用户重新输网址"了：
 * 有新版本时在这里提一句，点"刷新"才换，不点就继续用手上的这版。
 *
 * 为什么不用自动刷新（registerType: "autoUpdate"）：Vditor、图表这些是懒加载分片，
 * 后台悄悄换掉之后，用户下一次点开某个面板就是 404 —— 编辑器直接白屏。
 */
export function UpdatePrompt() {
  const [ready, setReady] = useState(false);
  const [applying, setApplying] = useState(false);
  const [dismissed, setDismissed] = useState(false);

  useEffect(() => {
    const onReady = () => setReady(true);
    window.addEventListener(PWA_EVENT.updateReady, onReady);
    return () => window.removeEventListener(PWA_EVENT.updateReady, onReady);
  }, []);

  if (!ready || dismissed) return null;

  return (
    // 居中用 flex 包一层：animate-slide-up 的 keyframes 自带 transform，
    // 会和 -translate-x-1/2 抢同一个属性，手机窄屏上卡片会被推出屏幕右侧。
    <div className="pointer-events-none fixed inset-x-0 bottom-6 z-[70] flex justify-center px-4">
      <div
        role="status"
        className="animate-slide-up pointer-events-auto w-full max-w-[26rem] rounded-xl border border-line-200 bg-ink-900 px-4 py-3 text-paper-50 shadow-pop"
      >
        <p className="text-sm">有新版了。刷新一下就用上，手头的输入会丢，先存了再点。</p>
        <div className="mt-2 flex justify-end gap-2">
          <Button
            variant="ghost"
            size="sm"
            className="text-paper-300 hover:text-paper-50"
            onClick={() => setDismissed(true)}
          >
            稍后
          </Button>
          <Button
            variant="primary"
            size="sm"
            disabled={applying}
            onClick={() => {
              setApplying(true);
              void applyServiceWorkerUpdate();
            }}
          >
            {applying ? "正在刷新…" : "刷新"}
          </Button>
        </div>
      </div>
    </div>
  );
}