import React, { useState, useRef } from 'react';

const App = () => {
  const [combinedImage, setCombinedImage] = useState(null);
  const [loading, setLoading] = useState(false);
  const mainImageRef = useRef(null);
  const alphaImageRef = useRef(null);
  const canvasRef = useRef(null);

  const handleCombine = async () => {
    setLoading(true);
    setCombinedImage(null);

    const mainImageFile = mainImageRef.current.files[0];
    const alphaImageFile = alphaImageRef.current.files[0];

    if (!mainImageFile || !alphaImageFile) {
      alert("Please upload both a main image and a black and white alpha mask.");
      setLoading(false);
      return;
    }

    // Read the images as data URLs
    const readImage = (file) => {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => resolve(e.target.result);
        reader.onerror = (e) => reject(e);
        reader.readAsDataURL(file);
      });
    };

    try {
      const mainImageUrl = await readImage(mainImageFile);
      const alphaImageUrl = await readImage(alphaImageFile);

      const mainImg = new Image();
      mainImg.src = mainImageUrl;
      await new Promise(resolve => mainImg.onload = resolve);

      const alphaImg = new Image();
      alphaImg.src = alphaImageUrl;
      await new Promise(resolve => alphaImg.onload = resolve);

      // Check if images have the same dimensions
      if (mainImg.width !== alphaImg.width || mainImg.height !== alphaImg.height) {
        alert("Image dimensions must match. Please upload images of the same size.");
        setLoading(false);
        return;
      }

      const canvas = canvasRef.current;
      canvas.width = mainImg.width;
      canvas.height = mainImg.height;
      const ctx = canvas.getContext('2d');

      // Draw the main image
      ctx.drawImage(mainImg, 0, 0);
      const mainImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      const mainData = mainImageData.data;

      // Draw the alpha image
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(alphaImg, 0, 0);
      const alphaImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      const alphaData = alphaImageData.data;

      // Combine the images pixel by pixel
      for (let i = 0; i < mainData.length; i += 4) {
        // R, G, B channels from the main image
        const r = mainData[i];
        const g = mainData[i + 1];
        const b = mainData[i + 2];

        // Alpha value from the alpha image (taking the red channel as a grayscale value)
        const a = alphaData[i + 0]; // Alpha is derived from the red channel of the grayscale image

        mainData[i] = r;
        mainData[i + 1] = g;
        mainData[i + 2] = b;
        mainData[i + 3] = a; // Set the new alpha value
      }

      // Put the modified data back on the canvas
      ctx.putImageData(mainImageData, 0, 0);

      // Get the final image as a data URL
      setCombinedImage(canvas.toDataURL('image/png'));
      setLoading(false);

    } catch (error) {
      console.error("Error combining images:", error);
      alert("An error occurred. Please check the console for details.");
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center p-4 font-sans text-gray-800">
      <div className="bg-white p-8 rounded-xl shadow-2xl w-full max-w-2xl text-center">
        <h1 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600 mb-6">
          Alpha Blender
        </h1>
        <p className="mb-8 text-gray-600">
          Upload a color image and a black & white mask to create a new image with transparency.
          White areas on the mask are opaque, and black areas are transparent.
        </p>

        <div className="flex flex-col md:flex-row gap-6 mb-8">
          <div className="flex-1">
            <label className="block text-left font-medium text-gray-700 mb-2">
              1. Color Image (main)
            </label>
            <input
              type="file"
              accept="image/*"
              ref={mainImageRef}
              className="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
            />
          </div>
          <div className="flex-1">
            <label className="block text-left font-medium text-gray-700 mb-2">
              2. Black & White Mask (alpha)
            </label>
            <input
              type="file"
              accept="image/*"
              ref={alphaImageRef}
              className="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-purple-50 file:text-purple-700 hover:file:bg-purple-100"
            />
          </div>
        </div>

        <button
          onClick={handleCombine}
          disabled={loading}
          className="w-full md:w-auto px-8 py-3 font-bold text-white rounded-full transition-all duration-300 ease-in-out transform hover:scale-105 shadow-lg
                     bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
        >
          {loading ? 'Combining...' : 'Combine Images'}
        </button>

        {combinedImage && (
          <div className="mt-8 pt-8 border-t border-gray-200">
            <h2 className="text-2xl font-bold text-gray-700 mb-4">Resulting Image</h2>
            <div className="p-2 border-dashed border-2 border-gray-400 rounded-lg">
              <img src={combinedImage} alt="Combined result" className="w-full h-auto rounded-lg shadow-md" />
            </div>
            <p className="mt-4 text-sm text-gray-500">
              The image has been converted to a PNG to preserve the transparency.
            </p>
          </div>
        )}

        <canvas ref={canvasRef} className="hidden"></canvas>
      </div>
    </div>
  );
};

export default App;