import { useState, useRef } from 'react';
import { Upload, Download, Image as ImageIcon, AlertCircle } from 'lucide-react';

export default function App() {
  const [selectedImage, setSelectedImage] = useState(null);
  const [croppedImages, setCroppedImages] = useState([]);
  const canvasRef = useRef(null);
  const fileInputRef = useRef(null);

  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const img = new Image();
        img.onload = () => {
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          
          canvas.width = 531;
          canvas.height = 413;
          
          const scale = Math.max(canvas.width / img.width, canvas.height / img.height);
          const x = (canvas.width - img.width * scale) / 2;
          const y = (canvas.height - img.height * scale) / 2;
          
          ctx.fillStyle = 'white';
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
          
          setSelectedImage(canvas.toDataURL());
          generateA4Layout(canvas.toDataURL());
        };
        img.src = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  };

  const generateA4Layout = (croppedImage) => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    
    canvas.width = 2480;
    canvas.height = 3508;
    
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    const img = new Image();
    img.onload = () => {
      const positions = [
        { x: 474, y: 413 },
        { x: 1475, y: 413 },
        { x: 474, y: 1476 },
        { x: 1475, y: 1476 },
        { x: 974, y: 2539 },
      ];
      
      positions.forEach(pos => {
        ctx.drawImage(img, pos.x, pos.y, img.width, img.height);
      });
    };
    img.src = croppedImage;
  };

  const downloadA4 = () => {
    const canvas = canvasRef.current;
    const link = document.createElement('a');
    link.download = 'photo-arrangement.png';
    link.href = canvas.toDataURL();
    link.click();
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
      <div className="max-w-5xl mx-auto px-4 py-12">
        {/* Header */}
        <div className="text-center mb-16">
          <h1 className="text-4xl font-bold text-slate-800 mb-4 tracking-tight">
            Photo ID Arranger
          </h1>
          <p className="text-slate-600 text-lg max-w-2xl mx-auto">
            Create professional passport-style photo arrangements. Upload your photo and get a perfectly formatted A4 layout.
          </p>
        </div>

        <div className="grid gap-8 md:grid-cols-[1fr,1.5fr] items-start">
          {/* Left Column - Controls */}
          <div className="bg-white rounded-2xl shadow-lg p-8 space-y-8">
            <div className="text-center p-8 border-2 border-dashed border-slate-200 rounded-xl bg-slate-50 hover:bg-slate-100 transition-colors duration-200 cursor-pointer"
                 onClick={() => fileInputRef.current.click()}>
              <input
                type="file"
                accept="image/*"
                onChange={handleImageUpload}
                className="hidden"
                ref={fileInputRef}
              />
              <ImageIcon size={48} className="mx-auto mb-4 text-slate-400" />
              <div className="font-medium text-slate-600 mb-2">Drop your photo here</div>
              <div className="text-sm text-slate-500">or click to browse</div>
            </div>

            <div className="bg-blue-50 rounded-lg p-4 flex items-start gap-3">
              <AlertCircle className="text-blue-500 flex-shrink-0 mt-0.5" size={20} />
              <div className="text-sm text-blue-700">
                Your photo will be automatically cropped to 45x35mm format and arranged 5 times on an A4 page for optimal printing.
              </div>
            </div>

            {selectedImage && (
              <button
                onClick={downloadA4}
                className="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-4 rounded-xl font-medium flex items-center justify-center gap-2 transition-colors duration-200 shadow-md hover:shadow-lg"
              >
                <Download size={20} />
                Download A4 Layout
              </button>
            )}
          </div>

          {/* Right Column - Preview */}
          <div className="space-y-8">
            {selectedImage ? (
              <>
                <div className="bg-white rounded-2xl shadow-lg p-8">
                  <h2 className="text-lg font-semibold text-slate-700 mb-6 flex items-center gap-2">
                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                    Single Photo Preview (45x35mm)
                  </h2>
                  <div className="flex justify-center bg-slate-50 rounded-lg p-6">
                    <img src={selectedImage} alt="Cropped preview" className="border shadow-sm" />
                  </div>
                </div>

                <div className="bg-white rounded-2xl shadow-lg p-8">
                  <h2 className="text-lg font-semibold text-slate-700 mb-6 flex items-center gap-2">
                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                    A4 Layout Preview
                  </h2>
                  <div className="flex justify-center bg-slate-50 rounded-lg p-6">
                    <canvas 
                      ref={canvasRef}
                      className="border shadow-sm max-w-full h-auto"
                    />
                  </div>
                </div>
              </>
            ) : (
              <div className="bg-white rounded-2xl shadow-lg p-8 text-center text-slate-500">
                <ImageIcon size={48} className="mx-auto mb-4 text-slate-300" />
                <p>Upload a photo to see the preview</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}