import React, { useState } from 'react';
import { Upload, Eye } from 'lucide-react';

export default function StereoPhotoViewer() {
  const [leftImage, setLeftImage] = useState(null);
  const [rightImage, setRightImage] = useState(null);
  const [fileName, setFileName] = useState('');
  const [error, setError] = useState('');

  const parseMPO = async (file) => {
    setError('');
    setFileName(file.name);
    
    try {
      const arrayBuffer = await file.arrayBuffer();
      const dataView = new DataView(arrayBuffer);
      
      // Check for JPEG SOI marker
      if (dataView.getUint16(0) !== 0xFFD8) {
        throw new Error('Not a valid JPEG/MPO file');
      }
      
      const images = [];
      let offset = 2;
      
      // Find all JPEG images in the MPO file
      while (offset < arrayBuffer.byteLength - 1) {
        // Look for SOI marker (0xFFD8)
        if (dataView.getUint16(offset) === 0xFFD8) {
          const startOffset = offset;
          offset += 2;
          
          // Find EOI marker (0xFFD9)
          while (offset < arrayBuffer.byteLength - 1) {
            if (dataView.getUint16(offset) === 0xFFD9) {
              offset += 2;
              const imageData = arrayBuffer.slice(startOffset, offset);
              const blob = new Blob([imageData], { type: 'image/jpeg' });
              images.push(URL.createObjectURL(blob));
              break;
            }
            offset++;
          }
        } else {
          offset++;
        }
      }
      
      if (images.length >= 2) {
        setLeftImage(images[0]);
        setRightImage(images[1]);
      } else if (images.length === 1) {
        setLeftImage(images[0]);
        setRightImage(null);
        setError('Only one image found in file');
      } else {
        throw new Error('No valid images found in MPO file');
      }
    } catch (err) {
      setError(err.message || 'Error parsing MPO file');
      setLeftImage(null);
      setRightImage(null);
    }
  };

  const handleFileChange = (e) => {
    const file = e.target.files?.[0];
    if (file) {
      parseMPO(file);
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white p-8">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-8">
          <div className="flex items-center justify-center gap-3 mb-3">
            <Eye className="w-10 h-10 text-blue-400" />
            <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
              Stereo Photo Viewer
            </h1>
          </div>
          <p className="text-slate-400 text-lg">Load MPO files to view left and right stereo images</p>
        </div>

        <div className="mb-8">
          <label className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-slate-600 rounded-lg cursor-pointer bg-slate-800/50 hover:bg-slate-800 transition-all hover:border-blue-500">
            <div className="flex flex-col items-center justify-center pt-5 pb-6">
              <Upload className="w-12 h-12 text-slate-400 mb-3" />
              <p className="mb-2 text-sm text-slate-300">
                <span className="font-semibold">Click to upload</span> or drag and drop
              </p>
              <p className="text-xs text-slate-500">MPO files (Multi-Picture Object)</p>
            </div>
            <input
              type="file"
              className="hidden"
              accept=".mpo,.MPO"
              onChange={handleFileChange}
            />
          </label>
          {fileName && (
            <p className="text-sm text-slate-400 mt-2 text-center">
              Loaded: {fileName}
            </p>
          )}
        </div>

        {error && (
          <div className="bg-red-900/50 border border-red-600 rounded-lg p-4 mb-8">
            <p className="text-red-200">{error}</p>
          </div>
        )}

        {(leftImage || rightImage) && (
          <div className="grid md:grid-cols-2 gap-6">
            <div className="bg-slate-800 rounded-lg overflow-hidden shadow-2xl">
              <div className="bg-gradient-to-r from-blue-600 to-blue-500 px-4 py-3">
                <h2 className="font-semibold text-lg">Left Image</h2>
              </div>
              <div className="p-4 bg-slate-900">
                {leftImage ? (
                  <img
                    src={leftImage}
                    alt="Left stereo view"
                    className="w-full h-auto rounded"
                  />
                ) : (
                  <div className="aspect-video flex items-center justify-center bg-slate-800 rounded">
                    <p className="text-slate-500">No left image</p>
                  </div>
                )}
              </div>
            </div>

            <div className="bg-slate-800 rounded-lg overflow-hidden shadow-2xl">
              <div className="bg-gradient-to-r from-purple-600 to-purple-500 px-4 py-3">
                <h2 className="font-semibold text-lg">Right Image</h2>
              </div>
              <div className="p-4 bg-slate-900">
                {rightImage ? (
                  <img
                    src={rightImage}
                    alt="Right stereo view"
                    className="w-full h-auto rounded"
                  />
                ) : (
                  <div className="aspect-video flex items-center justify-center bg-slate-800 rounded">
                    <p className="text-slate-500">No right image</p>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}

        {!leftImage && !rightImage && !error && (
          <div className="text-center py-16">
            <Eye className="w-20 h-20 text-slate-700 mx-auto mb-4" />
            <p className="text-slate-500 text-lg">Upload an MPO file to get started</p>
          </div>
        )}
      </div>
    </div>
  );
}