"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import dynamic from "next/dynamic";
import { Landmark } from "lucide-react";
import { registerConnection } from "@/app/w/[ws]/open-finance/actions";

const PluggyConnect = dynamic(() => import("react-pluggy-connect").then((m) => m.PluggyConnect), { ssr: false });

export function ConnectBank({ ws, sandbox }: { ws: string; sandbox: boolean }) {
  const [token, setToken] = useState<string | null>(null);
  const [msg, setMsg] = useState<string | null>(null);
  const [pending, start] = useTransition();
  const router = useRouter();

  const open = async () => {
    setMsg(null);
    const r = await fetch("/api/openfinance/connect-token", { method: "POST" });
    const j = await r.json();
    if (!r.ok) return setMsg(j.error ?? "Falha ao iniciar conexão");
    setToken(j.token);
  };

  return (
    <>
      <button className="btn-primary" onClick={open} disabled={pending}>
        <Landmark size={16} /> {pending ? "Importando…" : "Conectar banco"}
      </button>
      {msg && <p className="mt-2 text-sm text-red-600">{msg}</p>}
      {token && (
        <PluggyConnect
          connectToken={token}
          includeSandbox={sandbox}
          onClose={() => setToken(null)}
          onSuccess={({ item }) => {
            setToken(null);
            start(async () => {
              const r = await registerConnection(ws, item.id);
              setMsg("error" in r ? r.error : null);
              router.refresh();
            });
          }}
          onError={(e) => setMsg(e.message)}
        />
      )}
    </>
  );
}