DOM Enhancements

interface Body {
  /**
   * Returns a promise that resolves with the response body as JSON.
   * Enhanced to return JSONValue instead of any for better type safety.
   */
  json(): Promise<JSONValue>;
}

// Fetch API with safer JSON handling
async function fetchUserData(userId: string) {
  const response = await fetch(`/api/users/${userId}`);
  const data = await response.json(); // Returns JSONValue, not any
  
  // Type-safe access requiring proper type guards
  if (typeof data === 'object' && data !== null && !Array.isArray(data)) {
    const name = data.name;
    if (typeof name === 'string') {
      return { name, id: userId };
    }
  }
  
  throw new Error('Invalid user data format');
}

// Working with API responses
async function handleAPIResponse() {
  try {
    const response = await fetch('/api/status');
    const result = await response.json();
    
    // result is JSONValue - requires type checking
    if (typeof result === 'object' && result !== null && 'status' in result) {
      const status = result.status;
      if (typeof status === 'string') {
        console.log(`API Status: ${status}`);
      }
    }
  } catch (error) {
    console.error('Failed to fetch API status:', error);
  }
}

// Type guards for safe JSON handling
function isValidUserData(data: JSONValue): data is { name: string; email: string } {
  return typeof data === 'object' && 
         data !== null && 
         !Array.isArray(data) &&
         'name' in data && 
         'email' in data &&
         typeof data.name === 'string' &&
         typeof data.email === 'string';
}

async function fetchAndValidateUser(id: string) {
  const response = await fetch(`/api/users/${id}`);
  const data = await response.json();
  
  if (isValidUserData(data)) {
    // data is now typed as { name: string; email: string }
    console.log(`User: ${data.name} (${data.email})`);
    return data;
  }
  
  throw new Error('Invalid user data received');
}

// Generic API response handler
async function apiRequest<T>(
  url: string, 
  validator: (data: JSONValue) => data is T
): Promise<T> {
  const response = await fetch(url);
  
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
  }
  
  const data = await response.json();
  
  if (validator(data)) {
    return data;
  }
  
  throw new Error('Response data validation failed');
}

// Usage example
interface ApiUser {
  id: number;
  name: string;
  email: string;
}

function isApiUser(data: JSONValue): data is ApiUser {
  return typeof data === 'object' &&
         data !== null &&
         !Array.isArray(data) &&
         typeof data.id === 'number' &&
         typeof data.name === 'string' &&
         typeof data.email === 'string';
}

const user = await apiRequest('/api/user/123', isApiUser);
// user is now properly typed as ApiUser