"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";

export function KavenixGoogleSearchConsoleSyncButton() {
  const router = useRouter();
  const [pending, setPending] = useState(false);
  const [message, setMessage] = useState("");

  async function sync() {
    if (pending) {
      return;
    }

    setPending(true);
    setMessage("");

    try {
      const response = await fetch("/api/kavenix/search-console/sync", { method: "POST" });
      const payload = (await response.json().catch(() => null)) as {
        message?: string;
        result?: { status?: string };
      } | null;

      if (!response.ok) {
        throw new Error(payload?.message || "Search Console 동기화에 실패했습니다.");
      }

      if (payload?.result?.status === "synced") {
        setMessage("동기화했습니다.");
        router.refresh();
      } else if (payload?.result?.status === "sync-in-progress") {
        setMessage("다른 동기화가 진행 중입니다. 완료되면 최신 데이터를 표시합니다.");
      } else if (payload?.result?.status === "not-connected") {
        setMessage("Google Search Console 계정을 먼저 연결해 주세요.");
      } else if (payload?.result?.status === "reconnect-required") {
        setMessage("공개 URL 속성으로 다시 연결해 주세요.");
      } else {
        setMessage("OAuth 환경변수 설정을 확인해 주세요.");
      }
    } catch (error) {
      setMessage(error instanceof Error ? error.message : "Search Console 동기화에 실패했습니다.");
    } finally {
      setPending(false);
    }
  }

  return (
    <div className="flex flex-col items-end gap-1.5">
      <button
        type="button"
        onClick={sync}
        disabled={pending}
        className="om-btn-secondary h-10 rounded-[10px] px-4 text-[13px] shadow-none disabled:cursor-not-allowed disabled:opacity-60"
      >
        {pending ? "동기화 중" : "지금 동기화"}
      </button>
      {message ? <p className="max-w-[260px] text-right text-[11px] leading-4 text-[#6e809f]">{message}</p> : null}
    </div>
  );
}