const response = await ApiClient.getVideoInfo(url, {
  showNotifications: false // Prevent duplicate notifications
});

if (!response.success && response.details) {
  setError(response.details); // Enhanced error details
  showNotification.enhanced.fromErrorDetails(response.details);
}

function ErrorDisplay({ error, onDismiss }: { error: ErrorDetails; onDismiss: () => void }) {
  const [isExpanded, setIsExpanded] = useState(false);
  const hasDetails = error.description || error.action;
  
  return (
    <div className={`${severityStyles[error.severity]} border rounded-xl`}>
      <div onClick={hasDetails ? () => setIsExpanded(!isExpanded) : undefined}>
        <div className="font-semibold">{error.title}</div>
        <div className="text-sm opacity-90">{error.message}</div>
        {hasDetails && <InfoIcon className="w-4 h-4" />}
      </div>
      
      {isExpanded && (
        <div className="animate-in slide-in-from-top-2">
          {error.description && <p>{error.description}</p>}
          {error.action && <p>{error.action}</p>}
        </div>
      )}
    </div>
  );
}

showNotification.success('Success!', 'Operation completed');
showNotification.error('Error!', 'Something went wrong');
showNotification.warning('Warning!', 'Please check your input');
showNotification.info('Info', 'Here is some information');

showNotification.enhanced.error(
  'Security Token Issue',
  'Your security token has expired',
  'This happens when your session expires or security tokens become invalid.',
  'Please wait while we refresh your security token...'
);

showNotification.enhanced.fromErrorDetails(errorDetails);

{
  "success": false,
  "error": "Request contains potentially harmful content",
  "code": "SANITIZATION_FAILED",
  "security": {
    "violations": [
      "Headers: Dangerous pattern detected: /<script/i",
      "Headers: String length exceeds maximum (1268 > 1000)"
    ],
    "warnings": [
      "Headers: Suspicious pattern detected: /eval\(/i"
    ]
  }
}

{
  "success": false,
  "error": "Request blocked due to security concerns",
  "code": "REQUEST_ANALYSIS_FAILED",
  "security": {
    "threatLevel": "high",
    "riskScore": 85,
    "reasons": [
      "Suspicious user agent pattern",
      "Multiple rapid requests from same IP"
    ]
  }
}

const response = await ApiClient.getVideoInfo(url);
if (!response.success) {
  // response.details contains enhanced error information
  console.log(response.details.title); // "Invalid Request Content"
  console.log(response.details.description); // Detailed explanation
  console.log(response.details.action); // Actionable advice
}

const response = await ApiClient.getVideoInfo(url, {
  showNotifications: false, // Disable automatic notifications
  context: 'Download Page', // Error context for debugging
  maxRetries: 3 // Retry configuration
});

interface ErrorDetails {
  title: string;                    // User-friendly error title
  message: string;                  // Primary error message
  description?: string;             // Detailed explanation
  action?: string;                  // Actionable advice
  severity: 'info' | 'warning' | 'error' | 'critical';
  code: string;                     // Error code for debugging
}

const [error, setError] = useState<ErrorDetails | null>(null);

const handleError = (errorDetails: ErrorDetails) => {
  setError(errorDetails);
  showNotification.enhanced.fromErrorDetails(errorDetails);
};

<AnimatePresence>
  {error && (
    <ErrorDisplay 
      error={error} 
      onDismiss={() => setError(null)} 
    />
  )}
</AnimatePresence>

if (!validateInput(input)) {
  const errorDetails = {
    title: 'Invalid Input',
    message: 'Please provide valid input',
    description: 'The input you provided does not meet our validation requirements.',
    action: 'Please check your input and try again',
    severity: 'warning' as const,
    code: 'INVALID_INPUT'
  };
  setError(errorDetails);
  showNotification.enhanced.fromErrorDetails(errorDetails);
  return;
}

/* Critical */
.bg-red-500/10 .border-red-500/20 .text-red-600

/* Error */
.bg-destructive/10 .border-destructive/20 .text-destructive

/* Warning */
.bg-yellow-500/10 .border-yellow-500/20 .text-yellow-600

/* Info */
.bg-blue-500/10 .border-blue-500/20 .text-blue-600

const severityIcons = {
  critical: '🚨',
  error: '❌',
  warning: '⚠️',
  info: 'ℹ️'
};

// ❌ Don't do this
const response = await ApiClient.getVideoInfo(url); // Shows notification
showNotification.error('Error', response.error); // Shows another notification

// ✅ Do this instead
const response = await ApiClient.getVideoInfo(url, {
  showNotifications: false // Disable ApiClient notifications
});
if (!response.success && response.details) {
  showNotification.enhanced.fromErrorDetails(response.details); // Single notification
}

// Always provide context for better debugging
const response = await ApiClient.getVideoInfo(url, {
  context: 'Download Page' // Helps identify where error occurred
});