import React, { useState } from 'react';
import { Button } from '@mui/material';
import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
import Swal from 'sweetalert2';
import { useNavigate } from 'react-router-dom';

/**
 * Delete group button with confirmation dialog
 * Standalone component for group deletion
 */
function DeleteGroupButton({ token, groupName = 'diese Gruppe' }) {
  const [deleting, setDeleting] = useState(false);
  const navigate = useNavigate();

  const handleDelete = async () => {
    const result = await Swal.fire({
      title: 'Gruppe komplett löschen?',
      html: `<strong>Achtung:</strong> Diese Aktion kann nicht rückgängig gemacht werden!<br><br>
             Alle Bilder und Daten von "${groupName}" werden unwiderruflich gelöscht.`,
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#d33',
      cancelButtonColor: '#3085d6',
      confirmButtonText: 'Ja, alles löschen',
      cancelButtonText: 'Abbrechen',
      input: 'checkbox',
      inputPlaceholder: 'Ich verstehe, dass diese Aktion unwiderruflich ist'
    });

    if (!result.isConfirmed || !result.value) {
      if (result.isConfirmed && !result.value) {
        Swal.fire({
          icon: 'info',
          title: 'Bestätigung erforderlich',
          text: 'Bitte bestätigen Sie das Kontrollkästchen, um fortzufahren.'
        });
      }
      return;
    }

    try {
      setDeleting(true);

      const res = await fetch(`/api/manage/${token}`, {
        method: 'DELETE'
      });

      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body.error || 'Fehler beim Löschen');
      }

      await Swal.fire({
        icon: 'success',
        title: 'Gruppe gelöscht',
        text: 'Die Gruppe und alle Bilder wurden erfolgreich gelöscht.',
        timer: 2000,
        showConfirmButton: false
      });

      navigate('/');

    } catch (error) {
      console.error('Error deleting group:', error);
      Swal.fire({
        icon: 'error',
        title: 'Fehler',
        text: error.message || 'Gruppe konnte nicht gelöscht werden'
      });
      setDeleting(false);
    }
  };

  return (
    <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={handleDelete}
      disabled={deleting}
      size="large"
    >
      <DeleteForeverIcon sx={{ mr: 1 }} /> Gruppe löschen
    </Button>
  );
}

export default DeleteGroupButton;