<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Cardland – Connect Bank</title>
  <script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
</head>
<body>
  <h2>Cardland</h2>
  <button id="connect">Connect Bank</button>

  <script>
    async function getLinkToken() {
      const res = await fetch(
        "https://cardland-api.laz0911.workers.dev/create_link_token"
      );
      const data = await res.json();
      return data.link_token;
    }

    document.getElementById("connect").onclick = async () => {
      const linkToken = await getLinkToken();

      const handler = Plaid.create({
        token: linkToken,
        onSuccess: async (public_token) => {
          const res = await fetch(
            "https://cardland-api.laz0911.workers.dev/exchange_public_token",
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ public_token })
            }
          );

          const data = await res.json();
          alert("Banco conectado ✅");
          console.log("ACCESS TOKEN:", data.access_token);
        }
      });

      handler.open();
    };
  </script>
</body>
</html>