"use client"

import { useState } from "react"
import { Card } from "../ui/card"
import { Button } from "../ui/button"
import { Input } from "../ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table"
import { ChevronLeft, ChevronRight, Search, Plus } from "lucide-react"

interface Device {
  id: string
  imei: string
  status: "online" | "offline"
  friendStatus: string
}

const mockDevices: Device[] = [
  {
    id: "1",
    imei: "123456789012345",
    status: "online",
    friendStatus: "正常",
  },
  {
    id: "2",
    imei: "987654321098765",
    status: "offline",
    friendStatus: "异常",
  },
]

export function DeviceSelector({ onNext, onPrev }) {
  const [selectedDevices, setSelectedDevices] = useState<string[]>([])

  return (
    <Card className="p-6 max-w-4xl mx-auto">
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-xl font-semibold">选择推送设备</h2>
        <Button>
          <Plus className="w-4 h-4 mr-2" />
          添加设备
        </Button>
      </div>

      <div className="flex items-center space-x-4 mb-6">
        <div className="flex-1">
          <Input
            placeholder="搜索设备IMEI/备注/手机号"
            className="w-full"
            prefix={<Search className="w-4 h-4 text-gray-400" />}
          />
        </div>
      </div>

      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-12">选择</TableHead>
            <TableHead>设备IMEI/备注/手机号</TableHead>
            <TableHead>在线状态</TableHead>
            <TableHead>加友状态</TableHead>
            <TableHead>操作</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {mockDevices.map((device) => (
            <TableRow key={device.id}>
              <TableCell>
                <input
                  type="checkbox"
                  checked={selectedDevices.includes(device.id)}
                  onChange={(e) => {
                    if (e.target.checked) {
                      setSelectedDevices([...selectedDevices, device.id])
                    } else {
                      setSelectedDevices(selectedDevices.filter((id) => id !== device.id))
                    }
                  }}
                />
              </TableCell>
              <TableCell>{device.imei}</TableCell>
              <TableCell>
                <span
                  className={`inline-flex items-center px-2 py-1 rounded-full text-xs ${
                    device.status === "online" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                  }`}
                >
                  {device.status === "online" ? "在线" : "离线"}
                </span>
              </TableCell>
              <TableCell>
                <span
                  className={`inline-flex items-center px-2 py-1 rounded-full text-xs ${
                    device.friendStatus === "正常" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
                  }`}
                >
                  {device.friendStatus}
                </span>
              </TableCell>
              <TableCell>
                <Button variant="ghost" size="sm">
                  查看详情
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>

      <div className="flex justify-between mt-8">
        <Button variant="outline" onClick={onPrev}>
          <ChevronLeft className="w-4 h-4 mr-2" />
          上一步
        </Button>
        <Button onClick={onNext} disabled={selectedDevices.length === 0}>
          下一步
          <ChevronRight className="w-4 h-4 ml-2" />
        </Button>
      </div>
    </Card>
  )
}