'use client';  // 加上这行

import React from 'react';
import UploadIcon from '@mui/icons-material/Upload';
import Button from '@mui/material/Button';
import Snackbar from '@mui/material/Snackbar';
import Alert from '@mui/material/Alert';
import { styled } from '@mui/material/styles';
import axios from 'axios';

const Input = styled('input')({
  display: 'none',
});

const App: React.FC = () => {
  const [open, setOpen] = React.useState(false);
  const [message, setMessage] = React.useState('');
  const [severity, setSeverity] = React.useState<'success' | 'error'>('success');

  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      try {
        const formData = new FormData();
        formData.append('file', file);

        const response = await axios.post('https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload', formData, {
          headers: {
            authorization: 'authorization-text',
            'Content-Type': 'multipart/form-data',
          },
        });

        if (response.status === 200) {
          setMessage(`${file.name} file uploaded successfully`);
          setSeverity('success');
        }
      } catch (error) {
        setMessage(`${file.name} file upload failed.`);
        setSeverity('error');
      } finally {
        setOpen(true);
      }
    }
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <>
      <label htmlFor="upload-file">
        <Input accept="image/*" id="upload-file" type="file" onChange={handleChange} />
        <Button variant="contained" component="span" startIcon={<UploadIcon />}>
          Click to Upload
        </Button>
      </label>
      <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
        <Alert onClose={handleClose} severity={severity} sx={{ width: '100%' }}>
          {message}
        </Alert>
      </Snackbar>
    </>
  );
};

export default App;