import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Badge } from "@/components/ui/badge";
import { Monitor, Wifi, WifiOff } from "lucide-react";
import { cn } from "@/lib/utils";

export function ComputerCard({
  device,
  position,
}: {
  device: any | undefined;
  position: number;
}) {
  if (!device) {
    return (
      <div className="relative flex flex-col items-center justify-center w-24 h-24 rounded-lg border-2 border-dashed border-muted-foreground/30 bg-muted/20">
        <div className="absolute -top-2 -left-2 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold bg-muted text-muted-foreground">
          {position}
        </div>
        <Monitor className="h-8 w-8 mb-1 text-muted-foreground/40" />
        <span className="text-xs text-muted-foreground">Trống</span>
      </div>
    );
  }

  const isOffline = device.isOffline;
  const firstNetworkInfo = device.networkInfos?.[0];

  const DeviceInfo = () => (
    <div className="space-y-3 min-w-[280px]">
      <div>
        <div className="text-xs text-muted-foreground mb-1">Thời gian thiết bị</div>
        <div className="text-sm">
          <div className="font-medium">{new Date(device.deviceTime).toLocaleDateString("vi-VN")}</div>
          <div className="text-muted-foreground text-xs">
            {new Date(device.deviceTime).toLocaleTimeString("vi-VN")}
          </div>
        </div>
      </div>

      <div>
        <div className="text-xs text-muted-foreground mb-1">Phiên bản</div>
        <Badge variant="secondary" className="font-mono text-xs">
          v{device.version}
        </Badge>
      </div>

      <div>
        <div className="text-xs text-muted-foreground mb-1">Phòng</div>
        <div className="text-sm font-medium">{device.room}</div>
      </div>

      {device.networkInfos?.length > 0 && (
        <div>
          <div className="text-xs text-muted-foreground mb-1">Thông tin mạng</div>
          <div className="space-y-1">
            {device.networkInfos.map((info: any, idx: number) => (
              <div key={idx} className="text-xs font-mono bg-muted/50 p-2 rounded">
                <div>MAC: {info.macAddress ?? "-"}</div>
                <div>IP: {info.ipAddress ?? "-"}</div>
              </div>
            ))}
          </div>
        </div>
      )}

      <div>
        <div className="text-xs text-muted-foreground mb-1">Trạng thái</div>
        <Badge
          variant={isOffline ? "destructive" : "default"}
          className={`flex items-center gap-1 w-fit ${
            isOffline ? "bg-red-100 text-red-700" : "bg-green-100 text-green-700"
          }`}
        >
          {isOffline ? <WifiOff className="h-3 w-3" /> : <Wifi className="h-3 w-3" />}
          {isOffline ? "Offline" : "Online"}
        </Badge>
      </div>
    </div>
  );

  return (
    <Popover>
      <PopoverTrigger asChild>
        <div
          className={cn(
            "relative flex flex-col items-center justify-center w-24 h-24 rounded-lg border-2 transition-all hover:scale-105 cursor-pointer",
            isOffline
              ? "bg-red-50 border-red-300 hover:border-red-400 hover:shadow-lg"
              : "bg-green-50 border-green-300 hover:border-green-400 hover:shadow-lg"
          )}
        >
          <div
            className={cn(
              "absolute -top-2 -left-2 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold",
              isOffline ? "bg-red-500 text-white" : "bg-green-500 text-white"
            )}
          >
            {position}
          </div>

          <Monitor className={cn("h-6 w-6 mb-1", isOffline ? "text-red-600" : "text-green-600")} />
          {firstNetworkInfo?.ipAddress && (
            <div className="text-[10px] font-mono text-center mb-1 px-1 truncate w-full">
              {firstNetworkInfo.ipAddress}
            </div>
          )}
          <div className="flex items-center gap-1">
            {isOffline ? (
              <WifiOff className="h-3 w-3 text-red-600" />
            ) : (
              <Wifi className="h-3 w-3 text-green-600" />
            )}
            <span
              className={cn(
                "text-xs font-medium",
                isOffline ? "text-red-700" : "text-green-700"
              )}
            >
              {isOffline ? "Off" : "On"}
            </span>
          </div>
        </div>
      </PopoverTrigger>
      <PopoverContent className="w-auto" side="top" align="center">
        <DeviceInfo />
      </PopoverContent>
    </Popover>
  );
}