"use client";

import { useState } from "react";

export function WebhookControl({ sourceId, configured }: { sourceId: number; configured: boolean }) {
  const [url, setUrl] = useState(""); const [error, setError] = useState(""); const [busy, setBusy] = useState(false);
  async function generate() {
    setBusy(true); setError("");
    try {
      const response = await fetch(`/api/sources/${sourceId}/webhook`, { method: "POST", headers: { Accept: "application/json" } });
      const body = await response.json(); if (!response.ok) throw new Error(body.error || "無法產生 webhook URL"); setUrl(body.url);
    } catch (reason) { setError(reason instanceof Error ? reason.message : "無法產生 webhook URL"); }
    finally { setBusy(false); }
  }
  async function copy() { if (url) await navigator.clipboard.writeText(url); }
  return <div className="webhook-control"><p className="meta">Webhook：{configured ? "已設定" : "尚未設定"}</p>
    {url ? <><label className="sr-only" htmlFor={`webhook-${sourceId}`}>Webhook URL</label><input id={`webhook-${sourceId}`} readOnly value={url} onFocus={(event) => event.currentTarget.select()} /><div className="row"><button type="button" onClick={copy}>複製 URL</button><button type="button" className="danger" onClick={generate} disabled={busy}>重新產生</button></div><p className="meta">請立即複製到 Memos；重新整理後完整密鑰不會再顯示。</p></> : <button type="button" onClick={generate} disabled={busy}>{busy ? "產生中…" : configured ? "重新產生 webhook URL" : "產生 webhook URL"}</button>}
    {error && <p className="error">{error}</p>}
  </div>;
}