TTMT.ManageWebGUI/src/components/cards/computer-card.tsx

import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Badge } from "@/components/ui/badge";
import { Monitor, Wifi, WifiOff, Loader2, Maximize2, X } from "lucide-react";
import { useState, type MouseEvent } from "react";
import { cn } from "@/lib/utils";
import { FolderStatusPopover } from "../folder-status-popover";
import { useGetClientFolderStatusForDevice } from "@/hooks/queries";
import type { ClientFolderStatus } from "@/types/folder";
import { Button } from "@/components/ui/button";
import { getRemoteDesktopUrl } from "@/services/remote-control.service";
import { buildMeshProxyUrl } from "@/config/api";
import { toast } from "sonner";
export function ComputerCard({
  device,
  position,
  folderStatus,
  isCheckingFolder,
  isSelected,
  onSelect,
}: {
  device: any | undefined;
  position: number;
  folderStatus?: ClientFolderStatus;
  isCheckingFolder?: boolean;
  isSelected?: boolean;
  onSelect?: (event: MouseEvent<HTMLElement>) => void;
}) {
  const [isConnecting, setIsConnecting] = useState(false);
  const [showRemote, setShowRemote] = useState(false);
  const [proxyUrl, setProxyUrl] = useState<string | null>(null);

  if (!device) {
    return (
      <div className="flex flex-col items-stretch rounded-lg border border-dashed border-muted-foreground/20 overflow-hidden w-[88px]">
        <div className="flex items-center justify-between px-1.5 py-1 bg-muted/30">
          <span className="text-[11px] font-bold text-muted-foreground/50 leading-none">
            {position}
          </span>
        </div>
        <div className="flex flex-col items-center justify-center py-2 gap-0.5">
          <Monitor className="h-5 w-5 text-muted-foreground/20" />
          <span className="text-[10px] text-muted-foreground/40">Trống</span>
        </div>
      </div>
    );
  }

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

  const handleConnect = async () => {
    if (!device?.id) {
      toast.error("Không tìm thấy nodeID của thiết bị.");
      return;
    }

    try {
      setIsConnecting(true);
      const response = await getRemoteDesktopUrl(device.id);
      const originalUrl = new URL(response.url);
      const pathAndQuery = originalUrl.pathname + originalUrl.search;
      const proxyUrlFull = buildMeshProxyUrl(pathAndQuery);

      setProxyUrl(proxyUrlFull);
      setShowRemote(true);
    } catch (error: any) {
      toast.error(
        error?.response?.data?.message || "Không thể kết nối remote cho thiết bị này."
      );
    } finally {
      setIsConnecting(false);
    }
  };

  const handleCloseRemote = () => {
    setShowRemote(false);
    setProxyUrl(null);
  };

  const handleFullscreen = () => {
    const iframe = document.getElementById(`mesh-iframe-${device.id}`) as HTMLIFrameElement;
    if (iframe?.requestFullscreen) {
      iframe.requestFullscreen();
    }
  };

  function DeviceFolderCheck() {
    const deviceId = device.id;
    const room = device.room;
    const [checking, setChecking] = useState(false);

    const { data: status, isLoading } = useGetClientFolderStatusForDevice(
      deviceId,
      room,
      checking
    );

    const handleCheck = () => setChecking((s) => !s);

    return (
      <div>
        <button
          onClick={handleCheck}
          className="inline-flex items-center gap-2 px-3 py-1 rounded border bg-background text-sm"
        >
          {isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
          Kiểm tra thư mục Setup
        </button>

        {checking && isLoading && (
          <div className="text-xs text-muted-foreground mt-2">Đang kiểm tra...</div>
        )}

        {checking && !isLoading && status && (
          <div className="text-xs mt-2">
            <div className="font-medium">Các file trong thư mục Setup({status.currentFiles?.length ?? 0})</div>
            <div className="mt-1 max-h-36 overflow-auto space-y-1">
              {(status.currentFiles ?? []).length === 0 ? (
                <div className="text-muted-foreground">Không có file hiện tại</div>
              ) : (
                (status.currentFiles ?? []).map((f: any) => (
                  <div key={f.fileName} className="font-mono text-xs">
                    <div className="truncate">{f.fileName}</div>
                    {f.lastModified && (
                      <div className="text-muted-foreground text-[10px]">
                        {new Date(f.lastModified).toLocaleString()}
                      </div>
                    )}
                  </div>
                ))
              )}
            </div>
          </div>
        )}

        {checking && !isLoading && !status && (
          <div className="text-xs text-muted-foreground mt-2">Không có dữ liệu</div>
        )}
      </div>
    );
  }

  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">Kết nối</div>
        <Button
          type="button"
          size="sm"
          onClick={handleConnect}
          disabled={isOffline || isConnecting}
          className="w-full"
        >
          {isConnecting ? (
            <>
              <Loader2 className="h-4 w-4 animate-spin" />
              Đang kết nối...
            </>
          ) : (
            "Connect"
          )}
        </Button>
      </div>

      <div>
        <div className="text-xs text-muted-foreground mb-1">Kiểm tra thư mục</div>
        <DeviceFolderCheck />
      </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
            onClick={onSelect}
            className={cn(
              "flex flex-col items-stretch w-[88px] rounded-lg border-2 overflow-hidden transition-all hover:shadow-md hover:-translate-y-0.5 cursor-pointer select-none",
              isOffline
                ? "border-red-400 bg-white hover:border-red-500"
                : "border-emerald-400 bg-white hover:border-emerald-500",
              isSelected && "ring-2 ring-primary ring-offset-1 ring-offset-background"
            )}
          >
            {/* Top bar: position + folder status */}
            <div
              className={cn(
                "flex items-center justify-between px-1.5 py-1",
                isOffline ? "bg-red-500" : "bg-emerald-500"
              )}
            >
              <span
                className="text-[11px] font-bold text-white leading-none"
                style={{ textShadow: "0 1px 2px rgba(0,0,0,0.5)" }}
              >
                {position}
              </span>
              {!isOffline && (
                <div
                  onClick={(e) => e.stopPropagation()}
                  className="[&_button]:p-0 [&_button]:rounded [&_button]:hover:bg-emerald-400 [&_svg]:h-3.5 [&_svg]:w-3.5 [&_svg]:text-white"
                >
                  <FolderStatusPopover
                    deviceId={device.networkInfos?.[0]?.macAddress || device.id}
                    status={folderStatus}
                    isLoading={isCheckingFolder}
                  />
                </div>
              )}
            </div>

            {/* Body */}
            <div className="flex flex-col items-center justify-center gap-0.5 py-2 px-1">
              <Monitor
                className={cn(
                  "h-5 w-5",
                  isOffline ? "text-red-300" : "text-emerald-400"
                )}
              />
              {firstNetworkInfo?.ipAddress && (
                <div className="text-[9px] font-mono text-center leading-tight w-full truncate text-muted-foreground px-0.5">
                  {firstNetworkInfo.ipAddress}
                </div>
              )}
              {agentVersion && (
                <div className="text-[9px] font-mono text-center text-muted-foreground/60 leading-tight">
                  v{agentVersion}
                </div>
              )}
              <div
                className={cn(
                  "text-[10px] font-semibold leading-none mt-0.5",
                  isOffline ? "text-red-500" : "text-emerald-600"
                )}
              >
                {isOffline ? "Off" : "On"}
              </div>
            </div>
          </div>
        </PopoverTrigger>
        <PopoverContent className="w-auto" side="top" align="center">
          <DeviceInfo />
        </PopoverContent>
      </Popover>

      {showRemote && proxyUrl && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/65 p-4">
          <div className="relative h-[90vh] w-[90vw] overflow-hidden rounded-lg border bg-background shadow-2xl">
            <div className="flex items-center justify-between border-b bg-muted/50 px-3 py-2">
              <p className="text-sm font-medium">Remote Session - {device.id}</p>
              <div className="flex gap-1">
                <Button
                  variant="ghost"
                  size="icon"
                  type="button"
                  onClick={handleFullscreen}
                  title="Fullscreen"
                >
                  <Maximize2 className="h-4 w-4" />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  type="button"
                  onClick={handleCloseRemote}
                  aria-label="Đóng"
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>
            </div>
            <iframe
              id={`mesh-iframe-${device.id}`}
              title="Remote Desktop"
              src={proxyUrl}
              className="h-[calc(90vh-44px)] w-full border-0"
              allowFullScreen
              allow="clipboard-read; clipboard-write; camera; microphone"
            />
          </div>
        </div>
      )}
    </>
  );
}