import { t } from '#cli/i18n'
import { textCellWidth, TText } from '@simon_he/vue-tui'
import { defineComponent, h, inject } from 'vue'
import { ChatPageContextKey } from '../context'

export const DimSdkChatFooter = defineComponent({
  name: 'DimSdkChatFooter',
  setup() {
    const injected = inject(ChatPageContextKey)
    if (!injected) throw new Error('DimSdkChatFooter missing ChatPageContext')
    const ctx = injected

    return () => {
      const footerY = Math.max(0, ctx.rows.value - ctx.footerH)
      const selectionHint = t('chatPage.footer.dragSelect')
      const leftX = ctx.inputX.value - 1
      const ui = ctx.ui
      const chrome = ui.style(['bg.window'])
      const muted = ui.style(['text.muted', 'bg.window'])
      const footerFill = (() => {
        const w = Math.max(0, ctx.cols.value)
        if (w === 0) return ''
        return ' '.repeat(w)
      })()

      const pendingApproval = Boolean(
        ctx.store.state.approval.active &&
        ctx.store.state.approval.active.status === 'pending',
      )
      const leftSection = (() => {
        if (pendingApproval) {
          const paused = t('chatPage.footer.approvalPaused')
          const pausedHint = t('chatPage.footer.approvalPausedHint')
          const pausedX = leftX
          const pausedHintX = pausedX + textCellWidth(paused) + 1
          return {
            nodes: [
              h(TText, {
                key: 'footer-approval-paused',
                x: pausedX,
                y: footerY,
                value: paused,
                style: ui.style(['status.warning', 'bg.window'], {
                  bold: true,
                }),
                zIndex: 21,
              }),
              h(TText, {
                key: 'footer-approval-paused-hint',
                x: pausedHintX,
                y: footerY,
                value: pausedHint,
                style: muted,
                zIndex: 21,
              }),
            ],
            end: pausedHintX + textCellWidth(pausedHint),
          }
        }
        if (ctx.isLoading.value) {
          const escLabel = t('chatPage.footer.esc')
          const interruptLabel = t('chatPage.footer.interrupt')
          const escX = leftX
          const interruptX = escX + textCellWidth(escLabel) + 1
          return {
            nodes: [
              h(TText, {
                key: 'footer-esc',
                x: escX,
                y: footerY,
                value: escLabel,
                style: ui.style(['text.muted', 'bg.window'], { bold: true }),
                zIndex: 21,
              }),
              h(TText, {
                key: 'footer-interrupt',
                x: interruptX,
                y: footerY,
                value: interruptLabel,
                style: muted,
                zIndex: 21,
              }),
            ],
            end: interruptX + textCellWidth(interruptLabel),
          }
        }
        return {
          nodes: [
            h(TText, {
              key: 'footer-left-hint',
              x: leftX,
              y: footerY,
              value: selectionHint,
              style: muted,
              zIndex: 21,
            }),
          ],
          end: leftX + textCellWidth(selectionHint),
        }
      })()

      const pickFooterRight = () => {
        const full = ctx.footerRightFull.value
        const compact = ctx.footerRightCompact.value
        const micro = ctx.footerRightMicro.value
        const mini = ctx.footerRightMini.value
        const contentW = Math.max(0, ctx.contentW.value)
        const gap = 1
        const fits = (label: string) => {
          const w = textCellWidth(label)
          const startX = Math.max(0, contentW - 2 - w)
          return startX >= leftSection.end + gap
        }
        if (fits(full)) return full
        if (fits(compact)) return compact
        if (fits(micro)) return micro
        if (fits(mini)) return mini
        return ''
      }
      const footerRightValue = pickFooterRight()

      return [
        ctx.rows.value > 0
          ? h(TText, {
              key: 'footer-bg',
              x: 0,
              y: footerY,
              w: ctx.cols.value,
              value: footerFill,
              style: chrome,
              zIndex: 20,
            })
          : null,

        ...leftSection.nodes,

        h(TText, {
          key: 'footer-right',
          x: Math.max(
            0,
            ctx.contentW.value - 2 - textCellWidth(footerRightValue),
          ),
          y: footerY,
          value: footerRightValue,
          style: muted,
          zIndex: 21,
        }),
      ]
    }
  },
})
