/**
 * ImagePresets.jsx — Categorized recipe presets for Image Tools
 * Repo: wpsitebeam-app / design/ImagePresets.jsx
 * Version: v1.0.0 — 2026-05-26
 *
 * Implements the locked 9-preset categorized list from _ROADMAP.md §3.6.2.
 * Drops in at the top of Image Tools Step 2 (before the Quality/MaxEdge sliders).
 *
 * Exports:
 *   window.IMAGE_PRESETS     — preset data array (for ImageTools.jsx to import)
 *   window.ImagePresetSelector — UI component
 *
 * Integration (in ImageTools.jsx Step 2, before the sliders):
 *   React.createElement(window.ImagePresetSelector, {
 *     selected: state.preset,
 *     onSelect: (preset) => setState({ preset, quality: preset.quality, maxW: preset.maxW, format: preset.format })
 *   })
 */

(function () {
  'use strict';
  const VERSION = '1.0.0';
  console.log('[ImagePresets] v' + VERSION + ' loaded');

  /* ─── Preset definitions (locked §3.6.2) ────────────────────
   * Each preset: { id, label, category, maxW, quality, format, description, note? }
   * maxW: px or null (null = no resize)
   * format: 'jpeg' | 'webp' | 'same'
   */
  const IMAGE_PRESETS = [
    /* Web Pages */
    {
      id:          'hero_retina',
      label:       'Hero (Retina)',
      category:    'Web Pages',
      maxW:        2560,
      quality:     82,
      format:      'jpeg',
      description: 'Full-width on 4K/retina displays',
      note:        'Default — premium feel on high-DPI screens',
    },
    {
      id:          'hero_standard',
      label:       'Hero (Standard)',
      category:    'Web Pages',
      maxW:        1920,
      quality:     82,
      format:      'jpeg',
      description: 'Full-width on standard desktop',
      note:        'Smaller files, mobile-friendly bandwidth',
    },
    {
      id:          'content',
      label:       'Content',
      category:    'Web Pages',
      maxW:        1200,
      quality:     80,
      format:      'jpeg',
      description: 'In-post and blog content images',
    },
    {
      id:          'thumbnail',
      label:       'Thumbnail',
      category:    'Web Pages',
      maxW:        600,
      quality:     78,
      format:      'jpeg',
      description: 'Card thumbnails and grid items',
    },
    /* E-commerce */
    {
      id:          'product',
      label:       'Product (WooCommerce)',
      category:    'E-commerce',
      maxW:        1200,
      quality:     85,
      format:      'jpeg',
      description: 'WooCommerce product images',
      note:        'Meets WC 1080+ source requirement',
    },
    /* Social Media */
    {
      id:          'social_square',
      label:       'Social Square',
      category:    'Social Media',
      maxW:        1080,
      quality:     85,
      format:      'jpeg',
      description: 'Square social media posts (1:1)',
      note:        'Source aspect ratio preserved — crop source for strict 1:1',
    },
    {
      id:          'social_landscape',
      label:       'Social Landscape',
      category:    'Social Media',
      maxW:        1200,
      quality:     82,
      format:      'jpeg',
      description: 'Landscape social posts and link previews',
    },
    /* Special */
    {
      id:          'aggressive',
      label:       'Aggressive',
      category:    'Special',
      maxW:        1600,
      quality:     72,
      format:      'webp',
      description: 'Maximum savings for modern browsers',
      note:        'WebP only — check browser support for older clients',
    },
    {
      id:          'lossless',
      label:       'Lossless',
      category:    'Special',
      maxW:        null,
      quality:     100,
      format:      'same',
      description: 'No resize, no quality loss',
      note:        'Archive or source preservation',
    },
  ];

  /* ─── CSS ─────────────────────────────────────────────────── */
  const CSS = `
.ips-root { margin-bottom: 20px; }
.ips-cat-group { margin-bottom: 12px; }
.ips-cat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
  padding-left: 2px;
}
.ips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ips-chip {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: all .15s;
  min-height: 32px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ips-chip:hover {
  background: rgba(6,182,212,.08);
  border-color: rgba(6,182,212,.4);
  color: var(--text);
}
.ips-chip.selected {
  background: rgba(6,182,212,.15);
  border-color: var(--cyan,#06b6d4);
  color: var(--cyan,#06b6d4);
  font-weight: 600;
}
.ips-chip-note {
  font-size: 9px;
  color: var(--dim);
  padding: 1px 5px;
  background: rgba(0,0,0,.08);
  border-radius: 8px;
}
.ips-chip.selected .ips-chip-note {
  background: rgba(6,182,212,.15);
  color: var(--cyan,#06b6d4);
}
.ips-selected-detail {
  font-size: 12px;
  color: var(--dim);
  background: rgba(0,0,0,.05);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 10px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.ips-detail-val {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ips-detail-val strong {
  color: var(--text);
  font-weight: 600;
}
.ips-detail-note {
  font-size: 11px;
  color: var(--warn,#f59e0b);
  margin-left: auto;
}
@media (max-width: 480px) {
  .ips-chip { font-size: 11px; padding: 5px 10px; }
}
`;

  /* ─── Group presets by category ──────────────────────────── */
  function groupByCategory(presets) {
    const order = ['Web Pages', 'E-commerce', 'Social Media', 'Special'];
    const groups = {};
    for (const p of presets) {
      if (!groups[p.category]) groups[p.category] = [];
      groups[p.category].push(p);
    }
    return order.map(cat => ({ cat, presets: groups[cat] || [] })).filter(g => g.presets.length > 0);
  }

  /* ─── Format display helpers ─────────────────────────────── */
  function fmtMax(maxW) { return maxW ? maxW + 'px' : 'No resize'; }
  function fmtFormat(f) { return { jpeg: 'JPEG', webp: 'WebP', same: 'Same as source', png: 'PNG' }[f] || f.toUpperCase(); }

  /* ─── Component ──────────────────────────────────────────── */
  function ImagePresetSelector({ selected, onSelect }) {
    const [injected, setInjected] = React.useState(false);
    React.useEffect(() => {
      if (!injected) {
        const style = document.createElement('style');
        style.textContent = CSS;
        document.head.appendChild(style);
        setInjected(true);
      }
    }, []);

    const groups  = groupByCategory(IMAGE_PRESETS);
    const current = IMAGE_PRESETS.find(p => p.id === selected) || null;

    return React.createElement('div', { className: 'ips-root' },
      groups.map(({ cat, presets }) =>
        React.createElement('div', { key: cat, className: 'ips-cat-group' },
          React.createElement('div', { className: 'ips-cat-label' }, cat),
          React.createElement('div', { className: 'ips-grid', role: 'group', 'aria-label': cat + ' presets' },
            presets.map(p =>
              React.createElement('button', {
                key: p.id,
                className: 'ips-chip' + (selected === p.id ? ' selected' : ''),
                onClick: () => onSelect(p),
                'aria-pressed': selected === p.id,
                title: p.description + (p.note ? ' — ' + p.note : ''),
              },
                p.label,
                p.id === 'hero_retina' && React.createElement('span', { className: 'ips-chip-note' }, 'default')
              )
            )
          )
        )
      ),
      current && React.createElement('div', { className: 'ips-selected-detail', 'aria-live': 'polite' },
        React.createElement('div', { className: 'ips-detail-val' },
          React.createElement('span', null, 'Max edge:'),
          React.createElement('strong', null, fmtMax(current.maxW))
        ),
        React.createElement('div', { className: 'ips-detail-val' },
          React.createElement('span', null, 'Quality:'),
          React.createElement('strong', null, current.quality + (current.quality === 100 ? ' (lossless)' : '%'))
        ),
        React.createElement('div', { className: 'ips-detail-val' },
          React.createElement('span', null, 'Format:'),
          React.createElement('strong', null, fmtFormat(current.format))
        ),
        current.note && React.createElement('div', { className: 'ips-detail-note' }, current.note)
      )
    );
  }

  /* ─── Exports ─────────────────────────────────────────────── */
  window.IMAGE_PRESETS       = IMAGE_PRESETS;
  window.ImagePresetSelector = ImagePresetSelector;

})();