<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useDeviceStore } from '@/stores/deviceStore'
import { useChatStore } from '@/stores/chatStore'
import MessageBubble from '@/components/MessageBubble.vue'
import ChatInput from '@/components/ChatInput.vue'
import FileProgress from '@/components/FileProgress.vue'
import { ArrowLeft, MoreVertical, Trash2 } from 'lucide-vue-next'

const route = useRoute()
const router = useRouter()
const deviceStore = useDeviceStore()
const chatStore = useChatStore()

const deviceId = computed(() => route.params.deviceId)
const device = computed(() => deviceStore.getDevice(deviceId.value))
const messages = computed(() => chatStore.messages.get(deviceId.value) || [])
const localDeviceId = computed(() => deviceStore.localDevice?.deviceId || '')

// 只显示与当前对话设备相关的、进行中的传输记录（完成后隐藏）
const deviceTransfers = computed(() => {
  const result = []
  chatStore.transfers.forEach((transfer, id) => {
    // 我发送给对方 或 对方发送给我
    const isRelevant = 
      (transfer.fromDevice === localDeviceId.value && transfer.toDevice === deviceId.value) ||
      (transfer.fromDevice === deviceId.value && transfer.toDevice === localDeviceId.value)
    // 只显示进行中的传输（pending 或 transferring）
    const isInProgress = transfer.status === 'pending' || transfer.status === 'transferring'
    if (isRelevant && isInProgress) {
      result.push([id, transfer])
    }
  })
  return result
})

const messagesContainer = ref(null)
const showMenu = ref(false)

// 滚动到底部
function scrollToBottom() {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  })
}

// 发送消息
async function sendMessage(content) {
  try {
    await chatStore.sendMessage(deviceId.value, content)
    scrollToBottom()
  } catch (error) {
    console.error('Failed to send message:', error)
  }
}

// 选择文件
async function selectFile() {
  const file = await chatStore.selectFile()
  if (file && device.value) {
    // 发送文件，同时发送一条文件消息到聊天记录
    await chatStore.sendFile(deviceId.value, file)
    // 发送文件消息，让接收方也能在聊天记录中看到
    await chatStore.sendMessage(
      deviceId.value,
      `📎 ${file.name}`,
      'file'
    )
  }
}

// 删除聊天记录
async function deleteHistory() {
  showMenu.value = false
  const { ask } = await import('@tauri-apps/plugin-dialog')
  const confirmed = await ask('确定要删除所有聊天记录吗？', {
    title: '删除确认',
    kind: 'warning'
  })
  if (confirmed) {
    await chatStore.deleteHistory(deviceId.value)
  }
}

// 返回
function goBack() {
  router.push('/devices')
}

// 点击文件消息，打开文件位置（仅接收方有效）
async function handleFileClick(fileName) {
  // 先在内存中查找
  for (const [, transfer] of chatStore.transfers) {
    // 接收到的文件（toDevice 是本机）
    if (transfer.name === fileName && transfer.toDevice === localDeviceId.value && transfer.localPath) {
      await chatStore.openFileLocation(transfer.localPath)
      return
    }
  }
  
  // 内存中没有或 localPath 为空，强制从数据库加载
  await chatStore.loadTransferHistory(deviceId.value, true)
  for (const [, transfer] of chatStore.transfers) {
    if (transfer.name === fileName && transfer.toDevice === localDeviceId.value && transfer.localPath) {
      await chatStore.openFileLocation(transfer.localPath)
      return
    }
  }
  
  console.log('File not found:', fileName)
}

// 监听新消息
watch(messages, () => {
  scrollToBottom()
}, { deep: true })

onMounted(async () => {
  chatStore.setCurrentDevice(deviceId.value)
  
  // 确保已连接
  if (!deviceStore.isConnected(deviceId.value)) {
    try {
      await deviceStore.connectToDevice(deviceId.value)
    } catch (error) {
      console.error('Connection failed:', error)
    }
  }
  
  // 加载历史记录
  await chatStore.loadHistory(deviceId.value)
  // 加载传输历史（用于点击文件消息时打开文件）
  await chatStore.loadTransferHistory(deviceId.value)
  scrollToBottom()
})

onUnmounted(() => {
  chatStore.setCurrentDevice(null)
})
</script>

<template>
  <div class="h-full flex flex-col bg-surface-50 dark:bg-surface-900 relative overflow-hidden">
    <!-- 背景装饰 -->
    <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-primary-200/20 dark:bg-primary-900/10 rounded-full blur-[100px] pointer-events-none -translate-y-1/2 translate-x-1/2"></div>
    <div class="absolute bottom-0 left-0 w-[300px] h-[300px] bg-primary-300/10 dark:bg-primary-800/5 rounded-full blur-[80px] pointer-events-none translate-y-1/3 -translate-x-1/3"></div>

    <!-- 头部 -->
    <header class="relative z-20 bg-white/80 dark:bg-surface-900/80 backdrop-blur-md border-b border-surface-200/50 dark:border-surface-700/50 px-4 py-3 flex items-center gap-3 shadow-[0_2px_15px_rgba(0,0,0,0.02)]">
      <button
        @click="goBack"
        class="p-2.5 rounded-xl hover:bg-surface-100 dark:hover:bg-surface-800 text-surface-500 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 transition-colors"
      >
        <ArrowLeft :size="20" stroke-width="2.5" />
      </button>

      <div class="flex-1 min-w-0 flex items-center gap-3">
        <div class="flex-1 min-w-0">
          <h2 class="font-semibold text-surface-900 dark:text-white truncate text-base leading-tight">
            {{ device?.deviceName || '未知设备' }}
          </h2>
          <div class="flex items-center gap-2 mt-0.5">
            <span class="text-xs text-surface-500 dark:text-surface-400 font-mono opacity-80">
              {{ device?.ip }}
            </span>
            <!-- 在线状态指示器 -->
            <div 
              class="flex items-center gap-1.5 px-1.5 py-0.5 rounded-full bg-surface-100 dark:bg-surface-800"
              :class="deviceStore.isConnected(deviceId) ? 'text-green-600 dark:text-green-400' : 'text-surface-400'"
            >
              <span 
                class="w-1.5 h-1.5 rounded-full"
                :class="[
                  deviceStore.isConnected(deviceId) ? 'bg-green-500 animate-pulse' : 'bg-surface-400',
                  'shadow-[0_0_8px_currentColor]'
                ]"
              />
              <span class="text-[10px] font-bold uppercase tracking-wider">
                {{ deviceStore.isConnected(deviceId) ? 'Online' : 'Offline' }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 更多菜单 -->
      <div class="relative">
        <button
          @click="showMenu = !showMenu"
          class="p-2.5 rounded-xl hover:bg-surface-100 dark:hover:bg-surface-800 text-surface-500 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 transition-colors"
        >
          <MoreVertical :size="20" />
        </button>

        <transition
          enter-active-class="transition duration-200 ease-out"
          enter-from-class="transform scale-95 opacity-0"
          enter-to-class="transform scale-100 opacity-100"
          leave-active-class="transition duration-150 ease-in"
          leave-from-class="transform scale-100 opacity-100"
          leave-to-class="transform scale-95 opacity-0"
        >
          <div 
            v-if="showMenu"
            class="absolute right-0 top-full mt-2 w-48 bg-white dark:bg-surface-800 rounded-xl shadow-hard border border-surface-100 dark:border-surface-700 py-1.5 z-50 origin-top-right"
          >
            <button
              @click="deleteHistory"
              class="w-full px-4 py-2.5 text-left text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center gap-2.5 transition-colors"
            >
              <Trash2 :size="16" />
              <span>删除聊天记录</span>
            </button>
          </div>
        </transition>
      </div>
    </header>

    <!-- 消息列表 -->
    <div 
      ref="messagesContainer"
      class="flex-1 overflow-y-auto px-4 py-6 relative z-10 scroll-smooth space-y-2"
    >
      <!-- 空状态 -->
      <div 
        v-if="messages.length === 0"
        class="h-full flex flex-col items-center justify-center text-surface-400 dark:text-surface-500 animate-fade-in"
      >
        <div class="w-16 h-16 bg-surface-100 dark:bg-surface-800 rounded-2xl flex items-center justify-center mb-4 shadow-inner transform rotate-3">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8 opacity-60"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
        </div>
        <p class="font-medium">暂无消息</p>
        <p class="text-sm mt-1 opacity-75">发送消息开始聊天</p>
      </div>

      <!-- 消息列表 -->
      <template v-else>
        <MessageBubble
          v-for="message in messages"
          :key="message.id"
          :message="message"
          :is-sent="message.from === localDeviceId"
          @file-click="handleFileClick"
        />
      </template>
    </div>

    <!-- 文件传输进度（浮动在输入框上方） -->
    <div class="relative z-20 px-4 pb-2">
      <transition-group
        enter-active-class="transition duration-300 ease-out"
        enter-from-class="transform translate-y-4 opacity-0"
        enter-to-class="transform translate-y-0 opacity-100"
        leave-active-class="transition duration-200 ease-in"
        leave-from-class="transform translate-y-0 opacity-100"
        leave-to-class="transform translate-y-4 opacity-0"
      >
        <FileProgress
          v-for="[id, transfer] in deviceTransfers"
          :key="id"
          :transfer="transfer"
          :is-receiver="transfer.toDevice === localDeviceId"
          @open="chatStore.openFileLocation(transfer.localPath || '')"
          @cancel="chatStore.cancelTransfer"
          class="mb-2 last:mb-0 shadow-medium"
        />
      </transition-group>
    </div>

    <!-- 输入区域 -->
    <div class="relative z-30">
        <ChatInput
          @send="sendMessage"
          @select-file="selectFile"
          @select-image="selectFile"
        />
    </div>
  </div>
</template>
