import { createFileRoute, useParams } from "@tanstack/react-router";
import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { LayoutGrid, TableIcon, Monitor } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useQueryData } from "@/hooks/useQueryData";
import { API_ENDPOINTS, BASE_URL } from "@/config/api";
import { DeviceGrid } from "@/components/device-grid";
import { DeviceTable } from "@/components/device-table";

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

function RoomDetailPage() {
  const { roomName } = useParams({ from: "/_authenticated/room/$roomName/" });
  const [viewMode, setViewMode] = useState<"grid" | "table">("grid");
  const { data: devices = [] } = useQueryData({
    queryKey: ["devices", roomName],
    url: BASE_URL + API_ENDPOINTS.DEVICE_COMM.GET_DEVICE_FROM_ROOM(roomName),
  });

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

          <div className="flex items-center gap-2 bg-background rounded-lg p-1 border">
            <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>
        </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={devices} />
          ) : (
            <DeviceTable devices={devices} />
          )}
        </CardContent>
      </Card>
    </div>
  );
}