import * as React from "react"
 
import { useProgressiveUpload } from "@/hooks/use-progressive-upload"
 
export function Component() {
  const [file, setFile] = React.useState<File | null>(null)
 
  const { start, pause, resume, progress, isUploading, isPaused } =
    useProgressiveUpload(file, {
      endpoint: "/api/upload",
      onProgress: (progress) => {
        console.log(`Upload progress: ${progress}%`)
      },
    })
 
  return (
    <div>
      <input
        type="file"
        onChange={(e) => setFile(e.target.files?.[0] || null)}
      />
      <button onClick={start} disabled={!file || isUploading}>
        Upload
      </button>
      {isPaused && <button onClick={resume}>Resume</button>}
    </div>
  )
}

const { start, progress, isUploading } = useProgressiveUpload(file, {
  endpoint: "/api/upload",
  onProgress: (p) => console.log(`${p}%`),
})
 
await start()

const { start, pause, resume, isPaused } = useProgressiveUpload(file, {
  endpoint: "/api/upload",
})
 
// User clicks pause
pause()
 
// Later, user clicks resume
resume() // Automatically continues from last successful chunk

const { start } = useProgressiveUpload(file, {
  endpoint: "/api/upload",
  chunkSize: 512 * 1024, // Start with 512KB chunks
  minChunkSize: 128 * 1024, // Never go below 128KB
  maxChunkSize: 4 * 1024 * 1024, // Can go up to 4MB on fast networks
  maxRetries: 5, // More retries for unreliable networks
})

// POST /api/upload
// FormData fields:
// - chunk: Blob (the file chunk)
// - chunkIndex: number (0-based index)
// - totalChunks: number
// - fileId: string (unique identifier for the file)
// - fileName: string
// - fileSize: number
 
// Server should:
// 1. Store each chunk with the fileId and chunkIndex
// 2. When all chunks are received, reassemble the file
// 3. Return success response for each chunk