<template>
  <div class="dressfor-container flex">
    <div class="content flex-1 flex flex-column">
      <div class="loading-container flex flex-center">
        <Icon class="icon-element" title="" />
      </div>
      <div class="text">
        What are you <br />
        dressing for?
      </div>
      <!-- <div class="start-btn" @click="handleStart">Start</div> -->
      <div class="chatbox flex flex-center">
        <div class="input-box flex">
          <div class="input-wrapper flex-1 flex">
            <input
              type="text"
              class="input-item flex-1"
              v-model="inputValue"
              placeholder="Ask sth!"
              v-show="!isRecording"
            />
            <div class="recording-visualizer flex-1" v-show="isRecording">
              <AudioVisualizer ref="audioVisualizerRef" />
            </div>
          </div>
          <SvgIcon
            class="audio-icon"
            :name="isRecording ? 'pause' : 'audio'"
            size="35"
            color="#6D6868"
            @click="handleClickAudio"
          />
        </div>
        <div class="send flex flex-center" @click="handleSendMessage">
          <SvgIcon class="send-icon" name="send" size="26" color="#000000" />
        </div>
      </div>
      <div class="tag-container flex flex-column flex-center">
        <div class="tag-list short flex flex-justify-center">
          <div
            class="tag-item"
            v-for="item in tagListShort"
            :key="item"
            @click="handleClickTag(item)"
          >
            {{ item }}
          </div>
        </div>
        <div class="tag-list long flex flex-justify-center">
          <div
            class="tag-item"
            v-for="item in tagListLong"
            :key="item"
            @click="handleClickTag(item)"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onUnmounted, nextTick, watch } from 'vue'
import { showToast, closeToast } from 'vant'
import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue'
import { useRouter } from 'vue-router'
import AudioVisualizer from '@/views/asistant/components/AudioVisualizer.vue'
import Icon from '../asistant/components/GenerateLoading.vue'

const router = useRouter()

const tagListShort = ['Silk Slip Dress', 'Business Casual', 'Suggest Shoe Styles']
const tagListLong = ['Linen Suit For Summer  Gaka', 'Recomment Evening Bags']

const inputValue = ref('')
const isRecording = ref(false)
const audioVisualizerRef = ref<InstanceType<typeof AudioVisualizer> | null>(null)
let speechRecognition: any = null
let lastTranscript = ''
let isSpeechRecognitionActive = false

const refreshAudioVisualizer = () => {
  audioVisualizerRef.value?.updateLines?.()
}

watch(isRecording, async (newVal) => {
  if (newVal) {
    await nextTick()
    refreshAudioVisualizer()
    setTimeout(() => {
      refreshAudioVisualizer()
    }, 50)
  }
})

const handleSendMessage = () => {
  const message = inputValue.value.trim()
  if (!message) {
    showToast('Please enter a message')
    return
  }

  router.push({
    path: '/asistant',
    query: message ? { message } : undefined
  })
}

const handleClickAudio = () => {
  if (isRecording.value) {
    stopRecording()
  } else {
    startRecording()
  }
}

const startRecording = () => {
  if (isSpeechRecognitionActive) {
    console.warn('Speech recognition already running')
    return
  }
  if (!speechRecognition) {
    if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
      showToast(
        'Your browser does not support speech recognition, please try again with another browser'
      )
      return
    }
    const SpeechRecognition =
      (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
    speechRecognition = new SpeechRecognition()
    speechRecognition.continuous = true
    speechRecognition.interimResults = true
    speechRecognition.lang = 'en-US'
  }

  speechRecognition.onstart = () => {
    showToast({
      message: 'Listening...',
      duration: 0
    })
    isRecording.value = true
  }

  speechRecognition.onresult = (event: any) => {
    let finalTranscript = ''
    let interimTranscript = ''

    for (let i = event.resultIndex; i < event.results.length; i++) {
      const transcript = event.results[i][0].transcript
      if (event.results[i].isFinal) {
        finalTranscript += transcript
      } else {
        interimTranscript += transcript
      }
    }

    if (finalTranscript && finalTranscript !== lastTranscript) {
      lastTranscript = finalTranscript
      inputValue.value = finalTranscript
    }

    if (interimTranscript) {
      console.log('Speech recognition interim result:', interimTranscript)
    }
  }

  speechRecognition.onend = () => {
    closeToast()
    isRecording.value = false
    lastTranscript = ''
    isSpeechRecognitionActive = false
  }

  speechRecognition.onerror = (event: any) => {
    console.error('Speech recognition error:', event.error)
    closeToast()
    isRecording.value = false
    isSpeechRecognitionActive = false
    showToast('Speech recognition failed, please try again')
  }

  speechRecognition.start()
  isSpeechRecognitionActive = true
}

const stopRecording = () => {
  if (speechRecognition && isSpeechRecognitionActive) {
    speechRecognition.stop()
    isSpeechRecognitionActive = false
  }
}

const handleClickTag = (tag: string) => {
  inputValue.value = tag
}

onUnmounted(() => {
  if (speechRecognition && isRecording.value) {
    speechRecognition.stop()
  }
  speechRecognition = null
})
</script>
<style lang="less" scoped>
.c-svg {
  width: initial;
  height: initial;
}
.dressfor-container {
  height: calc(100vh - 12rem - 14.9rem);
  // overflow: hidden;
  color: #fff;
  position: relative;
  // background: url('@/assets/images/dress_for_bg.png') no-repeat center center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 6rem 0 0 0;
  .content {
    .loading-container {
      :deep(.loading-image) {
        width: 17rem;
        height: 17rem;
        animation: none;
      }
      :deep(.loading-shadow) {
        width: 9.2rem;
        height: 2.4rem;
        filter: blur(6px);
        opacity: 0.5;
        margin: 2.4rem 0 0;
        // background-color: #d9d9d9;
      }
    }
    .text {
      font-family: 'satoshiBold';
      font-size: 9.6rem;
      text-align: center;
      padding-top: 9rem;
      padding-bottom: 14rem;

      font-weight: 700;
      line-height: 1.12;
      background: #b3b3b3;
      background: linear-gradient(120deg, #b3b3b3 1%, rgba(0, 0, 0, 0) 48%),
        linear-gradient(344deg, #b3b3b2 16%, #000000 66%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .chatbox {
      height: 9.3rem;
      // background-color: #fff;
      column-gap: 2.29rem;
      .input-box {
        width: 59.8rem;
        height: 100%;
        background-color: #efefef;
        // border: 2px solid #5f5f5f;
        border-radius: 1rem;
        color: #222222;
        font-size: 3.2rem;
        font-family: 'satoshiRegular';
        padding: 0 2.6rem;
        column-gap: 2.6rem;
        overflow: hidden;
        .input-wrapper {
          overflow: hidden;
        }
        .recording-visualizer {
          display: flex;
          align-items: center;
          height: 100%;
          :deep(.audio-visualizer) {
            width: 100%;
            padding: 0;
          }
          :deep(.visualizer-container) {
            height: 100%;
          }
        }
        .input-item {
          // width: 100%;
          height: 100%;
          outline: none;
          border: none;
          background-color: #efefef;
        }
        .audio-icon {
          width: initial;
        }
      }
      .send {
        width: 7.6rem;
        height: 7.6rem;
        background-color: #efefef;
        border-radius: 1rem;
      }
    }
    .tag-container {
      row-gap: 3.1rem;
      padding-top: 5.7rem;
      .tag-list {
        color: #000;
        flex-wrap: wrap;
        &.short {
          column-gap: 1.91rem;
        }
        &.long {
          column-gap: 3.1rem;
          padding-left: 2.1rem;
        }
        .tag-item {
          height: 6.8rem;
          line-height: 6.8rem;
          box-sizing: border-box;
          font-family: 'satoshiRegular';
          font-size: 2.8rem;
          border: 0.15rem solid #cdcdcd;
          text-align: center;
          border-radius: 4.6rem;
          padding: 0 2.15rem;
        }
      }
    }
  }
}
</style>
