// ─────────────────────────────────────────────────────────────────────────────
// Ultra Image Cropper 2.0 — Filter Panel
// Gallery grid of preset filters with live preview thumbnails
// ─────────────────────────────────────────────────────────────────────────────

import React, { useState, useEffect } from 'react';
import type { FilterGroup } from '@/types';
import { useCanvasStore } from '@/store';
import { FILTER_PRESETS } from '@/engine/FilterEngine';
import { historyManager } from '@/engine/HistoryManager';
import { useTranslation } from '@/i18n/useTranslation';

const ALL_GROUPS: FilterGroup[] = ['classic', 'monochrome', 'vintage', 'product', 'portrait', 'blog'];

export const FilterPanel: React.FC = () => {
  const t = useTranslation();
  const [activeGroup, setActiveGroup] = useState<FilterGroup>('classic');
  // Store thumbnails in state (not ref) so the component re-renders once they
  // are generated — a ref update is invisible to React's render cycle.
  const [thumbnails, setThumbnails] = useState<Record<string, string>>({});
  const { appliedFilter, setFilter, sourceImage } = useCanvasStore();

  // Generate all thumbnails (Original + every filter preset) from the source image.
  // Using a single 80×80 base canvas avoids re-decoding the source image for each
  // preset and keeps memory usage predictable.
  useEffect(() => {
    if (!sourceImage) return;
    const base = document.createElement('canvas');
    base.width = 80;
    base.height = 80;
    const baseCtx = base.getContext('2d')!;
    baseCtx.drawImage(sourceImage, 0, 0, 80, 80);

    const next: Record<string, string> = {
      // Original thumbnail — no CSS filter applied
      original: base.toDataURL('image/jpeg', 0.7),
    };

    FILTER_PRESETS.forEach((preset) => {
      const previewCanvas = document.createElement('canvas');
      previewCanvas.width = 80;
      previewCanvas.height = 80;
      const pCtx = previewCanvas.getContext('2d')!;
      if (preset.cssFilter) {
        pCtx.filter = preset.cssFilter;
      }
      pCtx.drawImage(base, 0, 0);
      pCtx.filter = 'none';
      next[preset.id] = previewCanvas.toDataURL('image/jpeg', 0.7);
    });

    setThumbnails(next);
  }, [sourceImage]);

  const filtersInGroup = FILTER_PRESETS.filter((p) => p.group === activeGroup);

  const applyFilter = (filterId: string | null) => {
    if (filterId === null) {
      setFilter(null);
      historyManager.snapshot('Filter: None');
      return;
    }
    const preset = FILTER_PRESETS.find((p) => p.id === filterId);
    if (preset) {
      setFilter(preset);
      historyManager.snapshot(`Filter: ${preset.name}`);
    }
  };

  return (
    <div className="ultra-panel">
      <div className="ultra-panel__header">
        <h3 className="ultra-panel__title">{t.filters.title}</h3>
        {appliedFilter && (
          <button
            className="ultra-btn ultra-btn--ghost ultra-btn--sm"
            onClick={() => applyFilter(null)}
          >
            {t.common.clear}
          </button>
        )}
      </div>

      {/* Group tabs */}
      <div className="ultra-filter-groups" role="tablist">
        {ALL_GROUPS.map((group) => (
          <button
            key={group}
            className={`ultra-filter-group-tab ${activeGroup === group ? 'ultra-filter-group-tab--active' : ''}`}
            role="tab"
            aria-selected={activeGroup === group}
            onClick={() => setActiveGroup(group)}
          >
            {t.filters.groups[group]}
          </button>
        ))}
      </div>

      {/* None option */}
      <div className="ultra-filter-grid">
        <button
          className={`ultra-filter-item ${!appliedFilter ? 'ultra-filter-item--active' : ''}`}
          onClick={() => applyFilter(null)}
          aria-pressed={!appliedFilter}
        >
          <div className="ultra-filter-preview ultra-filter-preview--none">
            {thumbnails.original ? (
              <img
                src={thumbnails.original}
                alt={t.common.original}
                className="ultra-filter-thumb"
              />
            ) : (
              <div className="ultra-filter-thumb-loading" />
            )}
          </div>
          <span className="ultra-filter-name">{t.common.original}</span>
        </button>

        {filtersInGroup.map((preset) => (
          <button
            key={preset.id}
            className={`ultra-filter-item ${appliedFilter?.id === preset.id ? 'ultra-filter-item--active' : ''}`}
            onClick={() => applyFilter(preset.id)}
            aria-pressed={appliedFilter?.id === preset.id}
          >
            <div className="ultra-filter-preview">
              {thumbnails[preset.id] ? (
                <img
                  src={thumbnails[preset.id]}
                  alt={preset.name}
                  className="ultra-filter-thumb"
                />
              ) : (
                <div className="ultra-filter-thumb-loading" />
              )}
            </div>
            <span className="ultra-filter-name">{preset.name}</span>
          </button>
        ))}
      </div>
    </div>
  );
};