import type { ChatPageContext } from '../../context'
import { t } from '#cli/i18n'
import { h } from 'vue'
import { DimSdkSessionTraceDialog } from '../../../../ui/components/SessionTraceDialog'
import { copyTextToClipboard } from '../../../utils/clipboard'

export function renderSessionTraceOverlay(ctx: ChatPageContext) {
  return [
    h(DimSdkSessionTraceDialog, {
      modelValue: ctx.showSessionTrace.value,
      'onUpdate:modelValue': (v: boolean) => (ctx.showSessionTrace.value = v),
      w: ctx.mcpSettingsW.value,
      h: ctx.mcpSettingsH.value,
      trace: ctx.sessionTrace.value,
      loading: ctx.sessionTraceLoading.value,
      error: ctx.sessionTraceError.value,
      selectedIndex: ctx.sessionTraceIndex.value,
      'onUpdate:selectedIndex': (v: number) => (ctx.sessionTraceIndex.value = v),
      onCopy: () => {
        const text = JSON.stringify(ctx.sessionTrace.value ?? null, null, 2)
        void copyTextToClipboard(text)
          .then(ok =>
            ctx.showCopyToast(
              ok ? t('chatPage.toast.copySuccess') : t('chatPage.toast.copyFailed'),
            ),
          )
          .catch(() => ctx.showCopyToast(t('chatPage.toast.copyFailed')))
      },
      onRefresh: ctx.refreshSessionTrace,
    }),
  ]
}
