"use client";

import { useState } from "react";

export function OpenPwaButton() {
  const [pending, setPending] = useState(false);
  const [error, setError] = useState("");

  async function openPwa() {
    setPending(true);
    setError("");
    try {
      const response = await fetch("/api/pwa/handoff", { method: "POST" });
      const payload = await response.json() as {
        pwa_url?: string;
        message?: string;
      };
      if (!response.ok || !payload.pwa_url) {
        throw new Error(payload.message || "暂时无法打开手机端");
      }
      window.location.assign(payload.pwa_url);
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "暂时无法打开手机端");
      setPending(false);
    }
  }

  return (
    <span>
      <button className="button button-primary" type="button" disabled={pending} onClick={openPwa}>
        {pending ? "正在创建安全入口…" : "打开 NekoNest PWA"}
      </button>
      {error && <small className="form-error" role="alert">{error}</small>}
    </span>
  );
}