"use client"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Badge } from "@/components/ui/badge"
import { Search, CheckCircle2, AlertCircle, Smartphone, Laptop } from "lucide-react"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

// 模拟设备数据
const mockDevices = Array.from({ length: 20 }).map((_, i) => ({
  id: `device-${i + 1}`,
  name: `设备 ${i + 1}`,
  model: i % 3 === 0 ? "iPhone 13" : i % 3 === 1 ? "Xiaomi 12" : "Huawei P40",
  status: i % 5 === 0 ? "offline" : i % 7 === 0 ? "busy" : "online",
  account: `wxid_${100 + i}`,
  type: i % 2 === 0 ? "mobile" : "emulator",
  group: i % 3 === 0 ? "常用设备" : i % 3 === 1 ? "备用设备" : "测试设备",
  successRate: Math.floor(70 + Math.random() * 30),
  restrictCount: Math.floor(Math.random() * 5),
}))

interface DeviceSelectionProps {
  onNext: () => void
  onPrevious: () => void
  initialSelectedDevices?: string[]
  onDevicesChange: (deviceIds: string[]) => void
}

export function DeviceSelection({
  onNext,
  onPrevious,
  initialSelectedDevices = [],
  onDevicesChange,
}: DeviceSelectionProps) {
  const [selectedDevices, setSelectedDevices] = useState<string[]>(initialSelectedDevices)
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [typeFilter, setTypeFilter] = useState<string>("all")
  const [groupFilter, setGroupFilter] = useState<string>("all")

  // 使用ref来跟踪是否已经通知了父组件初始选择
  const initialNotificationRef = useRef(false)

  const deviceGroups = Array.from(new Set(mockDevices.map((device) => device.group)))

  const filteredDevices = mockDevices.filter((device) => {
    const matchesSearch =
      device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      device.account.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesStatus = statusFilter === "all" || device.status === statusFilter
    const matchesType = typeFilter === "all" || device.type === typeFilter
    const matchesGroup = groupFilter === "all" || device.group === groupFilter

    return matchesSearch && matchesStatus && matchesType && matchesGroup
  })

  // 只在选择变化时通知父组件，使用防抖
  useEffect(() => {
    if (!initialNotificationRef.current) {
      initialNotificationRef.current = true
      return
    }

    const timer = setTimeout(() => {
      onDevicesChange(selectedDevices)
    }, 300)

    return () => clearTimeout(timer)
  }, [selectedDevices, onDevicesChange])

  const handleDeviceToggle = (deviceId: string) => {
    setSelectedDevices((prev) => (prev.includes(deviceId) ? prev.filter((id) => id !== deviceId) : [...prev, deviceId]))
  }

  const handleSelectAll = () => {
    setSelectedDevices(filteredDevices.map((device) => device.id))
  }

  const handleDeselectAll = () => {
    setSelectedDevices([])
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case "online":
        return "bg-green-500"
      case "offline":
        return "bg-gray-500"
      case "busy":
        return "bg-yellow-500"
      default:
        return "bg-gray-500"
    }
  }

  const getStatusText = (status: string) => {
    switch (status) {
      case "online":
        return "在线"
      case "offline":
        return "离线"
      case "busy":
        return "繁忙"
      default:
        return status
    }
  }

  return (
    <div className="space-y-6">
      <Card>
        <CardContent className="pt-6">
          <div className="space-y-4">
            <div className="flex items-center space-x-2">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="搜索设备名称或账号"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-9"
                />
              </div>

              <Select value={statusFilter} onValueChange={setStatusFilter}>
                <SelectTrigger className="w-[120px]">
                  <SelectValue placeholder="状态" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有状态</SelectItem>
                  <SelectItem value="online">在线</SelectItem>
                  <SelectItem value="offline">离线</SelectItem>
                  <SelectItem value="busy">繁忙</SelectItem>
                </SelectContent>
              </Select>

              <Select value={typeFilter} onValueChange={setTypeFilter}>
                <SelectTrigger className="w-[120px]">
                  <SelectValue placeholder="设备类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有类型</SelectItem>
                  <SelectItem value="mobile">手机设备</SelectItem>
                  <SelectItem value="emulator">模拟器</SelectItem>
                </SelectContent>
              </Select>

              <Select value={groupFilter} onValueChange={setGroupFilter}>
                <SelectTrigger className="w-[120px]">
                  <SelectValue placeholder="设备分组" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有分组</SelectItem>
                  {deviceGroups.map((group) => (
                    <SelectItem key={group} value={group}>
                      {group}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="flex items-center justify-between">
              <div className="text-sm text-gray-500">
                已选择 <span className="font-medium text-blue-600">{selectedDevices.length}</span> 台设备
              </div>
              <div className="space-x-2">
                <Button variant="outline" size="sm" onClick={handleSelectAll}>
                  全选
                </Button>
                <Button variant="outline" size="sm" onClick={handleDeselectAll}>
                  取消全选
                </Button>
              </div>
            </div>

            <Tabs defaultValue="list" className="w-full">
              <TabsList className="grid w-60 grid-cols-2">
                <TabsTrigger value="list">列表视图</TabsTrigger>
                <TabsTrigger value="grid">网格视图</TabsTrigger>
              </TabsList>

              <TabsContent value="list" className="mt-2">
                <ScrollArea className="h-[400px] rounded-md border">
                  <div className="divide-y">
                    {filteredDevices.map((device) => (
                      <div key={device.id} className="flex items-center justify-between p-3 hover:bg-gray-50">
                        <div className="flex items-center space-x-3">
                          <Checkbox
                            id={device.id}
                            checked={selectedDevices.includes(device.id)}
                            onCheckedChange={() => handleDeviceToggle(device.id)}
                            disabled={device.status === "offline"}
                          />
                          {device.type === "mobile" ? (
                            <Smartphone className="h-5 w-5 text-gray-500" />
                          ) : (
                            <Laptop className="h-5 w-5 text-gray-500" />
                          )}
                          <div>
                            <div className="font-medium">{device.name}</div>
                            <div className="text-sm text-gray-500">
                              {device.model} | {device.account}
                            </div>
                          </div>
                        </div>

                        <div className="flex items-center space-x-3">
                          <div className="text-sm">
                            成功率:{" "}
                            <span className={device.successRate > 90 ? "text-green-600" : "text-yellow-600"}>
                              {device.successRate}%
                            </span>
                          </div>
                          <div className="text-sm">
                            限制次数:{" "}
                            <span className={device.restrictCount === 0 ? "text-green-600" : "text-red-600"}>
                              {device.restrictCount}
                            </span>
                          </div>
                          <Badge className={`${getStatusColor(device.status)} text-white`}>
                            {getStatusText(device.status)}
                          </Badge>
                        </div>
                      </div>
                    ))}

                    {filteredDevices.length === 0 && (
                      <div className="p-4 text-center text-gray-500">没有找到符合条件的设备</div>
                    )}
                  </div>
                </ScrollArea>
              </TabsContent>

              <TabsContent value="grid" className="mt-2">
                <ScrollArea className="h-[400px] rounded-md border">
                  <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
                    {filteredDevices.map((device) => (
                      <div
                        key={device.id}
                        className={`border rounded-md p-3 ${
                          selectedDevices.includes(device.id) ? "border-blue-500 bg-blue-50" : ""
                        } ${device.status === "offline" ? "opacity-60" : ""}`}
                      >
                        <div className="flex justify-between items-start mb-2">
                          <div className="flex items-center">
                            {device.type === "mobile" ? (
                              <Smartphone className="h-4 w-4 text-gray-500 mr-1" />
                            ) : (
                              <Laptop className="h-4 w-4 text-gray-500 mr-1" />
                            )}
                            <span className="font-medium truncate">{device.name}</span>
                          </div>
                          <Badge className={`${getStatusColor(device.status)} text-white text-xs`}>
                            {getStatusText(device.status)}
                          </Badge>
                        </div>

                        <div className="text-xs text-gray-500 mb-2">{device.model}</div>
                        <div className="text-xs text-gray-500 mb-3">{device.account}</div>

                        <div className="flex justify-between text-xs mb-3">
                          <div>
                            成功率:{" "}
                            <span className={device.successRate > 90 ? "text-green-600" : "text-yellow-600"}>
                              {device.successRate}%
                            </span>
                          </div>
                          <div>
                            限制:{" "}
                            <span className={device.restrictCount === 0 ? "text-green-600" : "text-red-600"}>
                              {device.restrictCount}
                            </span>
                          </div>
                        </div>

                        <Button
                          variant={selectedDevices.includes(device.id) ? "default" : "outline"}
                          size="sm"
                          className="w-full"
                          onClick={() => handleDeviceToggle(device.id)}
                          disabled={device.status === "offline"}
                        >
                          {selectedDevices.includes(device.id) ? (
                            <>
                              <CheckCircle2 className="h-4 w-4 mr-1" /> 已选择
                            </>
                          ) : (
                            "选择设备"
                          )}
                        </Button>
                      </div>
                    ))}

                    {filteredDevices.length === 0 && (
                      <div className="col-span-full p-4 text-center text-gray-500">没有找到符合条件的设备</div>
                    )}
                  </div>
                </ScrollArea>
              </TabsContent>
            </Tabs>

            {selectedDevices.length === 0 && (
              <div className="flex items-center p-3 bg-yellow-50 rounded-md text-yellow-800">
                <AlertCircle className="h-4 w-4 mr-2" />
                请至少选择一台设备来执行建群任务
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      <div className="flex justify-between">
        <Button variant="outline" onClick={onPrevious}>
          上一步
        </Button>
        <Button onClick={onNext} className="bg-blue-500 hover:bg-blue-600" disabled={selectedDevices.length === 0}>
          下一步
        </Button>
      </div>
    </div>
  )
}