(function () {
  'use strict';

  const tk = {
    bgPage: '#0f0f0f', bgCard: '#1a1a1a', bgCardAlt: '#141414', bgInput: '#111',
    bgHover: '#222', bgSunken: '#0a0a0a', bgOverlay: 'rgba(0,0,0,0.75)',
    border: '#2a2a2a', borderSubtle: '#1e1e1e',
    textPrimary: '#f5f5f5', textSecondary: '#aaaaaa', textMuted: '#666',
    textDisabled: '#444', accent: '#00ff00', accentText: '#000',
    error: '#ff4444',
  };

  const FILTER_PREVIEW_SVG = `data:image/svg+xml;charset=utf-8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 130"><defs><linearGradient id="sk" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3a7bd5"/><stop offset="1" stop-color="#87ceeb"/></linearGradient><linearGradient id="gr" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#5c9e4a"/><stop offset="1" stop-color="#3a6e2a"/></linearGradient></defs><rect width="100" height="75" fill="url(#sk)"/><circle cx="72" cy="22" r="11" fill="#ffd700"/><ellipse cx="32" cy="18" rx="16" ry="8" fill="rgba(255,255,255,.85)"/><rect y="75" width="100" height="55" fill="url(#gr)"/><rect x="15" y="50" width="18" height="25" fill="#2c3e50"/><rect x="33" y="58" width="12" height="17" fill="#34495e"/><polygon points="60,45 53,68 67,68" fill="#2d8a2d"/><rect x="58" y="68" width="4" height="7" fill="#5c3317"/><circle cx="48" cy="78" r="4" fill="#d4956a"/><rect x="45" y="82" width="6" height="9" fill="#e07b39"/><polygon points="40,130 60,130 55,75 45,75" fill="#c9b99a"/></svg>')}`;

  const FILTER_ID_CSS = {
    filter_8k: 'contrast(1.05) brightness(1.02) saturate(1.1)',
    filter_bokeh: 'blur(1.5px) contrast(1.12) brightness(1.05)',
    filter_enhance: 'contrast(1.12) brightness(1.05) saturate(1.2)',
    filter_oppenheimer: 'sepia(35%) contrast(1.25) brightness(0.85) saturate(0.7)',
    filter_sepia_sunset: 'sepia(65%) saturate(1.5) brightness(1.08) contrast(1.05)',
    filter_universal_sunset: 'sepia(15%) saturate(1.8) brightness(1.12) hue-rotate(-5deg)',
    filter_green_lake: 'hue-rotate(25deg) saturate(1.5) brightness(1.05) contrast(1.1)',
    filter_backlight_fix: 'brightness(1.4) contrast(0.85) saturate(0.9)',
    filter_orange_blue: 'contrast(1.2) saturate(1.5) hue-rotate(15deg)',
    filter_green_orange: 'contrast(1.2) saturate(1.35) hue-rotate(-20deg)',
    filter_focus: 'contrast(1.3) brightness(1.05) saturate(1.1)',
    filter_black_gold: 'contrast(1.5) brightness(0.8) saturate(2) sepia(15%)',
    filter_pumpkin: 'sepia(20%) saturate(2.2) hue-rotate(-12deg) brightness(1.08)',
    filter_hollywood_past: 'grayscale(100%) contrast(1.3) brightness(0.85)',
    filter_hd_pet: 'contrast(1.1) brightness(1.05) saturate(1.3) hue-rotate(5deg)',
    filter_bw_portrait: 'grayscale(100%) contrast(1.15) brightness(1.08)',
    filter_orange_gradient: 'sepia(20%) saturate(1.7) hue-rotate(-8deg) brightness(1.1)',
    filter_white_house: 'brightness(1.35) contrast(0.85) saturate(0.7)',
    filter_dreamy_clouds: 'brightness(1.12) contrast(0.88) saturate(0.72) blur(0.4px)',
    filter_angelic_white: 'brightness(1.45) contrast(0.8) saturate(0.55)',
    filter_vintage_film: 'sepia(20%) contrast(1.1) brightness(0.92) saturate(0.82)',
    filter_grayscale: 'grayscale(100%)',
    filter_kodachrome: 'contrast(1.4) saturate(1.6) brightness(1.05) hue-rotate(-5deg)',
    filter_golden_celebration: 'sepia(15%) saturate(2.5) brightness(1.15) contrast(1.15)',
    filter_sparkle_night: 'brightness(0.6) contrast(1.7) saturate(2) hue-rotate(210deg)',
    filter_winter_wonderland: 'brightness(1.2) contrast(0.88) saturate(0.55) hue-rotate(190deg)',
    filter_festive_red: 'hue-rotate(-30deg) saturate(2.5) contrast(1.3) brightness(0.9)',
    filter_pop_art: 'saturate(4) contrast(1.7) brightness(1.1)',
    filter_comic_book: 'contrast(2.5) brightness(1.05) saturate(2)',
    filter_neon_nights: 'brightness(0.7) contrast(1.7) saturate(4) hue-rotate(145deg)',
    filter_cyberpunk: 'saturate(3.5) contrast(1.7) brightness(0.85) hue-rotate(270deg)',
    filter_cinematic_blue: 'contrast(1.2) saturate(1.3) brightness(0.9) hue-rotate(195deg)',
    filter_golden_hour: 'sepia(10%) saturate(1.8) brightness(1.12) hue-rotate(-10deg) contrast(1.08)',
  };

  const filterIdToCSSString = (filterId) => FILTER_ID_CSS[filterId] || '';

  const filterCategories = [
    { id: 'all', name: 'All' },
    { id: 'featured', name: 'Featured' },
    { id: 'movies', name: 'Movies' },
    { id: 'classic', name: 'Classic' },
    { id: 'landscape', name: 'Landscape' },
    { id: 'portrait', name: 'Portrait' },
    { id: 'mono', name: 'Mono' },
    { id: 'life', name: 'Life' },
    { id: 'hits', name: 'Hits' },
    { id: 'new', name: 'NEW' },
    { id: 'photo-booth', name: 'Photo Booth' },
    { id: 'pet', name: 'Pet' },
    { id: 'new-year', name: 'New Year' },
    { id: 'christmas', name: 'Christmas' },
  ];

  const allFilters = [
    { id: 'filter_8k', name: '8K', category: 'featured', thumbnailColor: 'linear-gradient(135deg,#667eea 0%,#764ba2 100%)' },
    { id: 'filter_bokeh', name: 'Bokeh', category: 'featured', thumbnailColor: 'linear-gradient(135deg,#f093fb 0%,#f5576c 100%)' },
    { id: 'filter_enhance', name: 'Enhance', category: 'featured', thumbnailColor: 'linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)' },
    { id: 'filter_oppenheimer', name: 'Oppenheimer', category: 'movies', thumbnailColor: 'linear-gradient(135deg,#d4a574 0%,#8b6f47 100%)' },
    { id: 'filter_sepia_sunset', name: 'Sepia Sunset', category: 'classic', thumbnailColor: 'linear-gradient(135deg,#ff9a56 0%,#ff6b35 100%)' },
    { id: 'filter_universal_sunset', name: 'Universal Sunset', category: 'landscape', thumbnailColor: 'linear-gradient(135deg,#ffa751 0%,#ffe259 100%)' },
    { id: 'filter_green_lake', name: 'Green Lake', category: 'landscape', thumbnailColor: 'linear-gradient(135deg,#56ab2f 0%,#a8e063 100%)' },
    { id: 'filter_backlight_fix', name: 'Backlight Fix', category: 'portrait', thumbnailColor: 'linear-gradient(135deg,#ffd89b 0%,#19547b 100%)' },
    { id: 'filter_orange_blue', name: 'Orange Blue', category: 'movies', thumbnailColor: 'linear-gradient(135deg,#ff8c00 0%,#0080ff 100%)' },
    { id: 'filter_green_orange', name: 'Green Orange', category: 'movies', thumbnailColor: 'linear-gradient(135deg,#56ab2f 0%,#ff8c00 100%)' },
    { id: 'filter_focus', name: 'Focus', category: 'portrait', thumbnailColor: 'linear-gradient(135deg,#667eea 0%,#764ba2 100%)' },
    { id: 'filter_black_gold', name: 'Black Gold', category: 'movies', thumbnailColor: 'linear-gradient(135deg,#000000 0%,#ffd700 100%)' },
    { id: 'filter_pumpkin', name: 'Pumpkin', category: 'life', thumbnailColor: 'linear-gradient(135deg,#ff6b35 0%,#f7931e 100%)' },
    { id: 'filter_hollywood_past', name: 'Hollywood Past', category: 'classic', thumbnailColor: 'linear-gradient(135deg,#434343 0%,#000000 100%)' },
    { id: 'filter_hd_pet', name: 'HD Pet', category: 'pet', thumbnailColor: 'linear-gradient(135deg,#ffa751 0%,#ffe259 100%)' },
    { id: 'filter_bw_portrait', name: 'B&W Portrait', category: 'mono', thumbnailColor: 'linear-gradient(135deg,#bdc3c7 0%,#2c3e50 100%)' },
    { id: 'filter_orange_gradient', name: 'Orange Gradient', category: 'life', thumbnailColor: 'linear-gradient(135deg,#ff9a56 0%,#ff6b35 100%)' },
    { id: 'filter_white_house', name: 'White House', category: 'life', thumbnailColor: 'linear-gradient(135deg,#ffffff 0%,#e0e0e0 100%)' },
    { id: 'filter_dreamy_clouds', name: 'Dreamy Clouds', category: 'landscape', thumbnailColor: 'linear-gradient(135deg,#a8edea 0%,#fed6e3 100%)' },
    { id: 'filter_angelic_white', name: 'Angelic White', category: 'portrait', thumbnailColor: 'linear-gradient(135deg,#ffffff 0%,#f0f0f0 100%)' },
    { id: 'filter_vintage_film', name: 'Vintage Film', category: 'classic', thumbnailColor: 'linear-gradient(135deg,#d4a574 0%,#8b6f47 100%)' },
    { id: 'filter_grayscale', name: 'Grayscale', category: 'mono', thumbnailColor: 'linear-gradient(135deg,#757f9a 0%,#d7dde8 100%)' },
    { id: 'filter_kodachrome', name: 'Kodachrome', category: 'classic', thumbnailColor: 'linear-gradient(135deg,#ee9ca7 0%,#ffdde1 100%)' },
    { id: 'filter_golden_celebration', name: 'Golden Celebration', category: 'new-year', thumbnailColor: 'linear-gradient(135deg,#ffd700 0%,#ffed4e 100%)' },
    { id: 'filter_sparkle_night', name: 'Sparkle Night', category: 'new-year', thumbnailColor: 'linear-gradient(135deg,#000428 0%,#004e92 100%)' },
    { id: 'filter_winter_wonderland', name: 'Winter Wonderland', category: 'christmas', thumbnailColor: 'linear-gradient(135deg,#e6f2ff 0%,#a8d8ff 100%)' },
    { id: 'filter_festive_red', name: 'Festive Red', category: 'christmas', thumbnailColor: 'linear-gradient(135deg,#c92a2a 0%,#ff6b6b 100%)' },
    { id: 'filter_pop_art', name: 'Pop Art', category: 'photo-booth', thumbnailColor: 'linear-gradient(135deg,#ff0080 0%,#ff8c00 100%)' },
    { id: 'filter_comic_book', name: 'Comic Book', category: 'photo-booth', thumbnailColor: 'linear-gradient(135deg,#3a7bd5 0%,#00d2ff 100%)' },
    { id: 'filter_neon_nights', name: 'Neon Nights', category: 'new', thumbnailColor: 'linear-gradient(135deg,#ff00ff 0%,#00ffff 100%)' },
    { id: 'filter_cyberpunk', name: 'Cyberpunk', category: 'new', thumbnailColor: 'linear-gradient(135deg,#ff00ff 0%,#ff8c00 100%)' },
    { id: 'filter_cinematic_blue', name: 'Cinematic Blue', category: 'hits', thumbnailColor: 'linear-gradient(135deg,#0080ff 0%,#00d2ff 100%)' },
    { id: 'filter_golden_hour', name: 'Golden Hour', category: 'hits', thumbnailColor: 'linear-gradient(135deg,#ffa751 0%,#ffe259 100%)' },
  ];

  const css = `
    .vls-ed-fs { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: ${tk.bgCard}; color: ${tk.textPrimary}; display: flex; flex-direction: column; height: 100%; }
    .vls-ed-fs-search { padding: 10px 12px; background: ${tk.bgCardAlt}; border-bottom: 1px solid ${tk.border}; }
    .vls-ed-fs-search input { width: 100%; box-sizing: border-box; padding: 7px 10px; background: ${tk.bgInput}; border: 1px solid ${tk.border}; border-radius: 6px; color: ${tk.textPrimary}; font-size: 12px; outline: none; }
    .vls-ed-fs-search input::placeholder { color: ${tk.textMuted}; }
    .vls-ed-fs-cats { display: flex; gap: 6px; padding: 8px 10px; flex-wrap: wrap; border-bottom: 1px solid ${tk.border}; }
    .vls-ed-fs-cat { padding: 4px 10px; border-radius: 12px; border: 1px solid ${tk.border}; background: transparent; color: ${tk.textMuted}; font-size: 11px; font-weight: 600; cursor: pointer; }
    .vls-ed-fs-cat.active { background: rgba(0,255,0,0.12); border-color: rgba(0,255,0,0.4); color: ${tk.accent}; }
    .vls-ed-fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px,1fr)); gap: 8px; padding: 12px; overflow-y: auto; flex: 1; }
    .vls-ed-fs-item { border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: all 0.15s; background: ${tk.bgCardAlt}; }
    .vls-ed-fs-item:hover { border-color: ${tk.bgHover}; }
    .vls-ed-fs-item.selected { border-color: ${tk.accent}; box-shadow: 0 0 0 1px ${tk.accent}; }
    .vls-ed-fs-thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
    .vls-ed-fs-name { padding: 4px 6px; font-size: 10px; font-weight: 500; color: ${tk.textSecondary}; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vls-ed-fs-item.selected .vls-ed-fs-name { color: ${tk.accent}; }
  `;

  function FilterItem({ filter, selected, onSelect }) {
    const cssFilter = filterIdToCSSString(filter.id);
    return (
      <div className={`vls-ed-fs-item${selected ? ' selected' : ''}`} onClick={() => onSelect(filter.id)} title={filter.name}>
        <img
          src={FILTER_PREVIEW_SVG}
          alt={filter.name}
          className="vls-ed-fs-thumb"
          style={{ filter: cssFilter || 'none' }}
        />
        <div className="vls-ed-fs-name">{filter.name}</div>
      </div>
    );
  }

  function FiltersSidebarReal() {
    const [activeCategory, setActiveCategory] = React.useState('all');
    const [searchQuery, setSearchQuery] = React.useState('');
    const [selectedFilter, setSelectedFilter] = React.useState(null);
    const [favorites, setFavorites] = React.useState([]);

    const filteredFilters = React.useMemo(() => {
      let list = allFilters;
      if (activeCategory === 'favorites') {
        list = list.filter(f => favorites.includes(f.id));
      } else if (activeCategory !== 'all') {
        list = list.filter(f => f.category === activeCategory);
      }
      if (searchQuery.trim()) {
        const q = searchQuery.toLowerCase();
        list = list.filter(f => f.name.toLowerCase().includes(q));
      }
      return list;
    }, [activeCategory, searchQuery, favorites]);

    const handleSelect = (filterId) => {
      setSelectedFilter(filterId === selectedFilter ? null : filterId);
      console.log('[demo] apply filter:', filterId, filterIdToCSSString(filterId));
    };

    return (
      <div className="vls-ed-fs">
        <style>{css}</style>

        {/* Header */}
        <div style={{ padding: '10px 12px', borderBottom: `1px solid ${tk.border}`, fontSize: 13, fontWeight: 700, color: tk.accent }}>
          Filters
        </div>

        {/* Search */}
        <div className="vls-ed-fs-search">
          <input
            placeholder="Search filters..."
            value={searchQuery}
            onChange={e => setSearchQuery(e.target.value)}
          />
        </div>

        {/* Category tabs */}
        <div className="vls-ed-fs-cats">
          {filterCategories.map(cat => (
            <button
              key={cat.id}
              className={`vls-ed-fs-cat${activeCategory === cat.id ? ' active' : ''}`}
              onClick={() => setActiveCategory(cat.id)}
            >
              {cat.name}
            </button>
          ))}
        </div>

        {/* Filter grid */}
        <div className="vls-ed-fs-grid">
          {filteredFilters.length === 0 && (
            <div style={{ gridColumn: '1/-1', textAlign: 'center', color: tk.textMuted, fontSize: 12, padding: '20px 0' }}>
              No filters found
            </div>
          )}
          {filteredFilters.map(filter => (
            <FilterItem key={filter.id} filter={filter} selected={selectedFilter === filter.id} onSelect={handleSelect} />
          ))}
        </div>

        {/* Selected info bar */}
        {selectedFilter && (
          <div style={{ padding: '8px 12px', borderTop: `1px solid ${tk.border}`, background: tk.bgCardAlt, fontSize: 11, color: tk.textSecondary, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span>Applied: <span style={{ color: tk.accent }}>{allFilters.find(f => f.id === selectedFilter)?.name}</span></span>
            <button onClick={() => setSelectedFilter(null)} style={{ background: 'transparent', border: `1px solid ${tk.border}`, borderRadius: 4, color: tk.textMuted, fontSize: 10, cursor: 'pointer', padding: '3px 8px' }}>
              Remove
            </button>
          </div>
        )}
      </div>
    );
  }

  window.FiltersSidebarReal = FiltersSidebarReal;
})();