// ─────────────────────────────────────────────────────────────────────────────
// Ultra Image Cropper 2.0 — Perspective Panel
// Strip-based perspective convergence. Adjust sliders then click Apply.
// ─────────────────────────────────────────────────────────────────────────────

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

export const PerspectivePanel: React.FC = () => {
  const [horizontal, setHorizontal] = useState(0);
  const [vertical, setVertical] = useState(0);
  const { applyPerspective, performUndo } = useCanvas();
  const { entries, currentIndex, canUndo } = useHistoryStore();

  const handleApply = () => {
    if (horizontal === 0 && vertical === 0) return;
    applyPerspective(horizontal, vertical);
    setHorizontal(0);
    setVertical(0);
  };

  const handleReset = () => {
    const lastEntry = entries[currentIndex];
    if (canUndo && lastEntry?.label.startsWith('Perspective')) {
      performUndo();
    }
    setHorizontal(0);
    setVertical(0);
  };

  return (
    <div className="ultra-panel">
      <div className="ultra-panel__header">
        <h3 className="ultra-panel__title">Perspective</h3>
      </div>

      {/* Horizontal */}
      <div className="ultra-panel__section">
        <label className="ultra-section-label">
          Horizontal — {horizontal > 0 ? `+${horizontal}` : horizontal}
        </label>
        <input
          type="range"
          className="ultra-slider ultra-slider--bipolar"
          min={-80}
          max={80}
          step={1}
          value={horizontal}
          style={{
            '--slider-from': `${Math.min(((horizontal + 80) / 160) * 100, 50)}%`,
            '--slider-to':   `${Math.max(((horizontal + 80) / 160) * 100, 50)}%`,
          } as React.CSSProperties}
          onChange={(e) => setHorizontal(Number(e.target.value))}
          aria-label="Horizontal perspective"
        />
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, opacity: 0.55, marginTop: 4 }}>
          <span>◀ Left narrow</span>
          <span>Right narrow ▶</span>
        </div>
      </div>

      {/* Vertical */}
      <div className="ultra-panel__section">
        <label className="ultra-section-label">
          Vertical — {vertical > 0 ? `+${vertical}` : vertical}
        </label>
        <input
          type="range"
          className="ultra-slider ultra-slider--bipolar"
          min={-80}
          max={80}
          step={1}
          value={vertical}
          style={{
            '--slider-from': `${Math.min(((vertical + 80) / 160) * 100, 50)}%`,
            '--slider-to':   `${Math.max(((vertical + 80) / 160) * 100, 50)}%`,
          } as React.CSSProperties}
          onChange={(e) => setVertical(Number(e.target.value))}
          aria-label="Vertical perspective"
        />
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, opacity: 0.55, marginTop: 4 }}>
          <span>▲ Top narrow</span>
          <span>Bottom narrow ▼</span>
        </div>
      </div>

      {/* Visual diagram */}
      <div className="ultra-panel__section" style={{ display: 'flex', justifyContent: 'center' }}>
        <svg width="80" height="80" viewBox="0 0 80 80" style={{ opacity: 0.4 }}>
          {/* Trapezoid shape representing perspective */}
          <polygon
            points={`
              ${20 + Math.max(0, horizontal) * 0.3},${10 + Math.max(0, vertical) * 0.3}
              ${60 - Math.max(0, -horizontal) * 0.3},${10 + Math.max(0, vertical) * 0.3}
              ${60 - Math.max(0, horizontal) * 0.3},${70 - Math.max(0, -vertical) * 0.3}
              ${20 + Math.max(0, -horizontal) * 0.3},${70 - Math.max(0, -vertical) * 0.3}
            `}
            fill="none"
            stroke="currentColor"
            strokeWidth="1.5"
          />
        </svg>
      </div>

      {/* Actions */}
      <div className="ultra-panel__actions">
        <button
          className="ultra-btn ultra-btn--secondary"
          onClick={handleReset}
        >
          Reset
        </button>
        <button
          className="ultra-btn ultra-btn--primary"
          onClick={handleApply}
          disabled={horizontal === 0 && vertical === 0}
        >
          Apply
        </button>
      </div>

      <div className="ultra-panel__section">
        <p style={{ fontSize: 11, opacity: 0.55, margin: 0, lineHeight: 1.5 }}>
          Adjust sliders to preview, then click <strong>Apply</strong> to commit the transform.
        </p>
      </div>
    </div>
  );
};