import React, { useState } from 'react';
import { Download, X, ZoomIn, ZoomOut, RotateCw } from 'lucide-react';

const ImagePreview = ({ src, alt, onClose, onDownload }) => {
  const [scale, setScale] = useState(1);
  const [rotation, setRotation] = useState(0);

  const handleZoomIn = () => {
    setScale(prev => Math.min(prev + 0.25, 3));
  };

  const handleZoomOut = () => {
    setScale(prev => Math.max(prev - 0.25, 0.5));
  };

  const handleRotate = () => {
    setRotation(prev => (prev + 90) % 360);
  };

  const handleReset = () => {
    setScale(1);
    setRotation(0);
  };

  const handleWheel = (e) => {
    e.preventDefault();
    const delta = e.deltaY > 0 ? -0.1 : 0.1;
    setScale(prev => Math.max(0.5, Math.min(3, prev + delta)));
  };

  return (
    <div 
      className="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4"
      onClick={onClose}
    >
      <div 
        className="relative max-w-full max-h-full"
        onClick={(e) => e.stopPropagation()}
        onWheel={handleWheel}
      >
        {/* Image */}
        <img
          src={src}
          alt={alt}
          className="max-w-full max-h-full object-contain transition-transform duration-200"
          style={{ 
            transform: `scale(${scale}) rotate(${rotation}deg)`,
            cursor: scale > 1 ? 'grab' : 'default'
          }}
          draggable={false}
        />

        {/* Controls */}
        <div className="absolute top-4 right-4 flex space-x-2">
          <button
            onClick={handleZoomIn}
            className="bg-white bg-opacity-20 text-white p-3 rounded-lg hover:bg-opacity-30 transition-colors backdrop-blur-sm"
            title="Zoom In"
          >
            <ZoomIn size={20} />
          </button>
          <button
            onClick={handleZoomOut}
            className="bg-white bg-opacity-20 text-white p-3 rounded-lg hover:bg-opacity-30 transition-colors backdrop-blur-sm"
            title="Zoom Out"
          >
            <ZoomOut size={20} />
          </button>
          <button
            onClick={handleRotate}
            className="bg-white bg-opacity-20 text-white p-3 rounded-lg hover:bg-opacity-30 transition-colors backdrop-blur-sm"
            title="Rotate"
          >
            <RotateCw size={20} />
          </button>
          <button
            onClick={handleReset}
            className="bg-white bg-opacity-20 text-white p-3 rounded-lg hover:bg-opacity-30 transition-colors backdrop-blur-sm"
            title="Reset"
          >
            <span className="text-sm font-medium">Reset</span>
          </button>
          {onDownload && (
            <button
              onClick={onDownload}
              className="bg-white bg-opacity-20 text-white p-3 rounded-lg hover:bg-opacity-30 transition-colors backdrop-blur-sm"
              title="Download"
            >
              <Download size={20} />
            </button>
          )}
          <button
            onClick={onClose}
            className="bg-white bg-opacity-20 text-white p-3 rounded-lg hover:bg-opacity-30 transition-colors backdrop-blur-sm"
            title="Close"
          >
            <X size={20} />
          </button>
        </div>

        {/* Zoom Level Indicator */}
        <div className="absolute bottom-4 left-4 bg-black bg-opacity-50 text-white px-3 py-2 rounded-lg backdrop-blur-sm">
          <span className="text-sm">{Math.round(scale * 100)}%</span>
        </div>
      </div>
    </div>
  );
};

export default ImagePreview;