import { memo } from 'react';
import { BackgroundRemovalButton } from '../sidebar/BackgroundRemovalButton';
import '../../styles/PropertiesPanel.css';

export const PropertiesPanel = memo(function PropertiesPanel({ element, onUpdate, onDelete, onEditPhoto }) {
  if (!element) {
    return (
      <div className="properties-panel">
        <div className="properties-panel__header">
          <h3 className="properties-panel__title">Properties</h3>
        </div>
        <div className="properties-panel__empty">
          Select an element to edit its properties
        </div>
      </div>
    );
  }

  const handlePositionChange = (axis, value) => onUpdate({ [axis]: parseFloat(value) || 0 });
  const handleSizeChange = (axis, value) => onUpdate({ [axis]: Math.max(20, parseFloat(value) || 20) });
  const handleRotationChange = (value) => onUpdate({ rotation: Math.max(-180, Math.min(180, parseFloat(value) || 0)) });

  return (
    <div className="properties-panel">
      <div className="properties-panel__header">
        <h3 className="properties-panel__title">Properties</h3>
      </div>

      <div className="properties-panel__body">
        <div className="properties-panel__type-badge">
          {element.type}
        </div>

        {/* Position */}
        <div className="properties-panel__section">
          <label className="properties-panel__label">Position</label>
          <div className="properties-panel__row">
            <div className="properties-panel__field">
              <label className="properties-panel__axis-label">X</label>
              <input type="number" value={Math.round(element.x)} onChange={(e) => handlePositionChange('x', e.target.value)} className="properties-panel__input" />
            </div>
            <div className="properties-panel__field">
              <label className="properties-panel__axis-label">Y</label>
              <input type="number" value={Math.round(element.y)} onChange={(e) => handlePositionChange('y', e.target.value)} className="properties-panel__input" />
            </div>
          </div>
        </div>

        {/* Size (for images and stickers) */}
        {(element.type === 'image' || element.type === 'sticker') && (
          <div className="properties-panel__section">
            <label className="properties-panel__label">Size</label>
            <div className="properties-panel__row">
              <div className="properties-panel__field">
                <label className="properties-panel__axis-label">W</label>
                <input type="number" value={Math.round(element.width)} onChange={(e) => handleSizeChange('width', e.target.value)} className="properties-panel__input" />
              </div>
              <div className="properties-panel__field">
                <label className="properties-panel__axis-label">H</label>
                <input type="number" value={Math.round(element.height)} onChange={(e) => handleSizeChange('height', e.target.value)} className="properties-panel__input" />
              </div>
            </div>
          </div>
        )}

        {/* Edit Photo button (user uploads only, not stickers) */}
        {element.type === 'image' && !element.emoji && onEditPhoto && (
          <div className="properties-panel__section">
            <button onClick={() => onEditPhoto(element)} className="properties-panel__edit-btn">
              ✏️ Edit Photo
            </button>
          </div>
        )}

        {/* Text-specific controls */}
        {element.type === 'text' && (
          <>
            <div className="properties-panel__section">
              <label className="properties-panel__label">Font Size: {Math.round(element.fontSize)}px</label>
              <input type="range" min="12" max="120" value={element.fontSize} onChange={(e) => onUpdate({ fontSize: parseInt(e.target.value, 10) })} className="properties-panel__range" />
            </div>
            <div className="properties-panel__section">
              <label className="properties-panel__label">Color</label>
              <input type="color" value={element.fill} onChange={(e) => onUpdate({ fill: e.target.value })} className="properties-panel__color-input" />
            </div>
          </>
        )}

        {/* Rotation */}
        <div className="properties-panel__section">
          <label className="properties-panel__label">Rotation: {Math.round(element.rotation)}°</label>
          <input type="range" min="-180" max="180" value={element.rotation} onChange={(e) => handleRotationChange(e.target.value)} className="properties-panel__range" />
        </div>

        {/* Background Removal (user uploads only, not stickers) */}
        {element.type === 'image' && !element.emoji && (
          <BackgroundRemovalButton
            selectedElement={element}
            onUpdate={(_id, attrs) => onUpdate(attrs)}
          />
        )}

        {/* Delete */}
        <button onClick={() => onDelete(element.id)} className="properties-panel__delete-btn">
          Delete Element
        </button>
      </div>
    </div>
  );
});
