TTMT.ManageWebGUI/src/routes/_auth/room/$roomName/index.tsx

import { createFileRoute, useParams } from "@tanstack/react-router";
import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { LayoutGrid, TableIcon, Monitor, FolderCheck, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useGetDeviceFromRoom } from "@/hooks/queries";
import { useDeviceEvents } from "@/hooks/useDeviceEvents";
import { useClientFolderStatus } from "@/hooks/useClientFolderStatus";
import { DeviceGrid } from "@/components/grids/device-grid";
import { DeviceTable } from "@/components/tables/device-table";
import { useMachineNumber } from "@/hooks/useMachineNumber";
import { toast } from "sonner";
import { CommandActionButtons } from "@/components/buttons/command-action-buttons";

export const Route = createFileRoute("/_auth/room/$roomName/")({
  head: ({ params }) => ({
    meta: [{ title: `Danh sách thiết bị phòng ${params.roomName}` }],
  }),
  component: RoomDetailPage,
});

function RoomDetailPage() {
  const { roomName } = useParams({ from: "/_auth/room/$roomName/" });
  const [viewMode, setViewMode] = useState<"grid" | "table">("grid");
  const [isCheckingFolder, setIsCheckingFolder] = useState(false);
  
  // SSE real-time updates
  useDeviceEvents(roomName);
  
  // Folder status from SSE
  const folderStatuses = useClientFolderStatus(roomName);
  
  const { data: devices = [] } = useGetDeviceFromRoom(roomName);

  const parseMachineNumber = useMachineNumber();

  const handleCheckFolderStatus = async () => {
    try {
      setIsCheckingFolder(true);
      // Trigger folder status check via the service
      const response = await fetch(
        `/api/device-comm/request-get-client-folder-status?roomName=${encodeURIComponent(roomName)}`,
        {
          method: "POST",
        }
      );

      if (!response.ok) {
        throw new Error("Failed to request folder status");
      }

      toast.success("Đang kiểm tra thư mục Setup...");
    } catch (error) {
      console.error("Check folder error:", error);
      toast.error("Lỗi khi kiểm tra thư mục!");
    } finally {
      setIsCheckingFolder(false);
    }
  };

  const sortedDevices = [...devices].sort((a, b) => {
    return parseMachineNumber(a.id) - parseMachineNumber(b.id);
  });

  return (
    <div className="w-full px-6 space-y-6">
      <Card className="shadow-sm">
        <CardHeader className="bg-muted/50 space-y-4">
          {/* Hàng 1: Thông tin phòng và controls */}
          <div className="flex items-center justify-between w-full gap-4">
            <div className="flex items-center gap-2">
              <Monitor className="h-5 w-5" />
              <CardTitle>Danh sách thiết bị phòng {roomName}</CardTitle>
            </div>

            <div className="flex items-center gap-2 bg-background rounded-lg p-1 border shrink-0">
              <Button
                variant={viewMode === "grid" ? "default" : "ghost"}
                size="sm"
                onClick={() => setViewMode("grid")}
                className="flex items-center gap-2"
              >
                <LayoutGrid className="h-4 w-4" />
                Sơ đồ
              </Button>
              <Button
                variant={viewMode === "table" ? "default" : "ghost"}
                size="sm"
                onClick={() => setViewMode("table")}
                className="flex items-center gap-2"
              >
                <TableIcon className="h-4 w-4" />
                Bảng
              </Button>
            </div>
          </div>

          {/* Hàng 2: Thực thi lệnh */}
          <div className="flex items-center justify-between w-full gap-4">
            <div className="flex items-center gap-2 text-sm font-semibold">
              Thực thi lệnh
            </div>

            <div className="flex items-center gap-3 flex-wrap justify-end">
              {/* Command Action Buttons */}
              {devices.length > 0 && (
                <>
                  <CommandActionButtons roomName={roomName} />
                  
                  <div className="h-8 w-px bg-border" />
                  
                  <Button
                    onClick={handleCheckFolderStatus}
                    disabled={isCheckingFolder}
                    variant="outline"
                    size="sm"
                    className="flex items-center gap-2 shrink-0"
                  >
                    {isCheckingFolder ? (
                      <Loader2 className="h-4 w-4 animate-spin" />
                    ) : (
                      <FolderCheck className="h-4 w-4" />
                    )}
                    {isCheckingFolder ? "Đang kiểm tra..." : "Kiểm tra thư mục Setup"}
                  </Button>
                </>
              )}
            </div>
          </div>
        </CardHeader>

        <CardContent className="p-0">
          {devices.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-12">
              <Monitor className="h-12 w-12 text-muted-foreground mb-4" />
              <h3 className="text-lg font-semibold mb-2">Không có thiết bị</h3>
              <p className="text-muted-foreground text-center max-w-sm">
                Phòng này chưa có thiết bị nào được kết nối.
              </p>
            </div>
          ) : viewMode === "grid" ? (
            <DeviceGrid
              devices={sortedDevices}
              folderStatuses={folderStatuses}
              isCheckingFolder={isCheckingFolder}
            />
          ) : (
            <DeviceTable
              devices={sortedDevices}
              folderStatuses={folderStatuses}
              isCheckingFolder={isCheckingFolder}
            />
          )}
        </CardContent>
      </Card>
    </div>
  );
}