SweetAlert++

// Success Message
Swal.modal({
  icon: 'success',
  title: 'Success!',
  text: 'Your changes have been saved successfully.',
  buttons: { confirm: 'Great!' }
});

// Error Message
Swal.modal({
  icon: 'error',
  title: 'Oops!',
  text: 'Something went wrong. Please try again.',
  buttons: { confirm: 'Try Again' }
});

// Warning Message
Swal.modal({
  icon: 'warning',
  title: 'Warning',
  text: 'This action may have consequences.',
  buttons: { cancel: 'Cancel', confirm: 'Proceed' }
});

// Info Message
Swal.modal({
  icon: 'info',
  title: 'Information',
  text: 'Here is some helpful information for you.',
  buttons: { confirm: 'Got it' }
});

// Question Message
Swal.modal({
  icon: 'question',
  title: 'Are you sure?',
  text: 'Do you want to proceed with this action?',
  buttons: { cancel: 'No', confirm: 'Yes' }
});

// Loading State
Swal.modal({
  title: 'Loading...',
  text: 'Please wait while we process your request.',
  allowOutsideClick: false,
  didOpen: () => {
    Swal.showLoading();
  }
});

// Auto-Close Success (with timer)
Swal.modal({
  icon: 'success',
  title: 'Saved!',
  text: 'Auto-closing in 2 seconds...',
  timer: 2000,
  timerProgressBar: true,
  showConfirmButton: false
});

// Custom SVG Icon
Swal.modal({
  iconHtml: '<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/></svg>',
  title: 'Custom Icon',
  text: 'You can use any SVG as an icon!',
  iconColor: '#6366f1'
});

// Emoji Icon
Swal.modal({
  iconHtml: '🎉',
  title: 'Congratulations!',
  text: 'You can use emojis as icons too!'
});

// Text Input
const text = await Swal.modal({
  title: 'Enter Text',
  input: 'text',
  inputPlaceholder: 'Type something...'
});

// Email Input
const email = await Swal.modal({
  title: 'Email Address',
  input: 'email',
  inputPlaceholder: 'you@example.com'
});

// URL Input
const url = await Swal.modal({
  title: 'Website URL',
  input: 'url',
  inputPlaceholder: 'https://example.com'
});

// Password Input
const password = await Swal.modal({
  title: 'Password',
  input: 'password',
  inputPlaceholder: 'Enter password...'
});

// Number Input
const number = await Swal.modal({
  title: 'Enter a Number',
  input: 'number',
  inputAttributes: { min: 1, max: 100, step: 1 }
});

// Range Slider
const range = await Swal.modal({
  title: 'Select a Value',
  input: 'range',
  inputAttributes: { min: 0, max: 100, step: 5 },
  inputValue: 50
});

// Select Dropdown
const select = await Swal.modal({
  title: 'Choose an option',
  input: 'select',
  inputOptions: {
    opt1: 'Option 1',
    opt2: 'Option 2',
    opt3: 'Option 3'
  },
  inputPlaceholder: 'Select...'
});

// Radio Buttons
const radio = await Swal.modal({
  title: 'Choose one',
  input: 'radio',
  inputOptions: {
    red: 'Red',
    blue: 'Blue',
    green: 'Green'
  }
});

// Checkbox
const checkbox = await Swal.modal({
  title: 'Terms',
  input: 'checkbox',
  inputValue: 0,
  inputPlaceholder: 'I agree to the terms'
});

// Toggle/Switch
const toggle = await Swal.modal({
  title: 'Enable Feature',
  input: 'toggle',
  inputValue: false
});

// Date Input
const date = await Swal.modal({
  title: 'Select Date',
  input: 'date'
});

// Time Input
const time = await Swal.modal({
  title: 'Select Time',
  input: 'time'
});

// DateTime Input
const datetime = await Swal.modal({
  title: 'Select Date & Time',
  input: 'datetime-local'
});

// Textarea
const textarea = await Swal.modal({
  title: 'Enter Description',
  input: 'textarea',
  inputPlaceholder: 'Type your message here...'
});

// Color Picker
const color = await Swal.modal({
  title: 'Pick a Color',
  input: 'color',
  inputValue: '#6366f1'
});

// File Upload
const file = await Swal.modal({
  title: 'Upload File',
  input: 'file',
  inputAttributes: {
    accept: 'image/*',
    'aria-label': 'Upload your file'
  }
});

// Star Rating
const rating = await Swal.modal({
  title: 'Rate Us',
  input: 'rating',
  inputValue: 3,
  inputAttributes: { max: 5 }
});

// Login Form
const loginResult = await Swal.modal({
  title: 'Login',
  icon: 'user',
  form: [
    { type: 'email', name: 'email', label: 'Email', required: true },
    { type: 'password', name: 'password', label: 'Password', required: true },
    { type: 'checkbox', name: 'remember', label: 'Remember me' }
  ],
  buttons: { cancel: 'Cancel', confirm: 'Login' }
});
console.log('Login data:', loginResult.formData);

// Registration Form
const registerResult = await Swal.modal({
  title: 'Create Account',
  form: [
    { type: 'text', name: 'fullName', label: 'Full Name', required: true },
    { type: 'email', name: 'email', label: 'Email Address', required: true },
    { type: 'password', name: 'password', label: 'Password', required: true },
    { type: 'password', name: 'confirmPassword', label: 'Confirm Password', required: true },
    { type: 'checkbox', name: 'terms', label: 'I agree to Terms & Conditions', required: true }
  ],
  buttons: { cancel: 'Cancel', confirm: 'Register' }
});

// Contact Form
const contactResult = await Swal.modal({
  title: 'Contact Us',
  icon: 'envelope',
  form: [
    { type: 'text', name: 'name', label: 'Your Name', required: true },
    { type: 'email', name: 'email', label: 'Email Address', required: true },
    { type: 'select', name: 'subject', label: 'Subject',
      options: ['General Inquiry', 'Support', 'Feedback', 'Other'] },
    { type: 'textarea', name: 'message', label: 'Message', required: true }
  ],
  buttons: { cancel: 'Cancel', confirm: 'Send Message' }
});

// Feedback Form with Rating
const feedbackResult = await Swal.modal({
  title: 'Rate Your Experience',
  form: [
    { type: 'rating', name: 'rating', label: 'Your Rating', max: 5 },
    { type: 'textarea', name: 'comments', label: 'Comments (optional)' }
  ],
  buttons: { cancel: 'Skip', confirm: 'Submit Feedback' }
});

// Payment Form
const paymentResult = await Swal.modal({
  title: 'Payment Details',
  icon: 'credit-card',
  form: [
    { type: 'text', name: 'cardNumber', label: 'Card Number',
      placeholder: '1234 5678 9012 3456', required: true },
    { type: 'text', name: 'cardName', label: 'Name on Card', required: true },
    { type: 'text', name: 'expiry', label: 'Expiry (MM/YY)', required: true },
    { type: 'text', name: 'cvv', label: 'CVV', required: true }
  ],
  buttons: { cancel: 'Cancel', confirm: 'Pay Now' }
});

// Multi-Step Wizard
const wizardResult = await Swal.wizard({
  steps: [
    {
      title: 'Step 1: Personal Info',
      form: [
        { type: 'text', name: 'firstName', label: 'First Name', required: true },
        { type: 'text', name: 'lastName', label: 'Last Name', required: true }
      ]
    },
    {
      title: 'Step 2: Contact',
      form: [
        { type: 'email', name: 'email', label: 'Email', required: true },
        { type: 'tel', name: 'phone', label: 'Phone Number' }
      ]
    },
    {
      title: 'Step 3: Preferences',
      form: [
        { type: 'select', name: 'plan', label: 'Select Plan',
          options: ['Basic', 'Pro', 'Enterprise'] },
        { type: 'checkbox', name: 'newsletter', label: 'Subscribe to newsletter' }
      ]
    }
  ],
  buttons: { prev: 'Back', next: 'Next', confirm: 'Complete' }
});
console.log('Wizard data:', wizardResult.formData);

// Success Toast
Swal.toast({
  icon: 'success',
  title: 'Success!',
  text: 'Your changes have been saved.'
});

// Error Toast
Swal.toast({
  icon: 'error',
  title: 'Error!',
  text: 'Something went wrong.'
});

// Warning Toast
Swal.toast({
  icon: 'warning',
  title: 'Warning',
  text: 'This action may have consequences.'
});

// Info Toast
Swal.toast({
  icon: 'info',
  title: 'Info',
  text: 'Here is some information.'
});

// Loading Toast
const loadingToast = Swal.toast({
  icon: 'loading',
  title: 'Processing...',
  text: 'Please wait...',
  duration: 0  // Persistent until dismissed
});
// Later: loadingToast.dismiss();

// Toast Positions
Swal.toast({
  icon: 'success',
  title: 'Top Right',
  position: 'top-end'  // Options: top-start, top-center, top-end,
                       // bottom-start, bottom-center, bottom-end
});

// Toast with Actions
Swal.toast({
  icon: 'info',
  title: 'New Message',
  text: 'You have a new message.',
  buttons: {
    view: {
      text: 'View',
      onClick: () => console.log('View clicked')
    },
    dismiss: 'Dismiss'
  }
});

// Persistent Toast (no auto-dismiss)
Swal.toast({
  icon: 'warning',
  title: 'Attention Required',
  text: 'Please review this item.',
  duration: 0,  // Won't auto-dismiss
  showCloseButton: true
});

// Promise Toast (async operations)
Swal.toast.promise(
  fetch('/api/save-data'),
  {
    loading: 'Saving...',
    success: 'Data saved successfully!',
    error: 'Failed to save data.'
  }
);

// Alternative Promise Toast
const savePromise = saveData();
Swal.toast({
  icon: 'loading',
  title: 'Saving...'
}).then(async (toast) => {
  try {
    await savePromise;
    toast.update({ icon: 'success', title: 'Saved!' });
  } catch (e) {
    toast.update({ icon: 'error', title: 'Failed!' });
  }
});

// Multiple Toasts
['File uploaded', 'Processing complete', 'Email sent'].forEach((msg, i) => {
  setTimeout(() => {
    Swal.toast({ icon: 'success', title: msg });
  }, i * 500);
});

// Dismiss All Toasts
Swal.toast.dismissAll();

// Default Style
Swal.modal({
  title: 'Default Style',
  text: 'Clean and modern design.',
  style: 'default'
});

// Neumorphism Style
Swal.modal({
  title: 'Neumorphism',
  text: 'Soft shadows and subtle depth.',
  style: 'neumorphism'
});

// Glassmorphism Style
Swal.modal({
  title: 'Glassmorphism',
  text: 'Frosted glass with blur effect.',
  style: 'glassmorphism'
});

// Claymorphism Style
Swal.modal({
  title: 'Claymorphism',
  text: '3D clay-like appearance.',
  style: 'claymorphism'
});

// Aurora UI Style
Swal.modal({
  title: 'Aurora UI',
  text: 'Flowing gradient animation.',
  style: 'aurora'
});

// Holographic Style
Swal.modal({
  title: 'Holographic',
  text: 'Rainbow shimmer effect.',
  style: 'holographic'
});

// 3D Depth Style
Swal.modal({
  title: '3D Depth',
  text: 'Perspective transforms.',
  style: '3d'
});

// Luxury Gold Style
Swal.modal({
  title: 'Luxury',
  text: 'Premium gold accents.',
  style: 'luxury'
});

// Custom Animation
Swal.modal({
  title: 'Animated',
  text: 'Custom entrance animation.',
  animation: 'scale',        // fade, scale, slide-up, slide-down, flip, rotate, bounce, elastic
  animationDuration: 400
});

// Modal Sizes
Swal.modal({
  title: 'Small Modal',
  size: 'sm'  // sm, md, lg, xl, full
});

Swal.modal({
  title: 'Full Screen',
  size: 'full'
});

// Modal Positions
Swal.modal({
  title: 'Top Position',
  position: 'top'  // center, top, bottom, top-start, top-end, bottom-start, bottom-end
});

// Custom Colors
Swal.modal({
  title: 'Custom Colors',
  text: 'Fully customizable theme.',
  background: '#1a1a2e',
  color: '#eaeaea',
  confirmButtonColor: '#6366f1',
  cancelButtonColor: '#64748b'
});

// Custom CSS Class
Swal.modal({
  title: 'Custom Class',
  customClass: {
    popup: 'my-custom-popup',
    title: 'my-custom-title',
    confirmButton: 'my-custom-btn'
  }
});

// Backdrop Options
Swal.modal({
  title: 'Custom Backdrop',
  backdrop: 'rgba(0, 0, 0, 0.8)',
  // Or with custom pattern:
  backdrop: `rgba(0,0,0,0.8) url('/pattern.png') repeat`
});

// 3D Card Flip Animation
Swal.modal({
  title: '3D Flip',
  text: 'Watch the card flip!',
  animation: '3d-flip',
  style: 'glassmorphism'
});

// Tilt Effect on Hover
Swal.modal({
  title: 'Tilt Effect',
  text: 'Move your mouse over the modal.',
  effect: 'tilt',
  tiltAmount: 15
});

// Rotate Entry Animation
Swal.modal({
  title: 'Rotate Entry',
  text: '3D rotation entrance.',
  animation: 'rotate-y',
  animationDuration: 600
});

// Perspective Transform
Swal.modal({
  title: 'Perspective',
  text: 'Deep perspective effect.',
  style: '3d',
  perspective: 1000
});

// Layered Shadows
Swal.modal({
  title: 'Layered Shadows',
  text: 'Multiple shadow layers for depth.',
  customClass: { popup: 'layered-shadow' }
});

// Glow Effect
Swal.modal({
  title: 'Glow Effect',
  text: 'Neon glow around the modal.',
  effect: 'glow',
  glowColor: '#6366f1'
});

// Confetti Celebration
Swal.modal({
  icon: 'success',
  title: 'Congratulations!',
  text: 'You did it!',
  effect: 'confetti',
  confettiOptions: {
    particleCount: 100,
    spread: 70
  }
});

// Particle Background
Swal.modal({
  title: 'Particles',
  text: 'Floating particles in background.',
  effect: 'particles',
  particleOptions: {
    count: 50,
    color: '#6366f1'
  }
});

// Starfield Effect
Swal.modal({
  title: 'Starfield',
  text: 'Flying through stars!',
  effect: 'starfield',
  starSpeed: 2
});

// Liquid Button Effect
Swal.modal({
  title: 'Liquid Buttons',
  text: 'Buttons with liquid hover effect.',
  buttonEffect: 'liquid'
});

// Wave Effect
Swal.modal({
  title: 'Wave Background',
  text: 'Animated wave pattern.',
  effect: 'wave',
  waveColor: 'rgba(99, 102, 241, 0.2)'
});

// Gradient Animated Text
Swal.modal({
  title: '<span class="gradient-text">Gradient Title</span>',
  text: 'Animated gradient on title.',
  titleClass: 'animated-gradient'
});

// Typewriter Effect
Swal.modal({
  title: 'Typewriter',
  text: 'Watch the text appear...',
  textEffect: 'typewriter',
  typeSpeed: 50
});

// Glitch Text Effect
Swal.modal({
  title: 'GLITCH',
  text: 'Cyberpunk glitch effect.',
  titleClass: 'glitch-effect'
});

// Neon Text Glow
Swal.modal({
  title: 'Neon Glow',
  text: 'Glowing neon text effect.',
  style: 'neon',
  glowColor: '#00ff88'
});

// Morphing Success Icon
Swal.modal({
  icon: 'success',
  title: 'Success!',
  iconAnimation: 'morph',
  animationDuration: 800
});

// Mesh Gradient Background
Swal.modal({
  title: 'Mesh Gradient',
  text: 'Beautiful gradient mesh.',
  backdrop: 'mesh-gradient',
  meshColors: ['#6366f1', '#8b5cf6', '#d946ef']
});

// Aurora Background Effect
Swal.modal({
  title: 'Aurora',
  text: 'Northern lights effect.',
  style: 'aurora',
  auroraSpeed: 'slow'
});

// Animated Blobs
Swal.modal({
  title: 'Animated Blobs',
  text: 'Floating blob shapes.',
  effect: 'blobs',
  blobColors: ['#6366f1', '#22d3ee', '#f472b6']
});

// Lifecycle Hooks
Swal.modal({
  title: 'Lifecycle Hooks',
  text: 'Watch the console for hook events.',
  willOpen: () => console.log('Modal will open'),
  didOpen: () => console.log('Modal is now open'),
  willClose: () => console.log('Modal will close'),
  didClose: () => console.log('Modal has closed'),
  didRender: () => console.log('Modal rendered')
});

// Async Validation Before Close
Swal.modal({
  title: 'Async Validation',
  input: 'email',
  preConfirm: async (email) => {
    // Simulate API validation
    const isValid = await validateEmailAPI(email);
    if (!isValid) {
      Swal.showValidationMessage('Email already exists!');
      return false;
    }
    return email;
  }
});

// Input Validation Hook
Swal.modal({
  title: 'Validation Hook',
  input: 'text',
  inputValidator: (value) => {
    if (!value) return 'This field is required';
    if (value.length < 3) return 'Minimum 3 characters';
    return null; // Valid
  }
});

// Dynamic Content Updates
const modal = await Swal.modal({
  title: 'Loading Data...',
  allowOutsideClick: false,
  didOpen: async () => {
    Swal.showLoading();
    const data = await fetchData();
    Swal.update({
      title: 'Data Loaded!',
      html: `<p>Found ${data.count} items</p>`
    });
    Swal.hideLoading();
  }
});

// Progress Bar Updates
Swal.modal({
  title: 'Processing...',
  html: '<div id="progress">0%</div>',
  allowOutsideClick: false,
  didOpen: async () => {
    for (let i = 0; i <= 100; i += 10) {
      document.getElementById('progress').textContent = i + '%';
      await delay(200);
    }
    Swal.close();
  }
});

// Button State Management
Swal.modal({
  title: 'Button States',
  showCancelButton: true,
  didOpen: () => {
    const confirmBtn = Swal.getConfirmButton();
    confirmBtn.disabled = true;
    confirmBtn.textContent = 'Please wait...';
    setTimeout(() => {
      confirmBtn.disabled = false;
      confirmBtn.textContent = 'Ready!';
    }, 2000);
  }
});

// Sequential Modal Queue
Swal.queue([
  { title: 'Step 1', text: 'First step' },
  { title: 'Step 2', text: 'Second step' },
  { title: 'Step 3', text: 'Final step' }
]).then((results) => {
  console.log('All steps completed:', results);
});

// Queue with Progress Indicator
const steps = ['Info', 'Details', 'Confirm'];
Swal.mixin({
  progressSteps: steps,
  confirmButtonText: 'Next'
}).queue(
  steps.map((step, i) => ({
    title: step,
    currentProgressStep: i
  }))
);

// ARIA Accessibility Labels
Swal.modal({
  title: 'Accessible Modal',
  text: 'Fully accessible with screen readers.',
  ariaLabel: 'Important notification modal',
  role: 'alertdialog',
  ariaDescribedby: 'modal-description'
});

// Focus Trap Demo
Swal.modal({
  title: 'Focus Trap',
  html: `
    <input type="text" placeholder="First field">
    <input type="text" placeholder="Second field">
    <button>Button</button>
  `,
  focusTrap: true,
  returnFocus: true
});

// Static Backdrop (no dismiss on click)
Swal.modal({
  title: 'Static Backdrop',
  text: 'Click outside - nothing happens!',
  allowOutsideClick: false,
  backdrop: 'static'
});

// Heavy Blur Backdrop
Swal.modal({
  title: 'Heavy Blur',
  text: 'Background is heavily blurred.',
  backdrop: 'blur(20px)'
});

// Colored Backdrop
Swal.modal({
  title: 'Colored Backdrop',
  text: 'Custom backdrop color.',
  backdrop: 'rgba(99, 102, 241, 0.4)'
});

// No Backdrop
Swal.modal({
  title: 'No Backdrop',
  text: 'Modal without backdrop.',
  backdrop: false
});

// Timer with Pause on Hover
Swal.modal({
  title: 'Hover to Pause',
  text: 'Timer pauses when you hover.',
  timer: 5000,
  timerProgressBar: true,
  didOpen: (el) => {
    el.addEventListener('mouseenter', Swal.stopTimer);
    el.addEventListener('mouseleave', Swal.resumeTimer);
  }
});

// Custom Progress Bar
Swal.modal({
  title: 'Custom Progress',
  timer: 3000,
  timerProgressBar: true,
  customClass: {
    timerProgressBar: 'custom-progress-bar'
  }
});

// Timer Callback
Swal.modal({
  title: 'Timer Callback',
  timer: 3000,
  timerProgressBar: true
}).then((result) => {
  if (result.dismiss === Swal.DismissReason.timer) {
    console.log('Closed by timer!');
  }
});