Building an AI Photo Editor App with Rork — Filters, Background Removal, and Style Transfer in Production

// Editor state management — non-destructive editing with undo/redo stack
// Rork prompt: "Create a state manager for a photo editor with
//   non-destructive editing. Operations are stacked with undo/redo
//   support. Each operation has type, params, and timestamp."
 
interface EditOperation {
  id: string;
  type: 'filter' | 'crop' | 'background_removal' | 'style_transfer';
  params: Record<string, unknown>;
  timestamp: number;
}
 
interface EditorState {
  originalUri: string;           // Never modified
  currentUri: string;            // Currently displayed result
  operations: EditOperation[];   // Applied operations stack
  undoneOperations: EditOperation[]; // Redo stack
  isProcessing: boolean;
  processingProgress: number;    // 0-100
}
 
// Undo: pop from operations, push to undoneOperations
// Redo: pop from undoneOperations, push back to operations
// New operation: clear undoneOperations (no branching)

// Image filter system with presets and custom adjustments
// Rork prompt: "Build an image filter system with brightness,
//   contrast, saturation, blur, sepia, and monochrome filters.
//   Slider changes should update the preview in real time."
 
import React, { useState, useCallback, useMemo } from 'react';
import {
  View,
  Image,
  ScrollView,
  TouchableOpacity,
  Text,
  StyleSheet,
} from 'react-native';
import Slider from '@react-native-community/slider';
 
const FILTER_PRESETS = [
  {
    id: 'original',
    name: 'Original',
    params: { brightness: 0, contrast: 1, saturation: 1, sepia: 0 },
  },
  {
    id: 'vivid',
    name: 'Vivid',
    params: { brightness: 0.05, contrast: 1.2, saturation: 1.4, sepia: 0 },
  },
  {
    id: 'warm',
    name: 'Warm',
    params: { brightness: 0.03, contrast: 1.05, saturation: 1.1, sepia: 0.3 },
  },
  {
    id: 'cool',
    name: 'Cool',
    params: { brightness: -0.02, contrast: 1.1, saturation: 0.8, sepia: 0 },
  },
  {
    id: 'mono',
    name: 'Mono',
    params: { brightness: 0.05, contrast: 1.3, saturation: 0, sepia: 0 },
  },
  {
    id: 'sepia',
    name: 'Sepia',
    params: { brightness: 0, contrast: 1.05, saturation: 0.6, sepia: 0.8 },
  },
] as const;
 
type FilterParams = {
  brightness: number;
  contrast: number;
  saturation: number;
  sepia: number;
};
 
interface FilterEditorProps {
  imageUri: string;
  onApply: (params: FilterParams) => void;
  onCancel: () => void;
}
 
export function FilterEditor({ imageUri, onApply, onCancel }: FilterEditorProps) {
  const [activePreset, setActivePreset] = useState('original');
  const [customParams, setCustomParams] = useState<FilterParams>({
    brightness: 0,
    contrast: 1,
    saturation: 1,
    sepia: 0,
  });
  const [showAdvanced, setShowAdvanced] = useState(false);
 
  const handlePresetSelect = useCallback(
    (preset: typeof FILTER_PRESETS[number]) => {
      setActivePreset(preset.id);
      setCustomParams(preset.params);
    },
    [],
  );
 
  const filterStyle = useMemo(() => ({
    filter: [
      `brightness(${1 + customParams.brightness})`,
      `contrast(${customParams.contrast})`,
      `saturate(${customParams.saturation})`,
      `sepia(${customParams.sepia})`,
    ].join(' '),
  }), [customParams]);
 
  return (
    <View style={styles.container}>
      <View style={styles.previewContainer}>
        <Image
          source={{ uri: imageUri }}
          style={[styles.previewImage, filterStyle]}
          resizeMode="contain"
        />
      </View>
 
      {/* Preset thumbnails — horizontal scroll */}
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        style={styles.presetScroll}
        contentContainerStyle={styles.presetContent}
      >
        {FILTER_PRESETS.map((preset) => (
          <TouchableOpacity
            key={preset.id}
            onPress={() => handlePresetSelect(preset)}
            style={[
              styles.presetItem,
              activePreset === preset.id && styles.presetItemActive,
            ]}
          >
            <Image
              source={{ uri: imageUri }}
              style={styles.presetThumb}
            />
            <Text style={[
              styles.presetLabel,
              activePreset === preset.id && styles.presetLabelActive,
            ]}>
              {preset.name}
            </Text>
          </TouchableOpacity>
        ))}
      </ScrollView>
 
      {/* Fine-tuning sliders */}
      {showAdvanced && (
        <View style={styles.slidersContainer}>
          <SliderRow
            label="Brightness"
            value={customParams.brightness}
            min={-0.5}
            max={0.5}
            onChange={(v) => {
              setCustomParams(prev => ({ ...prev, brightness: v }));
              setActivePreset('custom');
            }}
          />
          <SliderRow
            label="Contrast"
            value={customParams.contrast}
            min={0.5}
            max={2.0}
            onChange={(v) => {
              setCustomParams(prev => ({ ...prev, contrast: v }));
              setActivePreset('custom');
            }}
          />
          <SliderRow
            label="Saturation"
            value={customParams.saturation}
            min={0}
            max={2.0}
            onChange={(v) => {
              setCustomParams(prev => ({ ...prev, saturation: v }));
              setActivePreset('custom');
            }}
          />
        </View>
      )}
 
      <View style={styles.actions}>
        <TouchableOpacity onPress={onCancel} style={styles.cancelButton}>
          <Text style={styles.cancelText}>Cancel</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => setShowAdvanced(!showAdvanced)}
          style={styles.advancedButton}
        >
          <Text style={styles.advancedText}>
            {showAdvanced ? 'Hide' : 'Fine-tune'}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => onApply(customParams)}
          style={styles.applyButton}
        >
          <Text style={styles.applyText}>Apply</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}
 
function SliderRow({
  label, value, min, max, onChange,
}: {
  label: string; value: number; min: number; max: number;
  onChange: (v: number) => void;
}) {
  return (
    <View style={styles.sliderRow}>
      <Text style={styles.sliderLabel}>{label}</Text>
      <Slider
        style={styles.slider}
        minimumValue={min}
        maximumValue={max}
        value={value}
        onValueChange={onChange}
        minimumTrackTintColor="#007AFF"
        maximumTrackTintColor="#E0E0E0"
      />
      <Text style={styles.sliderValue}>{value.toFixed(2)}</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#000' },
  previewContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  previewImage: { width: '100%', height: '100%' },
  presetScroll: { maxHeight: 100 },
  presetContent: { paddingHorizontal: 12, gap: 8 },
  presetItem: {
    alignItems: 'center', padding: 4, borderRadius: 8,
    borderWidth: 2, borderColor: 'transparent',
  },
  presetItemActive: { borderColor: '#007AFF' },
  presetThumb: { width: 60, height: 60, borderRadius: 6 },
  presetLabel: { fontSize: 11, color: '#999', marginTop: 4 },
  presetLabelActive: { color: '#007AFF', fontWeight: '600' },
  slidersContainer: { paddingHorizontal: 16, paddingVertical: 8 },
  sliderRow: { flexDirection: 'row', alignItems: 'center', marginVertical: 4 },
  sliderLabel: { color: '#FFF', width: 80, fontSize: 13 },
  slider: { flex: 1 },
  sliderValue: { color: '#999', width: 50, textAlign: 'right', fontSize: 12 },
  actions: {
    flexDirection: 'row', justifyContent: 'space-between',
    padding: 16, paddingBottom: 32,
  },
  cancelButton: { padding: 12 },
  cancelText: { color: '#FF3B30', fontSize: 16 },
  advancedButton: { padding: 12 },
  advancedText: { color: '#FFF', fontSize: 16 },
  applyButton: { padding: 12, backgroundColor: '#007AFF', borderRadius: 8 },
  applyText: { color: '#FFF', fontSize: 16, fontWeight: '600' },
});

// services/preview-resolution.ts
import DeviceInfo from 'react-native-device-info';
 
type Tier = 'low' | 'mid' | 'high';
 
const TIER_WIDTH: Record<Tier, number> = {
  low: 640,
  mid: 900,
  high: 1280,
};
 
// One filter pass slower than this drops the tier by one
const DEGRADE_THRESHOLD_MS = 180;
// Consistently faster than this raises it by one
const UPGRADE_THRESHOLD_MS = 45;
 
let currentTier: Tier | null = null;
let fastStreak = 0;
 
async function detectInitialTier(): Promise<Tier> {
  const totalBytes = await DeviceInfo.getTotalMemory();
  const totalGb = totalBytes / 1024 ** 3;
  // Under 3GB is mostly pre-2019 hardware — high resolution kills it
  if (totalGb < 3) return 'low';
  if (totalGb < 6) return 'mid';
  return 'high';
}
 
export async function getPreviewWidth(): Promise<number> {
  if (currentTier === null) {
    currentTier = await detectInitialTier();
  }
  return TIER_WIDTH[currentTier];
}
 
// Feed every measured filter pass back in to self-correct
export function reportFilterDuration(ms: number): void {
  if (currentTier === null) return;
 
  if (ms > DEGRADE_THRESHOLD_MS) {
    fastStreak = 0;
    if (currentTier === 'high') currentTier = 'mid';
    else if (currentTier === 'mid') currentTier = 'low';
    return;
  }
 
  if (ms < UPGRADE_THRESHOLD_MS) {
    fastStreak += 1;
    // Don't promote on a single lucky pass — require eight in a row
    if (fastStreak >= 8) {
      if (currentTier === 'low') currentTier = 'mid';
      else if (currentTier === 'mid') currentTier = 'high';
      fastStreak = 0;
    }
  }
}

// Background removal service — cloud API with on-device fallback
// Production-quality implementation with error handling and retries
 
interface BackgroundRemovalResult {
  success: boolean;
  imageUri?: string;
  method: 'cloud' | 'ondevice' | 'failed';
  error?: string;
  processingTimeMs: number;
}
 
const CLOUD_API_TIMEOUT_MS = 30000;
const MAX_RETRIES = 2;
const RETRY_DELAY_MS = 1000;
 
async function removeBackground(
  imageUri: string,
  apiKey: string,
): Promise<BackgroundRemovalResult> {
  const startTime = Date.now();
 
  // 1. Try cloud API with retries
  for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
    try {
      const result = await callCloudApi(imageUri, apiKey);
      return {
        success: true,
        imageUri: result.outputUri,
        method: 'cloud',
        processingTimeMs: Date.now() - startTime,
      };
    } catch (error) {
      const isLastAttempt = attempt === MAX_RETRIES;
      const isRetryable = isRetryableError(error);
 
      if (isLastAttempt || !isRetryable) {
        console.warn(
          `Cloud API failed (attempt ${attempt + 1}/${MAX_RETRIES + 1}):`,
          error instanceof Error ? error.message : 'Unknown error'
        );
        break;
      }
 
      // Exponential backoff
      await sleep(RETRY_DELAY_MS * Math.pow(2, attempt));
    }
  }
 
  // 2. Fallback: on-device processing
  try {
    console.log('Falling back to on-device processing...');
    const onDeviceResult = await processOnDevice(imageUri);
    return {
      success: true,
      imageUri: onDeviceResult.outputUri,
      method: 'ondevice',
      processingTimeMs: Date.now() - startTime,
    };
  } catch (onDeviceError) {
    return {
      success: false,
      method: 'failed',
      error: onDeviceError instanceof Error
        ? onDeviceError.message
        : 'Background removal failed',
      processingTimeMs: Date.now() - startTime,
    };
  }
}
 
async function callCloudApi(
  imageUri: string,
  apiKey: string,
): Promise<{ outputUri: string }> {
  const response = await fetch(imageUri);
  const blob = await response.blob();
 
  // Size check (most APIs cap at 12MB)
  if (blob.size > 12 * 1024 * 1024) {
    throw new Error('Image too large. Maximum size is 12MB.');
  }
 
  const formData = new FormData();
  formData.append('image_file', blob, 'image.png');
  formData.append('size', 'auto');
 
  const controller = new AbortController();
  const timeoutId = setTimeout(
    () => controller.abort(),
    CLOUD_API_TIMEOUT_MS,
  );
 
  try {
    const apiResponse = await fetch('https://api.remove.bg/v1.0/removebg', {
      method: 'POST',
      headers: { 'X-Api-Key': apiKey },
      body: formData,
      signal: controller.signal,
    });
 
    if (!apiResponse.ok) {
      const errorBody = await apiResponse.text().catch(() => '');
      throw new ApiError(
        `API returned ${apiResponse.status}: ${errorBody}`,
        apiResponse.status,
      );
    }
 
    const resultBlob = await apiResponse.blob();
    const outputUri = await saveBlobToFile(resultBlob, 'bg_removed.png');
    return { outputUri };
  } finally {
    clearTimeout(timeoutId);
  }
}
 
function isRetryableError(error: unknown): boolean {
  if (error instanceof ApiError) {
    return error.statusCode === 429 || error.statusCode >= 500;
  }
  if (error instanceof TypeError && error.message.includes('network')) {
    return true;
  }
  return false;
}
 
class ApiError extends Error {
  constructor(message: string, public statusCode: number) {
    super(message);
    this.name = 'ApiError';
  }
}
 
function sleep(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// services/matte-refine.ts
import {
  Skia,
  TileMode,
  BlendMode,
} from '@shopify/react-native-skia';
 
interface RefineOptions {
  featherRadius: number;   // 1.0 – 2.0 is the practical range
  despillStrength: number; // 0.0 – 1.0
}
 
/**
 * Cleans up the edge of the transparent PNG returned by a removal API.
 * 1) Blur alpha only, softening the hard cut
 * 2) Desaturate semi-transparent pixels to kill color spill
 */
export function refineMatte(
  cutoutPngBytes: Uint8Array,
  options: RefineOptions,
): Uint8Array | null {
  const data = Skia.Data.fromBytes(cutoutPngBytes);
  const image = Skia.Image.MakeImageFromEncoded(data);
  if (!image) return null;
 
  const width = image.width();
  const height = image.height();
 
  const surface = Skia.Surface.Make(width, height);
  if (!surface) return null;
  const canvas = surface.getCanvas();
 
  // 1) Blur the alpha channel only. Blurring RGB bleeds detail
  //    into the subject, so isolate alpha with a color matrix first.
  const alphaOnly = Skia.ImageFilter.MakeColorFilter(
    Skia.ColorFilter.MakeMatrix([
      0, 0, 0, 0, 0,
      0, 0, 0, 0, 0,
      0, 0, 0, 0, 0,
      0, 0, 0, 1, 0,
    ]),
    null,
  );
  const blurredAlpha = Skia.ImageFilter.MakeBlur(
    options.featherRadius,
    options.featherRadius,
    TileMode.Decal,
    alphaOnly,
  );
 
  // 2) Despill: the more transparent the pixel, the harder we desaturate
  const s = 1 - options.despillStrength;
  const despill = Skia.ColorFilter.MakeMatrix([
    0.213 + 0.787 * s, 0.715 - 0.715 * s, 0.072 - 0.072 * s, 0, 0,
    0.213 - 0.213 * s, 0.715 + 0.285 * s, 0.072 - 0.072 * s, 0, 0,
    0.213 - 0.213 * s, 0.715 - 0.715 * s, 0.072 + 0.928 * s, 0, 0,
    0, 0, 0, 1, 0,
  ]);
 
  const paint = Skia.Paint();
  paint.setImageFilter(blurredAlpha);
  paint.setColorFilter(despill);
  paint.setBlendMode(BlendMode.SrcOver);
 
  canvas.drawImage(image, 0, 0, paint);
 
  const result = surface.makeImageSnapshot();
  return result.encodeToBytes();
}

// AI style transfer via Replicate API
// Note: API tokens should be loaded from environment variables
 
interface StyleTransferResult {
  success: boolean;
  outputUri?: string;
  error?: string;
  style: string;
}
 
const STYLE_PROMPTS: Record<string, { prompt: string; strength: number }> = {
  watercolor: {
    prompt: 'watercolor painting, soft brushstrokes, artistic, delicate colors',
    strength: 0.65,
  },
  oilpainting: {
    prompt: 'oil painting on canvas, thick impasto brushwork, rich vibrant colors, classical art',
    strength: 0.70,
  },
  anime: {
    prompt: 'anime style illustration, clean lines, vibrant colors, Studio Ghibli inspired',
    strength: 0.60,
  },
  sketch: {
    prompt: 'pencil sketch drawing, detailed linework, crosshatching, black and white',
    strength: 0.75,
  },
  cyberpunk: {
    prompt: 'cyberpunk neon art style, glowing neon lights, futuristic, high contrast',
    strength: 0.55,
  },
};
 
async function applyStyleTransfer(
  imageUri: string,
  styleId: keyof typeof STYLE_PROMPTS,
  replicateApiToken: string,
): Promise<StyleTransferResult> {
  const style = STYLE_PROMPTS[styleId];
  if (!style) {
    return { success: false, error: `Unknown style: ${styleId}`, style: styleId };
  }
 
  try {
    const imageBase64 = await imageToBase64(imageUri);
    const dataUri = `data:image/png;base64,${imageBase64}`;
 
    const createResponse = await fetch(
      'https://api.replicate.com/v1/predictions',
      {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${replicateApiToken}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          version: 'stability-ai/sdxl:latest',
          input: {
            image: dataUri,
            prompt: style.prompt,
            prompt_strength: style.strength,
            num_inference_steps: 30,
            guidance_scale: 7.5,
          },
        }),
      },
    );
 
    if (!createResponse.ok) {
      const errorText = await createResponse.text();
      throw new Error(`Replicate API error: ${createResponse.status} ${errorText}`);
    }
 
    const prediction = await createResponse.json();
    const result = await pollPrediction(prediction.id, replicateApiToken, 60000);
 
    if (result.status === 'succeeded' && result.output) {
      const outputUrl = Array.isArray(result.output)
        ? result.output[0]
        : result.output;
      const localUri = await downloadAndSave(outputUrl, `style_${styleId}.png`);
      return { success: true, outputUri: localUri, style: styleId };
    }
 
    return {
      success: false,
      error: result.error || 'Style transfer failed',
      style: styleId,
    };
  } catch (error) {
    return {
      success: false,
      error: error instanceof Error ? error.message : 'Unknown error',
      style: styleId,
    };
  }
}
 
async function pollPrediction(
  predictionId: string,
  apiToken: string,
  timeoutMs: number,
): Promise<{ status: string; output?: string | string[]; error?: string }> {
  const deadline = Date.now() + timeoutMs;
  const pollInterval = 2000;
 
  while (Date.now() < deadline) {
    const response = await fetch(
      `https://api.replicate.com/v1/predictions/${predictionId}`,
      { headers: { 'Authorization': `Bearer ${apiToken}` } },
    );
 
    if (!response.ok) {
      throw new Error(`Poll failed: ${response.status}`);
    }
 
    const data = await response.json();
 
    if (['succeeded', 'failed', 'canceled'].includes(data.status)) {
      return data;
    }
 
    await sleep(pollInterval);
  }
 
  throw new Error('Style transfer timed out');
}

// Progressive feedback overlay — keeps users informed during AI processing
import React, { useEffect, useState, useRef } from 'react';
import { View, Text, Animated, StyleSheet, Easing } from 'react-native';
 
interface ProcessingOverlayProps {
  isVisible: boolean;
  operationType: 'filter' | 'background_removal' | 'style_transfer';
  estimatedSeconds: number;
}
 
const OPERATION_MESSAGES: Record<string, string[]> = {
  filter: ['Applying filter...'],
  background_removal: [
    'Analyzing image...',
    'Detecting subject...',
    'Removing background...',
    'Finishing up...',
  ],
  style_transfer: [
    'Analyzing composition...',
    'Loading AI model...',
    'Transforming style...',
    'Refining details...',
    'Final touches...',
  ],
};
 
export function ProcessingOverlay({
  isVisible,
  operationType,
  estimatedSeconds,
}: ProcessingOverlayProps) {
  const [messageIndex, setMessageIndex] = useState(0);
  const progressAnim = useRef(new Animated.Value(0)).current;
  const messages = OPERATION_MESSAGES[operationType] || ['Processing...'];
 
  useEffect(() => {
    if (!isVisible) {
      setMessageIndex(0);
      progressAnim.setValue(0);
      return;
    }
 
    // Animate to 90% — the last 10% fills instantly on completion
    Animated.timing(progressAnim, {
      toValue: 0.9,
      duration: estimatedSeconds * 1000,
      easing: Easing.out(Easing.quad),
      useNativeDriver: false,
    }).start();
 
    // Cycle through stage messages
    const intervalMs = (estimatedSeconds * 1000) / messages.length;
    const timer = setInterval(() => {
      setMessageIndex(prev => Math.min(prev + 1, messages.length - 1));
    }, intervalMs);
 
    return () => clearInterval(timer);
  }, [isVisible, estimatedSeconds, messages.length, progressAnim]);
 
  if (!isVisible) return null;
 
  const progressWidth = progressAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0%', '100%'],
  });
 
  return (
    <View style={styles.overlay}>
      <View style={styles.card}>
        <Text style={styles.message}>{messages[messageIndex]}</Text>
        <View style={styles.progressTrack}>
          <Animated.View
            style={[styles.progressFill, { width: progressWidth }]}
          />
        </View>
        <Text style={styles.estimate}>
          Estimated time: ~{estimatedSeconds}s
        </Text>
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.7)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  card: {
    backgroundColor: '#1C1C1E',
    borderRadius: 16,
    padding: 24,
    width: '80%',
    alignItems: 'center',
  },
  message: { color: '#FFF', fontSize: 16, marginBottom: 16 },
  progressTrack: {
    width: '100%', height: 4, backgroundColor: '#333',
    borderRadius: 2, overflow: 'hidden',
  },
  progressFill: {
    height: '100%', backgroundColor: '#007AFF', borderRadius: 2,
  },
  estimate: { color: '#888', fontSize: 12, marginTop: 12 },
});

// Memory leak prevention — cleanup on screen exit
import { useEffect } from 'react';
import * as FileSystem from 'expo-file-system';
 
function useImageCleanup(tempImageUris: string[]) {
  useEffect(() => {
    return () => {
      tempImageUris.forEach(async (uri) => {
        try {
          const info = await FileSystem.getInfoAsync(uri);
          if (info.exists) {
            await FileSystem.deleteAsync(uri, { idempotent: true });
          }
        } catch (error) {
          console.warn('Failed to clean up temp image:', uri);
        }
      });
    };
  }, [tempImageUris]);
}

// Normalize EXIF orientation before processing
import * as ImageManipulator from 'expo-image-manipulator';
 
async function normalizeImageOrientation(uri: string): Promise<string> {
  const result = await ImageManipulator.manipulateAsync(
    uri,
    [], // No operations — just normalize
    { compress: 0.95, format: ImageManipulator.SaveFormat.PNG }
  );
  return result.uri;
}

// WRONG: API key exposed in client code
const result = await fetch('https://api.remove.bg/v1.0/removebg', {
  headers: { 'X-Api-Key': 'YOUR_API_KEY' }, // Never do this
});
 
// CORRECT: Route through your own backend
const result = await fetch('https://your-backend.workers.dev/api/remove-bg', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${userAuthToken}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ imageBase64 }),
});
// Backend adds the API key and forwards to remove.bg

// backend: quota guard on Cloudflare Workers
interface QuotaState {
  remaining: number;
  level: 'normal' | 'conserve' | 'exhausted';
}
 
const CONSERVE_THRESHOLD = 40;   // below this, throttle free users
const EXHAUSTED_THRESHOLD = 5;   // below this, paid users only
 
export async function resolveQuota(kv: KVNamespace): Promise<QuotaState> {
  const cached = await kv.get('removebg:remaining');
  const remaining = cached ? Number(cached) : await fetchRemainingFromApi();
 
  let level: QuotaState['level'] = 'normal';
  if (remaining <= EXHAUSTED_THRESHOLD) level = 'exhausted';
  else if (remaining <= CONSERVE_THRESHOLD) level = 'conserve';
 
  return { remaining, level };
}
 
// Subtract the charged amount after every call and refresh KV
export async function commitUsage(
  kv: KVNamespace,
  response: Response,
): Promise<void> {
  const charged = Number(response.headers.get('X-Credits-Charged') ?? '1');
  const current = Number((await kv.get('removebg:remaining')) ?? '0');
  const next = Math.max(0, current - charged);
  // Short TTL so a manual top-up in the dashboard propagates on its own
  await kv.put('removebg:remaining', String(next), { expirationTtl: 900 });
}

// Export with format selection, camera roll save, and share
import * as MediaLibrary from 'expo-media-library';
import * as Sharing from 'expo-sharing';
import * as ImageManipulator from 'expo-image-manipulator';
 
interface ExportOptions {
  format: 'png' | 'jpeg';
  quality: number;
  maxWidth?: number;
}
 
async function exportImage(
  imageUri: string,
  options: ExportOptions,
): Promise<{ savedUri: string; fileSize: number }> {
  const manipulations: ImageManipulator.Action[] = [];
  if (options.maxWidth) {
    manipulations.push({ resize: { width: options.maxWidth } });
  }
 
  const format = options.format === 'png'
    ? ImageManipulator.SaveFormat.PNG
    : ImageManipulator.SaveFormat.JPEG;
 
  const result = await ImageManipulator.manipulateAsync(
    imageUri,
    manipulations,
    { compress: options.quality, format },
  );
 
  const { status } = await MediaLibrary.requestPermissionsAsync();
  if (status !== 'granted') {
    throw new Error('Camera roll access was not granted');
  }
 
  const asset = await MediaLibrary.createAssetAsync(result.uri);
  const album = await MediaLibrary.getAlbumAsync('AI Photo Editor');
  if (album) {
    await MediaLibrary.addAssetsToAlbumAsync([asset], album, false);
  } else {
    await MediaLibrary.createAlbumAsync('AI Photo Editor', asset, false);
  }
 
  const fileInfo = await FileSystem.getInfoAsync(result.uri);
  const fileSize = fileInfo.exists ? (fileInfo.size ?? 0) : 0;
 
  return { savedUri: result.uri, fileSize };
}
 
async function shareImage(imageUri: string): Promise<void> {
  const isAvailable = await Sharing.isAvailableAsync();
  if (!isAvailable) {
    throw new Error('Sharing is not available on this device');
  }
 
  await Sharing.shareAsync(imageUri, {
    mimeType: imageUri.endsWith('.png') ? 'image/png' : 'image/jpeg',
    dialogTitle: 'Share edited photo',
  });
}