<script setup>
import { ref, computed, onMounted } from 'vue'
import { useAccountStore } from '@/stores/account'
import { useRouter } from 'vue-router'
import { apiClient } from '@/lib/api'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import {
  Smartphone,
  RefreshCw,
  Trash2,
  Edit,
  Lock,
  User,
  ArrowLeft
} from 'lucide-vue-next'
import { toast } from 'vue-sonner'
import EditDeviceNameDialog from '@/components/EditDeviceNameDialog.vue'
import ResetDevicePasswordDialog from '@/components/ResetDevicePasswordDialog.vue'

const router = useRouter()
const accountStore = useAccountStore()

const devices = ref([])
const isLoading = ref(false)
const showEditNameDialog = ref(false)
const showResetPasswordDialog = ref(false)
const showDeleteDialog = ref(false)
const currentDevice = ref(null)

// 加载设备列表
const loadDevices = async () => {
  if (!accountStore.isAuthenticated) {
    router.push('/')
    return
  }

  isLoading.value = true
  try {
    const response = await apiClient.getAccountDevices()
    devices.value = response.data || []
  } catch (error) {
    toast.error('加载设备列表失败：' + error.message)
  } finally {
    isLoading.value = false
  }
}

// 打开解绑确认对话框
const confirmUnbind = (device) => {
  currentDevice.value = device
  showDeleteDialog.value = true
}

// 解绑设备
const unbindDevice = async () => {
  if (!currentDevice.value) return

  try {
    await apiClient.unbindDeviceFromAccount(currentDevice.value.uuid)
    toast.success('设备已解绑')
    showDeleteDialog.value = false
    currentDevice.value = null
    await loadDevices()
  } catch (error) {
    toast.error('解绑失败：' + error.message)
  }
}

// 编辑设备名称
const editDeviceName = (device) => {
  currentDevice.value = device
  showEditNameDialog.value = true
}

// 重置设备密码
const resetPassword = (device) => {
  currentDevice.value = device
  showResetPasswordDialog.value = true
}

// 设备名称更新成功
const handleDeviceNameUpdated = async () => {
  await loadDevices()
}

// 密码重置成功
const handlePasswordReset = async () => {
  toast.success('密码重置成功')
}

// 格式化日期
const formatDate = (dateString) => {
  return new Date(dateString).toLocaleString('zh-CN')
}

onMounted(() => {
  loadDevices()
})
</script>

<template>
  <div class="min-h-screen bg-gradient-to-br from-background via-background to-primary/5">
    <!-- Header -->
    <div class="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-10">
      <div class="container mx-auto px-6 py-4">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-4">
            <Button
              variant="ghost"
              size="icon"
              @click="router.push('/')"
            >
              <ArrowLeft class="h-5 w-5" />
            </Button>
            <div>
              <h1 class="text-2xl font-bold">设备管理</h1>
              <p class="text-sm text-muted-foreground">管理您账户下的所有设备</p>
            </div>
          </div>
          <div class="flex items-center gap-2">
            <Badge variant="secondary" class="px-3 py-1">
              <User class="h-3 w-3 mr-1.5" />
              {{ accountStore.userName }}
            </Badge>
            <Button
              variant="outline"
              size="icon"
              @click="loadDevices"
              :disabled="isLoading"
            >
              <RefreshCw :class="{ 'animate-spin': isLoading }" class="h-4 w-4" />
            </Button>
          </div>
        </div>
      </div>
    </div>

    <!-- Main Content -->
    <div class="container mx-auto px-6 py-8 max-w-7xl">
      <!-- 加载状态 -->
      <div v-if="isLoading" class="text-center py-12">
        <RefreshCw class="h-8 w-8 animate-spin mx-auto text-muted-foreground" />
        <p class="mt-4 text-muted-foreground">加载中...</p>
      </div>

      <!-- 空状态 -->
      <Card v-else-if="devices.length === 0" class="border-dashed">
        <CardContent class="flex flex-col items-center justify-center py-12">
          <Smartphone class="h-16 w-16 text-muted-foreground/50 mb-4" />
          <p class="text-lg font-medium text-muted-foreground mb-2">暂无绑定设备</p>
          <p class="text-sm text-muted-foreground mb-4">您可以在主页面注册并绑定新设备</p>
          <Button @click="router.push('/')" variant="outline">
            返回主页
          </Button>
        </CardContent>
      </Card>

      <!-- 设备列表 -->
      <div v-else>
        <div class="mb-4 flex items-center justify-between">
          <p class="text-sm text-muted-foreground">
            共 {{ devices.length }} 个设备
          </p>
        </div>

        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          <Card
            v-for="device in devices"
            :key="device.uuid"
            class="hover:shadow-lg transition-shadow"
          >
            <CardHeader class="pb-3">
              <div class="flex items-start justify-between">
                <div class="flex-1">
                  <CardTitle class="text-lg">
                    {{ device.name || '未命名设备' }}
                  </CardTitle>
                  <CardDescription class="mt-1">
                    <code class="text-xs">{{ device.uuid }}</code>
                  </CardDescription>
                </div>
                <Smartphone class="h-5 w-5 text-muted-foreground flex-shrink-0" />
              </div>
            </CardHeader>
            <CardContent class="space-y-3">
              <div class="text-sm text-muted-foreground">
                创建时间: {{ formatDate(device.createdAt) }}
              </div>

              <div class="flex flex-wrap gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  @click="editDeviceName(device)"
                  class="flex-1"
                >
                  <Edit class="h-3 w-3 mr-1" />
                  重命名
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  @click="resetPassword(device)"
                  class="flex-1"
                >
                  <Lock class="h-3 w-3 mr-1" />
                  重置密码
                </Button>
              </div>

              <Button
                variant="destructive"
                size="sm"
                @click="confirmUnbind(device)"
                class="w-full"
              >
                <Trash2 class="h-3 w-3 mr-1" />
                解绑设备
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>

    <!-- 编辑设备名称弹框 -->
    <EditDeviceNameDialog
      v-if="currentDevice"
      v-model="showEditNameDialog"
      :device-uuid="currentDevice.uuid"
      :current-name="currentDevice.name || ''"
      :has-password="false"
      @success="handleDeviceNameUpdated"
    />

    <!-- 重置密码弹框 -->
    <ResetDevicePasswordDialog
      v-if="currentDevice"
      v-model="showResetPasswordDialog"
      :device-uuid="currentDevice.uuid"
      :device-name="currentDevice.name || ''"
      @success="handlePasswordReset"
    />

    <!-- 解绑确认对话框 -->
    <AlertDialog v-model:open="showDeleteDialog">
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>确认解绑设备</AlertDialogTitle>
          <AlertDialogDescription>
            确定要解绑设备 "{{ currentDevice?.name || currentDevice?.uuid }}" 吗？
            此操作无法撤销。
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>取消</AlertDialogCancel>
          <AlertDialogAction @click="unbindDevice">
            确认解绑
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  </div>
</template>
