// ─────────────────────────────────────────────────────────────────────────────
// Ultra Image Cropper 2.0 — Draw Panel
// Freehand drawing tool controls. Events are handled by CanvasArea.
// ─────────────────────────────────────────────────────────────────────────────

import React, { useState, useEffect, useRef } from 'react';
import { useCanvas } from '@/hooks/useCanvas';
import { useTranslation } from '@/i18n/useTranslation';
import { useHistoryStore } from '@/store';

export const DrawPanel: React.FC = () => {
  const t = useTranslation();
  const DEFAULT_COLOR   = '#000000';
  const DEFAULT_SIZE    = 10;
  const DEFAULT_OPACITY = 100;

  const [color, setColor]     = useState(DEFAULT_COLOR);
  const [size, setSize]       = useState(DEFAULT_SIZE);
  const [opacity, setOpacity] = useState(DEFAULT_OPACITY);
  const [erasing, setErasing] = useState(false);
  const { setDrawConfig, performUndo, performRedo, jumpToHistory } = useCanvas();

  // Capture the history index at session start so Reset can revert all strokes
  const sessionStartIndex = useRef(useHistoryStore.getState().currentIndex);

  // Reactive history state — updates whenever the history store changes
  const currentIndex = useHistoryStore((s) => s.currentIndex);
  const canUndo      = useHistoryStore((s) => s.canUndo);
  const canRedo      = useHistoryStore((s) => s.canRedo);

  // Strokes committed since the session started (used for Reset)
  const drawStrokeCount = Math.max(0, currentIndex - sessionStartIndex.current);
  const hasDrawn        = drawStrokeCount > 0;

  // Restore canvas to the state before any drawing in this session
  const handleResetDrawing = () => {
    jumpToHistory(sessionStartIndex.current);
  };

  // Sync brush config to engine on every change
  useEffect(() => {
    setDrawConfig({ color, size, opacity, erasing });
  }, [color, size, opacity, erasing, setDrawConfig]);

  const previewSize = Math.min(Math.max(size, 8), 80);

  return (
    <div className="ultra-panel">
      <div className="ultra-panel__header">
        <h3 className="ultra-panel__title">{t.draw.title}</h3>
      </div>

      {/* Mode */}
      <div className="ultra-panel__section">
        <label className="ultra-section-label">{t.draw.mode}</label>
        <div className="ultra-btn-group">
          <button
            className={`ultra-btn ultra-btn--secondary${!erasing ? ' ultra-btn--active' : ''}`}
            onClick={() => setErasing(false)}
            aria-pressed={!erasing}
          >
            {t.draw.brush}
          </button>
          <button
            className={`ultra-btn ultra-btn--secondary${erasing ? ' ultra-btn--active' : ''}`}
            onClick={() => setErasing(true)}
            aria-pressed={erasing}
          >
            {t.draw.eraser}
          </button>
        </div>
      </div>

      {/* Color (hidden when erasing) */}
      {!erasing && (
        <div className="ultra-panel__section">
          <label className="ultra-section-label">{t.draw.color}</label>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <input
              type="color"
              value={color}
              onChange={(e) => setColor(e.target.value)}
              style={{ width: 44, height: 36, border: 'none', borderRadius: 6, cursor: 'pointer', padding: 2, background: 'none' }}
              aria-label="Brush color"
            />
            <span style={{ fontSize: 12, opacity: 0.6, fontFamily: 'monospace' }}>{color.toUpperCase()}</span>
          </div>
        </div>
      )}

      {/* Brush Size */}
      <div className="ultra-panel__section">
        <label className="ultra-section-label">{t.draw.brushSize} — {size}px</label>
        <input
          type="range"
          className="ultra-slider"
          min={1}
          max={150}
          value={size}
          style={{ '--slider-pct': `${((size - 1) / 149) * 100}%` } as React.CSSProperties}
          onChange={(e) => setSize(Number(e.target.value))}
          aria-label="Brush size"
        />
      </div>

      {/* Opacity */}
      <div className="ultra-panel__section">
        <label className="ultra-section-label">{t.draw.opacityLabel} — {opacity}%</label>
        <input
          type="range"
          className="ultra-slider"
          min={1}
          max={100}
          value={opacity}
          style={{ '--slider-pct': `${((opacity - 1) / 99) * 100}%` } as React.CSSProperties}
          onChange={(e) => setOpacity(Number(e.target.value))}
          aria-label="Brush opacity"
        />
      </div>

      {/* Undo / Redo — per-stroke, enabled by global history state */}
      <div className="ultra-panel__section">
        <label className="ultra-section-label">{t.draw.strokeHistory}</label>
        <div style={{ display: 'flex', gap: 8 }}>
          <button
            className="ultra-btn ultra-btn--secondary ultra-btn--sm"
            style={{ flex: 1 }}
            onClick={performUndo}
            disabled={!canUndo}
            aria-label="Undo last stroke"
          >
            ↩ {t.common.undo}
          </button>
          <button
            className="ultra-btn ultra-btn--secondary ultra-btn--sm"
            style={{ flex: 1 }}
            onClick={performRedo}
            disabled={!canRedo}
            aria-label="Redo stroke"
          >
            ↪ {t.common.redo}
          </button>
        </div>
      </div>

      {/* Preview dot */}
      <div className="ultra-panel__section" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
        <div
          style={{
            width: previewSize,
            height: previewSize,
            borderRadius: '50%',
            background: erasing ? 'rgba(0,0,0,0.12)' : color,
            opacity: opacity / 100,
            border: erasing ? '2px dashed #aaa' : '1px solid rgba(0,0,0,0.15)',
            transition: 'all 0.15s',
            flexShrink: 0,
          }}
          aria-hidden="true"
        />
        <p style={{ fontSize: 11, opacity: 0.55, margin: 0, textAlign: 'center', lineHeight: 1.5 }}>
          {t.draw.hint}
        </p>
      </div>

      {/* Reset — reverts all strokes drawn in this session */}
      <div className="ultra-panel__actions">
        <button
          className="ultra-btn ultra-btn--secondary"
          onClick={handleResetDrawing}
          disabled={!hasDrawn}
        >
          {t.draw.resetDrawing}
        </button>
      </div>
    </div>
  );
};