"use client";

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

export function KavenixMailboxSyncButton({ mailboxId }: { mailboxId: number }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState("");
  const [failed, setFailed] = useState(false);

  async function synchronize() {
    if (loading) return;

    setLoading(true);
    setMessage("");
    setFailed(false);

    try {
      const response = await fetch(`/api/kavenix/mailboxes/${mailboxId}/sync`, {
        method: "POST"
      });
      const payload = (await response.json().catch(() => null)) as
        | { message?: string; ok?: boolean }
        | null;

      if (!response.ok || !payload?.ok) {
        throw new Error(payload?.message || "메일함 재동기화를 완료하지 못했습니다.");
      }

      setMessage(payload.message || "메일함 재동기화를 완료했습니다.");
      router.refresh();
    } catch (error) {
      setFailed(true);
      setMessage(
        error instanceof Error
          ? error.message
          : "메일함 재동기화를 완료하지 못했습니다."
      );
      router.refresh();
    } finally {
      setLoading(false);
    }
  }

  return (
    <div>
      <button
        type="button"
        onClick={synchronize}
        disabled={loading}
        className="inline-flex h-8 cursor-pointer items-center rounded-[9px] bg-[#2f6df6] px-3 text-[12px] font-semibold text-white transition-colors hover:bg-[#245de3] disabled:cursor-wait disabled:bg-[#9db9f7]"
      >
        {loading ? "재동기화 중" : "재동기화"}
      </button>
      {message ? (
        <p
          className={`mt-1.5 max-w-[220px] text-[11px] leading-4 ${
            failed ? "text-[#c6535a]" : "text-[#2f6df6]"
          }`}
        >
          {message}
        </p>
      ) : null}
    </div>
  );
}