"use client";

import { useState } from "react";
import Button from "@/components/ui/Button";
import ActionMenu from "@/components/ui/ActionMenu";

export default function IntegrationActions({ shopId }: { shopId: string | null }) {
  const [loading, setLoading] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);

  async function call(action: "refresh" | "test") {
    if (!shopId) {
      setMessage("Belum ada toko terhubung.");
      return;
    }
    setLoading(action);
    setMessage(null);
    try {
      const endpoint = action === "refresh" ? "/api/shopee/token/refresh" : "/api/shopee/test-connection";
      const res = await fetch(endpoint, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ shopId }),
      });
      const json = await res.json();
      if (!res.ok || !json.ok) throw new Error(json.error || "Aksi gagal.");
      setMessage(action === "refresh" ? "Token berhasil direfresh." : "Koneksi API berhasil dites.");
    } catch (err) {
      setMessage(err instanceof Error ? err.message : "Aksi gagal.");
    } finally {
      setLoading(null);
    }
  }

  async function copyAuthUrl() {
    setLoading("auth");
    setMessage(null);
    try {
      const res = await fetch("/api/shopee/auth-url");
      const json = await res.json();
      if (!res.ok || !json.ok) throw new Error(json.error || "Gagal generate auth URL.");
      await navigator.clipboard.writeText(json.authUrl);
      setMessage("Auth URL sudah disalin.");
    } catch (err) {
      setMessage(err instanceof Error ? err.message : "Gagal generate auth URL.");
    } finally {
      setLoading(null);
    }
  }

  async function disconnectLocal() {
    if (!shopId) return;
    if (!window.confirm("Hapus token lokal toko ini? Data order/produk lokal tidak ikut dihapus.")) return;
    setLoading("disconnect");
    setMessage(null);
    try {
      const res = await fetch("/api/shopee/disconnect", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ shopId }),
      });
      const json = await res.json();
      if (!res.ok || !json.ok) throw new Error(json.error || "Gagal disconnect token lokal.");
      setMessage("Token lokal dihapus. Hubungkan Shopee ulang jika diperlukan.");
      window.setTimeout(() => window.location.reload(), 700);
    } catch (err) {
      setMessage(err instanceof Error ? err.message : "Gagal disconnect token lokal.");
    } finally {
      setLoading(null);
    }
  }

  return (
    <div className="mt-5">
      <div className="flex flex-wrap gap-2">
        {shopId ? <Button variant="primary" loading={loading === "test"} onClick={() => call("test")}>Uji koneksi</Button> : (
          <a className="ui-button ui-button-primary" href="/api/shopee/auth-url?go=1">Hubungkan Shopee</a>
        )}
        <ActionMenu label="Tindakan lainnya" items={[
          { label: "Salin authorization URL", description: "Untuk membuka otorisasi secara manual", onClick: copyAuthUrl },
          { label: "Refresh token", description: "Perbarui akses toko yang dipilih", disabled: !shopId || loading === "refresh", onClick: () => call("refresh") },
          { label: "Hubungkan toko baru", description: "Buka halaman resmi otorisasi Shopee", onClick: () => { window.location.href = "/api/shopee/auth-url?go=1"; } },
          { label: "Disconnect token lokal", description: "Data order dan produk tetap tersimpan", disabled: !shopId || loading === "disconnect", danger: true, onClick: disconnectLocal },
        ]} />
      </div>
      {message ? <div className="mt-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700">{message}</div> : null}
    </div>
  );
}