import { useState, useMemo } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Building2,
  Monitor,
  ChevronDown,
  ChevronRight,
  Loader2,
} from "lucide-react";
import type { Room } from "@/types/room";
import type { DeviceHealthCheck } from "@/types/device";

interface DeviceSearchDialogProps {
  open: boolean;
  onClose: () => void;
  rooms: Room[];
  onSelect: (deviceIds: string[]) => void | Promise<void>;
  fetchDevices: (roomName: string) => Promise<DeviceHealthCheck[]>; // API fetch
}

export function DeviceSearchDialog({
  open,
  onClose,
  rooms,
  onSelect,
  fetchDevices,
}: DeviceSearchDialogProps) {
  const [selected, setSelected] = useState<string[]>([]);
  const [expandedRoom, setExpandedRoom] = useState<string | null>(null);
  const [roomDevices, setRoomDevices] = useState<
    Record<string, DeviceHealthCheck[]>
  >({});
  const [loadingRoom, setLoadingRoom] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState("");

  const sortedRooms = useMemo(() => {
    return [...rooms].sort((a, b) => {
      const nameA = typeof a.name === "string" ? a.name : "";
      const nameB = typeof b.name === "string" ? b.name : "";
      return nameA.localeCompare(nameB);
    });
  }, [rooms]);

  const filteredRooms = useMemo(() => {
    if (!searchQuery) return sortedRooms;
    return sortedRooms.filter((room) =>
      room.name.toLowerCase().includes(searchQuery.toLowerCase())
    );
  }, [sortedRooms, searchQuery]);

  const handleRoomClick = async (roomName: string) => {
    // Nếu đang mở thì đóng lại
    if (expandedRoom === roomName) {
      setExpandedRoom(null);
      return;
    }

    // Nếu chưa fetch devices của room này thì gọi API
    if (!roomDevices[roomName]) {
      setLoadingRoom(roomName);
      try {
        const devices = await fetchDevices(roomName);
        setRoomDevices((prev) => ({ ...prev, [roomName]: devices }));
        setExpandedRoom(roomName);
      } catch (error) {
        console.error("Failed to fetch devices:", error);
        // Có thể thêm toast notification ở đây
      } finally {
        setLoadingRoom(null);
      }
    } else {
      // Đã có data rồi thì chỉ toggle
      setExpandedRoom(roomName);
    }
  };

  const toggleDevice = (deviceId: string) => {
    setSelected((prev) =>
      prev.includes(deviceId)
        ? prev.filter((id) => id !== deviceId)
        : [...prev, deviceId]
    );
  };

  const toggleAllInRoom = (roomName: string) => {
    const devices = roomDevices[roomName] || [];
    const deviceIds = devices.map((d) => d.id);
    const allSelected = deviceIds.every((id) => selected.includes(id));

    if (allSelected) {
      setSelected((prev) => prev.filter((id) => !deviceIds.includes(id)));
    } else {
      setSelected((prev) => [...new Set([...prev, ...deviceIds])]);
    }
  };

  const handleConfirm = async () => {
    try {
      await onSelect(selected);
    } catch (e) {
      console.error("Error on select:", e);
    } finally {
      setSelected([]);
      setExpandedRoom(null);
      setRoomDevices({});
      setSearchQuery("");
      onClose();
    }
  };

  const handleClose = () => {
    setSelected([]);
    setExpandedRoom(null);
    setRoomDevices({});
    setSearchQuery("");
    onClose();
  };

  const parseDeviceId = (id: string) => {
    const match = /^P(.+?)M(\d+)$/i.exec(id.trim());
    if (!match) return null;
    return {
      room: match[1].trim(),
      index: Number(match[2]),
    };
  };

  return (
    <Dialog open={open} onOpenChange={handleClose}>
      <DialogContent className="max-w-none w-[95vw] max-h-[90vh]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Monitor className="w-6 h-6 text-primary" />
            Chọn thiết bị
          </DialogTitle>
        </DialogHeader>

        {/* Search bar */}
        <Input
          placeholder="Tìm kiếm phòng..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="my-2"
        />

        {/* Room list */}
        <ScrollArea className="max-h-[500px] rounded-lg border p-2">
          <div className="space-y-1">
            {filteredRooms.length === 0 && (
              <p className="text-sm text-muted-foreground text-center py-8">
                Không tìm thấy phòng
              </p>
            )}

            {filteredRooms.map((room) => {
              const isExpanded = expandedRoom === room.name;
              const isLoading = loadingRoom === room.name;
              const devices = roomDevices[room.name] || [];
              const sortedDevices = [...devices].sort((a, b) => {
                const aId = String(a.id);
                const bId = String(b.id);
                const parsedA = parseDeviceId(aId);
                const parsedB = parseDeviceId(bId);

                if (parsedA && parsedB) {
                  const roomCompare = parsedA.room.localeCompare(parsedB.room, undefined, {
                    numeric: true,
                    sensitivity: "base",
                  });
                  if (roomCompare !== 0) return roomCompare;
                  return parsedA.index - parsedB.index;
                }

                return aId.localeCompare(bId, undefined, {
                  numeric: true,
                  sensitivity: "base",
                });
              });
              const allSelected =
                sortedDevices.length > 0 &&
                sortedDevices.every((d) => selected.includes(d.id));
              const someSelected = sortedDevices.some((d) => selected.includes(d.id));
              const selectedCount = sortedDevices.filter((d) =>
                selected.includes(d.id)
              ).length;

              return (
                <div
                  key={room.name}
                  className="border rounded-lg overflow-hidden"
                >
                  {/* Room header - clickable */}
                  <div
                    className="flex items-center gap-1 px-2 py-1.5 hover:bg-muted/50 cursor-pointer"
                    onClick={() => handleRoomClick(room.name)}
                  >
                    {/* Expand icon or loading */}
                    {isLoading ? (
                      <Loader2 className="w-4 h-4 text-muted-foreground flex-shrink-0 animate-spin" />
                    ) : isExpanded ? (
                      <ChevronDown className="w-4 h-4 text-muted-foreground flex-shrink-0" />
                    ) : (
                      <ChevronRight className="w-4 h-4 text-muted-foreground flex-shrink-0" />
                    )}

                    {/* Select all checkbox - chỉ hiện khi đã load devices */}
                    {devices.length > 0 && (
                      <Checkbox
                        checked={allSelected}
                        onCheckedChange={() => {
                          toggleAllInRoom(room.name);
                        }}
                        onClick={(e) => e.stopPropagation()}
                        className={
                          someSelected && !allSelected ? "opacity-50" : ""
                        }
                      />
                    )}

                    <Building2 className="w-4 h-4 text-primary flex-shrink-0" />

                    <span className="font-semibold flex-1 text-sm">
                      {room.name}
                    </span>

                    <div className="flex items-center gap-1 text-xs text-muted-foreground flex-shrink-0">
                      {selectedCount > 0 && (
                        <span className="text-primary font-medium">
                          {selectedCount}/
                        </span>
                      )}
                      <span>{room.numberOfDevices}</span>
                      {room.numberOfOfflineDevices > 0 && (
                        <span className="text-xs px-1.5 py-0.5 rounded-full bg-red-100 text-red-700">
                          {room.numberOfOfflineDevices}
                        </span>
                      )}
                    </div>
                  </div>

                  {/* Device table - collapsible */}
                  {isExpanded && sortedDevices.length > 0 && (
                    <div className="border-t bg-muted/20 overflow-x-auto">
                      <table className="w-full text-xs">
                        <thead className="bg-muted/50 border-b sticky top-0">
                          <tr>
                            <th className="w-8 px-1 py-1"></th>
                            <th className="text-left px-1 py-1 font-medium min-w-20 text-xs">
                              Thiết bị
                            </th>
                            <th className="text-left px-1 py-1 font-medium min-w-24 text-xs">
                              IP
                            </th>
                            <th className="text-left px-1 py-1 font-medium min-w-28 text-xs">
                              MAC
                            </th>
                            <th className="text-left px-1 py-1 font-medium min-w-12 text-xs">
                              Ver
                            </th>
                            <th className="text-left px-1 py-1 font-medium min-w-16 text-xs">
                              Trạng thái
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          {sortedDevices.map((device) => (
                            <tr
                              key={device.id}
                              className="border-b last:border-b-0 hover:bg-muted/50"
                            >
                              <td className="px-1 py-1">
                                <Checkbox
                                  checked={selected.includes(device.id)}
                                  onCheckedChange={() =>
                                    toggleDevice(device.id)
                                  }
                                />
                              </td>
                              <td className="px-1 py-1">
                                <div className="flex items-center gap-0.5">
                                  <Monitor className="w-3 h-3 text-muted-foreground flex-shrink-0" />
                                  <span className="font-mono text-xs truncate">
                                    {device.id}
                                  </span>
                                </div>
                              </td>
                              <td className="px-1 py-1 font-mono text-xs truncate">
                                {device.networkInfos[0]?.ipAddress || "-"}
                              </td>
                              <td className="px-1 py-1 font-mono text-xs truncate">
                                {device.networkInfos[0]?.macAddress || "-"}
                              </td>
                              <td className="px-1 py-1 text-xs whitespace-nowrap">
                                {device.version ? `v${device.version}` : "-"}
                              </td>
                              <td className="px-1 py-1 text-xs">
                                {device.isOffline ? (
                                  <span className="text-xs px-1 py-0.5 rounded-full bg-red-100 text-red-700 font-medium whitespace-nowrap inline-block">
                                    Offline
                                  </span>
                                ) : (
                                  <span className="text-xs px-1 py-0.5 rounded-full bg-green-100 text-green-700 font-medium whitespace-nowrap inline-block">
                                    Online
                                  </span>
                                )}
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </ScrollArea>

        {/* Selected count */}
        {selected.length > 0 && (
          <div className="text-xs text-muted-foreground bg-muted/50 px-2 py-1.5 rounded">
            Đã chọn:{" "}
            <span className="font-semibold text-foreground">
              {selected.length}
            </span>
          </div>
        )}

        {/* Actions */}
        <div className="flex justify-end gap-2">
          <Button variant="outline" onClick={handleClose} size="sm">
            Hủy
          </Button>
          <Button
            onClick={handleConfirm}
            disabled={selected.length === 0}
            size="sm"
          >
            Xác nhận ({selected.length})
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}