"use client"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ChevronLeft, Smartphone, Battery, Wifi, MessageCircle, Users, Settings, History } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { ScrollArea } from "@/components/ui/scroll-area"
import { fetchDeviceDetail } from "@/api/devices"
import { toast } from "sonner"

interface WechatAccount {
  id: string
  avatar: string
  nickname: string
  wechatId: string
  gender: "male" | "female"
  status: "normal" | "abnormal"
  addFriendStatus: "enabled" | "disabled"
  friendCount: number
  lastActive: string
}

interface Device {
  id: string
  imei: string
  name: string
  status: "online" | "offline"
  battery: number
  lastActive: string
  historicalIds: string[]
  wechatAccounts: WechatAccount[]
  features: {
    autoAddFriend: boolean
    autoReply: boolean
    contentSync: boolean
    aiChat: boolean
  }
  history: {
    time: string
    action: string
    operator: string
  }[]
  totalFriend: number
  thirtyDayMsgCount: number
}

// 这个helper函数用于获取Badge变体类型
function getBadgeVariant(status: string): "default" | "destructive" | "outline" | "secondary" {
  if (status === "online" || status === "normal") {
    return "default"
  } else if (status === "abnormal") {
    return "destructive"
  } else if (status === "enabled") {
    return "outline"
  } else {
    return "secondary"
  }
}

export default function DeviceDetailPage() {
  const params = useParams()
  const router = useRouter()
  const [device, setDevice] = useState<Device | null>(null)
  const [activeTab, setActiveTab] = useState("info")
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    if (!params.id) return

    const fetchDevice = async () => {
      try {
        setLoading(true)
        const response = await fetchDeviceDetail(params.id as string)
        
        if (response && response.code === 200 && response.data) {
          const serverData = response.data
          
          // 构建符合前端期望格式的设备对象
          const formattedDevice: Device = {
            id: serverData.id?.toString() || "",
            imei: serverData.imei || "",
            name: serverData.memo || "未命名设备",
            status: serverData.alive === 1 ? "online" : "offline",
            battery: serverData.battery || 0,
            lastActive: serverData.lastUpdateTime || new Date().toISOString(),
            historicalIds: [], // 服务端暂无此数据
            wechatAccounts: [], // 默认空数组
            history: [], // 服务端暂无此数据
            features: serverData.features || {
              autoAddFriend: false,
              autoReply: false,
              contentSync: false,
              aiChat: false
            },
            totalFriend: serverData.totalFriend || 0,
            thirtyDayMsgCount: serverData.thirtyDayMsgCount || 0
          }
          
          // 如果有微信账号信息，构建微信账号对象
          if (serverData.wechatId) {
            formattedDevice.wechatAccounts = [
              {
                id: serverData.wechatId?.toString() || "1",
                avatar: "/placeholder.svg", // 默认头像
                nickname: serverData.memo || "微信账号",
                wechatId: serverData.imei || "",
                gender: "male", // 默认性别
                status: serverData.alive === 1 ? "normal" : "abnormal",
                addFriendStatus: "enabled",
                friendCount: serverData.totalFriend || 0,
                lastActive: serverData.lastUpdateTime || new Date().toISOString()
              }
            ]
          }
          
          setDevice(formattedDevice)
        } else {
          // 如果API返回错误，则使用备用模拟数据
          toast.error("获取设备信息失败，显示备用数据")
          fallbackToMockDevice()
        }
      } catch (error) {
        console.error("获取设备信息失败:", error)
        toast.error("获取设备信息出错，显示备用数据")
        fallbackToMockDevice()
      } finally {
        setLoading(false)
      }
    }
    
    const fallbackToMockDevice = () => {
      const mockDevice: Device = {
        id: params.id as string,
        imei: "sd123123",
        name: "设备 1",
        status: "online",
        battery: 85,
        lastActive: "2024-02-09 15:30:45",
        historicalIds: ["vx412321", "vfbadasd"],
        wechatAccounts: [
          {
            id: "1",
            avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-q2rVrFbfDdAbSnT3ZTNE7gfn3QCbvr.png",
            nickname: "老张",
            wechatId: "wxid_abc123",
            gender: "male",
            status: "normal",
            addFriendStatus: "enabled",
            friendCount: 523,
            lastActive: "2024-02-09 15:20:33",
          },
          {
            id: "2",
            avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-q2rVrFbfDdAbSnT3ZTNE7gfn3QCbvr.png",
            nickname: "老李",
            wechatId: "wxid_xyz789",
            gender: "male",
            status: "abnormal",
            addFriendStatus: "disabled",
            friendCount: 245,
            lastActive: "2024-02-09 14:15:22",
          },
        ],
        features: {
          autoAddFriend: true,
          autoReply: true,
          contentSync: false,
          aiChat: true,
        },
        history: [
          {
            time: "2024-02-09 15:30:45",
            action: "开启自动加好友",
            operator: "系统",
          },
          {
            time: "2024-02-09 14:20:33",
            action: "添加微信号",
            operator: "管理员",
          },
        ],
        totalFriend: 768,
        thirtyDayMsgCount: 5678
      }
      setDevice(mockDevice)
    }
    
    fetchDevice()
  }, [params.id])

  if (loading || !device) {
    return <div>加载中...</div>
  }

  return (
    <div className="flex-1 bg-gray-50 min-h-screen">
      <div className="max-w-[390px] mx-auto bg-white">
        <header className="sticky top-0 z-10 bg-white border-b">
          <div className="flex items-center justify-between p-4">
            <div className="flex items-center space-x-3">
              <Button variant="ghost" size="icon" onClick={() => router.back()}>
                <ChevronLeft className="h-5 w-5" />
              </Button>
              <h1 className="text-lg font-medium">设备详情</h1>
            </div>
            <Button variant="ghost" size="icon">
              <Settings className="h-5 w-5" />
            </Button>
          </div>
        </header>

        <div className="p-4 space-y-4">
          <Card className="p-4">
            <div className="flex items-center space-x-4">
              <div className="p-3 bg-blue-50 rounded-lg">
                <Smartphone className="h-6 w-6 text-blue-600" />
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center justify-between">
                  <h2 className="font-medium truncate">{device.name}</h2>
                  <Badge variant={getBadgeVariant(device.status)}>
                    {device.status === "online" ? "在线" : "离线"}
                  </Badge>
                </div>
                <div className="text-sm text-gray-500 mt-1">IMEI: {device.imei}</div>
                {device.historicalIds && device.historicalIds.length > 0 && (
                  <div className="text-sm text-gray-500">历史ID: {device.historicalIds.join(", ")}</div>
                )}
              </div>
            </div>
            <div className="mt-4 grid grid-cols-2 gap-4">
              <div className="flex items-center space-x-2">
                <Battery className={`w-4 h-4 ${device.battery < 20 ? "text-red-500" : "text-green-500"}`} />
                <span className="text-sm">{device.battery}%</span>
              </div>
              <div className="flex items-center space-x-2">
                <Wifi className="w-4 h-4 text-blue-500" />
                <span className="text-sm">{device.status === "online" ? "已连接" : "未连接"}</span>
              </div>
            </div>
            <div className="mt-2 text-sm text-gray-500">最后活跃：{device.lastActive}</div>
          </Card>

          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="info">基本信息</TabsTrigger>
              <TabsTrigger value="accounts">关联账号</TabsTrigger>
              <TabsTrigger value="history">操作记录</TabsTrigger>
            </TabsList>

            <TabsContent value="info">
              <Card className="p-4 space-y-4">
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>自动加好友</Label>
                      <div className="text-sm text-gray-500">自动通过好友验证</div>
                    </div>
                    <Switch checked={device.features.autoAddFriend} />
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>自动回复</Label>
                      <div className="text-sm text-gray-500">自动回复好友消息</div>
                    </div>
                    <Switch checked={device.features.autoReply} />
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>朋友圈同步</Label>
                      <div className="text-sm text-gray-500">自动同步朋友圈内容</div>
                    </div>
                    <Switch checked={device.features.contentSync} />
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>AI会话</Label>
                      <div className="text-sm text-gray-500">启用AI智能对话</div>
                    </div>
                    <Switch checked={device.features.aiChat} />
                  </div>
                </div>
              </Card>
            </TabsContent>

            <TabsContent value="accounts">
              <Card className="p-4">
                <ScrollArea className="h-[calc(100vh-300px)]">
                  {device.wechatAccounts && device.wechatAccounts.length > 0 ? (
                    <div className="space-y-4">
                      {device.wechatAccounts.map((account) => (
                        <div key={account.id} className="flex items-start space-x-3 p-3 bg-gray-50 rounded-lg">
                          <img
                            src={account.avatar || "/placeholder.svg"}
                            alt={account.nickname}
                            className="w-12 h-12 rounded-full"
                          />
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center justify-between">
                              <div className="font-medium truncate">{account.nickname}</div>
                              <Badge variant={getBadgeVariant(account.status)}>
                                {account.status === "normal" ? "正常" : "异常"}
                              </Badge>
                            </div>
                            <div className="text-sm text-gray-500 mt-1">微信号: {account.wechatId}</div>
                            <div className="text-sm text-gray-500">性别: {account.gender === "male" ? "男" : "女"}</div>
                            <div className="flex items-center justify-between mt-2">
                              <span className="text-sm text-gray-500">好友数: {account.friendCount}</span>
                              <Badge variant={getBadgeVariant(account.addFriendStatus)}>
                                {account.addFriendStatus === "enabled" ? "可加友" : "已停用"}
                              </Badge>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="text-center py-8 text-gray-500">
                      <p>此设备暂无关联的微信账号</p>
                    </div>
                  )}
                </ScrollArea>
              </Card>
            </TabsContent>

            <TabsContent value="history">
              <Card className="p-4">
                <ScrollArea className="h-[calc(100vh-300px)]">
                  {device.history && device.history.length > 0 ? (
                    <div className="space-y-4">
                      {device.history.map((record, index) => (
                        <div key={index} className="flex items-start space-x-3">
                          <div className="p-2 bg-blue-50 rounded-full">
                            <History className="w-4 h-4 text-blue-600" />
                          </div>
                          <div className="flex-1">
                            <div className="text-sm font-medium">{record.action}</div>
                            <div className="text-xs text-gray-500 mt-1">
                              操作人: {record.operator} · {record.time}
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="text-center py-8 text-gray-500">
                      <p>暂无操作记录</p>
                    </div>
                  )}
                </ScrollArea>
              </Card>
            </TabsContent>
          </Tabs>

          <div className="grid grid-cols-2 gap-4">
            <Card className="p-4">
              <div className="flex items-center space-x-2 text-gray-500">
                <Users className="w-4 h-4" />
                <span className="text-sm">好友总数</span>
              </div>
              <div className="text-2xl font-bold text-blue-600 mt-2">
                {device.totalFriend || 0}
              </div>
            </Card>
            <Card className="p-4">
              <div className="flex items-center space-x-2 text-gray-500">
                <MessageCircle className="w-4 h-4" />
                <span className="text-sm">消息数量</span>
              </div>
              <div className="text-2xl font-bold text-blue-600 mt-2">
                {device.thirtyDayMsgCount || 0}
              </div>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}