import React, { useState, useEffect, useRef } from 'react';
import { Sliders, Download, Image as ImageIcon, RefreshCw } from 'lucide-react';

export default function PixelArtConverter() {
  const [pixelSize, setPixelSize] = useState(10);
  const [brightness, setBrightness] = useState(0);
  const [contrast, setContrast] = useState(0);
  const [saturation, setSaturation] = useState(0);
  const [isProcessing, setIsProcessing] = useState(false);
  const [originalImage, setOriginalImage] = useState('/f/IMG-20250116-WA0023(1)-hZTo.jpeg');
  const [pixelatedImage, setPixelatedImage] = useState(null);
  
  const canvasRef = useRef(null);
  const originalCanvasRef = useRef(null);
  
  // Process the image when parameters change
  useEffect(() => {
    if (originalImage) {
      pixelateImage();
    }
  }, [pixelSize, brightness, contrast, saturation, originalImage]);
  
  const pixelateImage = () => {
    setIsProcessing(true);
    
    const img = new Image();
    img.crossOrigin = "Anonymous";
    img.src = originalImage;
    
    img.onload = () => {
      // Set up original canvas
      const originalCanvas = originalCanvasRef.current;
      const originalCtx = originalCanvas.getContext('2d');
      
      // Calculate dimensions while maintaining aspect ratio
      const maxWidth = 400;
      const maxHeight = 400;
      let width = img.width;
      let height = img.height;
      
      if (width > height) {
        if (width > maxWidth) {
          height = Math.round(height * maxWidth / width);
          width = maxWidth;
        }
      } else {
        if (height > maxHeight) {
          width = Math.round(width * maxHeight / height);
          height = maxHeight;
        }
      }
      
      originalCanvas.width = width;
      originalCanvas.height = height;
      
      // Draw original image
      originalCtx.clearRect(0, 0, width, height);
      originalCtx.drawImage(img, 0, 0, width, height);
      
      // Set up pixelation canvas
      const canvas = canvasRef.current;
      const ctx = canvas.getContext('2d');
      
      canvas.width = width;
      canvas.height = height;
      
      // Draw original image first
      ctx.drawImage(img, 0, 0, width, height);
      
      // Apply filters
      if (brightness !== 0 || contrast !== 0 || saturation !== 0) {
        const imageData = ctx.getImageData(0, 0, width, height);
        const data = imageData.data;
        
        for (let i = 0; i < data.length; i += 4) {
          // Apply brightness
          data[i] = clamp(data[i] + brightness * 2.55);
          data[i + 1] = clamp(data[i + 1] + brightness * 2.55);
          data[i + 2] = clamp(data[i + 2] + brightness * 2.55);
          
          // Apply contrast
          const factor = (259 * (contrast + 100)) / (100 * (259 - contrast));
          data[i] = clamp(factor * (data[i] - 128) + 128);
          data[i + 1] = clamp(factor * (data[i + 1] - 128) + 128);
          data[i + 2] = clamp(factor * (data[i + 2] - 128) + 128);
          
          // Apply saturation
          const gray = 0.2989 * data[i] + 0.5870 * data[i + 1] + 0.1140 * data[i + 2];
          const satFactor = 1 + saturation / 100;
          data[i] = clamp(gray + satFactor * (data[i] - gray));
          data[i + 1] = clamp(gray + satFactor * (data[i + 1] - gray));
          data[i + 2] = clamp(gray + satFactor * (data[i + 2] - gray));
        }
        
        ctx.putImageData(imageData, 0, 0);
      }
      
      // Pixelate
      if (pixelSize > 1) {
        const smallCanvas = document.createElement('canvas');
        const smallCtx = smallCanvas.getContext('2d');
        
        // Scale down
        smallCanvas.width = Math.ceil(width / pixelSize);
        smallCanvas.height = Math.ceil(height / pixelSize);
        
        smallCtx.drawImage(canvas, 0, 0, smallCanvas.width, smallCanvas.height);
        
        // Clear and scale back up with pixelation
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.imageSmoothingEnabled = false;
        ctx.drawImage(
          smallCanvas,
          0, 0, smallCanvas.width, smallCanvas.height,
          0, 0, width, height
        );
      }
      
      setPixelatedImage(canvas.toDataURL('image/png'));
      setIsProcessing(false);
    };
  };
  
  const handleDownload = () => {
    const link = document.createElement('a');
    link.download = 'pixel-art-dog.png';
    link.href = pixelatedImage;
    link.click();
  };
  
  const clamp = (value) => {
    return Math.max(0, Math.min(255, value));
  };
  
  return (
    <div className="flex flex-col min-h-screen bg-gray-50">
      <header className="bg-teal-700 text-white p-6 shadow-md">
        <h1 className="text-2xl font-bold flex items-center">
          <ImageIcon className="mr-2" /> Dog Pixel Art Converter
        </h1>
      </header>
      
      <main className="flex-grow p-6">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h2 className="text-lg font-semibold mb-4 text-gray-700">Original Image</h2>
              <div className="flex justify-center items-center bg-gray-100 rounded-md p-4 h-[400px]">
                <canvas 
                  ref={originalCanvasRef} 
                  className="max-w-full max-h-full object-contain"
                />
              </div>
            </div>
            
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h2 className="text-lg font-semibold mb-4 text-gray-700">Pixelated Result</h2>
              <div className="flex justify-center items-center bg-gray-100 rounded-md p-4 h-[400px] relative">
                {isProcessing && (
                  <div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-70 z-10">
                    <div className="flex flex-col items-center">
                      <RefreshCw className="animate-spin text-teal-600 mb-2" />
                      <p className="text-sm text-gray-600">Processing...</p>
                    </div>
                  </div>
                )}
                <canvas 
                  ref={canvasRef} 
                  className="max-w-full max-h-full object-contain hidden"
                />
                {pixelatedImage && (
                  <img 
                    src={pixelatedImage} 
                    alt="Pixelated dog" 
                    className="max-w-full max-h-full object-contain"
                  />
                )}
              </div>
            </div>
          </div>
          
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h2 className="text-lg font-semibold mb-4 flex items-center text-gray-700">
              <Sliders className="mr-2" /> Pixel Art Controls
            </h2>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Pixel Size: {pixelSize}
                </label>
                <input
                  type="range"
                  min="1"
                  max="30"
                  value={pixelSize}
                  onChange={(e) => setPixelSize(parseInt(e.target.value))}
                  className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-teal-600"
                />
                <div className="flex justify-between text-xs text-gray-500 mt-1">
                  <span>Small</span>
                  <span>Large</span>
                </div>
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Brightness: {brightness}
                </label>
                <input
                  type="range"
                  min="-100"
                  max="100"
                  value={brightness}
                  onChange={(e) => setBrightness(parseInt(e.target.value))}
                  className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-teal-600"
                />
                <div className="flex justify-between text-xs text-gray-500 mt-1">
                  <span>Dark</span>
                  <span>Bright</span>
                </div>
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Contrast: {contrast}
                </label>
                <input
                  type="range"
                  min="-100"
                  max="100"
                  value={contrast}
                  onChange={(e) => setContrast(parseInt(e.target.value))}
                  className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-teal-600"
                />
                <div className="flex justify-between text-xs text-gray-500 mt-1">
                  <span>Low</span>
                  <span>High</span>
                </div>
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Saturation: {saturation}
                </label>
                <input
                  type="range"
                  min="-100"
                  max="100"
                  value={saturation}
                  onChange={(e) => setSaturation(parseInt(e.target.value))}
                  className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-teal-600"
                />
                <div className="flex justify-between text-xs text-gray-500 mt-1">
                  <span>Grayscale</span>
                  <span>Vibrant</span>
                </div>
              </div>
            </div>
            
            <div className="mt-8 flex justify-center">
              <button
                onClick={handleDownload}
                disabled={!pixelatedImage || isProcessing}
                className="flex items-center px-6 py-3 bg-teal-600 text-white rounded-lg shadow hover:bg-teal-700 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed"
              >
                <Download className="mr-2" /> Download Pixel Art
              </button>
            </div>
          </div>
        </div>
      </main>
      
      <footer className="bg-gray-800 text-white p-4 text-center text-sm">
        <p>Created with Sitebrew AI - Dog Pixel Art Converter</p>
      </footer>
    </div>
  );
}