TTMT.ManageWebGUI/src/template/table-manager-template.tsx

import { RequestUpdateMenu } from "@/components/request-update-menu";
import { SelectDialog } from "@/components/select-dialog";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { UploadDialog } from "@/components/upload-dialog";
import { VersionTable } from "@/components/version-table";
import type { ColumnDef } from "@tanstack/react-table";
import type { AxiosProgressEvent } from "axios";
import { FileText, Building2, Monitor } from "lucide-react";
import { useState } from "react";

interface BlackListManagerTemplateProps<TData> {
  title: string;
  description: string;
  data: TData[];
  isLoading: boolean;
  columns: ColumnDef<TData, any>[];
  onUpload: (
    fd: FormData,
    config?: { onUploadProgress?: (e: AxiosProgressEvent) => void }
  ) => Promise<void>;
  onUpdate?: (roomName: string) => void;
  updateLoading?: boolean;
  onTableInit?: (table: any) => void;
  rooms: string[];
  devices?: string[];
}

export function BlackListManagerTemplate<TData>({
  title,
  description,
  data,
  isLoading,
  columns,
  onUpload,
  onUpdate,
  updateLoading,
  onTableInit,
  rooms = [],
  devices = [],
}: BlackListManagerTemplateProps<TData>) {
  const [dialogOpen, setDialogOpen] = useState(false);
  const [dialogType, setDialogType] = useState<"room" | "device" | null>(null);

  const handleUpdateAll = () => {
    if (onUpdate) onUpdate("All");
  };

  const openRoomDialog = () => {
    if (rooms.length > 0 && onUpdate) {
      setDialogType("room");
      setDialogOpen(true);
    }
  };

  const openDeviceDialog = () => {
    if (devices.length > 0 && onUpdate) {
      setDialogType("device");
      setDialogOpen(true);
    }
  };

  const getDialogProps = () => {
    if (dialogType === "room") {
      return {
        title: "Chọn phòng",
        description: "Chọn các phòng cần cập nhật",
        icon: <Building2 className="w-6 h-6 text-primary" />,
        items: rooms,
      };
    }
    if (dialogType === "device") {
      return {
        title: "Chọn thiết bị",
        description: "Chọn các thiết bị cần cập nhật",
        icon: <Monitor className="w-6 h-6 text-primary" />,
        items: devices,
      };
    }
    return null;
  };
  const dialogProps = getDialogProps();

  return (
    <div className="w-full px-6 space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">{title}</h1>
          <p className="text-muted-foreground mt-2">{description}</p>
        </div>
        <UploadDialog onSubmit={onUpload} />
      </div>

      {/* Table */}
      <Card className="w-full">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <FileText className="h-5 w-5" /> Danh sách phần mềm bị chặn
          </CardTitle>
          <CardDescription>
            Các phần mềm không được cho phép trong hệ thống
          </CardDescription>
        </CardHeader>

        <CardContent>
          <VersionTable
            data={data}
            isLoading={isLoading}
            columns={columns}
            onTableInit={onTableInit}
          />
        </CardContent>

        {/* Footer */}
        {onUpdate && (
          <CardFooter className="flex flex-col sm:flex-row gap-2">
            <RequestUpdateMenu
              onUpdateDevice={openDeviceDialog}
              onUpdateRoom={openRoomDialog}
              onUpdateAll={handleUpdateAll}
              loading={updateLoading}
            />
          </CardFooter>
        )}
      </Card>

      {dialogProps && (
        <SelectDialog
          open={dialogOpen}
          onClose={() => setDialogOpen(false)}
          title={dialogProps.title}
          description={dialogProps.description}
          icon={dialogProps.icon}
          items={dialogProps.items}
          onConfirm={async (selectedItems) => {
            if (!onUpdate) return;
            for (const item of selectedItems) {
              onUpdate(item);
            }
            setDialogOpen(false);
          }}
        />
      )}
    </div>
  );
}