// UploadTester.tsx
import React, { useState } from 'react';
import { Box, Button, Input, Typography } from '@mui/material';

export default function UploadTester() {
    const [file, setFile] = useState<File | null>(null);
    function UploadTester() {
        const [file, setFile] = useState<File | null>(null);

        const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
            setFile(e.target.files?.[0] ?? null);
        };

        return <input type="file" onChange={onFileChange} />;
    }

    const handleUpload = async () => {
        if (!file) return alert('Choose a file first');

        const fd = new FormData();
        fd.append('file', file, file.name);
        fd.append('title', 'test-upload');

        try {
            const res = await fetch('https://mfs-api.midastix.com/image-upload/single', {
                method: 'POST',
                body: fd,
                // DO NOT set Content-Type — browser will set multipart boundary
            });
            const text = await res.text();
            console.log('UploadTester: status', res.status, 'body:', text);
            alert(`Status: ${res.status} — see console for body`);
        } catch (err) {
            console.error('UploadTester error', err);
            alert('Upload failed — see console');
        }
    };

    return (
        <Box sx={{ p: 2 }}>
            <Typography variant="subtitle1">Upload Tester (one file)</Typography>
            <input
                type="file"
                onChange={(e) => {
                    const input = e.target as HTMLInputElement;
                    const f = input.files && input.files[0];
                    setFile(f ?? null);
                }}
            />
            <Box sx={{ mt: 2 }}>
                <Button variant="contained" onClick={handleUpload} disabled={!file}>Upload</Button>
            </Box>
        </Box>
    );
}
