// ─────────────────────────────────────────────────────────────────────────────
// Ultra Image Cropper 2.0 — Rotate & Flip Panel
// ─────────────────────────────────────────────────────────────────────────────

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

interface RotatePanelProps {
  showFlip?: boolean;
}

export const RotatePanel: React.FC<RotatePanelProps> = ({ showFlip = false }) => {
  const t = useTranslation();
  const [customDeg, setCustomDeg] = useState(0);
  const { rotateLeft, rotateRight, rotate180, rotateArbitrary, flipH, flipV, resetToOriginal } = useCanvas();

  const applyCustomRotation = () => {
    if (customDeg === 0) return;
    rotateArbitrary(customDeg);
    setCustomDeg(0);
  };

  return (
    <div className="ultra-panel">
      {!showFlip ? (
        <>
          <div className="ultra-panel__header">
            <h3 className="ultra-panel__title">{t.rotate.title}</h3>
            <button
              className="ultra-btn ultra-btn--ghost ultra-btn--sm"
              onClick={resetToOriginal}
              title="Undo all rotations and restore original image"
            >
              {t.common.reset}
            </button>
          </div>

          <div className="ultra-panel__section">
            <label className="ultra-section-label">{t.rotate.quickRotate}</label>
            <div className="ultra-btn-group">
              <button className="ultra-btn ultra-btn--secondary" onClick={rotateLeft} title="Rotate 90° counter-clockwise">
                {t.rotate.ccw}
              </button>
              <button className="ultra-btn ultra-btn--secondary" onClick={rotateRight} title="Rotate 90° clockwise">
                {t.rotate.cw}
              </button>
              <button className="ultra-btn ultra-btn--secondary" onClick={rotate180} title="Rotate 180°">
                {t.rotate.flip180}
              </button>
            </div>
          </div>

          <div className="ultra-panel__section">
            <label className="ultra-section-label">{t.rotate.customAngle}</label>
            <div className="ultra-input-with-btn">
              <input
                type="number"
                className="ultra-input"
                value={customDeg}
                min={-360}
                max={360}
                step={1}
                onChange={(e) => setCustomDeg(Number(e.target.value))}
                aria-label="Custom rotation degrees"
              />
              <span className="ultra-input-suffix">°</span>
              <button
                className="ultra-btn ultra-btn--primary"
                onClick={applyCustomRotation}
                disabled={customDeg === 0}
              >
                {t.common.apply}
              </button>
            </div>
            <input
              type="range"
              className="ultra-slider ultra-slider--bipolar"
              min={-180}
              max={180}
              step={1}
              value={customDeg}
              style={{
                '--slider-from': `${Math.min(((customDeg + 180) / 360) * 100, 50)}%`,
                '--slider-to':   `${Math.max(((customDeg + 180) / 360) * 100, 50)}%`,
              } as React.CSSProperties}
              onChange={(e) => setCustomDeg(Number(e.target.value))}
              aria-label="Rotation slider"
            />
          </div>
        </>
      ) : (
        <>
          <div className="ultra-panel__header">
            <h3 className="ultra-panel__title">{t.flip.title}</h3>
            <button
              className="ultra-btn ultra-btn--ghost ultra-btn--sm"
              onClick={resetToOriginal}
              title="Restore original image"
            >
              {t.common.reset}
            </button>
          </div>
          <div className="ultra-panel__section">
            <div className="ultra-btn-group ultra-btn-group--column">
              <button className="ultra-btn ultra-btn--secondary ultra-btn--lg" onClick={flipH}>
                {t.flip.horizontal}
              </button>
              <button className="ultra-btn ultra-btn--secondary ultra-btn--lg" onClick={flipV}>
                {t.flip.vertical}
              </button>
              <button className="ultra-btn ultra-btn--secondary ultra-btn--lg" onClick={() => { flipH(); flipV(); }}>
                {t.flip.both}
              </button>
            </div>
          </div>
        </>
      )}
    </div>
  );
};