{
  "type": "https://docs.pictify.io/errors/validation-error",
  "title": "Validation Error",
  "status": 400,
  "detail": "The 'width' field must be a positive integer.",
  "instance": "/image",
  "errors": [
    {
      "field": "width",
      "message": "Must be a positive integer",
      "code": "invalid_type"
    }
  ]
}

{
  "type": "https://docs.pictify.io/errors/invalid-api-key",
  "title": "Invalid API Key",
  "status": 401,
  "detail": "The API key provided is invalid or has been revoked."
}

{
  "type": "https://docs.pictify.io/errors/missing-authorization",
  "title": "Missing Authorization",
  "status": 401,
  "detail": "No Authorization header provided."
}

{
  "type": "https://docs.pictify.io/errors/validation-error",
  "title": "Validation Error",
  "status": 400,
  "detail": "Request validation failed.",
  "errors": [
    {
      "field": "html",
      "message": "Required field missing",
      "code": "required"
    },
    {
      "field": "width",
      "message": "Must be between 1 and 4000",
      "code": "out_of_range"
    }
  ]
}

{
  "type": "https://docs.pictify.io/errors/template-not-found",
  "title": "Template Not Found",
  "status": 404,
  "detail": "Template with ID 'tmpl_abc123' was not found."
}

{
  "type": "https://docs.pictify.io/errors/binding-not-found",
  "title": "Binding Not Found",
  "status": 404,
  "detail": "Binding with ID 'bind_xyz789' was not found."
}

{
  "type": "https://docs.pictify.io/errors/rate-limit-exceeded",
  "title": "Rate Limit Exceeded",
  "status": 429,
  "detail": "You have exceeded the rate limit of 60 requests per minute.",
  "retryAfter": 45
}

X-RateLimit-Limit: 60
X-RateLimit-Remaining: 0
X-RateLimit-Reset: 1706515320
Retry-After: 45

{
  "type": "https://docs.pictify.io/errors/render-failed",
  "title": "Render Failed",
  "status": 500,
  "detail": "Failed to render the template due to invalid HTML."
}

{
  "type": "https://docs.pictify.io/errors/url-fetch-failed",
  "title": "URL Fetch Failed",
  "status": 422,
  "detail": "Failed to fetch content from the provided URL.",
  "errors": [
    {
      "field": "url",
      "message": "Connection timeout after 30 seconds",
      "code": "timeout"
    }
  ]
}

{
  "type": "https://docs.pictify.io/errors/expression-error",
  "title": "Expression Error",
  "status": 422,
  "detail": "Failed to evaluate expression: undefined variable 'userName'",
  "errors": [
    {
      "field": "variables",
      "message": "Variable 'userName' is referenced but not provided",
      "code": "undefined_variable"
    }
  ]
}

{
  "type": "https://docs.pictify.io/errors/batch-failed",
  "title": "Batch Job Failed",
  "status": 500,
  "detail": "Batch job 'batch_abc123' failed with 3 errors.",
  "failedCount": 3,
  "successCount": 97
}

{
  "type": "https://docs.pictify.io/errors/webhook-delivery-failed",
  "title": "Webhook Delivery Failed",
  "status": 502,
  "detail": "Failed to deliver webhook after 5 attempts.",
  "lastAttempt": "2026-01-29T10:30:00Z",
  "lastError": "Connection refused"
}

const response = await fetch('https://api.pictify.io/image', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${apiKey}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ html: '<h1>Hello</h1>' })
});

if (!response.ok) {
  const error = await response.json();

  switch (response.status) {
    case 401:
      throw new Error('Invalid API key');
    case 429:
      const retryAfter = response.headers.get('Retry-After');
      throw new Error(`Rate limited. Retry after ${retryAfter}s`);
    case 400:
    case 422:
      throw new Error(`Validation error: ${error.detail}`);
    default:
      throw new Error(`API error: ${error.title}`);
  }
}

async function renderWithRetry(
  options: RenderHtmlOptions,
  maxRetries = 3
): Promise<ImageResult> {
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      return await pictify.renderHtml(options);
    } catch (error) {
      if (error.status === 429) {
        const delay = error.retryAfter * 1000 || Math.pow(2, attempt) * 1000;
        await sleep(delay);
        continue;
      }

      if (error.status >= 500 && attempt < maxRetries) {
        await sleep(Math.pow(2, attempt) * 1000);
        continue;
      }

      throw error;
    }
  }
}

try {
  const result = await pictify.render({ templateId, variables });
} catch (error) {
  console.error('Pictify API Error:', {
    type: error.type,
    status: error.status,
    detail: error.detail,
    instance: error.instance,
    requestId: error.requestId
  });
  throw error;
}

if (error.errors && Array.isArray(error.errors)) {
  const fieldErrors = error.errors.reduce((acc, err) => {
    acc[err.field] = err.message;
    return acc;
  }, {});

  // Display field-specific error messages in UI
  setFormErrors(fieldErrors);
}