// resources/assets/ts/ContactsPage/components/NotizenDateiTab/DateiUpload.tsx

import React, { useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import LinearProgress from '@mui/material/LinearProgress';
import {
  CloudUpload as CloudUploadIcon,
  CreateNewFolder as CreateNewFolderIcon,
} from '@mui/icons-material';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';

interface DateiUploadProps {
  contactId: number;
  csrfToken: string;
  onSuccess: () => void;
  onCancel: () => void;
}

const DateiUpload: React.FC<DateiUploadProps> = ({
  contactId,
  csrfToken,
  onSuccess,
  onCancel,
}) => {
  const { i18n } = useLingui();
  const [uploading, setUploading] = useState(false);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [uploadErrors, setUploadErrors] = useState<string[]>([]);

  const onDrop = useCallback(
    async (acceptedFiles: File[]) => {
      setUploading(true);
      setUploadProgress(0);
      setUploadErrors([]); // Clear previous errors

      const totalFiles = acceptedFiles.length;
      let completedFiles = 0;
      const errors: string[] = [];

      for (const file of acceptedFiles) {
        const formData = new FormData();
        formData.append('file', file);
        formData.append('adr_id', contactId.toString());
        formData.append('Folder', 'none');
        formData.append('_token', csrfToken);

        try {
          const response = await fetch('/crmFolder/newFile', {
            method: 'POST',
            body: formData,
          });

          //  Check if upload actually succeeded
          if (response.ok) {
            completedFiles++;
            setUploadProgress((completedFiles / totalFiles) * 100);
          } else {
            //  Server returned error (400, 500, etc.)
            errors.push(i18n._(msg`${file.name}: Server error (${response.status})`));
          }
        } catch (error) {
          //  Network error (no internet, server down)
          errors.push(i18n._(msg`${file.name}: Network error`));
          console.error('Upload error:', error);
        }
      }

      setUploading(false);

      // Show errors if any failed
      if (errors.length > 0) {
        setUploadErrors(errors);
        alert(i18n._(msg`${errors.length} of ${totalFiles} files could not be uploaded.`));
      } else {
        // Only call onSuccess if ALL uploads succeeded
        setTimeout(() => {
          onSuccess();
        }, 500);
      }
    },
    [contactId, csrfToken, onSuccess]
  );

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    disabled: uploading,
  });

  const handleNewFolder = () => {
    const folderName = prompt(
      i18n._(msg`What should your new folder be called? (Dots and spaces are not displayed)`),
      i18n._(msg`New folder`)
    );

    if (!folderName) return;

    const formattedName = folderName.replace(/\s/g, '_').replace(/[.]/g, '');

    const formData = new FormData();
    formData.append('name', formattedName);
    formData.append('Path', 'none');
    formData.append('adr_id', contactId.toString());
    formData.append('_token', csrfToken);

    fetch('/crmFolder/newFolder', {
      method: 'POST',
      body: formData,
    }).then(() => {
      onSuccess();
    });
  };

  return (


    <Box sx={{ p: 3 }}>
      {/* Upload Zone */}
      <Paper
        {...getRootProps()}
        elevation={isDragActive ? 8 : 2}
        sx={{
          border: '2px dashed',
          borderColor: isDragActive ? 'primary.main' : 'grey.400',
          borderRadius: 2,
          p: 6,
          textAlign: 'center',
          cursor: uploading ? 'not-allowed' : 'pointer',
          bgcolor: isDragActive ? 'action.hover' : 'background.paper',
          transition: 'all 0.3s',
          mb: 3,
          '&:hover': {
            borderColor: 'primary.main',
            bgcolor: 'action.hover',
          },
        }}
      >
        <input {...getInputProps()} disabled={uploading} />
        <CloudUploadIcon sx={{ fontSize: 64, color: 'primary.main', mb: 2 }} />
        {isDragActive ? (
          <Typography variant="h6"><Trans>Drop files here...</Trans></Typography>
        ) : (
          <>
            <Typography variant="h6" gutterBottom>
              <Trans>Drag files here to upload</Trans>
            </Typography>
            <Typography variant="body2" color="text.secondary">
              <Trans>or click here to select files</Trans>
            </Typography>
          </>
        )}
      </Paper>

      {/* Upload Progress */}
      {uploading && (
        <Box sx={{ mb: 3 }}>
          <Typography variant="body2" color="text.secondary" gutterBottom>
            <Trans>Upload in progress... {Math.round(uploadProgress)}%</Trans>
          </Typography>
          <LinearProgress variant="determinate" value={uploadProgress} />
        </Box>
      )}

      {/* if error, display errorsy*/}
      {uploadErrors.length > 0 && (
        <Box sx={{ mb: 3, p: 2, bgcolor: 'error.lighter', borderRadius: 1 }}>
          <Typography color="error" variant="body2" fontWeight="bold" gutterBottom>
            <Trans>Upload errors:</Trans>
          </Typography>
          {uploadErrors.map((error, i) => (
            <Typography key={i} color="error" variant="caption" display="block">
              • {error}
            </Typography>
          ))}
        </Box>
      )}

      {/* Actions */}
      <Box sx={{ display: 'flex', gap: 2, justifyContent: 'center' }}>
        <Button
          variant="outlined"
          startIcon={<CreateNewFolderIcon />}
          onClick={handleNewFolder}
          disabled={uploading}
        >
          <Trans>New folder</Trans>
        </Button>
      </Box>
    </Box>
  );
};

export default DateiUpload;