"use client";

import { Button } from "@common/components";
import { useUploadStore } from "@/shared/lib/use-upload-store";
import { UploadProgressModal } from "./upload-progress-modal";
import { CloudUpload } from "lucide-react";

export function UploadProgressIndicator() {
  const { isUploading, uploadProgress, showProgressModal, setShowProgressModal } = useUploadStore();

  if (!isUploading || !uploadProgress) {
    return null;
  }

  return (
    <>
      <div className="fixed top-4 right-[150px] z-[9998]">
        <Button
          onClick={() => setShowProgressModal(true)}
          className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-5 py-3 rounded-lg shadow-lg"
        >
          <CloudUpload style={{ width: '20px', height: '20px' }} />
          <span className="bg-white text-blue-600 px-3 py-1 rounded text-base font-bold">
            {Math.max(0, Math.round(((uploadProgress.currentFile - 1) * 5 + uploadProgress.currentStepIndex) / (uploadProgress.totalFiles * 5) * 100))}%
          </span>
        </Button>
      </div>
      
      <UploadProgressModal />
    </>
  );
}