// ─────────────────────────────────────────────────────────────────────────────
// Ultra Image Cropper 2.0 — Overlay Panel (Watermark / Image Merge / Stickers)
// ─────────────────────────────────────────────────────────────────────────────

import React, { useRef, useState } from 'react';
import type { Layer, BlendMode } from '@/types';
import { useCanvasStore } from '@/store';
import { historyManager } from '@/engine/HistoryManager';

const BLEND_MODES: BlendMode[] = [
  'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten',
  'color-dodge', 'color-burn', 'soft-light', 'hard-light',
  'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity',
];

const generateId = () => `layer_${Date.now()}_${Math.random().toString(36).slice(2)}`;

export const OverlayPanel: React.FC = () => {
  const fileRef = useRef<HTMLInputElement>(null);
  const [blendMode, setBlendMode] = useState<BlendMode>('normal');
  const [opacity, setOpacity] = useState(80);
  const { addLayer, layers, removeLayer, updateLayer, imageWidth, imageHeight, selectedLayerId, setSelectedLayerId } = useCanvasStore();

  const overlayLayers = layers.filter((l) => l.type === 'image');

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (ev) => {
      const imageData = ev.target?.result as string;
      const layer: Layer = {
        id: generateId(),
        type: 'image',
        visible: true,
        locked: false,
        opacity,
        blendMode,
        x: imageWidth * 0.1,
        y: imageHeight * 0.1,
        width: imageWidth * 0.5,
        height: imageHeight * 0.5,
        imageData,
      };
      addLayer(layer);
      setSelectedLayerId(layer.id);
      historyManager.snapshot(`Add Image Layer`);
    };
    reader.readAsDataURL(file);
    e.target.value = '';
  };

  const handleResetAll = () => {
    overlayLayers.forEach((l) => removeLayer(l.id));
    setBlendMode('normal');
    setOpacity(80);
    historyManager.snapshot('Remove All Overlay Layers');
  };

  const title = 'Overlay';

  return (
    <div className="ultra-panel">
      <div className="ultra-panel__header">
        <h3 className="ultra-panel__title">{title}</h3>
        {overlayLayers.length > 0 && (
          <button className="ultra-btn ultra-btn--ghost ultra-btn--sm" onClick={handleResetAll}>
            Reset
          </button>
        )}
      </div>

      {/* Upload overlay image */}
      <div className="ultra-panel__section">
        <input
          ref={fileRef}
          type="file"
          accept="image/png,image/svg+xml,image/jpeg,image/webp"
          style={{ display: 'none' }}
          onChange={handleFileSelect}
        />
        <button className="ultra-btn ultra-btn--secondary ultra-btn--full" onClick={() => fileRef.current?.click()}>
          + Upload Image
        </button>
        <p className="ultra-hint">PNG with transparency recommended.</p>
      </div>

      {/* Blend mode */}
      <div className="ultra-panel__section">
        <label className="ultra-section-label">Blend Mode</label>
        <select
          className="ultra-select"
          value={blendMode}
          onChange={(e) => setBlendMode(e.target.value as BlendMode)}
          aria-label="Blend mode"
        >
          {BLEND_MODES.map((m) => (
            <option key={m} value={m} style={{ textTransform: 'capitalize' }}>
              {m.replace(/-/g, ' ')}
            </option>
          ))}
        </select>
      </div>

      {/* Opacity */}
      <div className="ultra-panel__section">
        <label className="ultra-section-label">
          Opacity <span className="ultra-quality-value">{opacity}%</span>
        </label>
        <input
          type="range"
          className="ultra-slider"
          min={10}
          max={100}
          value={opacity}
          style={{ '--slider-pct': `${((opacity - 10) / 90) * 100}%` } as React.CSSProperties}
          onChange={(e) => setOpacity(Number(e.target.value))}
          aria-label={`Overlay opacity ${opacity}%`}
        />
      </div>

      {/* Layer list */}
      {overlayLayers.length > 0 && (
        <div className="ultra-panel__section">
          <label className="ultra-section-label">Active Layers ({overlayLayers.length}/5)</label>
          <div className="ultra-layer-list">
            {overlayLayers.map((layer, i) => (
              <div
                key={layer.id}
                className={`ultra-layer-item${selectedLayerId === layer.id ? ' ultra-layer-item--active' : ''}`}
                onClick={() => setSelectedLayerId(layer.id)}
                style={{ cursor: 'pointer' }}
              >
                <button
                  className={`ultra-layer-visibility ${layer.visible ? '' : 'ultra-layer-visibility--hidden'}`}
                  onClick={(e) => { e.stopPropagation(); updateLayer(layer.id, { visible: !layer.visible }); }}
                  aria-label={layer.visible ? 'Hide layer' : 'Show layer'}
                >
                  {layer.visible ? '👁' : '🙈'}
                </button>
                <span className="ultra-layer-name">Layer {i + 1}</span>
                <select
                  className="ultra-select ultra-select--xs"
                  value={layer.blendMode}
                  onClick={(e) => e.stopPropagation()}
                  onChange={(e) => updateLayer(layer.id, { blendMode: e.target.value as BlendMode })}
                  aria-label={`Layer ${i + 1} blend mode`}
                >
                  {BLEND_MODES.map((m) => (
                    <option key={m} value={m}>{m}</option>
                  ))}
                </select>
                <button
                  className="ultra-layer-remove"
                  onClick={(e) => { e.stopPropagation(); removeLayer(layer.id); historyManager.snapshot('Remove Layer'); }}
                  aria-label="Remove layer"
                >
                  ✕
                </button>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};