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 type { AxiosProgressEvent } from "axios";

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?: () => void;
  updateLoading?: boolean;
  onTableInit?: (table: any) => void;
}

export function AppManagerTemplate<TData>({
  title,
  description,
  data,
  isLoading,
  columns,
  onUpload,
  onUpdate,
  updateLoading,
  onTableInit,
}: AppManagerTemplateProps<TData>) {
  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={onUpdate} loading={updateLoading} />
          </CardFooter>
        )}
      </Card>
    </div>
  );
}