/* eslint-disable no-undef */
/* eslint-disable style/object-curly-spacing */
(async function () {
  let Component
  let componentSource = 'not found'

  if (typeof globalThis['{component_id}'] === 'function') {
    Component = globalThis['{component_id}']
    componentSource = 'global.{component_id}'
  }
  else if (
    globalThis['~rsc'].modules
    && globalThis['~rsc'].modules['{component_id}']
  ) {
    Component
      = globalThis['~rsc'].modules['{component_id}'].default
        || Object.values(globalThis['~rsc'].modules['{component_id}'])[0]
    componentSource = '~rsc.modules.{component_id}'
  }
  else {
    throw new Error('Component {component_id} not found in global scope')
  }

  const sanitizeComponentOutput = (html, componentId) => {
    if (typeof html !== 'string')
      return html

    return Deno.core.ops.op_sanitize_html(html, componentId)
  }

  const elementToRSC = (element, componentId) => {
    try {
      const clientComponents = globalThis['~rsc'].clientComponents || {}

      let rscResult
      if (typeof globalThis.renderToRsc === 'function') {
        rscResult = globalThis.renderToRsc(element, clientComponents)
      }
      else if (typeof globalThis.traverseToRsc === 'function') {
        rscResult = globalThis.traverseToRsc(element, clientComponents)
      }
      else {
        rscResult = {
          $$typeof: Symbol.for('react.transitional.element'),
          type: 'div',
          props: {
            'data-rsc-component': componentId,
            'children': element,
          },
        }
      }

      return rscResult
    }
    catch (error) {
      return {
        $$typeof: Symbol.for('react.transitional.element'),
        type: 'div',
        props: {
          'data-rsc-component': componentId,
          'children': `Error: ${error.message}`,
        },
      }
    }
  }

  const props = {props_json}

  const isAsyncComponent = Component.constructor.name === 'AsyncFunction'

  let element
  if (isAsyncComponent) {
    try {
      const result = await Component(props)
      element = result
    }
    catch (asyncError) {
      const errorResult = {
        html: `<div><h2>Error Rendering {component_id}</h2><p>${asyncError.message}</p></div>`,
        rsc: null,
        hasSuspense: false,
        debug: {
          component_id: componentSource,
          success: false,
          error: asyncError.message,
        },
      }
      if (!globalThis['~render'])
        globalThis['~render'] = {}
      globalThis['~render'].lastResult = errorResult

      return errorResult
    }
  }
  else {
    element = Component(props)
  }

  try {
    const rscResult = elementToRSC(element, '{component_id}')

    let htmlResult = null
    try {
      htmlResult = renderToHTML(element)
      htmlResult = sanitizeComponentOutput(htmlResult, '{component_id}')
    }
    catch (htmlError) {
      console.warn('HTML generation failed, using RSC only:', htmlError)
      htmlResult = `<div data-rsc-component="{component_id}">RSC Component</div>`
    }

    if (!rscResult) {
      const emptyResult = {
        html:
          htmlResult
          || `<div><h2>Component: ${componentSource}</h2><p>Empty result from component rendering</p></div>`,
        rsc: null,
        hasSuspense: false,
        debug: {
          component_id: componentSource,
          success: false,
          reason: 'empty_rsc',
        },
      }
      if (!globalThis['~render'])
        globalThis['~render'] = {}
      globalThis['~render'].lastResult = emptyResult

      return emptyResult
    }

    const finalResult = {
      html: htmlResult,
      rsc: rscResult,
      hasSuspense: false,
      debug: {
        component_id: componentSource,
        success: true,
        htmlLength: htmlResult ? htmlResult.length : 0,
        hasRSC: !!rscResult,
      },
    }

    if (!globalThis['~render'])
      globalThis['~render'] = {}
    globalThis['~render'].lastResult = finalResult

    return finalResult
  }
  catch (error) {
    if (error && error.$$typeof === Symbol.for('react.suspense.pending')) {
      if (error.promise && typeof error.promise.then === 'function') {
        try {
          await error.promise

          const newElement = Component(props)

          const rscResult = elementToRSC(newElement, '{component_id}')

          let htmlResult = null
          try {
            htmlResult = renderToHTML(newElement)
            htmlResult = sanitizeComponentOutput(htmlResult, '{component_id}')
          }
          catch (htmlError) {
            console.warn(
              'HTML generation failed after suspense, using RSC only:',
              htmlError,
            )
            htmlResult = `<div data-rsc-component="{component_id}">RSC Component (Suspense Resolved)</div>`
          }

          const suspenseResolvedResult = {
            html: htmlResult,
            rsc: rscResult,
            hasSuspense: true,
            debug: {
              component_id: componentSource,
              success: true,
              resolvedFromSuspense: true,
              htmlLength: htmlResult ? htmlResult.length : 0,
              hasRSC: !!rscResult,
            },
          }

          if (!globalThis['~render'])
            globalThis['~render'] = {}
          globalThis['~render'].lastResult = suspenseResolvedResult
          return suspenseResolvedResult
        }
        catch (resolveError) {
          const finalError = resolveError

          const errorResult = {
            html: `<div><h2>Error Rendering {component_id}</h2><p>${finalError.message}</p></div>`,
            rsc: null,
            hasSuspense: false,
            debug: {
              component_id: componentSource,
              success: false,
              error: finalError.message,
            },
          }

          if (!globalThis['~render'])
            globalThis['~render'] = {}
          globalThis['~render'].lastResult = errorResult
          return errorResult
        }
      }
    }

    const errorResult = {
      html: `<div><h2>Error Rendering {component_id}</h2><p>${error.message}</p></div>`,
      rsc: null,
      hasSuspense: false,
      debug: {
        component_id: componentSource,
        success: false,
        error: error.message,
      },
    }

    if (!globalThis['~render'])
      globalThis['~render'] = {}
    globalThis['~render'].lastResult = errorResult

    return errorResult
  }
})()
