// ─────────────────────────────────────────────────────────────────────────────
// Ultra Image Cropper 2.0 — Adjust Panel
// Sliders for all 14 adjustment parameters
// ─────────────────────────────────────────────────────────────────────────────

import React, { useCallback } from 'react';
import { useCanvasStore } from '@/store';
import { historyManager } from '@/engine/HistoryManager';
import { useTranslation } from '@/i18n/useTranslation';

interface AdjustDef {
  key: keyof import('@/types').AdjustmentValues;
  labelKey: keyof import('@/i18n/translations').Translations['adjust'];
  min: number;
  max: number;
  step: number;
  unit?: string;
}

const ADJUST_DEFS: AdjustDef[] = [
  { key: 'brightness',  labelKey: 'brightness',  min: -100, max: 100, step: 1  },
  { key: 'contrast',    labelKey: 'contrast',    min: -100, max: 100, step: 1  },
  { key: 'saturation',  labelKey: 'saturation',  min: -100, max: 100, step: 1  },
  { key: 'grayscale',   labelKey: 'grayscale',   min: 0,    max: 100, step: 1, unit: '%' },
  { key: 'exposure',    labelKey: 'exposure',    min: -2,   max: 2,   step: 0.1, unit: 'EV' },
  { key: 'highlights',  labelKey: 'highlights',  min: -100, max: 100, step: 1  },
  { key: 'shadows',     labelKey: 'shadows',     min: -100, max: 100, step: 1  },
  { key: 'sharpness',   labelKey: 'sharpness',   min: 0,    max: 100, step: 1  },
  { key: 'blur',        labelKey: 'blur',        min: 0,    max: 100, step: 1  },
  { key: 'hueRotate',   labelKey: 'hue',         min: 0,    max: 360, step: 1, unit: '°' },
  { key: 'temperature', labelKey: 'temperature', min: -100, max: 100, step: 1  },
  { key: 'tint',        labelKey: 'tint',        min: -100, max: 100, step: 1  },
  { key: 'vignette',    labelKey: 'vignette',    min: 0,    max: 100, step: 1  },
  { key: 'noise',       labelKey: 'noise',       min: 0,    max: 100, step: 1  },
];

export const AdjustPanel: React.FC = () => {
  const t = useTranslation();
  const { adjustments, setAdjustment, resetAdjustments } = useCanvasStore();

  const visibleDefs = ADJUST_DEFS;

  const handleChange = useCallback(
    (key: keyof typeof adjustments, value: number) => {
      setAdjustment(key, value);
    },
    [setAdjustment]
  );

  const handleCommit = useCallback((label: string) => {
    historyManager.snapshot(label);
  }, []);

  const isDefault = visibleDefs.every((d) => adjustments[d.key] === 0);

  return (
    <div className="ultra-panel">
      <div className="ultra-panel__header">
        <h3 className="ultra-panel__title">{t.adjust.title}</h3>
        {!isDefault && (
          <button className="ultra-btn ultra-btn--ghost ultra-btn--sm" onClick={resetAdjustments}>
            {t.common.reset}
          </button>
        )}
      </div>

      <div className="ultra-adjust-sliders">
        {visibleDefs.map((def) => {
          const value = adjustments[def.key];
          const range = def.max - def.min;
          const pct = ((value - def.min) / range) * 100;
          const isBipolar = def.min < 0 && def.max > 0;
          const centerPct = isBipolar ? ((-def.min) / range) * 100 : 0;
          const sliderFrom = isBipolar ? Math.min(pct, centerPct) : 0;
          const sliderTo   = isBipolar ? Math.max(pct, centerPct) : pct;
          const sliderStyle = isBipolar
            ? { '--slider-from': `${sliderFrom}%`, '--slider-to': `${sliderTo}%` } as React.CSSProperties
            : { '--slider-pct': `${pct}%` } as React.CSSProperties;
          const label = t.adjust[def.labelKey] as string;

          return (
            <div key={def.key} className="ultra-slider-row">
              <div className="ultra-slider-header">
                <label className="ultra-slider-label" htmlFor={`slider-${def.key}`}>
                  {label}
                </label>
                <input
                  type="number"
                  className="ultra-slider-numeric"
                  value={value}
                  min={def.min}
                  max={def.max}
                  step={def.step}
                  onChange={(e) => handleChange(def.key, Number(e.target.value))}
                  onBlur={() => handleCommit(label)}
                  aria-label={`${label} value`}
                />
                {def.unit && <span className="ultra-slider-unit">{def.unit}</span>}
              </div>

              <div className="ultra-slider-track-wrapper">
                {isBipolar && (
                  <div
                    className="ultra-slider-zero-mark"
                    style={{ left: `${centerPct}%` }}
                  />
                )}
                <input
                  id={`slider-${def.key}`}
                  type="range"
                  className={`ultra-slider${isBipolar ? ' ultra-slider--bipolar' : ''}`}
                  min={def.min}
                  max={def.max}
                  step={def.step}
                  value={value}
                  style={sliderStyle}
                  onChange={(e) => handleChange(def.key, Number(e.target.value))}
                  onMouseUp={() => handleCommit(label)}
                  onTouchEnd={() => handleCommit(label)}
                  aria-label={label}
                  aria-valuemin={def.min}
                  aria-valuemax={def.max}
                  aria-valuenow={value}
                />
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};