import React, { useState, useEffect, useRef } from 'react';
import { Upload, Download, Settings, Image as ImageIcon, X, RefreshCw, ArrowRight, FileImage } from 'lucide-react';

const ImageCompressor = () => {
  const [originalFile, setOriginalFile] = useState(null);
  const [compressedFile, setCompressedFile] = useState(null);
  const [isCompressing, setIsCompressing] = useState(false);
  const [previewUrl, setPreviewUrl] = useState(null);
  const [compressedPreviewUrl, setCompressedPreviewUrl] = useState(null);
  
  // Compression Settings
  const [quality, setQuality] = useState(0.8);
  const [scale, setScale] = useState(1);
  const [format, setFormat] = useState('image/jpeg');

  const fileInputRef = useRef(null);

  // Helper: Format bytes to human readable string
  const formatBytes = (bytes, decimals = 2) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
  };

  // Handle File Selection
  const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file && file.type.startsWith('image/')) {
      processFile(file);
    }
  };

  const processFile = (file) => {
    setOriginalFile(file);
    const objectUrl = URL.createObjectURL(file);
    setPreviewUrl(objectUrl);
    
    // Default output format to input format (unless it's not supported by canvas export, then jpeg)
    if (file.type === 'image/png' || file.type === 'image/webp') {
      setFormat(file.type);
    } else {
      setFormat('image/jpeg');
    }
  };

  // Trigger compression when settings or file changes
  useEffect(() => {
    if (originalFile) {
      compressImage(originalFile);
    }
  }, [originalFile, quality, scale, format]);

  const compressImage = (file) => {
    setIsCompressing(true);
    const img = new Image();
    img.src = URL.createObjectURL(file);
    
    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      const width = img.width * scale;
      const height = img.height * scale;

      canvas.width = width;
      canvas.height = height;

      // Draw image on canvas
      // Fill white background if converting PNG to JPEG to avoid black background for transparency
      if (format === 'image/jpeg') {
        ctx.fillStyle = '#FFFFFF';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      }
      
      ctx.drawImage(img, 0, 0, width, height);

      canvas.toBlob(
        (blob) => {
          if (blob) {
            setCompressedFile(blob);
            const compressedUrl = URL.createObjectURL(blob);
            setCompressedPreviewUrl(compressedUrl);
          }
          setIsCompressing(false);
        },
        format,
        quality
      );
    };
  };

  const handleDrop = (e) => {
    e.preventDefault();
    e.stopPropagation();
    const file = e.dataTransfer.files[0];
    if (file && file.type.startsWith('image/')) {
      processFile(file);
    }
  };

  const resetApp = () => {
    setOriginalFile(null);
    setCompressedFile(null);
    setPreviewUrl(null);
    setCompressedPreviewUrl(null);
    setQuality(0.8);
    setScale(1);
  };

  const calculateSavings = () => {
    if (!originalFile || !compressedFile) return 0;
    const saved = originalFile.size - compressedFile.size;
    const percentage = (saved / originalFile.size) * 100;
    return Math.max(0, percentage).toFixed(1); // Ensure doesn't show negative if size increases (rare but possible with settings)
  };

  const downloadImage = () => {
    if (!compressedFile) return;
    const link = document.createElement('a');
    link.href = compressedPreviewUrl;
    
    // Generate filename
    const originalName = originalFile.name.substring(0, originalFile.name.lastIndexOf('.')) || originalFile.name;
    const ext = format.split('/')[1];
    link.download = `${originalName}-compressed.${ext}`;
    
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-blue-100">
      
      {/* Header */}
      <header className="bg-white border-b border-slate-200 sticky top-0 z-10">
        <div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white">
              <RefreshCw size={18} className={isCompressing ? 'animate-spin' : ''} />
            </div>
            <h1 className="text-xl font-bold tracking-tight text-slate-800">PixelPress</h1>
          </div>
          {originalFile && (
            <button 
              onClick={resetApp}
              className="text-slate-500 hover:text-red-500 transition-colors text-sm font-medium flex items-center gap-1"
            >
              <X size={16} /> Reset
            </button>
          )}
        </div>
      </header>

      <main className="max-w-6xl mx-auto px-4 py-8">
        {!originalFile ? (
          /* Empty State / Dropzone */
          <div 
            className="mt-12 max-w-xl mx-auto border-2 border-dashed border-slate-300 rounded-2xl bg-white p-12 text-center hover:border-blue-500 hover:bg-blue-50 transition-all cursor-pointer group shadow-sm"
            onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }}
            onDrop={handleDrop}
            onClick={() => fileInputRef.current.click()}
          >
            <input 
              type="file" 
              ref={fileInputRef} 
              className="hidden" 
              accept="image/*"
              onChange={handleFileChange}
            />
            <div className="w-16 h-16 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
              <Upload size={32} />
            </div>
            <h2 className="text-2xl font-semibold text-slate-800 mb-2">Upload an image to compress</h2>
            <p className="text-slate-500 mb-8">Drag and drop generic JPG, PNG, or WebP files here</p>
            <button className="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors shadow-md shadow-blue-200">
              Select Image
            </button>
          </div>
        ) : (
          /* Editor UI */
          <div className="grid lg:grid-cols-3 gap-8">
            
            {/* Sidebar Controls */}
            <div className="lg:col-span-1 space-y-6">
              <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
                <div className="flex items-center gap-2 mb-6 text-slate-800 font-semibold border-b border-slate-100 pb-4">
                  <Settings size={20} className="text-blue-600" />
                  Compression Settings
                </div>

                {/* Quality Slider */}
                <div className="mb-6">
                  <div className="flex justify-between mb-2">
                    <label className="text-sm font-medium text-slate-700">Quality</label>
                    <span className="text-sm font-bold text-blue-600">{Math.round(quality * 100)}%</span>
                  </div>
                  <input
                    type="range"
                    min="0.1"
                    max="1"
                    step="0.05"
                    value={quality}
                    onChange={(e) => setQuality(parseFloat(e.target.value))}
                    className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
                  />
                  <div className="flex justify-between mt-1 text-xs text-slate-400">
                    <span>Low</span>
                    <span>High</span>
                  </div>
                </div>

                {/* Scale Slider */}
                <div className="mb-6">
                  <div className="flex justify-between mb-2">
                    <label className="text-sm font-medium text-slate-700">Resize (Scale)</label>
                    <span className="text-sm font-bold text-blue-600">{Math.round(scale * 100)}%</span>
                  </div>
                  <input
                    type="range"
                    min="0.1"
                    max="1"
                    step="0.1"
                    value={scale}
                    onChange={(e) => setScale(parseFloat(e.target.value))}
                    className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
                  />
                  <p className="text-xs text-slate-400 mt-2">Reduces dimensions to save more space.</p>
                </div>

                {/* Format Selection */}
                <div>
                  <label className="text-sm font-medium text-slate-700 mb-2 block">Output Format</label>
                  <div className="grid grid-cols-3 gap-2">
                    {['image/jpeg', 'image/png', 'image/webp'].map((fmt) => (
                      <button
                        key={fmt}
                        onClick={() => setFormat(fmt)}
                        className={`text-xs py-2 px-1 rounded-md border font-medium transition-all ${
                          format === fmt
                            ? 'bg-blue-50 border-blue-600 text-blue-700'
                            : 'bg-white border-slate-200 text-slate-600 hover:border-slate-300'
                        }`}
                      >
                        {fmt.split('/')[1].toUpperCase()}
                      </button>
                    ))}
                  </div>
                </div>
              </div>

              {/* Stats Card */}
              <div className="bg-blue-50 p-6 rounded-xl border border-blue-100">
                <h3 className="text-blue-900 font-semibold mb-4 flex items-center gap-2">
                  <FileImage size={18} /> Results
                </h3>
                
                <div className="space-y-3">
                  <div className="flex justify-between items-center text-sm">
                    <span className="text-blue-800/70">Original Size:</span>
                    <span className="font-medium text-blue-900">{formatBytes(originalFile.size)}</span>
                  </div>
                  <div className="flex justify-between items-center text-sm">
                    <span className="text-blue-800/70">Compressed:</span>
                    <span className={`font-bold ${compressedFile?.size > originalFile.size ? 'text-red-600' : 'text-green-600'}`}>
                      {compressedFile ? formatBytes(compressedFile.size) : '...'}
                    </span>
                  </div>
                  <div className="h-px bg-blue-200 my-2"></div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm font-bold text-blue-900">Saved:</span>
                    <span className="text-sm font-bold bg-green-100 text-green-700 px-2 py-1 rounded">
                      {calculateSavings()}%
                    </span>
                  </div>
                </div>

                <button 
                  onClick={downloadImage}
                  disabled={!compressedFile || isCompressing}
                  className="w-full mt-6 bg-blue-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-blue-700 transition-colors shadow-sm disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                >
                  <Download size={18} />
                  Download Image
                </button>
              </div>
            </div>

            {/* Preview Area */}
            <div className="lg:col-span-2 space-y-4">
              <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
                <div className="p-4 border-b border-slate-100 bg-slate-50 flex items-center justify-between">
                   <h3 className="font-semibold text-slate-700">Preview</h3>
                   {isCompressing && <span className="text-xs text-blue-600 animate-pulse font-medium">Processing...</span>}
                </div>
                
                <div className="p-8 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] bg-slate-100 min-h-[400px] flex items-center justify-center relative">
                    {/* Comparison View - Simple Side by Side for MVP */}
                    <div className="flex flex-col md:flex-row gap-6 items-center justify-center w-full">
                        
                        <div className="relative group w-full max-w-[45%]">
                            <div className="absolute top-2 left-2 bg-black/70 text-white text-xs px-2 py-1 rounded backdrop-blur-sm z-10">Original</div>
                            <img src={previewUrl} className="w-full h-auto rounded-lg shadow-md border-4 border-white" alt="Original" />
                        </div>

                        <div className="hidden md:block text-slate-400">
                            <ArrowRight size={24} />
                        </div>

                        <div className="relative group w-full max-w-[45%]">
                             <div className="absolute top-2 left-2 bg-blue-600/90 text-white text-xs px-2 py-1 rounded backdrop-blur-sm z-10">Compressed</div>
                            {compressedPreviewUrl ? (
                                <img src={compressedPreviewUrl} className="w-full h-auto rounded-lg shadow-md border-4 border-white" alt="Compressed" />
                            ) : (
                                <div className="w-full aspect-square bg-slate-200 rounded-lg animate-pulse"></div>
                            )}
                        </div>

                    </div>
                </div>
              </div>

              <div className="text-center">
                 <p className="text-xs text-slate-400">
                    Note: Processing happens entirely in your browser. No data is sent to any server.
                 </p>
              </div>
            </div>

          </div>
        )}
      </main>
    </div>
  );
};

export default ImageCompressor;