/**
 * Image Optimization Settings - Unified Design with TypeScript
 */

import {  useState, useEffect, useRef  } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import {
  TextareaControl,
  RadioControl,
  RangeControl,
  Spinner,
} from '@wordpress/components';
import apiFetch from '@wordpress/api-fetch';
import { useNotification } from '../../../contexts/NotificationContext';
import ProrankToggleSlider from '../../../components/ProrankToggleSlider';
import ProrankButton from '../../../components/ProrankButton';
import ImageDeliveryHealthPanel from './ImageDeliveryHealthPanel';
import * as React from 'react';

interface ImageOptimizationSettingsProps {
  onClose?: () => void;
  embedded?: boolean;
  moduleEnabled?: boolean;
}

interface ImageSettings {
  optimization_method: 'local' | 'cloud' | 'smart';
  webp_enabled: boolean;
  webp_quality: number;
  avif_enabled: boolean;
  avif_quality: number;
  jxl_enabled: boolean;
  jxl_quality: number;
  png_quality: number;
  png_pipeline: boolean;
  jpegli_enabled: boolean;
  compression_type: 'lossless' | 'glossy' | 'lossy' | 'aggressive';
  smart_compression: boolean;
  optimize_on_upload: boolean;
  background_mode: boolean;
  backup_originals: boolean;
  optimize_original_source: boolean;
  lazyload_images: boolean;
  lazyload_iframes: boolean;
  lazyload_videos: boolean;
  lazyload_threshold: number;
  cdn_enabled: boolean;
  cdn_url: string;
  exclude_paths: string;
  cloud_opt_in: boolean;
  cloud_opt_in_at?: number | null;
  // Advanced settings
  png_to_jpeg: boolean;
  cmyk_to_rgb: boolean;
  remove_exif: boolean;
  optimize_pdf: boolean;
  generate_retina: boolean;
  auto_generate_missing_sizes: boolean;
  oversized_threshold: number;
  no_ai_training: boolean;
  resize_large_enabled: boolean;
  resize_max_width: number;
  resize_max_height: number;
  delivery_method: 'picture' | 'accept_header' | 'htaccess' | 'cdn' | 'none';
}

interface ImageStats {
  total_images: number;
  optimized_images: number;
  saved_bytes: number;
  optimization_percentage: number;
  pending?: number;
  unresolved_images?: number;
  failed_images?: number;
  retryable_failed_images?: number;
  exhausted_failed_images?: number;
  no_gain_images?: number;
  bulk_retry_limit?: number;
  backup_size?: number;
  backup_size_formatted?: string;
  already_modern_images?: number;
  unsupported_images?: number;
  source_images?: number;
}

interface BulkProgress {
  current: number;
  total: number;
  current_image: string;
  bytes_saved: number;
  status: 'idle' | 'running' | 'completed' | 'error' | 'stale';
  error_message?: string;
  updated_at?: number | null;
  started_at?: number | null;
  job_id?: string | null;
  eta_seconds?: number | null;
  stale_after_seconds?: number;
  log?: Array<{
    image: string;
    status: string;
    bytes_saved?: number;
    reason?: string;
    ts?: number;
  }>;
  percent?: number;
  active_index?: number | null;
  summary?: {
    processed: number;
    saved_bytes: number;
    failed?: number;
  };
}

interface ServerSupport {
  gd: boolean;
  imagick: boolean;
  webp: boolean;
  avif: boolean;
  jxl: boolean;
  jpegli: boolean;
  htaccess: boolean;
  details: {
    gd_version?: string;
    imagick_version?: string;
    libvips_version?: string;
    libjxl_version?: string;
  };
  server: {
    software: string;
    php_version: string;
    memory_limit: string;
    max_execution_time: string;
    upload_max_filesize: string;
  };
  cloud: {
    available: boolean;
    formats: string[];
    version?: string;
    capabilities?: {
      jxl?: boolean;
      jpegli?: boolean;
      png_pipeline?: boolean;
    };
  };
}

interface CloudQuota {
  tier?: string;
  quota?: {
    yearly: number;
    monthly?: number;
    period_start?: number;
    period_end?: number;
    period_source?: string;
  };
  quota_formatted?: {
    yearly: string;
    monthly?: string;
  };
  used?: number;
  used_formatted?: string;
  remaining?: number;
  remaining_formatted?: string;
  next_reset?: string;
  status?: 'active' | 'exhausted' | 'no_license';
  percentage?: number;
}

const ImageOptimizationSettings: React.FC<ImageOptimizationSettingsProps> = ({
  onClose,
  embedded = false,
  moduleEnabled: initialModuleEnabled = true,
}) => {
  const { showNotification } = useNotification();
  const restData =
    (window as any).prorankSeo ||
    (window as any).prorankSeoAdmin ||
    (window as any).proRankSEO ||
    (window as any).proRankSeoAdmin ||
    {};
  const restNonce =
    restData.restNonce ||
    restData.nonce ||
    (window as any).wpApiSettings?.nonce ||
    '';
  const restRoot =
    restData.restUrl ||
    (window as any).wpApiSettings?.root ||
    '/wp-json/';

  const buildRestUrl = (path: string) => {
    if (path.startsWith('http')) {
      return path;
    }
    const base = restRoot.endsWith('/') ? restRoot : `${restRoot}/`;
    const normalizedPath = path.startsWith('/') ? path.slice(1) : path;
    return `${base}${normalizedPath}`;
  };

  const apiRequest = <T,>(options: {
    path: string;
    method?: string;
    data?: any;
    headers?: Record<string, string>;
  }) => {
    const { path, ...rest } = options;
    if (path.startsWith('http')) {
      return apiFetch<T>({
        ...rest,
        url: buildRestUrl(path),
        credentials: 'same-origin',
        headers: {
          ...(rest.headers || {}),
          ...(restNonce ? { 'X-WP-Nonce': restNonce } : {}),
        },
      });
    }
    return apiFetch<T>({
      ...rest,
      path,
      credentials: 'same-origin',
      headers: {
        ...(rest.headers || {}),
        ...(restNonce ? { 'X-WP-Nonce': restNonce } : {}),
      },
    });
  };
  
  const [settings, setSettings] = useState<ImageSettings>({
    optimization_method: 'local',
    webp_enabled: true,
    webp_quality: 85,
    avif_enabled: false,
    avif_quality: 80,
    jxl_enabled: false,
    jxl_quality: 85,
    png_quality: 80,
    png_pipeline: false,
    jpegli_enabled: false,
    compression_type: 'glossy',
    smart_compression: true,
    optimize_on_upload: true,
    background_mode: false,
    backup_originals: true,
    optimize_original_source: false,
    lazyload_images: true,
    lazyload_iframes: false,
    lazyload_videos: false,
    lazyload_threshold: 200,
    cdn_enabled: false,
    cdn_url: '',
    exclude_paths: '',
    cloud_opt_in: false,
    cloud_opt_in_at: null,
    // Advanced settings defaults
    png_to_jpeg: true,
    cmyk_to_rgb: true,
    remove_exif: true,
    optimize_pdf: false,
    generate_retina: false,
    auto_generate_missing_sizes: false,
    oversized_threshold: 0,
    no_ai_training: false,
    resize_large_enabled: false,
    resize_max_width: 2560,
    resize_max_height: 2560,
    delivery_method: 'picture',
  });

  const [loading, setLoading] = useState<boolean>(true);
  const [saving, setSaving] = useState<boolean>(false);
  const [bulkProcessing, setBulkProcessing] = useState<boolean>(false);
  const [enablingRuntime, setEnablingRuntime] = useState<boolean>(false);
  const [moduleEnabled, setModuleEnabled] = useState<boolean>(initialModuleEnabled);
  const [stats, setStats] = useState<ImageStats>({
    total_images: 0,
    optimized_images: 0,
    saved_bytes: 0,
    optimization_percentage: 0,
    backup_size: 0,
    already_modern_images: 0,
    unsupported_images: 0,
    source_images: 0,
  });
  const [progress, setProgress] = useState<BulkProgress>({
    current: 0,
    total: 0,
    current_image: '',
    bytes_saved: 0,
    status: 'idle',
    log: [],
  });
  const [browserAssistMode, setBrowserAssistMode] = useState<boolean>(false);
  const [recoveryMessage, setRecoveryMessage] = useState<string>('');
  const [startTime, setStartTime] = useState<number | null>(null);
  const [serverSupport, setServerSupport] = useState<ServerSupport | null>(null);
  const [cloudQuota, setCloudQuota] = useState<CloudQuota | null>(null);
  const effectiveFormatOutputEnabled =
    settings.optimization_method === 'local'
      ? settings.webp_enabled
      : settings.webp_enabled || settings.avif_enabled || settings.jxl_enabled;
  const lastProgressRef = useRef<{ current: number; currentImage: string; updatedAt: number | null; bytesSaved: number }>({
    current: 0,
    currentImage: '',
    updatedAt: null,
    bytesSaved: 0,
  });
  const stalledSinceRef = useRef<number | null>(null);
  const recoveryRunningRef = useRef<boolean>(false);
  const recoveryNoticeShownRef = useRef<boolean>(false);
  const recoveryMessageShownRef = useRef<boolean>(false);
  const browserAssistModeRef = useRef<boolean>(false);
  const lastRecoveryAttemptRef = useRef<number | null>(null);
  const STALLED_PROGRESS_GRACE_MS = 45000;
  const WARMUP_STALLED_PROGRESS_GRACE_MS = 15000;
  const RECOVERY_COOLDOWN_MS = 20000;
  const getRecoveryGraceMs = (): number => (
    progress.current <= 1 ? WARMUP_STALLED_PROGRESS_GRACE_MS : STALLED_PROGRESS_GRACE_MS
  );
  const presetQualities = {
    aggressive: { compression_type: 'aggressive', webp: 65, avif: 55, jxl: 65, png: 60 },
    lossy: { compression_type: 'lossy', webp: 75, avif: 65, jxl: 75, png: 70 },
    glossy: { compression_type: 'glossy', webp: 82, avif: 75, jxl: 82, png: 80 },
    lossless: { compression_type: 'lossless', webp: 100, avif: 100, jxl: 100, png: 100 },
  };

  useEffect(() => {
    loadSettings();
    loadStats();
    loadServerSupport();
  }, []);

  useEffect(() => {
    const resumeExistingBulkJob = async () => {
      try {
        const response = await apiRequest<{
          success?: boolean;
          progress?: BulkProgress;
        }>({
          path: '/prorank-seo/v1/image-optimization/progress',
        });

        const existing = response?.progress;
        if (!existing) {
          return;
        }

        const resumableStatuses = ['running', 'stale', 'processing'];

        if (resumableStatuses.includes(existing.status)) {
          setProgress(existing);
          setBulkProcessing(true);
          setStartTime(existing.started_at ? existing.started_at * 1000 : Date.now());
        }
      } catch (error) {
        // Ignore on initial load; the page can still be used normally.
      }
    };

    resumeExistingBulkJob();
  }, []);

  // Refresh stats when bulk finishes
  useEffect(() => {
    if (progress.status === 'completed') {
      loadStats();
    }
  }, [progress.status]);

  // Poll for progress when bulk processing is active
  useEffect(() => {
    if (!bulkProcessing) return;

    const attemptBrowserRecovery = async () => {
      if (recoveryRunningRef.current) {
        return;
      }

      recoveryRunningRef.current = true;
      stalledSinceRef.current = Date.now();
      lastRecoveryAttemptRef.current = Date.now();
      browserAssistModeRef.current = true;
      setBrowserAssistMode(true);
      setRecoveryMessage(
        __('Background processing appears to be stalled on this host. ProRank is switching to browser-assisted mode for the next image. Keep this page open while recovery runs.', 'prorank-seo')
      );

      if (!recoveryNoticeShownRef.current) {
        showNotification(
          __('Background processing appears to be stalled. ProRank is switching to browser-assisted mode. Keep this page open while recovery runs.', 'prorank-seo'),
          'warning'
        );
        recoveryNoticeShownRef.current = true;
      }

      let consecutiveFailures = 0;
      const MAX_CONSECUTIVE_FAILURES = 5;

      // Process images one at a time in a loop
      // eslint-disable-next-line no-constant-condition
      while (true) {
        try {
          const queueResponse = await apiRequest<{ attachment_ids?: number[] }>({
            path: '/prorank-seo/v1/image-optimization/images/unoptimized',
          });
          const attachmentId = queueResponse?.attachment_ids?.[0];

          if (!attachmentId) {
            showNotification(
              __('Browser-assisted optimization complete. All images processed.', 'prorank-seo'),
              'success'
            );
            break;
          }

          await apiRequest({
            path: '/prorank-seo/v1/image-optimization/images/optimize',
            method: 'POST',
            data: { attachment_id: attachmentId },
          });

          consecutiveFailures = 0;

          if (!recoveryMessageShownRef.current) {
            showNotification(
              __('Browser-assisted mode active. Processing images one at a time. Keep this page open.', 'prorank-seo'),
              'info'
            );
            recoveryMessageShownRef.current = true;
          }
        } catch (error: any) {
          consecutiveFailures++;
          if (consecutiveFailures >= MAX_CONSECUTIVE_FAILURES) {
            setRecoveryMessage(
              __('Too many consecutive failures. Try again with only WebP enabled, or configure a real server cron job.', 'prorank-seo')
            );
            showNotification(
              error?.message || __('Browser-assisted recovery stopped after repeated failures.', 'prorank-seo'),
              'error'
            );
            break;
          }
          // Single failure: image was marked as failed server-side, continue to next
          continue;
        }
      }

      recoveryRunningRef.current = false;
    };

    const pollProgress = async () => {
      try {
        const response = await apiRequest<{
          progress: BulkProgress;
          running?: boolean;
          remaining?: number;
          optimized?: number;
          total?: number;
        }>({
          path: '/prorank-seo/v1/image-optimization/progress',
        });
        if (response?.progress) {
          const isCompleted =
            response.progress.status === 'completed' ||
            (
              response.running === false &&
              (response.remaining ?? 0) === 0 &&
              (response.total ?? response.progress.total ?? 0) > 0
            );

          const normalizedProgress: BulkProgress = isCompleted
            ? {
                ...response.progress,
                current: response.optimized ?? response.total ?? response.progress.current,
                total: response.total ?? response.progress.total,
                status: 'completed',
              }
            : response.progress;

          const progressAdvanced =
            normalizedProgress.current > lastProgressRef.current.current ||
            normalizedProgress.current_image !== lastProgressRef.current.currentImage ||
            normalizedProgress.bytes_saved > lastProgressRef.current.bytesSaved;

          if (progressAdvanced) {
            stalledSinceRef.current = null;
            if (browserAssistModeRef.current) {
              browserAssistModeRef.current = false;
              setBrowserAssistMode(false);
              setRecoveryMessage('');
            }
          } else if (['running', 'processing', 'stale'].includes(normalizedProgress.status)) {
            if (!stalledSinceRef.current) {
              stalledSinceRef.current = Date.now();
            } else if (
              Date.now() - stalledSinceRef.current >= getRecoveryGraceMs() &&
              (
                !lastRecoveryAttemptRef.current ||
                Date.now() - lastRecoveryAttemptRef.current >= RECOVERY_COOLDOWN_MS
              )
            ) {
              await attemptBrowserRecovery();
            }
          } else {
            stalledSinceRef.current = null;
          }

          lastProgressRef.current = {
            current: normalizedProgress.current,
            currentImage: normalizedProgress.current_image,
            updatedAt: normalizedProgress.updated_at ?? null,
            bytesSaved: normalizedProgress.bytes_saved ?? 0,
          };

          setProgress(normalizedProgress);

          if (isCompleted) {
            setBulkProcessing(false);
            setStartTime(null);
            browserAssistModeRef.current = false;
            setBrowserAssistMode(false);
            setRecoveryMessage('');
            stalledSinceRef.current = null;
            lastRecoveryAttemptRef.current = null;
            recoveryNoticeShownRef.current = false;
            recoveryMessageShownRef.current = false;
            showNotification(
              sprintf(
                __('Optimization complete! %d images processed, %s saved.', 'prorank-seo'),
                normalizedProgress.current,
                formatBytes(normalizedProgress.bytes_saved)
              ),
              'success'
            );
            await loadStats();
          } else if (normalizedProgress.status === 'error') {
            setBulkProcessing(false);
            setStartTime(null);
            browserAssistModeRef.current = false;
            setBrowserAssistMode(false);
            stalledSinceRef.current = null;
            lastRecoveryAttemptRef.current = null;
            recoveryNoticeShownRef.current = false;
            recoveryMessageShownRef.current = false;
            showNotification(
              normalizedProgress.error_message || __('An error occurred during optimization', 'prorank-seo'),
              'error'
            );
          } else if (normalizedProgress.status === 'stale') {
            await attemptBrowserRecovery();
          }
        }
      } catch (error) {
        console.error('Failed to poll progress:', error);
      }
    };

    const interval = setInterval(pollProgress, 1500);
    pollProgress(); // Initial poll

    return () => clearInterval(interval);
  }, [bulkProcessing]);

  // Format bytes to human readable
  const formatBytes = (bytes: number): string => {
    if (bytes >= 1048576) {
      return sprintf(__('%s MB', 'prorank-seo'), (bytes / 1048576).toFixed(2));
    }
    return sprintf(__('%s KB', 'prorank-seo'), (bytes / 1024).toFixed(2));
  };

  // Calculate estimated time remaining
  const getTimeRemaining = (): string => {
    if (!startTime || progress.current === 0 || progress.total === 0) return '';
    const elapsed = (Date.now() - startTime) / 1000;
    const rate = progress.current / elapsed;
    const remaining = (progress.total - progress.current) / rate;
    if (remaining < 60) return sprintf(__('%d seconds', 'prorank-seo'), Math.round(remaining));
    if (remaining < 3600) return sprintf(__('%d minutes', 'prorank-seo'), Math.round(remaining / 60));
    return sprintf(__('%d hours', 'prorank-seo'), Math.round(remaining / 3600));
  };

  const formatLogTime = (ts?: number): string => {
    if (!ts) return '';
    const d = new Date(ts * 1000);
    return d.toLocaleTimeString();
  };

  const getActiveIndex = (): number => {
    if (typeof progress.active_index === 'number') {
      return progress.active_index;
    }
    if (progress.current_image) {
      return (progress.current || 0) + 1;
    }
    return progress.current || 0;
  };

  const getOverallPercent = (): number => {
    if (typeof progress.percent === 'number') {
      return progress.percent;
    }
    if (progress.total > 0) {
      return Math.round((progress.current / progress.total) * 100);
    }
    return 0;
  };

  const queueableRemaining = Math.max(
    0,
    stats.pending ?? (stats.total_images - stats.optimized_images)
  );
  const retryableFailedImages = Math.max(0, stats.retryable_failed_images ?? 0);
  const exhaustedFailedImages = Math.max(0, stats.exhausted_failed_images ?? 0);
  const noGainImages = Math.max(0, stats.no_gain_images ?? 0);
  const bulkRetryLimit = Math.max(1, stats.bulk_retry_limit ?? 3);

  const normalizeDeliveryMethod = (
    value?: string
  ): ImageSettings['delivery_method'] => {
    if (value === 'accept') {
      return 'accept_header';
    }
    if (value === 'rewrite') {
      return 'htaccess';
    }
    if (value === 'picture_global') {
      return 'picture';
    }
    if (value === 'picture' || value === 'accept_header' || value === 'htaccess' || value === 'cdn' || value === 'none') {
      return value;
    }
    return 'picture';
  };

  const formatFailureReason = (reason?: string): string => {
    if (!reason) {
      return __('Optimization failed', 'prorank-seo');
    }
    if (reason === 'no_effective_output') {
      return __('No smaller output was produced for this image.', 'prorank-seo');
    }
    return reason.replace(/_/g, ' ');
  };

  const normalizeBooleanSetting = (value: unknown): boolean => {
    if (typeof value === 'boolean') {
      return value;
    }
    if (typeof value === 'number') {
      return value !== 0;
    }
    if (typeof value === 'string') {
      const normalized = value.trim().toLowerCase();
      if (['1', 'true', 'yes', 'on', 'enabled'].includes(normalized)) {
        return true;
      }
      if (['0', 'false', 'no', 'off', 'disabled', ''].includes(normalized)) {
        return false;
      }
    }
    return Boolean(value);
  };

  const normalizeIntegerSetting = (
    value: unknown,
    fallback: number,
    min: number,
    max: number
  ): number => {
    const numeric = typeof value === 'number'
      ? value
      : typeof value === 'string' && value.trim() !== ''
        ? Number(value)
        : NaN;

    if (!Number.isFinite(numeric)) {
      return fallback;
    }

    return Math.min(max, Math.max(min, Math.round(numeric)));
  };

  const normalizeOversizedThreshold = (value: unknown): number => {
    const threshold = normalizeIntegerSetting(value, 0, 0, 8192);
    return threshold > 0 ? Math.max(640, threshold) : 0;
  };

  const normalizeFreeSettings = (value: Partial<ImageSettings>): Partial<ImageSettings> => ({
    ...value,
    optimization_method: 'local',
    compression_type:
      value.compression_type === 'lossless' || value.compression_type === 'glossy' || value.compression_type === 'lossy' || value.compression_type === 'aggressive'
        ? value.compression_type
        : 'glossy',
    webp_enabled: normalizeBooleanSetting(value.webp_enabled),
    webp_quality: normalizeIntegerSetting(value.webp_quality, 85, 0, 100),
    avif_enabled: normalizeBooleanSetting(value.avif_enabled),
    avif_quality: normalizeIntegerSetting(value.avif_quality, 80, 0, 100),
    jxl_enabled: normalizeBooleanSetting(value.jxl_enabled),
    jxl_quality: normalizeIntegerSetting(value.jxl_quality, 85, 0, 100),
    jpegli_enabled: normalizeBooleanSetting(value.jpegli_enabled),
    png_quality: normalizeIntegerSetting(value.png_quality, 80, 0, 100),
    png_pipeline: normalizeBooleanSetting(value.png_pipeline),
    smart_compression: normalizeBooleanSetting(value.smart_compression),
    optimize_on_upload: normalizeBooleanSetting(value.optimize_on_upload),
    background_mode: normalizeBooleanSetting(value.background_mode),
    backup_originals: normalizeBooleanSetting(value.backup_originals),
    optimize_original_source: normalizeBooleanSetting(value.optimize_original_source),
    lazyload_images: normalizeBooleanSetting(value.lazyload_images),
    lazyload_iframes: normalizeBooleanSetting(value.lazyload_iframes),
    lazyload_videos: normalizeBooleanSetting(value.lazyload_videos),
    lazyload_threshold: normalizeIntegerSetting(value.lazyload_threshold, 200, 0, 1000),
    cdn_enabled: normalizeBooleanSetting(value.cdn_enabled),
    cdn_url: typeof value.cdn_url === 'string' ? value.cdn_url : '',
    exclude_paths: typeof value.exclude_paths === 'string' ? value.exclude_paths : '',
    png_to_jpeg: normalizeBooleanSetting(value.png_to_jpeg),
    cmyk_to_rgb: normalizeBooleanSetting(value.cmyk_to_rgb),
    remove_exif: normalizeBooleanSetting(value.remove_exif),
    optimize_pdf: normalizeBooleanSetting(value.optimize_pdf),
    generate_retina: normalizeBooleanSetting(value.generate_retina),
    auto_generate_missing_sizes: normalizeBooleanSetting(value.auto_generate_missing_sizes),
    oversized_threshold: normalizeOversizedThreshold(value.oversized_threshold),
    no_ai_training: normalizeBooleanSetting(value.no_ai_training),
    resize_large_enabled: normalizeBooleanSetting(value.resize_large_enabled),
    resize_max_width: normalizeIntegerSetting(value.resize_max_width, 2560, 320, 8192),
    resize_max_height: normalizeIntegerSetting(value.resize_max_height, 2560, 320, 8192),
    cloud_opt_in: false,
    cloud_opt_in_at: null,
  });

  const loadSettings = async (): Promise<void> => {
    try {
      const response = await apiRequest({
        path: '/prorank-seo/v1/performance/image-optimization/settings',
      });
      if (response?.settings) {
        const merged = normalizeFreeSettings({
          ...settings,
          ...response.settings,
          delivery_method: normalizeDeliveryMethod(response.settings.delivery_method),
        });
        setSettings(merged as ImageSettings);
      }
    } catch (error: any) {
      showNotification(
        error?.message || __('Failed to load settings. Please refresh the page.', 'prorank-seo'),
        'error'
      );
    } finally {
      setLoading(false);
    }
  };

  const loadStats = async (): Promise<void> => {
    try {
      const response = await apiRequest<{
        stats?: ImageStats;
        module_enabled?: boolean;
      }>({
        path: '/prorank-seo/v1/performance/image-optimization/stats',
      });
      setModuleEnabled(response?.module_enabled !== false);
      if (response?.stats) {
        setStats(response.stats);
      }
    } catch (error: any) {
      // Stats are non-critical, show warning only
      console.warn('Failed to load image stats:', error);
    }
  };

  const loadServerSupport = async (): Promise<void> => {
    try {
      const response = await apiRequest<{ success: boolean; support: ServerSupport }>({
        path: '/prorank-seo/v1/image-optimization/check-support',
      });
      if (response?.support) {
        setServerSupport(response.support);
      }
    } catch (error: any) {
      // Server support is non-critical
      console.warn('Failed to load server support:', error);
    }
  };

  const applyPreset = (presetKey: keyof typeof presetQualities): void => {
    const preset = presetQualities[presetKey];
    if (!preset) return;
    setSettings((prev) => ({
      ...prev,
      compression_type: preset.compression_type,
      webp_quality: preset.webp,
      avif_quality: preset.avif,
      jxl_quality: preset.jxl,
      png_quality: preset.png,
    }));
    showNotification(__('Preset applied', 'prorank-seo'), 'success');
  };

  const describePreset = (presetKey: keyof typeof presetQualities): string => {
    const preset = presetQualities[presetKey];
    if (!preset) return '';
    return `WebP ${preset.webp}% · AVIF ${preset.avif}% · JXL ${preset.jxl}% · PNG ${preset.png}%`;
  };

  const buildNormalizedSettingsPayload = (nextSettings?: ImageSettings): Partial<ImageSettings> => {
    const isEventPayload =
      nextSettings && typeof nextSettings === 'object' && 'preventDefault' in nextSettings;
    const safeSettings = isEventPayload ? undefined : nextSettings;
    const payload = safeSettings ?? settings;

    return normalizeFreeSettings({
      ...payload,
      delivery_method: normalizeDeliveryMethod(payload.delivery_method),
    });
  };

  const persistSettings = async (nextSettings?: ImageSettings, notifySuccess = true): Promise<Partial<ImageSettings>> => {
    const normalizedPayload = buildNormalizedSettingsPayload(nextSettings);

    await apiRequest({
      path: '/prorank-seo/v1/performance/image-optimization/settings',
      method: 'POST',
      data: { settings: normalizedPayload },
    });

    if (notifySuccess) {
      showNotification(__('Settings saved successfully', 'prorank-seo'), 'success');
    }

    return normalizedPayload;
  };

  const saveSettings = async (nextSettings?: ImageSettings): Promise<void> => {
    setSaving(true);
    try {
      await persistSettings(nextSettings, true);
    } catch (error: any) {
      showNotification(error?.message || __('Failed to save settings', 'prorank-seo'), 'error');
    } finally {
      setSaving(false);
    }
  };

  const startBulkOptimization = async (forceReoptimization = false): Promise<void> => {
    if (!moduleEnabled) {
      showNotification(
        __('Image Optimization is currently disabled. Enable the Image Optimisation module first, then try again.', 'prorank-seo'),
        'warning'
      );
      return;
    }

    if (!effectiveFormatOutputEnabled) {
      showNotification(
        __('Enable WebP before starting local bulk optimization. Save settings first if you just changed the format toggle.', 'prorank-seo'),
        'warning'
      );
      return;
    }

    // Reset progress state
    setProgress({
      current: 0,
      total: 0,
      current_image: '',
      bytes_saved: 0,
      status: 'running',
    });
    setBrowserAssistMode(false);
    setRecoveryMessage('');
    browserAssistModeRef.current = false;
    lastProgressRef.current = { current: 0, currentImage: '', updatedAt: null, bytesSaved: 0 };
    stalledSinceRef.current = null;
    recoveryRunningRef.current = false;
    recoveryNoticeShownRef.current = false;
    recoveryMessageShownRef.current = false;
    lastRecoveryAttemptRef.current = null;
    setStartTime(Date.now());
    setBulkProcessing(true);

    try {
      await persistSettings(settings, false);

      const response = await apiRequest<{
        message?: string;
        total?: number;
        scheduled?: number;
        complete?: boolean;
        no_retryable_images?: boolean;
        failed_images?: number;
        no_gain_images?: number;
        unresolved_images?: number;
      }>({
        path: forceReoptimization
          ? '/prorank-seo/v1/image-optimization/reoptimize'
          : '/prorank-seo/v1/image-optimization/bulk-convert',
        method: 'POST',
      });

      // Update total if returned
      if (response?.total) {
        setProgress(prev => ({ ...prev, total: response.total }));
      }

      if (response?.scheduled) {
        setProgress(prev => ({ ...prev, total: response.scheduled }));
      }

      if (response?.no_retryable_images) {
        setProgress({
          current: 0,
          total: 0,
          current_image: '',
          bytes_saved: stats.saved_bytes ?? 0,
          status: 'idle',
        });
        setBulkProcessing(false);
        setStartTime(null);
        setBrowserAssistMode(false);
        setRecoveryMessage('');
        browserAssistModeRef.current = false;
        stalledSinceRef.current = null;
        lastRecoveryAttemptRef.current = null;
        recoveryRunningRef.current = false;
        recoveryNoticeShownRef.current = false;
        recoveryMessageShownRef.current = false;

        await loadStats();
        showNotification(
          response?.message || __('No retryable images remain right now. Review the failed-image count below.', 'prorank-seo'),
          'warning'
        );
        return;
      }

      if (response?.complete) {
        const completedTotal = response.total ?? stats.total_images ?? 0;

        setProgress({
          current: completedTotal,
          total: completedTotal,
          current_image: '',
          bytes_saved: stats.saved_bytes ?? 0,
          status: 'completed',
        });
        setBulkProcessing(false);
        setStartTime(null);
        setBrowserAssistMode(false);
        setRecoveryMessage('');
        browserAssistModeRef.current = false;
        stalledSinceRef.current = null;
        lastRecoveryAttemptRef.current = null;
        recoveryRunningRef.current = false;
        recoveryNoticeShownRef.current = false;
        recoveryMessageShownRef.current = false;

        await loadStats();
        showNotification(
          response?.message || __('All images have already been optimized', 'prorank-seo'),
          'success'
        );
        return;
      }

      showNotification(
        response?.message ||
          (response?.scheduled
            ? sprintf(__('Scheduled %s images for optimization', 'prorank-seo'), response.scheduled)
            : __('Bulk optimization started', 'prorank-seo')),
        'info'
      );
      // Note: Don't set bulkProcessing to false here - the polling useEffect will handle it
    } catch (error: any) {
      if (
        error?.data?.status === 409 ||
        error?.statusCode === 409 ||
        error?.code === 'already_running' ||
        (typeof error?.message === 'string' && error.message.toLowerCase().includes('already running'))
      ) {
        try {
          const existing = await apiRequest<{
            success?: boolean;
            progress?: BulkProgress;
          }>({
            path: '/prorank-seo/v1/image-optimization/progress',
          });

          const existingProgress = existing?.progress;
          const resumableStatuses = ['running', 'stale', 'processing'];

          if (existingProgress && resumableStatuses.includes(existingProgress.status)) {
            setProgress(existingProgress);
            setBulkProcessing(true);
            setStartTime(existingProgress.started_at ? existingProgress.started_at * 1000 : Date.now());
            showNotification(
              __('An existing bulk optimization job is already running on this site. ProRank resumed its progress view instead of starting a duplicate job.', 'prorank-seo'),
              'info'
            );
            return;
          }
        } catch (resumeError) {
          console.error('Failed to resume existing bulk optimization job:', resumeError);
        }
      }

      setBulkProcessing(false);
      setStartTime(null);
      setBrowserAssistMode(false);
      setRecoveryMessage('');
      browserAssistModeRef.current = false;
      setProgress(prev => ({ ...prev, status: 'error' }));
      showNotification(
        error?.message || __('Failed to start bulk optimization', 'prorank-seo'),
        'error'
      );
    }
  };

  const stopBulkOptimization = async (): Promise<void> => {
    try {
      await apiRequest({
        path: '/prorank-seo/v1/image-optimization/stop',
        method: 'POST',
      });
      setBulkProcessing(false);
      setStartTime(null);
      setBrowserAssistMode(false);
      setRecoveryMessage('');
      browserAssistModeRef.current = false;
      stalledSinceRef.current = null;
      lastRecoveryAttemptRef.current = null;
      recoveryNoticeShownRef.current = false;
      recoveryMessageShownRef.current = false;
      setProgress(prev => ({ ...prev, status: 'idle' }));
      showNotification(__('Optimization stopped', 'prorank-seo'), 'info');
      await loadStats();
    } catch (error: any) {
      showNotification(
        error?.message || __('Failed to stop optimization', 'prorank-seo'),
        'error'
      );
    }
  };

  const restoreBackups = async (): Promise<void> => {
    if (!moduleEnabled) {
      showNotification(
        __('Image Optimization is currently disabled. Enable the Image Optimisation module first, then try again.', 'prorank-seo'),
        'warning'
      );
      return;
    }

    try {
      setBulkProcessing(true);
      const response = await apiRequest<{ restored: number; failed: number; missing_files?: number; message?: string }>({
        path: '/prorank-seo/v1/image-optimization/restore-backups',
        method: 'POST',
      });
      const notificationType =
        (response?.restored ?? 0) === 0 && (response?.missing_files ?? 0) > 0 ? 'warning' : 'success';
      showNotification(
        response?.message ||
          sprintf(__('Restored %d images from backups', 'prorank-seo'), response?.restored ?? 0),
        notificationType
      );
      await loadStats();
    } catch (error: any) {
      showNotification(
        error?.message || __('Failed to restore backups', 'prorank-seo'),
        'error'
      );
    } finally {
      setBulkProcessing(false);
    }
  };

  const enableImageRuntime = async (): Promise<void> => {
    setEnablingRuntime(true);
    try {
      await apiRequest({
        path: '/prorank-seo/v1/modules/image_optimization/toggle',
        method: 'POST',
        data: { enabled: true },
      });
      setModuleEnabled(true);
      await loadStats();
      showNotification(__('Image Optimization runtime enabled', 'prorank-seo'), 'success');
    } catch (error: any) {
      showNotification(
        error?.message || __('Failed to enable Image Optimization runtime', 'prorank-seo'),
        'error'
      );
    } finally {
      setEnablingRuntime(false);
    }
  };

  if (loading) {
    return (
      <div className="prorank-performance-container">
        <div className="prorank-flex-center" style={{ padding: '50px' }}>
          <Spinner />
          <p>{__('Loading settings...', 'prorank-seo')}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="prorank-performance-container">
      {/* Statistics Overview Card */}
      <div className="prorank-card">
        <div className="prorank-card-header">
          <h3>
            <span className="dashicons dashicons-chart-bar"></span>
            {__('Optimization Statistics', 'prorank-seo')}
          </h3>
        </div>
            <div className="prorank-card-body">
              <div className="prorank-stats-grid">
                <div className="prorank-stat-item">
                  <div className="prorank-stat-value">{stats.total_images}</div>
                  <div className="prorank-stat-label">{__('Media Library Images', 'prorank-seo')}</div>
            </div>
            <div className="prorank-stat-item">
              <div className="prorank-stat-value">{stats.optimized_images}</div>
              <div className="prorank-stat-label">{__('Modern-ready Images', 'prorank-seo')}</div>
            </div>
            <div className="prorank-stat-item">
              <div className="prorank-stat-value">
                {stats.saved_bytes > 1048576
                  ? sprintf(__('%s MB', 'prorank-seo'), (stats.saved_bytes / 1048576).toFixed(2))
                  : sprintf(__('%s KB', 'prorank-seo'), (stats.saved_bytes / 1024).toFixed(2))}
              </div>
              <div className="prorank-stat-label">{__('Space Saved', 'prorank-seo')}</div>
            </div>
            <div className="prorank-stat-item">
              <div className="prorank-stat-value">{stats.optimization_percentage}%</div>
              <div className="prorank-stat-label">{__('Optimization Rate', 'prorank-seo')}</div>
            </div>
                {typeof stats.backup_size === 'number' && (
                  <div className="prorank-stat-item">
                    <div className="prorank-stat-value">
                      {stats.backup_size_formatted ||
                        (stats.backup_size > 1048576
                          ? sprintf(__('%s MB', 'prorank-seo'), (stats.backup_size / 1048576).toFixed(2))
                          : sprintf(__('%s KB', 'prorank-seo'), (stats.backup_size / 1024).toFixed(2)))}
                    </div>
                    <div className="prorank-stat-label">{__('Backup Storage Used', 'prorank-seo')}</div>
                  </div>
                )}
              </div>
              {(stats.already_modern_images || stats.unsupported_images) ? (
                <div style={{ marginTop: '12px', fontSize: '13px', color: '#6b7280' }}>
                  <div style={{ marginBottom: '4px' }}>
                    {__('Counts WordPress media attachments only, not generated thumbnails or format variants.', 'prorank-seo')}
                  </div>
                  {queueableRemaining > 0 ? (
                    <div>
                      {sprintf(
                        __('%d source image(s) are still queueable for conversion before they are modern-format ready.', 'prorank-seo'),
                        queueableRemaining
                      )}
                    </div>
                  ) : null}
                  {retryableFailedImages > 0 ? (
                    <div>
                      {sprintf(
                        __('%1$d image(s) previously failed and will be retried during manual bulk runs.', 'prorank-seo'),
                        retryableFailedImages
                      )}
                    </div>
                  ) : null}
                  {exhaustedFailedImages > 0 ? (
                    <div>
                      {sprintf(
                        __('%1$d image(s) hit the automatic retry limit of %2$d attempts and will not be retried again until their optimization state is reset.', 'prorank-seo'),
                        exhaustedFailedImages,
                        bulkRetryLimit
                      )}
                    </div>
                  ) : null}
                  {noGainImages > 0 ? (
                    <div>
                      {sprintf(
                        __('%d image(s) were evaluated and left unchanged because the optimizer could not produce a meaningfully smaller output.', 'prorank-seo'),
                        noGainImages
                      )}
                    </div>
                  ) : null}
                  {stats.already_modern_images ? (
                    <div>
                      {sprintf(
                        __('%d image(s) are already in modern formats and do not need conversion.', 'prorank-seo'),
                        stats.already_modern_images
                      )}
                    </div>
                  ) : null}
                  {stats.unsupported_images ? (
                    <div>
                      {sprintf(
                        __('%d image(s) use source formats that local optimization does not convert.', 'prorank-seo'),
                        stats.unsupported_images
                      )}
                    </div>
                  ) : null}
                </div>
              ) : (
                <div style={{ marginTop: '12px', fontSize: '13px', color: '#6b7280' }}>
                  {__('Counts WordPress media attachments only, not generated thumbnails or format variants.', 'prorank-seo')}
                </div>
              )}
            </div>
      </div>

      {/* Server Capabilities Card */}
      {serverSupport && (
        <div className="prorank-card">
          <div className="prorank-card-header">
            <h3>
              <span className="dashicons dashicons-admin-generic"></span>
              {__('Server Capabilities', 'prorank-seo')}
            </h3>
          </div>
          <div className="prorank-card-body">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px' }}>
              {/* Image Libraries */}
              <div style={{ padding: '16px', background: '#f9fafb', borderRadius: '8px' }}>
                <div style={{ fontSize: '13px', fontWeight: 600, marginBottom: '12px', color: '#374151' }}>
                  {__('Image Libraries', 'prorank-seo')}
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <span className={`dashicons ${serverSupport.gd ? 'dashicons-yes-alt' : 'dashicons-no-alt'}`}
                          style={{ color: serverSupport.gd ? '#16a34a' : '#dc2626' }}></span>
                    <span>GD Library {serverSupport.details.gd_version && `(${serverSupport.details.gd_version})`}</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <span className={`dashicons ${serverSupport.imagick ? 'dashicons-yes-alt' : 'dashicons-no-alt'}`}
                          style={{ color: serverSupport.imagick ? '#16a34a' : '#dc2626' }}></span>
                    <span>ImageMagick</span>
                  </div>
                </div>
              </div>

              {/* Format Support */}
              <div style={{ padding: '16px', background: '#f9fafb', borderRadius: '8px' }}>
                <div style={{ fontSize: '13px', fontWeight: 600, marginBottom: '12px', color: '#374151' }}>
                  {__('Format Support', 'prorank-seo')}
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <span className={`dashicons ${serverSupport.webp ? 'dashicons-yes-alt' : 'dashicons-no-alt'}`}
                          style={{ color: serverSupport.webp ? '#16a34a' : '#dc2626' }}></span>
                    <span>WebP</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <span className={`dashicons ${serverSupport.avif ? 'dashicons-yes-alt' : 'dashicons-no-alt'}`}
                          style={{ color: serverSupport.avif ? '#16a34a' : '#dc2626' }}></span>
                    <span>AVIF</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <span className={`dashicons ${serverSupport.jxl ? 'dashicons-yes-alt' : 'dashicons-no-alt'}`}
                          style={{ color: serverSupport.jxl ? '#16a34a' : '#dc2626' }}></span>
                    <span>JPEG XL {serverSupport.details.libjxl_version && `(${serverSupport.details.libjxl_version})`}</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <span className={`dashicons ${serverSupport.jpegli ? 'dashicons-yes-alt' : 'dashicons-no-alt'}`}
                          style={{ color: serverSupport.jpegli ? '#16a34a' : '#dc2626' }}></span>
                    <span>Jpegli</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <span className={`dashicons ${serverSupport.htaccess ? 'dashicons-yes-alt' : 'dashicons-no-alt'}`}
                          style={{ color: serverSupport.htaccess ? '#16a34a' : '#dc2626' }}></span>
                    <span>.htaccess rewrite</span>
                  </div>
                </div>
              </div>

              {/* Server Info */}
              <div style={{ padding: '16px', background: '#f9fafb', borderRadius: '8px' }}>
                <div style={{ fontSize: '13px', fontWeight: 600, marginBottom: '12px', color: '#374151' }}>
                  {__('Server Info', 'prorank-seo')}
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', fontSize: '13px', color: '#6b7280' }}>
                  <div>PHP: {serverSupport.server.php_version}</div>
                  <div>Memory: {serverSupport.server.memory_limit}</div>
                  <div>Max Upload: {serverSupport.server.upload_max_filesize}</div>
                  <div>Timeout: {serverSupport.server.max_execution_time}s</div>
                </div>
              </div>
            </div>

            {/* Warnings */}
            {(!serverSupport.webp || !serverSupport.avif || !serverSupport.jxl) && (
              <div className="prorank-notice prorank-notice-warning" style={{ marginTop: '16px' }}>
                <span className="dashicons dashicons-warning"></span>
                <div>
                  {!serverSupport.webp && !serverSupport.avif && !serverSupport.jxl ? (
                    __('Your server does not support local WebP, AVIF, or JPEG XL generation yet. Install or enable the required GD, ImageMagick, or CLI encoders to use these formats.', 'prorank-seo')
                  ) : !serverSupport.jxl ? (
                    __('JPEG XL is not available on this server. Install local JXL support if you want to generate JPEG XL files.', 'prorank-seo')
                  ) : !serverSupport.avif ? (
                    __('AVIF support requires PHP 8.1+ with GD or ImageMagick.', 'prorank-seo')
                  ) : (
                    __('WebP support is not available. Enable GD or ImageMagick with WebP support to generate WebP files locally.', 'prorank-seo')
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      )}

      {/* Image Formats Card */}
      <div className="prorank-card">
        <div className="prorank-card-header">
          <h3>
            <span className="dashicons dashicons-format-image"></span>
            {__('Image Formats', 'prorank-seo')}
          </h3>
          <div className={`prorank-badge ${effectiveFormatOutputEnabled ? 'prorank-badge-success' : 'prorank-badge-error'}`}>
            {effectiveFormatOutputEnabled ? __('Active', 'prorank-seo') : __('Inactive', 'prorank-seo')}
          </div>
        </div>
        <div className="prorank-card-body">
          {settings.optimization_method === 'local' && !settings.webp_enabled && (
            <div className="prorank-notice prorank-notice-warning" style={{ marginBottom: '16px' }}>
              <span className="dashicons dashicons-warning"></span>
              <div>
                {__('Local bulk optimization needs WebP enabled to produce a modern output in this build. Enable WebP before starting a bulk run.', 'prorank-seo')}
              </div>
            </div>
          )}

          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Generate WebP', 'prorank-seo')}</strong>
              <span>{__('25-35% smaller than JPEG with similar quality', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.webp_enabled}
              onChange={(webp_enabled) => setSettings({ ...settings, webp_enabled })}
            />
          </div>

          {settings.webp_enabled && (
            <div className="prorank-control-group">
              <RangeControl
              __next40pxDefaultSize
              __nextHasNoMarginBottom
                label={__('WebP Quality', 'prorank-seo')}
                value={settings.webp_quality}
                onChange={(webp_quality) => setSettings({ ...settings, webp_quality })}
                min={60}
                max={100}
                step={5}
              />
            </div>
          )}

          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Generate AVIF', 'prorank-seo')}</strong>
              <span>{__('50% smaller than JPEG, requires modern browser support', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.avif_enabled}
              onChange={(avif_enabled) => setSettings({ ...settings, avif_enabled })}
            />
          </div>

          {settings.avif_enabled && (
            <div className="prorank-control-group">
              <RangeControl
              __next40pxDefaultSize
              __nextHasNoMarginBottom
                label={__('AVIF Quality', 'prorank-seo')}
                value={settings.avif_quality}
                onChange={(avif_quality) => setSettings({ ...settings, avif_quality })}
                min={50}
                max={100}
                step={5}
              />
            </div>
          )}

          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Generate JPEG XL (JXL)', 'prorank-seo')}</strong>
              <span>{__('60% smaller than JPEG when local JXL support is available on your server', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.jxl_enabled}
              onChange={(jxl_enabled) => setSettings({ ...settings, jxl_enabled })}
              disabled={!serverSupport?.jxl}
            />
          </div>

          {settings.jxl_enabled && (
            <div className="prorank-control-group">
              <RangeControl
              __next40pxDefaultSize
              __nextHasNoMarginBottom
                label={__('JXL Quality', 'prorank-seo')}
                value={settings.jxl_quality}
                onChange={(jxl_quality) => setSettings({ ...settings, jxl_quality })}
                min={50}
                max={100}
                step={5}
              />
            </div>
          )}

          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('PNG Advanced Pipeline', 'prorank-seo')}</strong>
              <span>{__('pngquant → oxipng → ECT for smaller PNGs (slower on large files)', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.png_pipeline}
              onChange={(png_pipeline) => setSettings({ ...settings, png_pipeline })}
            />
          </div>

          <div className="prorank-control-group">
            <RangeControl
              __next40pxDefaultSize
              __nextHasNoMarginBottom
              label={__('PNG Quality (pngquant)', 'prorank-seo')}
              value={settings.png_quality}
              onChange={(png_quality) => setSettings({ ...settings, png_quality })}
              min={50}
              max={100}
              step={5}
            />
            <div className="pr:flex pr:gap-2 pr:flex-wrap" style={{ marginTop: '8px' }}>
              {(['aggressive', 'lossy', 'glossy', 'lossless'] as const).map((key) => (
                <ProrankButton
                  key={key}
                  variant="secondary"
                  onClick={() => setSettings((prev) => ({ ...prev, png_quality: presetQualities[key].png }))}
                >
                  {sprintf(__('PNG %s%%', 'prorank-seo'), presetQualities[key].png)}
                </ProrankButton>
              ))}
            </div>
          </div>

          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Jpegli JPEG Encoding', 'prorank-seo')}</strong>
              <span>{__('25-35% better JPEG compression when the local encoder is installed on your server', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.jpegli_enabled}
              onChange={(jpegli_enabled) => setSettings({ ...settings, jpegli_enabled })}
              disabled={!serverSupport?.jpegli}
            />
          </div>
        </div>
      </div>

      {/* Compression Settings Card */}
      <div className="prorank-card">
        <div className="prorank-card-header">
          <h3>
            <span className="dashicons dashicons-image-filter"></span>
            {__('Compression Settings', 'prorank-seo')}
          </h3>
        </div>
        <div className="prorank-card-body">
          <div className="prorank-control-group">
            <RadioControl
              label={__('Compression Type', 'prorank-seo')}
              selected={settings.compression_type}
              options={[
                { label: __('Lossless (Best quality, larger files)', 'prorank-seo'), value: 'lossless' },
                { label: __('Glossy (Balanced quality and size)', 'prorank-seo'), value: 'glossy' },
                { label: __('Lossy (Smallest size, some quality loss)', 'prorank-seo'), value: 'lossy' },
                { label: __('Aggressive (Maximum compression, minimal quality loss)', 'prorank-seo'), value: 'aggressive' },
              ]}
              onChange={(compression_type) => setSettings({ ...settings, compression_type })}
            />
            <div className="pr:flex pr:gap-2 pr:flex-wrap" style={{ marginTop: '8px' }}>
              {(['aggressive', 'lossy', 'glossy', 'lossless'] as const).map((key) => (
                <ProrankButton key={key} variant="secondary" onClick={() => applyPreset(key)}>
                  {describePreset(key)}
                </ProrankButton>
              ))}
            </div>
          </div>

          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Smart Compression', 'prorank-seo')}</strong>
              <span>{__('Automatically lower quality for very large / high-resolution images to cut weight with minimal visible loss.', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.smart_compression}
              onChange={(smart_compression) => setSettings({ ...settings, smart_compression })}
            />
          </div>

          <div className="prorank-control-group">
            <RadioControl
              label={__('Optimization Method', 'prorank-seo')}
              selected={settings.optimization_method}
              options={[
                { label: __('Local Server (GD/ImageMagick)', 'prorank-seo'), value: 'local' },
              ]}
              onChange={() => setSettings({ ...settings, optimization_method: 'local' })}
            />
          </div>
        </div>
      </div>

      {/* Automatic Optimization Card */}
      <div className="prorank-card">
        <div className="prorank-card-header">
          <h3>
            <span className="dashicons dashicons-update"></span>
            {__('Automatic Optimization', 'prorank-seo')}
          </h3>
          <div className={`prorank-badge ${settings.optimize_on_upload ? 'prorank-badge-success' : 'prorank-badge-error'}`}>
            {settings.optimize_on_upload ? __('Enabled', 'prorank-seo') : __('Disabled', 'prorank-seo')}
          </div>
        </div>
        <div className="prorank-card-body">
          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Optimize on Upload', 'prorank-seo')}</strong>
              <span>{__('Automatically optimize new images when uploaded', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.optimize_on_upload}
              onChange={(optimize_on_upload) => setSettings({ ...settings, optimize_on_upload })}
            />
          </div>

          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Background Processing', 'prorank-seo')}</strong>
              <span>{__('Process images in background to avoid timeouts', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.background_mode}
              onChange={(background_mode) => setSettings({ ...settings, background_mode })}
            />
          </div>

          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Backup Original Images', 'prorank-seo')}</strong>
              <span>{__('Keep original images for restoration if needed', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.backup_originals}
              onChange={(backup_originals) => setSettings({ ...settings, backup_originals })}
            />
          </div>

          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Shrink Original Attachment URLs', 'prorank-seo')}</strong>
              <span>{__('Try to reduce the bytes served at the original media URL itself. Helpful for crawler audits that inspect raw image URLs.', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.optimize_original_source}
              onChange={(optimize_original_source) => setSettings({ ...settings, optimize_original_source })}
            />
          </div>

          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Resize Oversized Originals', 'prorank-seo')}</strong>
              <span>{__('Downscale very large original attachments before in-place optimization so raw image URLs can clear crawler size audits.', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.resize_large_enabled}
              onChange={(resize_large_enabled) => setSettings({ ...settings, resize_large_enabled })}
            />
          </div>

          {settings.resize_large_enabled && (
            <div className="prorank-control-group" style={{ marginTop: '16px' }}>
              <RangeControl
                __next40pxDefaultSize
                __nextHasNoMarginBottom
                label={__('Max Original Width (px)', 'prorank-seo')}
                help={__('Original media files wider than this will be scaled down before they are re-optimized.', 'prorank-seo')}
                value={settings.resize_max_width}
                onChange={(resize_max_width) => setSettings({ ...settings, resize_max_width: resize_max_width || 1920 })}
                min={800}
                max={3840}
                step={64}
              />
              <RangeControl
                __next40pxDefaultSize
                __nextHasNoMarginBottom
                label={__('Max Original Height (px)', 'prorank-seo')}
                help={__('Original media files taller than this will be scaled down before they are re-optimized.', 'prorank-seo')}
                value={settings.resize_max_height}
                onChange={(resize_max_height) => setSettings({ ...settings, resize_max_height: resize_max_height || 1920 })}
                min={800}
                max={3840}
                step={64}
              />
            </div>
          )}

          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Generate Missing Thumbnail Sizes', 'prorank-seo')}</strong>
              <span>{__('Create any registered image subsizes that WordPress missed when a new image is uploaded.', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.auto_generate_missing_sizes}
              onChange={(auto_generate_missing_sizes) => setSettings({ ...settings, auto_generate_missing_sizes })}
            />
          </div>

          <div className="prorank-control-group">
            <RangeControl
              __next40pxDefaultSize
              __nextHasNoMarginBottom
              label={__('WordPress Big Image Threshold', 'prorank-seo')}
              help={settings.oversized_threshold > 0
                ? __('Future uploads above this width or height are scaled by WordPress before optimization.', 'prorank-seo')
                : __('0 keeps the WordPress default. Use 640 or higher to override the upload scaling threshold.', 'prorank-seo')}
              value={settings.oversized_threshold}
              onChange={(oversized_threshold) => setSettings({ ...settings, oversized_threshold: normalizeOversizedThreshold(oversized_threshold) })}
              min={0}
              max={8192}
              step={128}
            />
          </div>
        </div>
      </div>

      {/* Lazy Loading Card */}
      <div className="prorank-card">
        <div className="prorank-card-header">
          <h3>
            <span className="dashicons dashicons-clock"></span>
            {__('Lazy Loading', 'prorank-seo')}
          </h3>
          <div className={`prorank-badge ${settings.lazyload_images ? 'prorank-badge-success' : 'prorank-badge-error'}`}>
            {settings.lazyload_images ? __('Enabled', 'prorank-seo') : __('Disabled', 'prorank-seo')}
          </div>
        </div>
        <div className="prorank-card-body">
          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Lazy Load Images', 'prorank-seo')}</strong>
              <span>{__('Load images only when they enter viewport', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.lazyload_images}
              onChange={(lazyload_images) => setSettings({ ...settings, lazyload_images })}
            />
          </div>

          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Lazy Load Iframes', 'prorank-seo')}</strong>
              <span>{__('Defer loading of embedded content', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.lazyload_iframes}
              onChange={(lazyload_iframes) => setSettings({ ...settings, lazyload_iframes })}
            />
          </div>

          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Lazy Load Videos', 'prorank-seo')}</strong>
              <span>{__('Defer loading of video elements', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.lazyload_videos}
              onChange={(lazyload_videos) => setSettings({ ...settings, lazyload_videos })}
            />
          </div>

          <div className="prorank-control-group">
            <RangeControl
              __next40pxDefaultSize
              __nextHasNoMarginBottom
              label={__('Loading Threshold (px)', 'prorank-seo')}
              help={__('Start loading when element is this many pixels from viewport', 'prorank-seo')}
              value={settings.lazyload_threshold}
              onChange={(lazyload_threshold) => setSettings({ ...settings, lazyload_threshold })}
              min={0}
              max={500}
              step={50}
            />
          </div>
        </div>
      </div>

      {/* CDN Settings Card */}
      <div className="prorank-card">
        <div className="prorank-card-header">
          <h3>
            <span className="dashicons dashicons-cloud"></span>
            {__('CDN Settings', 'prorank-seo')}
          </h3>
          <div className={`prorank-badge ${settings.cdn_enabled ? 'prorank-badge-success' : 'prorank-badge-error'}`}>
            {settings.cdn_enabled ? __('Active', 'prorank-seo') : __('Inactive', 'prorank-seo')}
          </div>
        </div>
        <div className="prorank-card-body">
          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Enable CDN', 'prorank-seo')}</strong>
              <span>{__('Serve images from CDN for faster loading', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.cdn_enabled}
              onChange={(cdn_enabled) => setSettings({ ...settings, cdn_enabled })}
            />
          </div>

          {settings.cdn_enabled && (
            <div className="prorank-control-group">
              <input
                type="url"
                className="prorank-input"
                placeholder="https://cdn.example.com"
                value={settings.cdn_url}
                onChange={(e) => setSettings({ ...settings, cdn_url: e.target.value })}
              />
              <p className="description">
                {__('Enter your CDN URL without trailing slash', 'prorank-seo')}
              </p>
            </div>
          )}

          <div className="prorank-control-group">
            <TextareaControl
              __nextHasNoMarginBottom
              label={__('Exclude Paths', 'prorank-seo')}
              help={__('URLs to exclude from optimization (one per line)', 'prorank-seo')}
              value={settings.exclude_paths}
              onChange={(exclude_paths) => setSettings({ ...settings, exclude_paths })}
              rows={5}
              placeholder="/wp-admin/&#10;/cart/&#10;/checkout/"
            />
          </div>
        </div>
      </div>

      {/* Advanced Settings Card */}
      <div className="prorank-card">
        <div className="prorank-card-header">
          <h3>
            <span className="dashicons dashicons-admin-settings"></span>
            {__('Advanced Settings', 'prorank-seo')}
          </h3>
        </div>
        <div className="prorank-card-body">
          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Convert PNG to JPEG', 'prorank-seo')}</strong>
              <span>{__('Automatically convert PNG images to JPEG if they have no transparency', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.png_to_jpeg}
              onChange={(png_to_jpeg) => setSettings({ ...settings, png_to_jpeg })}
            />
          </div>

          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Convert CMYK to RGB', 'prorank-seo')}</strong>
              <span>{__('Convert print-ready CMYK images to web-friendly RGB color space', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.cmyk_to_rgb}
              onChange={(cmyk_to_rgb) => setSettings({ ...settings, cmyk_to_rgb })}
            />
          </div>

          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Strip EXIF Data', 'prorank-seo')}</strong>
              <span>{__('Remove metadata from images (keeps orientation)', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.remove_exif}
              onChange={(remove_exif) => setSettings({ ...settings, remove_exif })}
            />
          </div>

          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Optimize PDF Files', 'prorank-seo')}</strong>
              <span>{__('Compress and optimize uploaded PDF documents', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.optimize_pdf}
              onChange={(optimize_pdf) => setSettings({ ...settings, optimize_pdf })}
            />
          </div>

          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('Generate Retina (@2x)', 'prorank-seo')}</strong>
              <span>{__('Create high-resolution versions for Retina displays', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.generate_retina}
              onChange={(generate_retina) => setSettings({ ...settings, generate_retina })}
            />
          </div>

          <div className="prorank-toggle-row">
            <div className="prorank-toggle-label">
              <strong>{__('AI Training Protection', 'prorank-seo')}</strong>
              <span>{__('Add noai meta tag to prevent images from being used in AI training', 'prorank-seo')}</span>
            </div>
            <ProrankToggleSlider
              checked={settings.no_ai_training}
              onChange={(no_ai_training) => setSettings({ ...settings, no_ai_training })}
            />
          </div>

          <div className="prorank-control-group" style={{ marginTop: '16px' }}>
            <RadioControl
              label={__('WebP/AVIF Delivery Method', 'prorank-seo')}
              help={__('How to serve modern image formats to browsers', 'prorank-seo')}
              selected={settings.delivery_method}
              options={[
                { label: __('<picture> tag (Recommended)', 'prorank-seo'), value: 'picture' },
                { label: __('Accept header detection', 'prorank-seo'), value: 'accept_header' },
                { label: __('.htaccess rewrite rules', 'prorank-seo'), value: 'htaccess' },
                { label: __('CDN-based delivery', 'prorank-seo'), value: 'cdn' },
                { label: __('None (manual)', 'prorank-seo'), value: 'none' },
              ]}
              onChange={(delivery_method: 'picture' | 'accept_header' | 'htaccess' | 'cdn' | 'none') => setSettings({ ...settings, delivery_method })}
            />
            <ImageDeliveryHealthPanel />
          </div>
        </div>
      </div>

      {/* Bulk Optimization Card */}
      <div className="prorank-card">
        <div className="prorank-card-header">
          <h3>
            <span className="dashicons dashicons-images-alt2"></span>
            {__('Bulk Optimization', 'prorank-seo')}
          </h3>
          {bulkProcessing && (
            <div className="prorank-badge prorank-badge-info">
              {__('Running', 'prorank-seo')}
            </div>
          )}
        </div>
        <div className="prorank-card-body">
          {!moduleEnabled && (
            <div className="prorank-notice prorank-notice-warning" style={{ marginBottom: '20px' }}>
              <span className="dashicons dashicons-warning"></span>
              <div>
                {__('The image optimization runtime is currently disabled. Toggle the Image Optimisation module on to use bulk conversion and backup restore actions.', 'prorank-seo')}
                <div style={{ marginTop: '12px' }}>
                  <ProrankButton
                    variant="secondary"
                    onClick={enableImageRuntime}
                    loading={enablingRuntime}
                    disabled={enablingRuntime}
                  >
                    {enablingRuntime
                      ? __('Enabling...', 'prorank-seo')
                      : __('Enable Image Optimization Runtime', 'prorank-seo')}
                  </ProrankButton>
                </div>
              </div>
            </div>
          )}
          {!bulkProcessing && (stats.failed_images ?? 0) > 0 && (
            <div className="prorank-notice prorank-notice-warning" style={{ marginBottom: '20px' }}>
              <span className="dashicons dashicons-warning"></span>
              <div>
                <strong>{__('Previous failures detected.', 'prorank-seo')}</strong>{' '}
                {exhaustedFailedImages > 0
                  ? sprintf(
                      __('%1$d image(s) have already hit the retry limit of %2$d attempts, so a new bulk run will only retry the remaining recoverable failures.', 'prorank-seo'),
                      exhaustedFailedImages,
                      bulkRetryLimit
                    )
                  : sprintf(
                      __('%1$d image(s) failed in an earlier pass. ProRank will retry them automatically during the next bulk run.', 'prorank-seo'),
                      stats.failed_images ?? 0
                    )}
              </div>
            </div>
          )}
          {!bulkProcessing ? (
            <>
              <p style={{ marginBottom: '20px' }}>
                {__('Optimize all existing images in your media library at once.', 'prorank-seo')}
              </p>

              <div className="prorank-actions">
                <ProrankButton
                  variant="secondary"
                  onClick={() => startBulkOptimization(false)}
                  disabled={!moduleEnabled || !effectiveFormatOutputEnabled}
                >
                  {__('Start Bulk Optimization', 'prorank-seo')}
                </ProrankButton>
                <ProrankButton
                  variant="secondary"
                  style={{ marginLeft: '12px' }}
                  onClick={() => startBulkOptimization(true)}
                  disabled={!moduleEnabled || !effectiveFormatOutputEnabled}
                >
                  {__('Re-optimize Existing Images', 'prorank-seo')}
                </ProrankButton>
                <ProrankButton
                  variant="ghost"
                  style={{ marginLeft: '12px' }}
                  onClick={restoreBackups}
                  disabled={!moduleEnabled}
                >
                  {__('Restore All Backups', 'prorank-seo')}
                </ProrankButton>
              </div>
              <p className="description" style={{ marginTop: '10px' }}>
                {__('Use re-optimization after changing Smart Compression or format settings to recompress existing WebP/AVIF files that were generated by an older profile.', 'prorank-seo')}
              </p>

              <div className="prorank-notice prorank-notice-warning" style={{ marginTop: '20px' }}>
                <span className="dashicons dashicons-warning"></span>
                <div>
                  <strong>{__('Important:', 'prorank-seo')}</strong> {__('Bulk optimization can take significant time for large libraries. We recommend running it during low-traffic periods.', 'prorank-seo')}
                </div>
              </div>
            </>
          ) : (
            <>
              {progress.status === 'completed' && (
                <div style={{ marginBottom: '16px', padding: '12px', background: '#ecfdf3', borderRadius: '8px' }}>
                  <div style={{ fontWeight: 600, color: '#166534', marginBottom: '4px' }}>
                    {__('Bulk optimization completed', 'prorank-seo')}
                  </div>
                  <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', fontSize: '13px', color: '#065f46' }}>
                    <span>
                      {sprintf(__('Processed: %d images', 'prorank-seo'), progress.summary?.processed ?? progress.current)}
                    </span>
                    <span>
                      {sprintf(__('Saved: %s', 'prorank-seo'), formatBytes(progress.summary?.saved_bytes ?? progress.bytes_saved))}
                    </span>
                  </div>
                </div>
              )}

              {recoveryMessage && (
                <div className="prorank-notice prorank-notice-warning" style={{ marginBottom: '16px' }}>
                  <span className="dashicons dashicons-warning"></span>
                  <div>
                    <strong>{browserAssistMode ? __('Browser-assisted recovery active.', 'prorank-seo') : __('Background queue stalled.', 'prorank-seo')}</strong>{' '}
                    {recoveryMessage}
                    <div style={{ marginTop: '8px' }}>
                      {__('If this host keeps stalling, enable a real server cron job in your hosting panel and retry with only WebP enabled first.', 'prorank-seo')}
                    </div>
                  </div>
                </div>
              )}

              {/* Progress Bar */}
              <div style={{ marginBottom: '24px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
                  <span style={{ fontWeight: 500 }}>
                    {progress.total > 0
                      ? sprintf(__('Processing %d of %d images', 'prorank-seo'), getActiveIndex(), progress.total)
                      : __('Initializing...', 'prorank-seo')}
                  </span>
                  <span style={{ color: '#6b7280' }}>
                    {progress.total > 0 ? `${getOverallPercent()}%` : '0%'}
                  </span>
                </div>
                <div style={{
                  background: '#e5e7eb',
                  borderRadius: '8px',
                  height: '12px',
                  overflow: 'hidden',
                }}>
                  <div style={{
                    background: 'linear-gradient(90deg, #ff6900 0%, #ff8533 100%)',
                    height: '100%',
                    width: `${progress.total > 0 ? getOverallPercent() : 0}%`,
                    borderRadius: '8px',
                    transition: 'width 0.3s ease',
                  }} />
                </div>
              </div>

              {/* Current Image */}
              {progress.current_image && (
                <div style={{ marginBottom: '16px', padding: '12px', background: '#f9fafb', borderRadius: '8px' }}>
                  <div style={{ fontSize: '12px', color: '#6b7280', marginBottom: '4px' }}>
                    {sprintf(
                      __('Optimizing %1$s of %2$s (%3$s%%)', 'prorank-seo'),
                      getActiveIndex(),
                      progress.total || 0,
                      getOverallPercent()
                    )}
                  </div>
                  <div style={{ fontSize: '13px', fontFamily: 'monospace', wordBreak: 'break-all' }}>
                    {progress.current_image}
                  </div>
                </div>
              )}

              {/* Stats Grid */}
              <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(3, 1fr)',
                gap: '16px',
                marginBottom: '20px',
              }}>
                <div style={{ textAlign: 'center', padding: '12px', background: '#f0fdf4', borderRadius: '8px' }}>
                  <div style={{ fontSize: '20px', fontWeight: 600, color: '#16a34a' }}>
                    {formatBytes(progress.bytes_saved)}
                  </div>
                  <div style={{ fontSize: '12px', color: '#6b7280' }}>{__('Space Saved', 'prorank-seo')}</div>
                </div>
                <div style={{ textAlign: 'center', padding: '12px', background: '#eff6ff', borderRadius: '8px' }}>
                  <div style={{ fontSize: '20px', fontWeight: 600, color: '#2563eb' }}>
                    {progress.current}
                  </div>
                  <div style={{ fontSize: '12px', color: '#6b7280' }}>{__('Images Done', 'prorank-seo')}</div>
                </div>
                <div style={{ textAlign: 'center', padding: '12px', background: '#fef3c7', borderRadius: '8px' }}>
                  <div style={{ fontSize: '20px', fontWeight: 600, color: '#d97706' }}>
                    {getTimeRemaining() || '...'}
                  </div>
                  <div style={{ fontSize: '12px', color: '#6b7280' }}>{__('Est. Remaining', 'prorank-seo')}</div>
                </div>
              </div>

              {/* Activity Log */}
              {progress.log && progress.log.length > 0 && (
                <div style={{ marginBottom: '16px' }}>
                  <div style={{ fontWeight: 600, marginBottom: '8px', color: '#374151' }}>
                    {__('Activity Log', 'prorank-seo')}
                  </div>
                  <div style={{ background: '#f9fafb', borderRadius: '8px', padding: '12px', maxHeight: '160px', overflowY: 'auto' }}>
                    {progress.log.slice(-10).reverse().map((entry, idx) => (
                      <div key={idx} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '6px 0', borderBottom: idx === progress.log!.slice(-10).length - 1 ? 'none' : '1px solid #e5e7eb' }}>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: '2px', maxWidth: '70%' }}>
                          <span style={{ fontFamily: 'monospace', fontSize: '12px', wordBreak: 'break-all' }}>{entry.image}</span>
                          {entry.status === 'done' && entry.bytes_saved !== undefined && (
                            <span style={{ fontSize: '11px', color: '#6b7280' }}>
                              {sprintf(__('Saved %s', 'prorank-seo'), formatBytes(entry.bytes_saved))}
                            </span>
                          )}
                          {(entry.status === 'failed' || entry.status === 'skipped') && (
                            <span
                              style={{
                                fontSize: '11px',
                                color: entry.status === 'failed' ? '#b91c1c' : '#4b5563',
                              }}
                            >
                              {formatFailureReason(entry.reason)}
                            </span>
                          )}
                        </div>
                        <div style={{ textAlign: 'right' }}>
                          <div style={{
                            display: 'inline-block',
                            padding: '4px 8px',
                            borderRadius: '9999px',
                            fontSize: '11px',
                            background:
                              entry.status === 'done'
                                ? '#ecfdf3'
                                : entry.status === 'failed'
                                  ? '#fef2f2'
                                  : entry.status === 'skipped'
                                    ? '#f3f4f6'
                                  : '#fff7ed',
                            color:
                              entry.status === 'done'
                                ? '#166534'
                                : entry.status === 'failed'
                                  ? '#b91c1c'
                                  : entry.status === 'skipped'
                                    ? '#374151'
                                  : '#b45309',
                          }}>
                            {entry.status === 'done'
                              ? __('Done', 'prorank-seo')
                              : entry.status === 'failed'
                                ? __('Failed', 'prorank-seo')
                                : entry.status === 'skipped'
                                  ? __('Unchanged', 'prorank-seo')
                                : __('Processing', 'prorank-seo')}
                          </div>
                          <div style={{ fontSize: '11px', color: '#6b7280', marginTop: '4px' }}>
                            {formatLogTime(entry.ts)}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Stop Button */}
              <div className="prorank-actions">
                <ProrankButton
                  variant="secondary"
                  onClick={stopBulkOptimization}
                  style={{ background: '#fee2e2', color: '#dc2626', borderColor: '#fca5a5' }}
                >
                  {__('Stop Optimization', 'prorank-seo')}
                </ProrankButton>
              </div>

              <div className="prorank-notice prorank-notice-info" style={{ marginTop: '20px' }}>
                <span className="dashicons dashicons-info"></span>
                <div>
                  {browserAssistMode
                    ? __('Keep this window open while ProRank processes images directly in the browser because the background queue appears to be stalled on this host.', 'prorank-seo')
                    : __('You can close this window - optimization will continue in the background.', 'prorank-seo')}
                </div>
              </div>
            </>
          )}
        </div>
      </div>

      {/* Save Button */}
      <div className="prorank-actions prorank-actions-center prorank-mt-32">
        <ProrankButton
          variant="primary"
          onClick={() => saveSettings()}
          disabled={saving}
          style={{ minWidth: '200px' }}
        >
          {saving ? __('Saving...', 'prorank-seo') : __('Save All Settings', 'prorank-seo')}
        </ProrankButton>
      </div>
    </div>
  );
};

export default ImageOptimizationSettings;