TTMT.ManageWebGUI/src/components/grids/device-grid.tsx

import { Monitor, DoorOpen } from "lucide-react";
import { ComputerCard } from "../cards/computer-card";
import { useMachineNumber } from "../../hooks/useMachineNumber";
import type { ClientFolderStatus } from "@/types/folder";

export function DeviceGrid({
  devices,
  folderStatuses,
  isCheckingFolder,
}: {
  devices: any[];
  folderStatuses?: Map<string, ClientFolderStatus>;
  isCheckingFolder?: boolean;
}) {
  const getMachineNumber = useMachineNumber();
  const deviceMap = new Map<number, any>();

  devices.forEach((device) => {
    const number = getMachineNumber(device.id || "");
    if (number > 0 && number <= 40) deviceMap.set(number, device);
  });

  const totalRows = 5;

  const renderRow = (rowIndex: number) => {
    // Đảo ngược: 21-40 sang trái, 1-20 sang phải
    const leftStart = 21 + (totalRows - 1 - rowIndex) * 4;
    const rightStart = (totalRows - 1 - rowIndex) * 4 + 1;

    return (
      <div key={rowIndex} className="flex items-center justify-center gap-3">
        {/* Bên trái (21–40) */}
        {Array.from({ length: 4 }).map((_, i) => {
          const pos = leftStart + (3 - i);
          const device = deviceMap.get(pos);
          const macAddress = device?.networkInfos?.[0]?.macAddress || device?.id;
          const folderStatus = folderStatuses?.get(macAddress);

          return (
            <ComputerCard
              key={pos}
              device={device}
              position={pos}
              folderStatus={folderStatus}
              isCheckingFolder={isCheckingFolder}
            />
          );
        })}

        {/* Đường chia giữa */}
        <div className="w-32 flex items-center justify-center">
          <div className="h-px w-full bg-border border-t-2 border-dashed" />
        </div>

        {/* Bên phải (1–20) */}
        {Array.from({ length: 4 }).map((_, i) => {
          const pos = rightStart + (3 - i);
          const device = deviceMap.get(pos);
          const macAddress = device?.networkInfos?.[0]?.macAddress || device?.id;
          const folderStatus = folderStatuses?.get(macAddress);

          return (
            <ComputerCard
              key={pos}
              device={device}
              position={pos}
              folderStatus={folderStatus}
              isCheckingFolder={isCheckingFolder}
            />
          );
        })}
      </div>
    );
  };

  return (
    <div className="px-0.5 py-8 space-y-6">
      <div className="space-y-4">
        {Array.from({ length: totalRows }).map((_, i) => renderRow(i))}
      </div>
      <div className="flex items-center justify-between px-4 pb-6 border-b-2 border-dashed">
        <div className="flex items-center gap-3 px-6 py-4 bg-muted rounded-lg border-2 border-border">
          <DoorOpen className="h-6 w-6 text-muted-foreground" />
          <span className="font-semibold text-lg">Cửa Ra Vào</span>
        </div>
        <div className="flex items-center gap-3 px-6 py-4 bg-primary/10 rounded-lg border-2 border-primary/20">
          <Monitor className="h-6 w-6 text-primary" />
          <span className="font-semibold text-lg">Bàn Giảng Viên</span>
        </div>
      </div>
    </div>
  );
}