import React, { useState, useRef, useEffect } from 'react';
import { Upload, Scissors, Download, Image as ImageIcon, Trash2, Layers, RefreshCw, ArrowRight, ArrowDown, Grid, Share2 } from 'lucide-react';

const ImageSplitterApp = () => {
  const [selectedImage, setSelectedImage] = useState(null);
  const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0 });
  
  // Single dimension splits
  const [splitCount, setSplitCount] = useState(3);
  
  // Grid specific splits
  const [gridRows, setGridRows] = useState(3);
  const [gridCols, setGridCols] = useState(3);
  
  const [scale, setScale] = useState(100);
  
  // 'horizontal' = Panorama/Carousel, 'vertical' = Profile Column, 'grid' = Profile Grid
  const [splitDirection, setSplitDirection] = useState('horizontal'); 
  
  const [processedImages, setProcessedImages] = useState([]);
  const [isProcessing, setIsProcessing] = useState(false);
  const [fileName, setFileName] = useState("image");

  const resultsRef = useRef(null);

  // Handle file upload
  const handleImageUpload = (event) => {
    const file = event.target.files[0];
    if (file) {
      setFileName(file.name.split('.')[0]);
      const reader = new FileReader();
      reader.onload = (e) => {
        const img = new Image();
        img.onload = () => {
          setImageDimensions({ width: img.width, height: img.height });
          setSelectedImage(img);
          setProcessedImages([]); // Clear previous results
          if (navigator.vibrate) navigator.vibrate(20); // Subtle haptic
        };
        img.src = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  };

  // Reset everything
  const handleReset = () => {
    if (navigator.vibrate) navigator.vibrate(20);
    setSelectedImage(null);
    setProcessedImages([]);
    setSplitCount(3);
    setGridRows(3);
    setGridCols(3);
    setScale(100);
  };

  // Mobile Share Functionality
  const handleShare = async (dataUrl, index) => {
    if (navigator.vibrate) navigator.vibrate(20);
    
    try {
      // Convert base64 to blob for sharing
      const res = await fetch(dataUrl);
      const blob = await res.blob();
      const file = new File([blob], `${fileName}_${index}.png`, { type: 'image/png' });

      if (navigator.canShare && navigator.canShare({ files: [file] })) {
        await navigator.share({
          files: [file],
          title: 'Split Image Part',
          text: `Here is part ${index + 1} of my split image.`
        });
      } else {
        // Fallback if sharing not supported
        downloadImage(dataUrl, index);
      }
    } catch (error) {
      console.log("Error sharing:", error);
      // Fallback
      downloadImage(dataUrl, index);
    }
  };

  // The Core Logic: Split and Scale
  const processImage = async () => {
    if (!selectedImage) return;
    if (navigator.vibrate) navigator.vibrate(20);
    setIsProcessing(true);

    // Allow UI to update before heavy processing
    setTimeout(() => {
      const chunks = [];
      const { width, height } = imageDimensions;
      
      const totalScaledWidth = width * (scale / 100);
      const totalScaledHeight = height * (scale / 100);

      // Determine splitting parameters
      let rows, cols;
      
      if (splitDirection === 'grid') {
        rows = gridRows;
        cols = gridCols;
      } else if (splitDirection === 'horizontal') {
        rows = 1;
        cols = splitCount;
      } else { // vertical
        rows = splitCount;
        cols = 1;
      }

      // Calculate dimensions per chunk
      const chunkWidthOriginal = width / cols;
      const chunkHeightOriginal = height / rows;
      
      const chunkWidthScaled = totalScaledWidth / cols;
      const chunkHeightScaled = totalScaledHeight / rows;

      // Use an off-screen canvas
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      // Nested loop to handle grid splitting (Row by Row, then Col by Col)
      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
            
          // Set canvas to the size of a single chunk
          canvas.width = chunkWidthScaled;
          canvas.height = chunkHeightScaled;

          // Calculate source position
          const srcX = c * chunkWidthOriginal;
          const srcY = r * chunkHeightOriginal;

          // Draw the specific slice
          ctx.drawImage(
            selectedImage,
            srcX, srcY,                           // Start X, Start Y (source)
            chunkWidthOriginal, chunkHeightOriginal, // Width, Height (source)
            0, 0,                                 // Start X, Start Y (destination)
            chunkWidthScaled, chunkHeightScaled   // Width, Height (destination)
          );

          chunks.push(canvas.toDataURL('image/png'));
        }
      }

      setProcessedImages(chunks);
      setIsProcessing(false);
      
      // Auto-scroll to results on mobile
      setTimeout(() => {
         if (resultsRef.current) {
             resultsRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
             if (navigator.vibrate) navigator.vibrate([50, 50, 50]); // Success haptic
         }
      }, 100);

    }, 100);
  };

  // Helper to get correct post number
  const getPostNumber = (index) => {
    return processedImages.length - index;
  };

  const downloadImage = (dataUrl, index) => {
    if (navigator.vibrate) navigator.vibrate(20);
    const postNum = getPostNumber(index);
    const link = document.createElement('a');
    link.href = dataUrl;
    // Use "post" in filename to make it clear
    link.download = `${fileName}_post_${postNum}.png`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  // Determine grid columns for result display
  const getResultGridClass = () => {
    if (splitDirection === 'grid') {
        if (gridCols === 2) return 'grid-cols-2';
        if (gridCols === 3) return 'grid-cols-3';
        if (gridCols >= 4) return 'grid-cols-4';
        return 'grid-cols-1';
    }
    // Vertical splits are usually single column
    if (splitDirection === 'vertical') return 'grid-cols-1 max-w-sm mx-auto';
    
    // Horizontal splits are usually 2 cols
    return 'grid-cols-1 md:grid-cols-2';
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans p-3 md:p-6 pb-20">
      <div className="max-w-5xl mx-auto">
        
        {/* Compact Header for Mobile */}
        <div className="flex items-center space-x-3 mb-4 md:mb-8">
          <div className="bg-blue-600 p-2 md:p-3 rounded-xl shadow-lg shadow-blue-200 flex-shrink-0">
            <Scissors className="w-6 h-6 md:w-8 md:h-8 text-white" />
          </div>
          <div>
            <h1 className="text-xl md:text-2xl font-bold text-slate-800 leading-tight">Image Splitter</h1>
            <p className="text-slate-500 text-xs md:text-sm">Grid • Carousel • Webtoon</p>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          
          {/* Left Column: Controls & Upload */}
          <div className="lg:col-span-1 space-y-4 md:space-y-6">
            
            {/* Upload Area - Mobile Optimized */}
            {!selectedImage ? (
              <div className="border-2 border-dashed border-slate-300 rounded-2xl p-6 md:p-8 flex flex-col items-center justify-center bg-white active:bg-slate-50 hover:bg-slate-50 transition-colors cursor-pointer relative group h-56 md:h-64 touch-manipulation tap-highlight-transparent">
                <input 
                  type="file" 
                  accept="image/*" 
                  onChange={handleImageUpload} 
                  className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-20"
                />
                <div className="bg-blue-50 p-4 rounded-full mb-4 group-hover:scale-110 transition-transform">
                  <Upload className="w-8 h-8 text-blue-600" />
                </div>
                <p className="font-bold text-slate-700 text-lg">Tap to upload</p>
                <p className="text-sm text-slate-400 mt-1 text-center">Open Camera Roll or Files</p>
              </div>
            ) : (
              <div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-4 md:p-6 space-y-5 animate-in fade-in zoom-in-95 duration-300">
                
                {/* Image Info & Thumbnail Preview - Adaptive Layout */}
                <div className="flex flex-col sm:flex-row gap-4">
                  {/* Huge Thumbnail on Mobile */}
                  <div className="w-full h-40 sm:w-32 sm:h-32 bg-slate-100 rounded-lg overflow-hidden flex-shrink-0 border border-slate-200 relative group">
                     <img 
                       src={selectedImage.src} 
                       alt="Thumbnail" 
                       className="w-full h-full object-contain transition-transform duration-300 group-hover:scale-105"
                     />
                  </div>
                  
                  <div className="flex-1 flex flex-row sm:flex-col justify-between items-center sm:items-start">
                    <div className="min-w-0 mr-2 space-y-1">
                        <h3 className="font-bold text-slate-800 truncate text-base max-w-[150px]">{fileName}</h3>
                        <p className="text-xs text-slate-500 font-mono bg-slate-100 inline-block px-1 rounded">
                        {imageDimensions.width} × {imageDimensions.height}
                        </p>
                    </div>
                    <button 
                        onClick={handleReset}
                        className="text-red-500 bg-red-50 hover:bg-red-100 p-2 px-3 rounded-lg transition-colors active:scale-95 flex items-center gap-2 text-sm font-medium"
                        title="Remove Image"
                    >
                        <Trash2 className="w-4 h-4" />
                        <span className="sm:hidden">Reset</span>
                    </button>
                  </div>
                </div>

                <hr className="border-slate-100" />

                {/* Control: Split Direction - Large Touch Targets */}
                <div>
                  <label className="text-xs font-bold text-slate-400 uppercase tracking-wider block mb-3">Split Mode</label>
                  <div className="grid grid-cols-3 gap-2">
                    {[
                      { id: 'horizontal', icon: ArrowRight, label: 'Panorama' },
                      { id: 'vertical', icon: ArrowDown, label: 'Vertical' },
                      { id: 'grid', icon: Grid, label: 'Grid' }
                    ].map(mode => (
                      <button
                        key={mode.id}
                        onClick={() => {
                            if(navigator.vibrate) navigator.vibrate(10);
                            setSplitDirection(mode.id);
                        }}
                        className={`flex flex-col items-center justify-center p-3 rounded-xl border-2 transition-all active:scale-95 touch-manipulation ${
                          splitDirection === mode.id 
                            ? 'border-blue-600 bg-blue-50 text-blue-700 shadow-sm' 
                            : 'border-slate-100 bg-white text-slate-400 hover:border-slate-200'
                        }`}
                      >
                        <mode.icon className="w-6 h-6 mb-1" />
                        <span className="text-xs font-bold">{mode.label}</span>
                      </button>
                    ))}
                  </div>
                </div>

                {/* Dynamic Controls based on Direction */}
                {splitDirection === 'grid' ? (
                   <div className="grid grid-cols-2 gap-4 bg-slate-50 p-3 rounded-xl">
                        <div>
                            <div className="flex justify-between mb-2">
                                <label className="text-sm font-semibold text-slate-700">Rows</label>
                                <span className="text-sm font-bold text-blue-600 bg-white px-2 py-0.5 rounded shadow-sm">{gridRows}</span>
                            </div>
                            <input
                                type="range"
                                min="1"
                                max="5"
                                value={gridRows}
                                onChange={(e) => setGridRows(parseInt(e.target.value))}
                                className="w-full h-8 accent-blue-600 touch-pan-x"
                            />
                        </div>
                        <div>
                            <div className="flex justify-between mb-2">
                                <label className="text-sm font-semibold text-slate-700">Cols</label>
                                <span className="text-sm font-bold text-blue-600 bg-white px-2 py-0.5 rounded shadow-sm">{gridCols}</span>
                            </div>
                            <input
                                type="range"
                                min="1"
                                max="5"
                                value={gridCols}
                                onChange={(e) => setGridCols(parseInt(e.target.value))}
                                className="w-full h-8 accent-blue-600 touch-pan-x"
                            />
                        </div>
                   </div>
                ) : (
                    <div className="bg-slate-50 p-3 rounded-xl">
                        <div className="flex justify-between mb-2">
                            <label className="text-sm font-semibold text-slate-700 flex items-center">
                            <Layers className="w-4 h-4 mr-2" /> 
                            Slices
                            </label>
                            <span className="text-sm font-bold text-blue-600 bg-white px-2 py-0.5 rounded shadow-sm">{splitCount}</span>
                        </div>
                        <input
                            type="range"
                            min="1"
                            max="10"
                            value={splitCount}
                            onChange={(e) => setSplitCount(parseInt(e.target.value))}
                            className="w-full h-8 accent-blue-600 touch-pan-x"
                        />
                         <div className="flex justify-between text-xs text-slate-400 mt-1 px-1">
                            <span>1</span>
                            <span>10</span>
                        </div>
                    </div>
                )}

                {/* Control: Scale */}
                <div className="bg-slate-50 p-3 rounded-xl">
                  <div className="flex justify-between mb-2">
                    <label className="text-sm font-semibold text-slate-700 flex items-center">
                      <RefreshCw className="w-4 h-4 mr-2" /> 
                      Scale
                    </label>
                    <span className="text-sm font-bold text-blue-600 bg-white px-2 py-0.5 rounded shadow-sm">{scale}%</span>
                  </div>
                  <input
                    type="range"
                    min="10"
                    max="100"
                    step="5"
                    value={scale}
                    onChange={(e) => setScale(parseInt(e.target.value))}
                    className="w-full h-8 accent-blue-600 touch-pan-x"
                  />
                </div>

                {/* Action Button - Large & Sticky-ish feel */}
                <button
                  onClick={processImage}
                  disabled={isProcessing}
                  className={`w-full py-4 rounded-xl font-bold text-white shadow-lg transition-all transform active:scale-95 flex items-center justify-center text-lg touch-manipulation
                    ${isProcessing ? 'bg-slate-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700 shadow-blue-200'}
                  `}
                >
                  {isProcessing ? (
                    <span className="animate-pulse">Processing...</span>
                  ) : (
                    <>
                      <Scissors className="w-6 h-6 mr-2" />
                      Slice Image
                    </>
                  )}
                </button>
              </div>
            )}
            
             {/* Hint Box */}
             {selectedImage && (
                 <div className="bg-blue-50/80 text-blue-900 p-3 rounded-xl text-xs leading-relaxed border border-blue-100">
                    <strong>Note:</strong> Splits are numbered backward (e.g., upload Post #1 first) so they align correctly on your Instagram profile.
                </div>
             )}
          </div>

          {/* Right Column: Preview & Results */}
          <div className="lg:col-span-2 space-y-6" ref={resultsRef}>
            {processedImages.length > 0 ? (
              <div className="space-y-6 animate-in slide-in-from-bottom-8 duration-500 ease-out">
                <div className="flex items-center justify-between">
                  <h2 className="text-xl font-bold text-slate-800">
                    Results ({processedImages.length})
                  </h2>
                  <button 
                    onClick={() => processedImages.forEach((img, idx) => downloadImage(img, idx))}
                    className="text-sm text-blue-600 font-bold bg-blue-50 px-3 py-2 rounded-lg active:bg-blue-100"
                  >
                    Save All
                  </button>
                </div>
                
                {/* Result Grid - Responsive to the chosen layout */}
                <div className={`grid gap-4 ${getResultGridClass()}`}>
                  {processedImages.map((src, idx) => (
                    <div key={idx} className="bg-white p-2 rounded-xl shadow-sm border border-slate-200 flex flex-col">
                      <div className="flex-grow bg-slate-100 rounded-lg overflow-hidden flex items-center justify-center mb-2 relative group min-h-[200px] md:min-h-[250px]">
                        {/* Checkerboard pattern for transparency */}
                        <div className="absolute inset-0 opacity-10" 
                             style={{backgroundImage: 'radial-gradient(#000 1px, transparent 1px)', backgroundSize: '10px 10px'}}></div>
                        
                        <img 
                          src={src} 
                          alt={`Part ${idx + 1}`} 
                          className="max-h-[300px] w-auto object-contain z-10 shadow-sm" 
                        />
                      </div>
                      
                      <div className="flex items-center justify-between px-2 pb-1">
                        <span className="text-xs font-bold text-slate-500 uppercase tracking-wide">
                           {splitDirection === 'horizontal' 
                             ? `Slide ${idx + 1}/${processedImages.length}` 
                             : `Post #${getPostNumber(idx)}`
                           }
                        </span>
                        
                        <div className="flex space-x-2">
                             {/* Native Share Button */}
                             {navigator.share && (
                                <button
                                    onClick={() => handleShare(src, idx)}
                                    className="bg-slate-100 active:bg-purple-100 active:text-purple-600 hover:bg-slate-200 text-slate-600 p-2.5 rounded-lg transition-colors"
                                    title="Share"
                                >
                                    <Share2 className="w-5 h-5" />
                                </button>
                             )}
                            <button
                            onClick={() => downloadImage(src, idx)}
                            className="bg-blue-50 active:bg-blue-100 text-blue-600 p-2.5 rounded-lg transition-colors"
                            title="Save Image"
                            >
                            <Download className="w-5 h-5" />
                            </button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ) : (
              // Empty State
              !selectedImage && (
                  <div className="hidden lg:flex h-full min-h-[300px] bg-slate-50 rounded-2xl border-2 border-dashed border-slate-200 flex-col items-center justify-center text-slate-400 p-8">
                    <ImageIcon className="w-16 h-16 mb-4 opacity-20" />
                    <p>Select an image to start splitting</p>
                  </div>
              )
            )}
          </div>

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

export default ImageSplitterApp;