import { type ColumnDef } from "@tanstack/react-table";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { FileText } from "lucide-react";
import { UploadDialog } from "@/components/upload-dialog";
import { VersionTable } from "@/components/version-table";
import { UpdateButton } from "@/components/update-button";
import { RoomSelectDialog } from "@/components/room-select-dialog";
import type { AxiosProgressEvent } from "axios";
import { useState } from "react";

interface AppManagerTemplateProps<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[];
}

export function AppManagerTemplate<TData>({
  title,
  description,
  data,
  isLoading,
  columns,
  onUpload,
  onUpdate,
  updateLoading,
  onTableInit,
  rooms,
}: AppManagerTemplateProps<TData>) {
  const [dialogOpen, setDialogOpen] = useState(false);
  const handleUpdateClick = () => {
    if (rooms && onUpdate) {
      setDialogOpen(true);
    }
  };
  return (
    <div className="w-full px-6 space-y-4">
      <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>

      <Card className="w-full">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <FileText className="h-5 w-5" /> Lịch sử phiên bản
          </CardTitle>
          <CardDescription>Tất cả các phiên bản đã tải lên</CardDescription>
        </CardHeader>
        <CardContent>
          <VersionTable
            data={data}
            isLoading={isLoading}
            columns={columns}
            onTableInit={onTableInit}
          />
        </CardContent>
        {onUpdate && (
          <CardFooter>
            <UpdateButton onClick={handleUpdateClick} loading={updateLoading} />
            <UpdateButton
              onClick={() => onUpdate("All")}
              loading={updateLoading}
              label="Cập nhật tất cả thiết bị"
            />
          </CardFooter>
        )}
        {rooms && onUpdate && (
          <RoomSelectDialog
            open={dialogOpen}
            onClose={() => setDialogOpen(false)}
            rooms={rooms}
            onConfirm={(roomName) => {
              onUpdate(roomName);
              setDialogOpen(false);
            }}
          />
        )}
      </Card>
    </div>
  );
}