import React, { useState, useEffect } from 'react';
import { Button, Card, CardContent, Typography, Container, Box } from '@mui/material';
import Swal from 'sweetalert2/dist/sweetalert2.js';
import 'sweetalert2/src/sweetalert2.scss';

// Components
import Navbar from '../ComponentUtils/Headers/Navbar';
import Footer from '../ComponentUtils/Footer';
import MultiImageDropzone from '../ComponentUtils/MultiUpload/MultiImageDropzone';
import ImageGallery from '../ComponentUtils/ImageGallery';
import DescriptionInput from '../ComponentUtils/MultiUpload/DescriptionInput';
import UploadProgress from '../ComponentUtils/MultiUpload/UploadProgress';
import Loading from '../ComponentUtils/LoadingAnimation/Loading';
import ConsentCheckboxes from '../ComponentUtils/MultiUpload/ConsentCheckboxes';

// Utils
import { uploadImageBatch } from '../../Utils/batchUpload';

// Styles
import '../../App.css';
// Background.css is now globally imported in src/index.js

// Styles migrated to MUI sx props in-place below

function MultiUploadPage() {
  
  const [selectedImages, setSelectedImages] = useState([]);
  const [metadata, setMetadata] = useState({
    year: new Date().getFullYear(),
    title: '',
    description: '',
    name: ''
  });
  const [consents, setConsents] = useState({
    workshopConsent: false,
    socialMediaConsents: []
  });
  const [uploading, setUploading] = useState(false);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [uploadComplete, setUploadComplete] = useState(false);
  const [uploadResult, setUploadResult] = useState(null);
  const [isEditMode, setIsEditMode] = useState(false);
  const [imageDescriptions, setImageDescriptions] = useState({});

  // Cleanup object URLs when component unmounts
  useEffect(() => {
    return () => {
      selectedImages.forEach(img => {
        if (img.url && img.url.startsWith('blob:')) {
          URL.revokeObjectURL(img.url);
        }
      });
    };
  }, [selectedImages]);

  const handleImagesSelected = (newImages) => {
    console.log('handleImagesSelected called with:', newImages);
    
    // Convert File objects to preview objects with URLs
    const imageObjects = newImages.map((file, index) => ({
      id: `preview-${Date.now()}-${index}`, // Unique ID für Preview-Modus
      file: file, // Original File object for upload
      url: URL.createObjectURL(file), // Preview URL
      name: file.name,
      originalName: file.name,
      size: file.size,
      type: file.type
    }));
    
    setSelectedImages(prev => {
      const updated = [...prev, ...imageObjects];
      return updated;
    });
  };

  const handleRemoveImage = (indexToRemove) => {
    setSelectedImages(prev => {
      const imageToRemove = prev[indexToRemove];
      // Clean up the object URL to avoid memory leaks
      if (imageToRemove && imageToRemove.url && imageToRemove.url.startsWith('blob:')) {
        URL.revokeObjectURL(imageToRemove.url);
      }
      return prev.filter((_, index) => index !== indexToRemove);
    });
  };

  const handleClearAll = () => {
    // Clean up all object URLs
    selectedImages.forEach(img => {
      if (img.url && img.url.startsWith('blob:')) {
        URL.revokeObjectURL(img.url);
      }
    });
    
    setSelectedImages([]);
    setMetadata({
      year: new Date().getFullYear(),
      title: '',
      description: '',
      name: ''
    });
    setConsents({
      workshopConsent: false,
      socialMediaConsents: []
    });
    setImageDescriptions({});
    setIsEditMode(false);
  };

  // Handle drag-and-drop reordering (only updates local state, no API call)
  const handleReorder = (reorderedItems) => {
    console.log('Reordering images in preview:', reorderedItems);
    setSelectedImages(reorderedItems);
  };

  // Handle edit mode toggle
  const handleEditMode = (enabled) => {
    setIsEditMode(enabled);
  };

  // Handle description changes
  const handleDescriptionChange = (imageId, description) => {
    setImageDescriptions(prev => ({
      ...prev,
      [imageId]: description.slice(0, 200) // Enforce max length
    }));
  };

  const handleUpload = async () => {
    if (selectedImages.length === 0) {
      Swal.fire({
        icon: 'warning',
        title: 'Keine Bilder ausgewählt',
        text: 'Bitte wählen Sie mindestens ein Bild zum Upload aus.',
        confirmButtonColor: '#4CAF50'
      });
      return;
    }

    if (!metadata.year || !metadata.title.trim()) {
      Swal.fire({
        icon: 'warning',
        title: 'Pflichtfelder fehlen',
        text: 'Bitte gebe das Jahr und den Titel an.',
        confirmButtonColor: '#4CAF50'
      });
      return;
    }

    // GDPR: Validate workshop consent (mandatory)
    if (!consents.workshopConsent) {
      Swal.fire({
        icon: 'error',
        title: 'Einwilligung erforderlich',
        text: 'Die Zustimmung zur Anzeige in der Werkstatt ist erforderlich.',
        confirmButtonColor: '#f44336'
      });
      return;
    }

    setUploading(true);
    setUploadProgress(0);

    try {
      // Simuliere Progress (da wir noch keinen echten Progress haben)
      const progressInterval = setInterval(() => {
        setUploadProgress(prev => {
          if (prev >= 90) {
            clearInterval(progressInterval);
            return 90;
          }
          return prev + 10;
        });
      }, 200);

      // Extract the actual File objects from our image objects
      const filesToUpload = selectedImages.map(img => img.file || img);
      
      // Prepare descriptions array for backend
      const descriptionsArray = selectedImages.map(img => ({
        fileName: img.name,
        description: imageDescriptions[img.id] || ''
      }));
      
      const result = await uploadImageBatch(filesToUpload, metadata, descriptionsArray, consents);
      
      clearInterval(progressInterval);
      setUploadProgress(100);

      // Show success content
      setTimeout(() => {
        setUploadComplete(true);
        setUploadResult(result);
      }, 500);

    } catch (error) {
      setUploading(false);
      console.error('Upload error:', error);
      
      Swal.fire({
        icon: 'error',
        title: 'Upload fehlgeschlagen',
        text: error.message || 'Ein Fehler ist beim Upload aufgetreten.',
        confirmButtonColor: '#f44336'
      });
    }
  };

  return (
    <div className="allContainer">
      <Navbar />

      <Container maxWidth="lg" sx={{ pt: '20px', pb: '40px', minHeight: '80vh' }}>
        <Card sx={{ borderRadius: '12px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)', p: '20px', mb: '20px' }}>
          <CardContent>
            <Typography sx={{ fontFamily: 'roboto', fontWeight: 400, fontSize: '28px', textAlign: 'center', mb: '10px', color: '#333333' }}>
              Project Image Uploader
            </Typography>
            <Typography sx={{ fontFamily: 'roboto', fontWeight: 300, fontSize: '16px', color: '#666666', textAlign: 'center', mb: '30px' }}>
              Lade ein oder mehrere Bilder von deinem Projekt hoch und beschreibe dein Projekt in wenigen Worten.
              <br />
              Die Bilder werden nur hier im Hobbyhimmel auf dem Monitor gezeigt, es wird an keine Dritten weiter gegeben.
            </Typography>

            {!uploading ? (
              <>
                <MultiImageDropzone 
                  onImagesSelected={handleImagesSelected}
                  selectedImages={selectedImages}
                />

                <ImageGallery 
                  items={selectedImages}
                  onDelete={handleRemoveImage}
                  mode="preview"
                  showActions={true}
                  enableReordering={true}
                  onReorder={handleReorder}
                  isEditMode={isEditMode}
                  onEditMode={handleEditMode}
                  imageDescriptions={imageDescriptions}
                  onDescriptionChange={handleDescriptionChange}
                />

                {selectedImages.length > 0 && (
                  <>
                    <DescriptionInput 
                      metadata={metadata}
                      onMetadataChange={setMetadata}
                    />

                    <ConsentCheckboxes 
                      consents={consents}
                      onConsentChange={setConsents}
                      disabled={uploading}
                    />

                    <Box sx={{ display: 'flex', gap: '15px', justifyContent: 'center', mt: '20px', flexWrap: 'wrap' }}>
                      <Button
                        sx={{
                          borderRadius: '25px',
                          px: '30px',
                          py: '12px',
                          fontSize: '16px',
                          fontWeight: 500,
                          textTransform: 'none',
                          background: 'linear-gradient(45deg, #4CAF50 30%, #45a049 90%)',
                          color: 'white',
                          '&:hover': {
                            background: 'linear-gradient(45deg, #45a049 30%, #4CAF50 90%)',
                            transform: 'translateY(-2px)',
                            boxShadow: '0 4px 12px rgba(76, 175, 80, 0.3)'
                          },
                          '&.Mui-disabled': {
                            background: '#cccccc',
                            color: '#666666'
                          }
                        }}
                        onClick={handleUpload}
                        disabled={uploading || selectedImages.length === 0 || !consents.workshopConsent}
                        size="large"
                      >
                        🚀 {selectedImages.length} Bild{selectedImages.length !== 1 ? 'er' : ''} hochladen
                      </Button>

                      <Button
                        sx={{
                          borderRadius: '25px',
                          px: '30px',
                          py: '12px',
                          fontSize: '16px',
                          fontWeight: 500,
                          textTransform: 'none',
                          border: '2px solid #f44336',
                          color: '#f44336',
                          backgroundColor: 'transparent',
                          '&:hover': {
                            backgroundColor: '#f44336',
                            color: 'white',
                            transform: 'translateY(-2px)',
                            boxShadow: '0 4px 12px rgba(244, 67, 54, 0.3)'
                          }
                        }}
                        onClick={handleClearAll}
                        size="large"
                      >
                        🗑️ Alle entfernen
                      </Button>
                    </Box>
                  </>
                )}


              </>
            ) : (
              <div style={{ textAlign: 'center', padding: '40px 0' }}>
                {!uploadComplete ? (
                  <>
                    <Loading />
                    <UploadProgress 
                      progress={uploadProgress}
                      totalFiles={selectedImages.length}
                      isUploading={uploading}
                    />
                  </>
                ) : (
                  <Box sx={{
                    mt: 4,
                    p: 4,
                    borderRadius: '16px',
                    background: 'linear-gradient(135deg, #4CAF50 0%, #45a049 100%)',
                    color: 'white',
                    boxShadow: '0 8px 32px rgba(76, 175, 80, 0.4)',
                    animation: 'slideIn 0.5s ease-out',
                    '@keyframes slideIn': {
                      from: {
                        opacity: 0,
                        transform: 'translateY(-20px)'
                      },
                      to: {
                        opacity: 1,
                        transform: 'translateY(0)'
                      }
                    }
                  }}>
                    {/* Success Icon & Title */}
                    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 2, mb: 2 }}>
                      <Box sx={{ 
                        bgcolor: 'white', 
                        borderRadius: '50%', 
                        width: 60, 
                        height: 60, 
                        display: 'flex', 
                        alignItems: 'center', 
                        justifyContent: 'center',
                        boxShadow: '0 4px 12px rgba(0,0,0,0.2)'
                      }}>
                        <Typography sx={{ fontSize: '32px' }}>✅</Typography>
                      </Box>
                      <Typography sx={{ fontSize: '32px', fontWeight: 'bold' }}>
                        Upload erfolgreich!
                      </Typography>
                    </Box>

                    {/* Upload Count */}
                    <Typography sx={{ fontSize: '18px', mb: 3 }}>
                      <strong>{uploadResult?.imageCount || 0}</strong> {uploadResult?.imageCount === 1 ? 'Bild wurde' : 'Bilder wurden'} erfolgreich hochgeladen 
                      und {uploadResult?.imageCount === 1 ? 'wird' : 'werden'} nach der Prüfung durch das Hobbyhimmel-Team angezeigt.
                    </Typography>

                    {/* Group ID Box */}
                    <Box sx={{ 
                      bgcolor: 'rgba(255,255,255,0.2)', 
                      borderRadius: '12px', 
                      p: 3, 
                      mb: 3,
                      border: '2px solid rgba(255,255,255,0.3)'
                    }}>
                      <Typography sx={{ fontSize: '14px', mb: 1, opacity: 0.9 }}>
                        Ihre Referenz-Nummer:
                      </Typography>
                      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 2 }}>
                        <Typography sx={{ 
                          fontSize: '24px', 
                          fontFamily: 'monospace', 
                          fontWeight: 'bold',
                          letterSpacing: '2px'
                        }}>
                          {uploadResult?.groupId}
                        </Typography>
                        <Button
                          sx={{
                            bgcolor: 'white',
                            color: '#4CAF50',
                            minWidth: 'auto',
                            px: 2,
                            py: 1,
                            '&:hover': {
                              bgcolor: '#f0f0f0'
                            }
                          }}
                          onClick={() => {
                            navigator.clipboard.writeText(uploadResult?.groupId || '');
                          }}
                        >
                          📋 Kopieren
                        </Button>
                      </Box>
                      <Typography sx={{ fontSize: '12px', mt: 1, opacity: 0.8 }}>
                        Notieren Sie sich diese Nummer für spätere Anfragen
                      </Typography>
                    </Box>

                    {/* Next Steps */}
                    <Box sx={{ 
                      bgcolor: 'rgba(255,255,255,0.15)', 
                      borderRadius: '8px', 
                      p: 2, 
                      mb: 3,
                      textAlign: 'left'
                    }}>
                      <Typography sx={{ fontSize: '16px', fontWeight: 600, mb: 1.5 }}>
                        Was passiert jetzt?
                      </Typography>
                      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                        <Box sx={{ display: 'flex', gap: 1 }}>
                          <Typography sx={{ fontSize: '14px' }}>•</Typography>
                          <Typography sx={{ fontSize: '14px' }}>
                            Ihre Bilder werden vom Team geprüft
                          </Typography>
                        </Box>
                        <Box sx={{ display: 'flex', gap: 1 }}>
                          <Typography sx={{ fontSize: '14px' }}>•</Typography>
                          <Typography sx={{ fontSize: '14px' }}>
                            Nach Freigabe erscheinen sie auf dem Werkstatt-Monitor
                          </Typography>
                        </Box>
                        <Box sx={{ display: 'flex', gap: 1 }}>
                          <Typography sx={{ fontSize: '14px' }}>•</Typography>
                          <Typography sx={{ fontSize: '14px' }}>
                            Bei gewählter Social Media Einwilligung werden sie entsprechend veröffentlicht
                          </Typography>
                        </Box>
                      </Box>
                    </Box>

                    {/* GDPR Contact */}
                    <Typography sx={{ fontSize: '12px', opacity: 0.9, mb: 3 }}>
                      <strong>Fragen oder Widerruf?</strong> Kontaktieren Sie uns mit Ihrer Referenz-Nummer unter: <strong>it@hobbyhimmel.de</strong>
                    </Typography>

                    {/* Action Button */}
                    <Button
                      sx={{
                        bgcolor: 'white',
                        color: '#4CAF50',
                        fontWeight: 'bold',
                        fontSize: '16px',
                        px: 5,
                        py: 1.5,
                        borderRadius: '25px',
                        textTransform: 'none',
                        boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
                        '&:hover': {
                          bgcolor: '#f0f0f0',
                          transform: 'scale(1.05)',
                          boxShadow: '0 6px 16px rgba(0,0,0,0.3)'
                        },
                        transition: 'all 0.3s ease'
                      }}
                      onClick={() => window.location.reload()}
                    >
                      👍 Weitere Bilder hochladen
                    </Button>
                  </Box>
                )}
              </div>
            )}
          </CardContent>
        </Card>
      </Container>

      <div className="footerContainer">
        <Footer />
      </div>
    </div>
  );
}

export default MultiUploadPage;