let loaded = false
let loading = false
let loadPromise: Promise<void> | null = null

function loadScript(siteKey: string): Promise<void> {
  if (loaded) return Promise.resolve()
  if (loading && loadPromise) return loadPromise

  loading = true
  loadPromise = new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`
    script.async = true
    script.defer = true
    script.onload = () => {
      loaded = true
      loading = false
      resolve()
    }
    script.onerror = () => {
      loading = false
      reject(new Error('Failed to load reCAPTCHA'))
    }
    document.head.appendChild(script)
  })

  return loadPromise
}

export function useRecaptcha(siteKey: string) {
  async function executeRecaptcha(action: string = 'submit'): Promise<string> {
    await loadScript(siteKey)

    return new Promise((resolve, reject) => {
      window.grecaptcha.ready(() => {
        window.grecaptcha
          .execute(siteKey, { action })
          .then((token: string) => resolve(token))
          .catch(reject)
      })
    })
  }

  return { executeRecaptcha }
}