import { Monitor, DoorOpen } from "lucide-react";
import { ComputerCard } from "./computer-card";
import { useMachineNumber } from "../hooks/useMachineNumber";

export function DeviceGrid({ devices }: { devices: any[] }) {
  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) => {
    // Trái: 1–20
    const leftStart = rowIndex * 4 + 1;
    // Phải: 21–40
    const rightStart = 21 + rowIndex * 4;

    return (
      <div key={rowIndex} className="flex items-center justify-center gap-3">
        {/* Bên trái (1–20) */}
        {Array.from({ length: 4 }).map((_, i) => {
          const pos = leftStart + i;
          return (
            <ComputerCard key={pos} device={deviceMap.get(pos)} position={pos} />
          );
        })}

        {/* Đườ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 (21–40) */}
        {Array.from({ length: 4 }).map((_, i) => {
          const pos = rightStart + i;
          return (
            <ComputerCard key={pos} device={deviceMap.get(pos)} position={pos} />
          );
        })}
      </div>
    );
  };

  return (
    <div className="px-0.5 py-8 space-y-6">
      <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-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 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>

      <div className="space-y-4">
        {Array.from({ length: totalRows }).map((_, i) => renderRow(i))}
      </div>
    </div>
  );
}