Providing Feedback

{
  "http": {
    "400": {
      "code": "BAD_REQUEST",
      "message": "The request was invalid",
      "userMessage": "Please check your input and try again",
      "suggestions": [
        "Verify all required fields are filled",
        "Check for invalid characters",
        "Ensure data formats are correct"
      ]
    },
    "401": {
      "code": "UNAUTHORIZED",
      "message": "Authentication required",
      "userMessage": "Please sign in to continue",
      "suggestions": [
        "Sign in with your account",
        "Check your credentials",
        "Request a password reset if needed"
      ]
    },
    "403": {
      "code": "FORBIDDEN",
      "message": "Access denied",
      "userMessage": "You don't have permission to access this resource",
      "suggestions": [
        "Contact your administrator",
        "Request access permissions",
        "Check if you're using the right account"
      ]
    },
    "404": {
      "code": "NOT_FOUND",
      "message": "Resource not found",
      "userMessage": "We couldn't find what you're looking for",
      "suggestions": [
        "Check the URL or link",
        "The item may have been moved or deleted",
        "Try searching for it"
      ]
    },
    "409": {
      "code": "CONFLICT",
      "message": "Resource conflict",
      "userMessage": "This conflicts with existing data",
      "suggestions": [
        "Refresh and try again",
        "Check for duplicate entries",
        "Someone else may have made changes"
      ]
    },
    "413": {
      "code": "PAYLOAD_TOO_LARGE",
      "message": "Request entity too large",
      "userMessage": "The file or data is too large",
      "suggestions": [
        "Reduce file size",
        "Split into smaller parts",
        "Compress the data"
      ]
    },
    "422": {
      "code": "UNPROCESSABLE_ENTITY",
      "message": "Validation failed",
      "userMessage": "Please fix the validation errors",
      "suggestions": [
        "Review highlighted fields",
        "Check data formats",
        "Ensure all requirements are met"
      ]
    },
    "429": {
      "code": "TOO_MANY_REQUESTS",
      "message": "Rate limit exceeded",
      "userMessage": "Too many requests. Please wait a moment",
      "suggestions": [
        "Wait before trying again",
        "Reduce request frequency",
        "Consider upgrading your plan"
      ]
    },
    "500": {
      "code": "INTERNAL_SERVER_ERROR",
      "message": "Server error",
      "userMessage": "Something went wrong on our end",
      "suggestions": [
        "Try again in a few moments",
        "If the problem persists, contact support",
        "Check our status page"
      ]
    },
    "502": {
      "code": "BAD_GATEWAY",
      "message": "Gateway error",
      "userMessage": "We're having trouble connecting to our servers",
      "suggestions": [
        "Wait a moment and try again",
        "Check your internet connection",
        "The service may be temporarily unavailable"
      ]
    },
    "503": {
      "code": "SERVICE_UNAVAILABLE",
      "message": "Service unavailable",
      "userMessage": "The service is temporarily unavailable",
      "suggestions": [
        "Try again in a few minutes",
        "Check our status page for updates",
        "We may be performing maintenance"
      ]
    },
    "504": {
      "code": "GATEWAY_TIMEOUT",
      "message": "Gateway timeout",
      "userMessage": "The request took too long to process",
      "suggestions": [
        "Try again with less data",
        "The server may be busy",
        "Check your internet connection"
      ]
    }
  },
  "application": {
    "AUTH001": {
      "message": "Invalid credentials",
      "userMessage": "Email or password is incorrect",
      "suggestions": [
        "Check your email and password",
        "Passwords are case-sensitive",
        "Reset your password if forgotten"
      ]
    },
    "AUTH002": {
      "message": "Session expired",
      "userMessage": "Your session has expired. Please sign in again",
      "suggestions": [
        "Sign in again to continue",
        "This happens for security reasons",
        "Your work has been saved"
      ]
    },
    "AUTH003": {
      "message": "Account locked",
      "userMessage": "Your account has been temporarily locked",
      "suggestions": [
        "Too many failed login attempts",
        "Wait 15 minutes and try again",
        "Contact support if you need immediate access"
      ]
    },
    "FILE001": {
      "message": "Invalid file type",
      "userMessage": "This file type is not supported",
      "suggestions": [
        "Supported types: JPG, PNG, PDF, DOC",
        "Convert your file to a supported format",
        "Check file extension is correct"
      ]
    },
    "FILE002": {
      "message": "File too large",
      "userMessage": "File exceeds maximum size of {maxSize}",
      "suggestions": [
        "Compress or resize the file",
        "Split into multiple smaller files",
        "Upgrade for larger file limits"
      ]
    },
    "FILE003": {
      "message": "File corrupted",
      "userMessage": "The file appears to be corrupted",
      "suggestions": [
        "Try uploading again",
        "Check the original file",
        "Use a different file"
      ]
    },
    "DATA001": {
      "message": "Duplicate entry",
      "userMessage": "This item already exists",
      "suggestions": [
        "Use a different name",
        "Edit the existing item instead",
        "Check for typos"
      ]
    },
    "DATA002": {
      "message": "Referenced item not found",
      "userMessage": "A related item could not be found",
      "suggestions": [
        "The item may have been deleted",
        "Refresh and try again",
        "Select a different item"
      ]
    },
    "DATA003": {
      "message": "Data integrity error",
      "userMessage": "Data validation failed",
      "suggestions": [
        "Check all required fields",
        "Ensure data formats are correct",
        "Some fields may have changed"
      ]
    },
    "NETWORK001": {
      "message": "No internet connection",
      "userMessage": "You appear to be offline",
      "suggestions": [
        "Check your internet connection",
        "Try again when connected",
        "Some features work offline"
      ]
    },
    "NETWORK002": {
      "message": "Connection timeout",
      "userMessage": "The connection timed out",
      "suggestions": [
        "Check your internet speed",
        "Try again with a stable connection",
        "The server may be slow"
      ]
    },
    "PAYMENT001": {
      "message": "Payment failed",
      "userMessage": "We couldn't process your payment",
      "suggestions": [
        "Check your payment details",
        "Ensure sufficient funds",
        "Try a different payment method"
      ]
    },
    "PAYMENT002": {
      "message": "Subscription expired",
      "userMessage": "Your subscription has expired",
      "suggestions": [
        "Renew your subscription",
        "Update payment method",
        "Choose a different plan"
      ]
    },
    "LIMIT001": {
      "message": "Storage limit reached",
      "userMessage": "You've reached your storage limit",
      "suggestions": [
        "Delete unused files",
        "Upgrade your storage plan",
        "Download and remove old files"
      ]
    },
    "LIMIT002": {
      "message": "API limit exceeded",
      "userMessage": "You've exceeded your API limit",
      "suggestions": [
        "Wait until limit resets",
        "Upgrade to a higher plan",
        "Reduce API usage"
      ]
    }
  },
  "validation": {
    "REQUIRED_FIELD": {
      "message": "Required field missing",
      "userMessage": "{fieldName} is required",
      "fieldLevel": true
    },
    "INVALID_EMAIL": {
      "message": "Invalid email format",
      "userMessage": "Please enter a valid email address",
      "fieldLevel": true,
      "pattern": "^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$"
    },
    "INVALID_PHONE": {
      "message": "Invalid phone format",
      "userMessage": "Please enter a valid phone number",
      "fieldLevel": true,
      "pattern": "^[\\+]?[\\d\\s\\-\\(\\)]+$"
    },
    "INVALID_URL": {
      "message": "Invalid URL format",
      "userMessage": "Please enter a valid URL",
      "fieldLevel": true,
      "pattern": "^https?:\\/\\/.+"
    },
    "PASSWORD_TOO_WEAK": {
      "message": "Password doesn't meet requirements",
      "userMessage": "Password must be at least 8 characters with uppercase, lowercase, and numbers",
      "fieldLevel": true
    },
    "PASSWORDS_DONT_MATCH": {
      "message": "Password confirmation failed",
      "userMessage": "Passwords don't match",
      "fieldLevel": true
    },
    "VALUE_TOO_SHORT": {
      "message": "Value too short",
      "userMessage": "Must be at least {minLength} characters",
      "fieldLevel": true
    },
    "VALUE_TOO_LONG": {
      "message": "Value too long",
      "userMessage": "Must be no more than {maxLength} characters",
      "fieldLevel": true
    },
    "INVALID_DATE": {
      "message": "Invalid date",
      "userMessage": "Please enter a valid date",
      "fieldLevel": true
    },
    "DATE_IN_PAST": {
      "message": "Date cannot be in the past",
      "userMessage": "Please select a future date",
      "fieldLevel": true
    },
    "DATE_IN_FUTURE": {
      "message": "Date cannot be in the future",
      "userMessage": "Please select a past date",
      "fieldLevel": true
    },
    "INVALID_NUMBER": {
      "message": "Invalid number",
      "userMessage": "Please enter a valid number",
      "fieldLevel": true
    },
    "NUMBER_OUT_OF_RANGE": {
      "message": "Number out of range",
      "userMessage": "Must be between {min} and {max}",
      "fieldLevel": true
    }
  }
}

{
  "success": {
    "create": {
      "default": "{item} created successfully",
      "withId": "{item} created with ID: {id}",
      "withName": "'{name}' created successfully"
    },
    "update": {
      "default": "{item} updated successfully",
      "withChanges": "{count} changes saved",
      "withTime": "Last updated at {time}"
    },
    "delete": {
      "default": "{item} deleted successfully",
      "withUndo": "{item} deleted. Undo",
      "permanent": "{item} permanently deleted"
    },
    "save": {
      "default": "Changes saved",
      "withLocation": "Saved to {location}",
      "autosave": "Autosaved at {time}"
    },
    "upload": {
      "single": "{filename} uploaded successfully",
      "multiple": "{count} files uploaded",
      "withSize": "{filename} ({size}) uploaded"
    },
    "download": {
      "started": "Download started",
      "complete": "{filename} downloaded",
      "multiple": "{count} files downloaded"
    },
    "copy": {
      "default": "Copied to clipboard",
      "withContent": "'{content}' copied",
      "link": "Link copied to clipboard"
    },
    "share": {
      "default": "Shared successfully",
      "withUsers": "Shared with {count} users",
      "public": "Public link created"
    },
    "sync": {
      "default": "Sync complete",
      "withDevices": "Synced across {count} devices",
      "withTime": "Last synced: {time}"
    }
  },
  "error": {
    "network": {
      "offline": "No internet connection",
      "timeout": "Request timed out",
      "serverError": "Server error. Please try again",
      "notFound": "Resource not found"
    },
    "auth": {
      "unauthorized": "Please sign in to continue",
      "forbidden": "You don't have permission",
      "sessionExpired": "Session expired. Please sign in again",
      "invalidCredentials": "Invalid email or password"
    },
    "validation": {
      "required": "{field} is required",
      "invalidFormat": "Invalid {field} format",
      "tooLong": "{field} is too long",
      "tooShort": "{field} is too short",
      "invalidEmail": "Please enter a valid email",
      "invalidPhone": "Please enter a valid phone number",
      "invalidUrl": "Please enter a valid URL",
      "passwordMismatch": "Passwords don't match"
    },
    "file": {
      "tooLarge": "File size exceeds {maxSize}",
      "invalidType": "Invalid file type. Accepted: {types}",
      "uploadFailed": "Upload failed. Please try again",
      "processingFailed": "Failed to process file"
    },
    "data": {
      "saveFailed": "Failed to save changes",
      "loadFailed": "Failed to load data",
      "deleteFailed": "Failed to delete item",
      "conflictError": "Conflict detected. Please refresh"
    },
    "limit": {
      "rateLimited": "Too many requests. Please wait",
      "quotaExceeded": "Quota exceeded",
      "storageLimit": "Storage limit reached"
    }
  },
  "warning": {
    "unsavedChanges": "You have unsaved changes",
    "deleteConfirm": "Are you sure you want to delete {item}?",
    "permanentAction": "This action cannot be undone",
    "largeOperation": "This may take several minutes",
    "deprecation": "This feature will be removed soon",
    "compatibility": "Some features may not work in your browser",
    "slowConnection": "Slow connection detected",
    "limitApproaching": "You're approaching your {limit} limit",
    "maintenanceScheduled": "Maintenance scheduled for {time}"
  },
  "info": {
    "loading": {
      "default": "Loading...",
      "withItem": "Loading {item}...",
      "percentage": "Loading... {progress}%"
    },
    "processing": {
      "default": "Processing...",
      "withEstimate": "Processing... About {time} remaining",
      "withStep": "Processing step {current} of {total}"
    },
    "searching": {
      "default": "Searching...",
      "withQuery": "Searching for '{query}'...",
      "withCount": "Found {count} results"
    },
    "empty": {
      "default": "No items found",
      "search": "No results for '{query}'",
      "filter": "No items match your filters",
      "firstUse": "Get started by creating your first {item}"
    },
    "help": {
      "keyboard": "Press {key} for keyboard shortcuts",
      "drag": "Drag to reorder",
      "click": "Click to select",
      "hover": "Hover for more info"
    },
    "status": {
      "online": "Connected",
      "offline": "Working offline",
      "syncing": "Syncing...",
      "saved": "All changes saved",
      "draft": "Draft",
      "published": "Published"
    }
  },
  "confirmation": {
    "titles": {
      "delete": "Delete {item}?",
      "remove": "Remove {item}?",
      "cancel": "Cancel {action}?",
      "discard": "Discard changes?",
      "logout": "Sign out?",
      "leave": "Leave page?"
    },
    "messages": {
      "deleteItem": "This will permanently delete {item}. This action cannot be undone.",
      "discardChanges": "All unsaved changes will be lost.",
      "cancelOperation": "The current operation will be cancelled and any progress will be lost.",
      "logout": "You will be signed out from all devices.",
      "bulkAction": "This will affect {count} items."
    },
    "actions": {
      "confirmDelete": "Delete",
      "confirmRemove": "Remove",
      "confirmDiscard": "Discard",
      "confirmCancel": "Cancel Operation",
      "confirmLogout": "Sign Out",
      "confirmLeave": "Leave",
      "cancel": "Cancel",
      "goBack": "Go Back",
      "saveFirst": "Save First"
    }
  },
  "progress": {
    "upload": {
      "starting": "Starting upload...",
      "uploading": "Uploading {filename}... {progress}%",
      "processing": "Processing uploaded file...",
      "complete": "Upload complete"
    },
    "download": {
      "preparing": "Preparing download...",
      "downloading": "Downloading... {progress}%",
      "complete": "Download complete"
    },
    "install": {
      "checking": "Checking for updates...",
      "downloading": "Downloading update...",
      "installing": "Installing...",
      "complete": "Installation complete"
    },
    "export": {
      "preparing": "Preparing export...",
      "generating": "Generating {format} file...",
      "compressing": "Compressing files...",
      "complete": "Export ready"
    }
  },
  "accessibility": {
    "announcements": {
      "error": "Error: {message}",
      "warning": "Warning: {message}",
      "success": "Success: {message}",
      "info": "Information: {message}",
      "loading": "Loading {item}, please wait",
      "loaded": "{item} loaded",
      "updated": "{item} updated",
      "deleted": "{item} deleted"
    },
    "descriptions": {
      "close": "Close notification",
      "dismiss": "Dismiss message",
      "expand": "Show more information",
      "collapse": "Show less information",
      "retry": "Try again",
      "undo": "Undo last action"
    }
  }
}

{
  "toast": {
    "durations": {
      "success": {
        "base": 3000,
        "min": 2000,
        "max": 5000,
        "description": "Brief positive confirmation"
      },
      "info": {
        "base": 4000,
        "min": 3000,
        "max": 6000,
        "description": "Informational message"
      },
      "warning": {
        "base": 5000,
        "min": 4000,
        "max": 7000,
        "description": "Important notice requiring attention"
      },
      "error": {
        "base": 7000,
        "min": 5000,
        "max": 10000,
        "description": "Error message requiring reading time"
      },
      "withAction": {
        "base": null,
        "min": 10000,
        "max": null,
        "description": "Never auto-dismiss when action button present"
      }
    },
    "readingSpeed": {
      "fast": 250,
      "average": 200,
      "slow": 150,
      "unit": "words per minute"
    },
    "stacking": {
      "maxVisible": 5,
      "spacing": 12,
      "strategy": {
        "queue": {
          "maxVisible": 1,
          "showNext": "after-dismiss"
        },
        "stack": {
          "maxVisible": 5,
          "showNext": "immediate"
        },
        "replace": {
          "maxVisible": 1,
          "showNext": "replace"
        }
      }
    },
    "animations": {
      "enter": {
        "duration": 300,
        "easing": "ease-out"
      },
      "exit": {
        "duration": 200,
        "easing": "ease-in"
      },
      "update": {
        "duration": 150,
        "easing": "ease-in-out"
      }
    }
  },
  "modal": {
    "animations": {
      "backdrop": {
        "enter": 200,
        "exit": 150
      },
      "content": {
        "enter": 200,
        "exit": 150
      },
      "scale": {
        "from": 0.95,
        "to": 1
      }
    },
    "dismissible": {
      "clickOutside": true,
      "escapeKey": true,
      "exceptions": ["critical", "confirmation"]
    }
  },
  "progress": {
    "thresholds": {
      "immediate": {
        "max": 100,
        "indicator": "none",
        "description": "No indicator needed"
      },
      "quick": {
        "min": 100,
        "max": 1000,
        "indicator": "spinner-small",
        "description": "Small spinner only"
      },
      "moderate": {
        "min": 1000,
        "max": 5000,
        "indicator": "spinner-with-text",
        "description": "Spinner with loading message"
      },
      "long": {
        "min": 5000,
        "max": 30000,
        "indicator": "progress-bar",
        "description": "Determinate progress bar if possible"
      },
      "veryLong": {
        "min": 30000,
        "max": null,
        "indicator": "progress-bar-with-cancel",
        "description": "Progress bar with time estimate and cancel option"
      }
    },
    "updates": {
      "spinner": {
        "showElapsedAfter": 10000,
        "updateInterval": 1000
      },
      "progressBar": {
        "updateInterval": 250,
        "smoothTransition": true
      },
      "timeEstimate": {
        "showAfter": 5000,
        "updateInterval": 1000,
        "algorithm": "moving-average"
      }
    }
  },
  "alert": {
    "dismissTiming": {
      "info": {
        "autoDismiss": false,
        "userDismissible": true
      },
      "success": {
        "autoDismiss": 5000,
        "userDismissible": true
      },
      "warning": {
        "autoDismiss": false,
        "userDismissible": true
      },
      "error": {
        "autoDismiss": false,
        "userDismissible": false,
        "dismissAfterAction": true
      }
    }
  },
  "emptyState": {
    "animations": {
      "enter": {
        "duration": 400,
        "stagger": 100,
        "easing": "ease-out"
      },
      "illustration": {
        "float": {
          "enabled": true,
          "duration": 3000,
          "distance": 10
        }
      }
    }
  },
  "accessibility": {
    "announcements": {
      "debounce": 500,
      "priority": {
        "error": "assertive",
        "warning": "assertive",
        "success": "polite",
        "info": "polite"
      }
    },
    "focus": {
      "trapDelay": 0,
      "restoreDelay": 0,
      "autoFocus": {
        "modal": true,
        "alert": false,
        "toast": false
      }
    },
    "reducedMotion": {
      "detect": true,
      "overrides": {
        "animations": 0,
        "transitions": 0.01,
        "smoothScroll": false
      }
    }
  },
  "mobile": {
    "toast": {
      "position": "bottom-center",
      "fullWidth": true,
      "swipeToDismiss": true,
      "swipeThreshold": 100
    },
    "modal": {
      "fullScreen": true,
      "slideUp": true,
      "dragToDismiss": true,
      "dragThreshold": 150
    },
    "touchTargets": {
      "minSize": 44,
      "recommendedSize": 48,
      "unit": "pixels"
    }
  },
  "performance": {
    "batchUpdates": {
      "enabled": true,
      "debounce": 16,
      "maxBatch": 10
    },
    "virtualScrolling": {
      "enabled": true,
      "threshold": 50,
      "overscan": 3
    },
    "lazyLoading": {
      "enabled": true,
      "threshold": 100,
      "rootMargin": "50px"
    }
  },
  "defaults": {
    "position": "bottom-right",
    "theme": "auto",
    "sound": false,
    "vibration": false,
    "persistence": {
      "saveState": false,
      "clearOnReload": true
    }
  }
}

import React, { useState, useRef, useEffect } from 'react';
import * as Dialog from '@radix-ui/react-dialog';
import { Transition } from '@headlessui/react';

/**
 * Confirmation Modal Implementation Examples
 *
 * Demonstrates deletion confirmations and other critical actions
 * using both Radix UI and Headless UI
 */

// Radix UI Confirmation Modal
export function RadixConfirmationModal() {
  const [itemToDelete, setItemToDelete] = useState(null);

  const handleDelete = async () => {
    if (!itemToDelete) return;

    try {
      // Perform deletion
      await deleteItem(itemToDelete.id);
      toast.success(`${itemToDelete.name} deleted successfully`);
      setItemToDelete(null);
    } catch (error) {
      toast.error('Failed to delete item');
    }
  };

  return (
    <Dialog.Root open={!!itemToDelete} onOpenChange={(open) => !open && setItemToDelete(null)}>
      <Dialog.Portal>
        <Dialog.Overlay className="modal-overlay" />

        <Dialog.Content className="modal-content">
          <Dialog.Title className="modal-title">
            Confirm Deletion
          </Dialog.Title>

          <Dialog.Description className="modal-description">
            Are you sure you want to delete "{itemToDelete?.name}"?
            This action cannot be undone.
          </Dialog.Description>

          <div className="modal-actions">
            <Dialog.Close asChild>
              <button className="btn-secondary">
                Cancel
              </button>
            </Dialog.Close>

            <button
              onClick={handleDelete}
              className="btn-danger"
              autoFocus
            >
              Delete
            </button>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

// Headless UI Confirmation Modal
export function HeadlessConfirmationModal({ isOpen, onClose, onConfirm, item }) {
  const [isDeleting, setIsDeleting] = useState(false);
  const cancelButtonRef = useRef(null);

  const handleConfirm = async () => {
    setIsDeleting(true);
    try {
      await onConfirm();
      onClose();
    } catch (error) {
      console.error('Deletion failed:', error);
    } finally {
      setIsDeleting(false);
    }
  };

  return (
    <Transition.Root show={isOpen} as={React.Fragment}>
      <Dialog
        as="div"
        className="relative z-50"
        initialFocus={cancelButtonRef}
        onClose={onClose}
      >
        <Transition.Child
          as={React.Fragment}
          enter="ease-out duration-300"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="ease-in duration-200"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-black bg-opacity-50 transition-opacity" />
        </Transition.Child>

        <div className="fixed inset-0 z-10 overflow-y-auto">
          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
            <Transition.Child
              as={React.Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
              enterTo="opacity-100 translate-y-0 sm:scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            >
              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
                <div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                  <div className="sm:flex sm:items-start">
                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                      <ExclamationTriangleIcon
                        className="h-6 w-6 text-red-600"
                        aria-hidden="true"
                      />
                    </div>
                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                      <Dialog.Title
                        as="h3"
                        className="text-base font-semibold leading-6 text-gray-900"
                      >
                        Delete {item?.type || 'item'}
                      </Dialog.Title>
                      <div className="mt-2">
                        <p className="text-sm text-gray-500">
                          Are you sure you want to delete "{item?.name}"?
                          All of the data will be permanently removed.
                          This action cannot be undone.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
                  <button
                    type="button"
                    className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
                    onClick={handleConfirm}
                    disabled={isDeleting}
                  >
                    {isDeleting ? 'Deleting...' : 'Delete'}
                  </button>
                  <button
                    type="button"
                    className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
                    onClick={onClose}
                    ref={cancelButtonRef}
                    disabled={isDeleting}
                  >
                    Cancel
                  </button>
                </div>
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </div>
      </Dialog>
    </Transition.Root>
  );
}

// Custom Confirmation Modal with Focus Management
export function CustomConfirmationModal({
  isOpen,
  onClose,
  onConfirm,
  title = 'Confirm Action',
  message = 'Are you sure you want to proceed?',
  confirmText = 'Confirm',
  cancelText = 'Cancel',
  type = 'warning' // 'warning', 'danger', 'info'
}) {
  const modalRef = useRef(null);
  const previousFocusRef = useRef(null);
  const confirmButtonRef = useRef(null);

  // Focus management
  useEffect(() => {
    if (isOpen) {
      // Save current focus
      previousFocusRef.current = document.activeElement;

      // Focus confirm button (most dangerous action)
      setTimeout(() => {
        confirmButtonRef.current?.focus();
      }, 0);

      // Add ESC key handler
      const handleEscape = (e) => {
        if (e.key === 'Escape') {
          onClose();
        }
      };
      document.addEventListener('keydown', handleEscape);

      return () => {
        document.removeEventListener('keydown', handleEscape);
      };
    } else {
      // Restore focus when closing
      previousFocusRef.current?.focus();
    }
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  const getIconForType = () => {
    switch (type) {
      case 'danger':
        return '⚠️';
      case 'warning':
        return '⚠';
      case 'info':
        return 'ℹ';
      default:
        return '?';
    }
  };

  const getColorForType = () => {
    switch (type) {
      case 'danger':
        return 'red';
      case 'warning':
        return 'yellow';
      case 'info':
        return 'blue';
      default:
        return 'gray';
    }
  };

  return (
    <div
      className="modal-root"
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
      aria-describedby="modal-description"
      ref={modalRef}
    >
      <div
        className="modal-backdrop"
        onClick={onClose}
        aria-hidden="true"
      />

      <div className="modal-container">
        <div className={`modal-icon modal-icon-${type}`}>
          {getIconForType()}
        </div>

        <h2 id="modal-title" className="modal-title">
          {title}
        </h2>

        <p id="modal-description" className="modal-description">
          {message}
        </p>

        <div className="modal-actions">
          <button
            onClick={onClose}
            className="btn-secondary"
          >
            {cancelText}
          </button>

          <button
            ref={confirmButtonRef}
            onClick={onConfirm}
            className={`btn-primary btn-${type}`}
          >
            {confirmText}
          </button>
        </div>
      </div>
    </div>
  );
}

// Unsaved Changes Confirmation
export function UnsavedChangesModal({ isOpen, onClose, onDiscard, onSave }) {
  return (
    <Dialog.Root open={isOpen} onOpenChange={onClose}>
      <Dialog.Portal>
        <Dialog.Overlay className="modal-overlay" />

        <Dialog.Content className="modal-content">
          <Dialog.Title>Unsaved Changes</Dialog.Title>

          <Dialog.Description>
            You have unsaved changes. What would you like to do?
          </Dialog.Description>

          <div className="modal-actions-three">
            <Dialog.Close asChild>
              <button className="btn-secondary">
                Cancel
              </button>
            </Dialog.Close>

            <button
              onClick={onDiscard}
              className="btn-danger-outline"
            >
              Discard Changes
            </button>

            <button
              onClick={onSave}
              className="btn-primary"
              autoFocus
            >
              Save Changes
            </button>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

// Bulk Action Confirmation
export function BulkActionModal({ isOpen, onClose, onConfirm, selectedItems, action }) {
  const itemCount = selectedItems?.length || 0;
  const itemLabel = itemCount === 1 ? 'item' : 'items';

  const getActionMessage = () => {
    switch (action) {
      case 'delete':
        return `permanently delete ${itemCount} ${itemLabel}`;
      case 'archive':
        return `archive ${itemCount} ${itemLabel}`;
      case 'export':
        return `export ${itemCount} ${itemLabel}`;
      default:
        return `perform this action on ${itemCount} ${itemLabel}`;
    }
  };

  return (
    <Dialog.Root open={isOpen} onOpenChange={onClose}>
      <Dialog.Portal>
        <Dialog.Overlay className="modal-overlay" />

        <Dialog.Content className="modal-content">
          <Dialog.Title>Confirm Bulk Action</Dialog.Title>

          <Dialog.Description>
            You are about to {getActionMessage()}.
          </Dialog.Description>

          {itemCount > 5 && (
            <div className="modal-warning">
              <InfoIcon />
              <span>This is a large number of items and may take some time.</span>
            </div>
          )}

          <div className="selected-items-preview">
            <h4>Selected Items:</h4>
            <ul className="item-list">
              {selectedItems?.slice(0, 5).map(item => (
                <li key={item.id}>{item.name}</li>
              ))}
              {itemCount > 5 && (
                <li className="more-items">...and {itemCount - 5} more</li>
              )}
            </ul>
          </div>

          <div className="modal-actions">
            <Dialog.Close asChild>
              <button className="btn-secondary">
                Cancel
              </button>
            </Dialog.Close>

            <button
              onClick={() => onConfirm(selectedItems)}
              className={`btn-primary ${action === 'delete' ? 'btn-danger' : ''}`}
            >
              {action === 'delete' ? 'Delete All' : 'Confirm'}
            </button>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

// Styles for confirmation modals
const styles = `
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    animation: overlay-fade-in 200ms ease-out;
  }

  .modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 8px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    animation: modal-enter 200ms ease-out;
  }

  .modal-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .modal-description {
    color: #6b7280;
    margin-bottom: 24px;
    line-height: 1.5;
  }

  .modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
  }

  .modal-actions-three {
    display: flex;
    gap: 12px;
    justify-content: space-between;
  }

  .btn-danger {
    background: #ef4444;
    color: white;
  }

  .btn-danger:hover {
    background: #dc2626;
  }

  .btn-danger-outline {
    border: 1px solid #ef4444;
    color: #ef4444;
  }

  .modal-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 6px;
    margin-bottom: 16px;
    color: #92400e;
  }

  .selected-items-preview {
    background: #f9fafb;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 24px;
  }

  .item-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
  }

  .item-list li {
    padding: 4px 0;
    color: #4b5563;
  }

  .more-items {
    font-style: italic;
    color: #9ca3af;
  }

  @keyframes overlay-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes modal-enter {
    from {
      opacity: 0;
      transform: translate(-50%, -48%) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .modal-overlay,
    .modal-content {
      animation: none;
    }
  }
`;

import React, { useState, useEffect } from 'react';

/**
 * Inline Form Validation Examples
 *
 * Demonstrates real-time form validation with inline error messages
 * and field-level feedback
 */

// Real-time Form Validation Component
export function FormWithInlineValidation() {
  const [formData, setFormData] = useState({
    email: '',
    password: '',
    confirmPassword: '',
    username: '',
    phone: '',
    website: ''
  });

  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  // Validation rules
  const validationRules = {
    email: {
      required: true,
      pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
      message: 'Please enter a valid email address'
    },
    password: {
      required: true,
      minLength: 8,
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
      message: 'Password must be at least 8 characters with uppercase, lowercase, and number'
    },
    confirmPassword: {
      required: true,
      match: 'password',
      message: 'Passwords do not match'
    },
    username: {
      required: true,
      minLength: 3,
      maxLength: 20,
      pattern: /^[a-zA-Z0-9_]+$/,
      message: 'Username must be 3-20 characters, alphanumeric and underscore only'
    },
    phone: {
      pattern: /^\+?[\d\s-()]+$/,
      minLength: 10,
      message: 'Please enter a valid phone number'
    },
    website: {
      pattern: /^https?:\/\/.+\..+/,
      message: 'Please enter a valid URL starting with http:// or https://'
    }
  };

  // Validate single field
  const validateField = (name, value) => {
    const rules = validationRules[name];
    if (!rules) return '';

    // Required check
    if (rules.required && !value) {
      return `${name.charAt(0).toUpperCase() + name.slice(1)} is required`;
    }

    // Pattern check
    if (rules.pattern && value && !rules.pattern.test(value)) {
      return rules.message;
    }

    // Min length check
    if (rules.minLength && value && value.length < rules.minLength) {
      return `Must be at least ${rules.minLength} characters`;
    }

    // Max length check
    if (rules.maxLength && value && value.length > rules.maxLength) {
      return `Must be no more than ${rules.maxLength} characters`;
    }

    // Match check (for confirm password)
    if (rules.match && value !== formData[rules.match]) {
      return rules.message;
    }

    return '';
  };

  // Handle input change
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));

    // Real-time validation if field has been touched
    if (touched[name]) {
      const error = validateField(name, value);
      setErrors(prev => ({ ...prev, [name]: error }));
    }
  };

  // Handle field blur
  const handleBlur = (e) => {
    const { name, value } = e.target;
    setTouched(prev => ({ ...prev, [name]: true }));

    // Validate on blur
    const error = validateField(name, value);
    setErrors(prev => ({ ...prev, [name]: error }));
  };

  // Validate entire form
  const validateForm = () => {
    const newErrors = {};
    Object.keys(formData).forEach(key => {
      const error = validateField(key, formData[key]);
      if (error) newErrors[key] = error;
    });
    return newErrors;
  };

  // Handle form submission
  const handleSubmit = async (e) => {
    e.preventDefault();

    // Mark all fields as touched
    const allTouched = {};
    Object.keys(formData).forEach(key => {
      allTouched[key] = true;
    });
    setTouched(allTouched);

    // Validate all fields
    const newErrors = validateForm();
    setErrors(newErrors);

    if (Object.keys(newErrors).length === 0) {
      setIsSubmitting(true);

      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 2000));

      console.log('Form submitted:', formData);
      // Show success message
      toast.success('Form submitted successfully!');

      setIsSubmitting(false);
    } else {
      // Focus first error field
      const firstErrorField = Object.keys(newErrors)[0];
      document.getElementById(firstErrorField)?.focus();

      // Show error toast
      toast.error('Please fix the errors before submitting');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="validation-form">
      <h2>Registration Form</h2>

      {/* Email Field */}
      <FormField
        id="email"
        label="Email Address"
        type="email"
        value={formData.email}
        onChange={handleChange}
        onBlur={handleBlur}
        error={errors.email}
        touched={touched.email}
        required
      />

      {/* Username Field */}
      <FormField
        id="username"
        label="Username"
        type="text"
        value={formData.username}
        onChange={handleChange}
        onBlur={handleBlur}
        error={errors.username}
        touched={touched.username}
        required
        helpText="3-20 characters, letters, numbers, and underscore only"
      />

      {/* Password Field */}
      <FormField
        id="password"
        label="Password"
        type="password"
        value={formData.password}
        onChange={handleChange}
        onBlur={handleBlur}
        error={errors.password}
        touched={touched.password}
        required
        strength={calculatePasswordStrength(formData.password)}
      />

      {/* Confirm Password Field */}
      <FormField
        id="confirmPassword"
        label="Confirm Password"
        type="password"
        value={formData.confirmPassword}
        onChange={handleChange}
        onBlur={handleBlur}
        error={errors.confirmPassword}
        touched={touched.confirmPassword}
        required
      />

      {/* Phone Field (Optional) */}
      <FormField
        id="phone"
        label="Phone Number"
        type="tel"
        value={formData.phone}
        onChange={handleChange}
        onBlur={handleBlur}
        error={errors.phone}
        touched={touched.phone}
        helpText="Optional"
      />

      {/* Website Field (Optional) */}
      <FormField
        id="website"
        label="Website"
        type="url"
        value={formData.website}
        onChange={handleChange}
        onBlur={handleBlur}
        error={errors.website}
        touched={touched.website}
        helpText="Optional - Include http:// or https://"
      />

      {/* Submit Button */}
      <button
        type="submit"
        disabled={isSubmitting}
        className="btn-primary submit-btn"
      >
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  );
}

// Reusable Form Field Component
function FormField({
  id,
  label,
  type = 'text',
  value,
  onChange,
  onBlur,
  error,
  touched,
  required,
  helpText,
  strength
}) {
  const hasError = touched && error;
  const isValid = touched && !error && value;

  return (
    <div className={`form-field ${hasError ? 'field-error' : ''} ${isValid ? 'field-valid' : ''}`}>
      <label htmlFor={id} className="field-label">
        {label}
        {required && <span className="required-mark">*</span>}
      </label>

      <div className="field-wrapper">
        <input
          id={id}
          name={id}
          type={type}
          value={value}
          onChange={onChange}
          onBlur={onBlur}
          className="field-input"
          aria-invalid={hasError}
          aria-describedby={hasError ? `${id}-error` : helpText ? `${id}-help` : undefined}
        />

        {/* Status icon */}
        <div className="field-icon">
          {hasError && <span className="icon-error">✕</span>}
          {isValid && <span className="icon-success">✓</span>}
        </div>
      </div>

      {/* Password strength indicator */}
      {strength !== undefined && value && (
        <PasswordStrength strength={strength} />
      )}

      {/* Help text */}
      {helpText && !hasError && (
        <div id={`${id}-help`} className="field-help">
          {helpText}
        </div>
      )}

      {/* Error message */}
      {hasError && (
        <div
          id={`${id}-error`}
          className="field-error-message"
          role="alert"
          aria-live="polite"
        >
          {error}
        </div>
      )}
    </div>
  );
}

// Password Strength Indicator
function PasswordStrength({ strength }) {
  const getStrengthLabel = () => {
    if (strength < 2) return 'Weak';
    if (strength < 3) return 'Fair';
    if (strength < 4) return 'Good';
    return 'Strong';
  };

  const getStrengthColor = () => {
    if (strength < 2) return '#ef4444';
    if (strength < 3) return '#f59e0b';
    if (strength < 4) return '#3b82f6';
    return '#10b981';
  };

  return (
    <div className="password-strength">
      <div className="strength-bars">
        {[1, 2, 3, 4].map(level => (
          <div
            key={level}
            className={`strength-bar ${strength >= level ? 'active' : ''}`}
            style={{
              backgroundColor: strength >= level ? getStrengthColor() : '#e5e7eb'
            }}
          />
        ))}
      </div>
      <span className="strength-label" style={{ color: getStrengthColor() }}>
        {getStrengthLabel()}
      </span>
    </div>
  );
}

// Calculate password strength
function calculatePasswordStrength(password) {
  if (!password) return 0;

  let strength = 0;

  // Length
  if (password.length >= 8) strength++;
  if (password.length >= 12) strength++;

  // Character types
  if (/[a-z]/.test(password)) strength += 0.5;
  if (/[A-Z]/.test(password)) strength += 0.5;
  if (/\d/.test(password)) strength += 0.5;
  if (/[^a-zA-Z0-9]/.test(password)) strength += 0.5;

  return Math.min(4, strength);
}

// Async Validation Example (Username availability)
export function AsyncValidationField() {
  const [username, setUsername] = useState('');
  const [isChecking, setIsChecking] = useState(false);
  const [isAvailable, setIsAvailable] = useState(null);
  const [error, setError] = useState('');

  useEffect(() => {
    if (!username || username.length < 3) {
      setIsAvailable(null);
      setError('');
      return;
    }

    const timer = setTimeout(async () => {
      setIsChecking(true);
      setError('');

      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000));

      // Simulate availability check
      const unavailableUsernames = ['admin', 'test', 'user', 'demo'];
      const available = !unavailableUsernames.includes(username.toLowerCase());

      setIsAvailable(available);
      if (!available) {
        setError('Username is already taken');
      }
      setIsChecking(false);
    }, 500); // Debounce for 500ms

    return () => clearTimeout(timer);
  }, [username]);

  return (
    <div className="form-field">
      <label htmlFor="async-username" className="field-label">
        Choose Username
      </label>

      <div className="field-wrapper">
        <input
          id="async-username"
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          className="field-input"
          placeholder="Enter desired username"
        />

        <div className="field-icon">
          {isChecking && <span className="spinner-small">⟳</span>}
          {!isChecking && isAvailable === true && <span className="icon-success">✓</span>}
          {!isChecking && isAvailable === false && <span className="icon-error">✕</span>}
        </div>
      </div>

      {isChecking && (
        <div className="field-help">Checking availability...</div>
      )}

      {!isChecking && isAvailable === true && (
        <div className="field-success">Username is available!</div>
      )}

      {!isChecking && error && (
        <div className="field-error-message" role="alert">
          {error}
        </div>
      )}
    </div>
  );
}

// Dynamic Field Validation (Credit Card)
export function CreditCardValidation() {
  const [cardNumber, setCardNumber] = useState('');
  const [cardType, setCardType] = useState(null);

  const detectCardType = (number) => {
    const cleanNumber = number.replace(/\s/g, '');

    if (/^4/.test(cleanNumber)) return 'visa';
    if (/^5[1-5]/.test(cleanNumber)) return 'mastercard';
    if (/^3[47]/.test(cleanNumber)) return 'amex';
    if (/^6(?:011|5)/.test(cleanNumber)) return 'discover';

    return null;
  };

  const formatCardNumber = (value) => {
    const cleanValue = value.replace(/\s/g, '');
    const chunks = cleanValue.match(/.{1,4}/g) || [];
    return chunks.join(' ');
  };

  const handleCardNumberChange = (e) => {
    const value = e.target.value.replace(/\s/g, '');
    if (/^\d*$/.test(value) && value.length <= 16) {
      const formatted = formatCardNumber(value);
      setCardNumber(formatted);
      setCardType(detectCardType(value));
    }
  };

  return (
    <div className="form-field">
      <label htmlFor="card-number" className="field-label">
        Card Number
      </label>

      <div className="field-wrapper">
        <input
          id="card-number"
          type="text"
          value={cardNumber}
          onChange={handleCardNumberChange}
          placeholder="1234 5678 9012 3456"
          className="field-input"
          maxLength={19}
        />

        {cardType && (
          <div className="card-type-icon">
            {cardType === 'visa' && '💳 Visa'}
            {cardType === 'mastercard' && '💳 Mastercard'}
            {cardType === 'amex' && '💳 Amex'}
            {cardType === 'discover' && '💳 Discover'}
          </div>
        )}
      </div>

      {cardNumber.length === 19 && (
        <div className="field-success">Valid card number format</div>
      )}
    </div>
  );
}

// Styles
const styles = `
  .validation-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 24px;
  }

  .form-field {
    margin-bottom: 20px;
  }

  .field-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 14px;
    color: #374151;
  }

  .required-mark {
    color: #ef4444;
    margin-left: 4px;
  }

  .field-wrapper {
    position: relative;
  }

  .field-input {
    width: 100%;
    padding: 8px 36px 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 16px;
    transition: all 0.2s;
  }

  .field-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }

  .field-error .field-input {
    border-color: #ef4444;
    background-color: #fef2f2;
  }

  .field-error .field-input:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
  }

  .field-valid .field-input {
    border-color: #10b981;
    background-color: #f0fdf4;
  }

  .field-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }

  .icon-error {
    color: #ef4444;
  }

  .icon-success {
    color: #10b981;
  }

  .field-help {
    margin-top: 4px;
    font-size: 14px;
    color: #6b7280;
  }

  .field-error-message {
    margin-top: 4px;
    font-size: 14px;
    color: #ef4444;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .field-success {
    margin-top: 4px;
    font-size: 14px;
    color: #10b981;
  }

  /* Password strength */
  .password-strength {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
  }

  .strength-bars {
    display: flex;
    gap: 4px;
    flex: 1;
  }

  .strength-bar {
    height: 4px;
    flex: 1;
    border-radius: 2px;
    transition: background-color 0.3s;
  }

  .strength-label {
    font-size: 12px;
    font-weight: 500;
  }

  /* Spinner */
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .spinner-small {
    display: inline-block;
    animation: spin 1s linear infinite;
  }

  /* Submit button */
  .submit-btn {
    width: 100%;
    padding: 12px;
    margin-top: 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
  }

  .submit-btn:hover:not(:disabled) {
    background: #2563eb;
  }

  .submit-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
  }

  /* Card type icon */
  .card-type-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
  }
`;

import React, { useState, useEffect, useRef } from 'react';

/**
 * File Upload Progress Examples
 *
 * Demonstrates various progress indicators for file uploads
 * including single and multiple file upload with progress tracking
 */

// Single File Upload with Progress
export function FileUploadProgress({ file, onComplete, onError }) {
  const [progress, setProgress] = useState(0);
  const [status, setStatus] = useState('pending'); // pending, uploading, complete, error
  const [uploadSpeed, setUploadSpeed] = useState(0);
  const [timeRemaining, setTimeRemaining] = useState(null);
  const xhrRef = useRef(null);
  const startTimeRef = useRef(null);
  const lastProgressRef = useRef({ loaded: 0, time: Date.now() });

  useEffect(() => {
    if (status === 'pending') {
      startUpload();
    }

    return () => {
      // Cleanup: abort upload if component unmounts
      if (xhrRef.current) {
        xhrRef.current.abort();
      }
    };
  }, []);

  const startUpload = () => {
    setStatus('uploading');
    startTimeRef.current = Date.now();

    const xhr = new XMLHttpRequest();
    xhrRef.current = xhr;

    // Track upload progress
    xhr.upload.addEventListener('progress', (e) => {
      if (e.lengthComputable) {
        const percentComplete = (e.loaded / e.total) * 100;
        setProgress(Math.round(percentComplete));

        // Calculate upload speed
        const currentTime = Date.now();
        const timeDiff = (currentTime - lastProgressRef.current.time) / 1000; // seconds
        const bytesDiff = e.loaded - lastProgressRef.current.loaded;
        const speed = bytesDiff / timeDiff; // bytes per second
        setUploadSpeed(speed);

        // Calculate time remaining
        const remaining = e.total - e.loaded;
        const timeLeft = remaining / speed; // seconds
        setTimeRemaining(Math.round(timeLeft));

        lastProgressRef.current = { loaded: e.loaded, time: currentTime };
      }
    });

    // Handle completion
    xhr.addEventListener('load', () => {
      if (xhr.status === 200) {
        setStatus('complete');
        setProgress(100);
        onComplete?.(xhr.response);
      } else {
        setStatus('error');
        onError?.(new Error(`Upload failed with status ${xhr.status}`));
      }
    });

    // Handle errors
    xhr.addEventListener('error', () => {
      setStatus('error');
      onError?.(new Error('Network error during upload'));
    });

    // Prepare and send request
    const formData = new FormData();
    formData.append('file', file);

    xhr.open('POST', '/api/upload');
    xhr.send(formData);
  };

  const handleCancel = () => {
    if (xhrRef.current) {
      xhrRef.current.abort();
      setStatus('cancelled');
    }
  };

  const handleRetry = () => {
    setProgress(0);
    setStatus('pending');
    startUpload();
  };

  const formatFileSize = (bytes) => {
    const units = ['B', 'KB', 'MB', 'GB'];
    let size = bytes;
    let unitIndex = 0;

    while (size >= 1024 && unitIndex < units.length - 1) {
      size /= 1024;
      unitIndex++;
    }

    return `${size.toFixed(1)} ${units[unitIndex]}`;
  };

  const formatTime = (seconds) => {
    if (!seconds || seconds < 0) return '';
    if (seconds < 60) return `${seconds}s remaining`;
    const minutes = Math.floor(seconds / 60);
    return `${minutes}m ${seconds % 60}s remaining`;
  };

  const formatSpeed = (bytesPerSecond) => {
    return `${formatFileSize(bytesPerSecond)}/s`;
  };

  return (
    <div className="upload-progress-container">
      {/* File info */}
      <div className="upload-header">
        <div className="file-icon">
          {getFileIcon(file.type)}
        </div>
        <div className="file-info">
          <div className="file-name">{file.name}</div>
          <div className="file-meta">
            <span>{formatFileSize(file.size)}</span>
            {status === 'uploading' && uploadSpeed > 0 && (
              <>
                <span className="separator">•</span>
                <span>{formatSpeed(uploadSpeed)}</span>
                <span className="separator">•</span>
                <span>{formatTime(timeRemaining)}</span>
              </>
            )}
          </div>
        </div>
        <div className="upload-actions">
          {status === 'uploading' && (
            <button onClick={handleCancel} className="btn-icon">
              ✕
            </button>
          )}
          {status === 'error' && (
            <button onClick={handleRetry} className="btn-icon">
              ↻
            </button>
          )}
          {status === 'complete' && (
            <span className="success-icon">✓</span>
          )}
        </div>
      </div>

      {/* Progress bar */}
      <div className="progress-container">
        <div className="progress-track">
          <div
            className={`progress-bar progress-${status}`}
            style={{ width: `${progress}%` }}
            role="progressbar"
            aria-valuenow={progress}
            aria-valuemin={0}
            aria-valuemax={100}
          />
        </div>
        <span className="progress-label">{progress}%</span>
      </div>

      {/* Status message */}
      {status === 'error' && (
        <div className="upload-error">
          Upload failed. <button onClick={handleRetry}>Try again</button>
        </div>
      )}
      {status === 'complete' && (
        <div className="upload-success">
          Upload complete!
        </div>
      )}
    </div>
  );
}

// Multiple File Upload Queue
export function MultiFileUploadQueue({ files, onAllComplete }) {
  const [uploads, setUploads] = useState(
    files.map((file, index) => ({
      id: `${file.name}-${index}`,
      file,
      progress: 0,
      status: 'queued', // queued, uploading, complete, error
      speed: 0,
      error: null
    }))
  );
  const [currentUploadIndex, setCurrentUploadIndex] = useState(0);
  const [parallelUploads, setParallelUploads] = useState(3); // Upload 3 files at once

  useEffect(() => {
    // Start initial uploads
    for (let i = 0; i < Math.min(parallelUploads, files.length); i++) {
      if (uploads[i]?.status === 'queued') {
        startUpload(i);
      }
    }
  }, []);

  const startUpload = (index) => {
    const upload = uploads[index];
    if (!upload || upload.status !== 'queued') return;

    setUploads(prev => prev.map((u, i) =>
      i === index ? { ...u, status: 'uploading' } : u
    ));

    // Simulate upload with progress
    const interval = setInterval(() => {
      setUploads(prev => {
        const current = prev[index];
        if (!current || current.status !== 'uploading') {
          clearInterval(interval);
          return prev;
        }

        const newProgress = Math.min(current.progress + Math.random() * 20, 100);

        if (newProgress >= 100) {
          clearInterval(interval);
          // Start next upload in queue
          const nextIndex = prev.findIndex(u => u.status === 'queued');
          if (nextIndex !== -1) {
            setTimeout(() => startUpload(nextIndex), 100);
          }

          return prev.map((u, i) =>
            i === index ? { ...u, progress: 100, status: 'complete' } : u
          );
        }

        return prev.map((u, i) =>
          i === index ? { ...u, progress: newProgress } : u
        );
      });
    }, 500);
  };

  const handleCancel = (id) => {
    setUploads(prev => prev.map(u =>
      u.id === id && u.status === 'uploading'
        ? { ...u, status: 'cancelled' }
        : u
    ));
  };

  const handleRetry = (id) => {
    const index = uploads.findIndex(u => u.id === id);
    if (index !== -1) {
      setUploads(prev => prev.map((u, i) =>
        i === index ? { ...u, progress: 0, status: 'queued', error: null } : u
      ));
      startUpload(index);
    }
  };

  const handleRemove = (id) => {
    setUploads(prev => prev.filter(u => u.id !== id));
  };

  // Calculate overall progress
  const totalProgress = uploads.reduce((sum, u) => sum + u.progress, 0) / uploads.length;
  const completedCount = uploads.filter(u => u.status === 'complete').length;
  const errorCount = uploads.filter(u => u.status === 'error').length;

  return (
    <div className="multi-upload-container">
      {/* Summary header */}
      <div className="upload-summary">
        <h3>Uploading {uploads.length} files</h3>
        <div className="summary-stats">
          <span>{completedCount} complete</span>
          {errorCount > 0 && <span className="error-count">{errorCount} failed</span>}
        </div>
        <div className="overall-progress">
          <div className="progress-track">
            <div
              className="progress-bar"
              style={{ width: `${totalProgress}%` }}
            />
          </div>
          <span className="progress-label">{Math.round(totalProgress)}%</span>
        </div>
      </div>

      {/* Upload list */}
      <div className="upload-list">
        {uploads.map(upload => (
          <UploadItem
            key={upload.id}
            upload={upload}
            onCancel={() => handleCancel(upload.id)}
            onRetry={() => handleRetry(upload.id)}
            onRemove={() => handleRemove(upload.id)}
          />
        ))}
      </div>

      {/* Actions */}
      <div className="upload-queue-actions">
        <button className="btn-secondary">
          Pause All
        </button>
        <button className="btn-primary">
          Add More Files
        </button>
      </div>
    </div>
  );
}

// Individual Upload Item Component
function UploadItem({ upload, onCancel, onRetry, onRemove }) {
  const getStatusIcon = () => {
    switch (upload.status) {
      case 'queued':
        return '⏳';
      case 'uploading':
        return '↑';
      case 'complete':
        return '✓';
      case 'error':
        return '✕';
      case 'cancelled':
        return '⊘';
      default:
        return '';
    }
  };

  return (
    <div className={`upload-item upload-${upload.status}`}>
      <div className="upload-item-icon">
        {getStatusIcon()}
      </div>

      <div className="upload-item-content">
        <div className="upload-item-name">{upload.file.name}</div>
        <div className="upload-item-progress">
          <div className="progress-track-small">
            <div
              className="progress-bar-small"
              style={{ width: `${upload.progress}%` }}
            />
          </div>
          <span className="progress-text-small">
            {upload.status === 'uploading' && `${Math.round(upload.progress)}%`}
            {upload.status === 'complete' && 'Complete'}
            {upload.status === 'error' && 'Failed'}
            {upload.status === 'queued' && 'Waiting...'}
          </span>
        </div>
      </div>

      <div className="upload-item-actions">
        {upload.status === 'uploading' && (
          <button onClick={onCancel} className="btn-icon-small">✕</button>
        )}
        {upload.status === 'error' && (
          <button onClick={onRetry} className="btn-icon-small">↻</button>
        )}
        {(upload.status === 'complete' || upload.status === 'error') && (
          <button onClick={onRemove} className="btn-icon-small">🗑</button>
        )}
      </div>
    </div>
  );
}

// Drag and Drop Upload with Progress
export function DragDropUpload() {
  const [isDragging, setIsDragging] = useState(false);
  const [files, setFiles] = useState([]);
  const dropZoneRef = useRef(null);

  const handleDragEnter = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(true);
  };

  const handleDragLeave = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (e.target === dropZoneRef.current) {
      setIsDragging(false);
    }
  };

  const handleDragOver = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDrop = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);

    const droppedFiles = Array.from(e.dataTransfer.files);
    setFiles(prev => [...prev, ...droppedFiles]);
  };

  return (
    <div className="drag-drop-container">
      <div
        ref={dropZoneRef}
        className={`drop-zone ${isDragging ? 'dragging' : ''}`}
        onDragEnter={handleDragEnter}
        onDragLeave={handleDragLeave}
        onDragOver={handleDragOver}
        onDrop={handleDrop}
      >
        <div className="drop-zone-content">
          <div className="drop-icon">📁</div>
          <p>Drag and drop files here</p>
          <p className="drop-hint">or</p>
          <label className="file-input-label">
            <input
              type="file"
              multiple
              onChange={(e) => setFiles(prev => [...prev, ...Array.from(e.target.files)])}
              className="file-input-hidden"
            />
            Browse Files
          </label>
        </div>
      </div>

      {files.length > 0 && (
        <MultiFileUploadQueue
          files={files}
          onAllComplete={() => console.log('All uploads complete')}
        />
      )}
    </div>
  );
}

// Helper function for file icons
function getFileIcon(mimeType) {
  if (!mimeType) return '📄';

  if (mimeType.startsWith('image/')) return '🖼️';
  if (mimeType.startsWith('video/')) return '🎬';
  if (mimeType.startsWith('audio/')) return '🎵';
  if (mimeType.includes('pdf')) return '📑';
  if (mimeType.includes('zip') || mimeType.includes('compressed')) return '🗜️';
  if (mimeType.includes('text')) return '📝';
  if (mimeType.includes('spreadsheet') || mimeType.includes('excel')) return '📊';
  if (mimeType.includes('presentation') || mimeType.includes('powerpoint')) return '📈';

  return '📄';
}

// Styles
const styles = `
  .upload-progress-container {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
  }

  .upload-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }

  .file-icon {
    font-size: 32px;
  }

  .file-info {
    flex: 1;
  }

  .file-name {
    font-weight: 500;
    margin-bottom: 4px;
  }

  .file-meta {
    font-size: 14px;
    color: #6b7280;
  }

  .separator {
    margin: 0 8px;
  }

  .progress-container {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .progress-track {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
  }

  .progress-bar {
    height: 100%;
    background: #3b82f6;
    transition: width 0.3s ease;
  }

  .progress-bar.progress-complete {
    background: #10b981;
  }

  .progress-bar.progress-error {
    background: #ef4444;
  }

  .progress-label {
    font-size: 14px;
    font-weight: 500;
    min-width: 40px;
  }

  .upload-error {
    color: #ef4444;
    font-size: 14px;
    margin-top: 8px;
  }

  .upload-success {
    color: #10b981;
    font-size: 14px;
    margin-top: 8px;
  }

  /* Multi-upload styles */
  .multi-upload-container {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
  }

  .upload-summary {
    margin-bottom: 24px;
  }

  .summary-stats {
    display: flex;
    gap: 16px;
    margin: 8px 0;
    font-size: 14px;
    color: #6b7280;
  }

  .error-count {
    color: #ef4444;
  }

  .overall-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
  }

  .upload-list {
    space-y: 8px;
    max-height: 400px;
    overflow-y: auto;
  }

  .upload-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 6px;
    margin-bottom: 8px;
  }

  .upload-item-icon {
    font-size: 20px;
  }

  .upload-item-content {
    flex: 1;
  }

  .upload-item-name {
    font-size: 14px;
    margin-bottom: 4px;
  }

  .progress-track-small {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
  }

  .progress-bar-small {
    height: 100%;
    background: #3b82f6;
    transition: width 0.3s ease;
  }

  .progress-text-small {
    font-size: 12px;
    color: #6b7280;
  }

  /* Drag and drop styles */
  .drop-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 48px;
    text-align: center;
    transition: all 0.3s ease;
  }

  .drop-zone.dragging {
    border-color: #3b82f6;
    background: #eff6ff;
  }

  .drop-zone-content {
    pointer-events: none;
  }

  .drop-icon {
    font-size: 48px;
    margin-bottom: 16px;
  }

  .drop-hint {
    color: #6b7280;
    margin: 8px 0;
  }

  .file-input-label {
    display: inline-block;
    padding: 8px 16px;
    background: #3b82f6;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    pointer-events: auto;
  }

  .file-input-hidden {
    display: none;
  }
`;