import React, { useState, useRef, useEffect } from 'react';
import { Download, Eraser, Trash2, PenTool, Grid3X3, Settings2, Undo, Check } from 'lucide-react';

export default function App() {
  // Configuration
  const [size, setSize] = useState(16);
  const [pixelSize, setPixelSize] = useState(20); // Visual size of pixels in editor
  const [selectedColor, setSelectedColor] = useState('#3B82F6');
  const [isEraser, setIsEraser] = useState(false);
  const [showGridLines, setShowGridLines] = useState(true);
  
  // Grid State
  const [grid, setGrid] = useState([]);
  const [history, setHistory] = useState([]);
  
  // Interaction State
  const [isDrawing, setIsDrawing] = useState(false);
  
  // Palette Presets
  const colors = [
    '#000000', '#FFFFFF', '#9CA3AF', '#EF4444', '#F97316', '#F59E0B', 
    '#84CC16', '#10B981', '#06B6D4', '#3B82F6', '#6366F1', '#8B5CF6', 
    '#EC4899', '#F43F5E', '#78350F', '#FEF3C7'
  ];

  // Initialize Grid
  useEffect(() => {
    resetGrid(size);
  }, []);

  const resetGrid = (newSize) => {
    const newGrid = Array(newSize * newSize).fill(null);
    setGrid(newGrid);
    setHistory([]);
    // Don't reset color, keep user preference
  };

  const handleSizeChange = (e) => {
    const newSize = parseInt(e.target.value);
    if (newSize >= 4 && newSize <= 64) {
      setSize(newSize);
      resetGrid(newSize);
    }
  };

  // Painting Logic
  const paint = (index) => {
    const newGrid = [...grid];
    const newColor = isEraser ? null : selectedColor;
    
    // Only update if different
    if (newGrid[index] !== newColor) {
      newGrid[index] = newColor;
      setGrid(newGrid);
    }
  };

  const handleMouseDown = (index) => {
    setIsDrawing(true);
    // Save current state to history before starting a stroke
    // limiting history to last 20 steps
    setHistory(prev => [...prev.slice(-19), [...grid]]); 
    paint(index);
  };

  const handleMouseEnter = (index) => {
    if (isDrawing) {
      paint(index);
    }
  };

  const handleMouseUp = () => {
    setIsDrawing(false);
  };

  const handleUndo = () => {
    if (history.length === 0) return;
    const previousGrid = history[history.length - 1];
    setGrid(previousGrid);
    setHistory(prev => prev.slice(0, -1));
  };

  // Export Logic
  const exportImage = () => {
    const canvas = document.createElement('canvas');
    const scale = 20; // Scale up the image so 1px = 20px
    canvas.width = size * scale;
    canvas.height = size * scale;
    const ctx = canvas.getContext('2d');

    // Iterate through grid
    grid.forEach((color, i) => {
      if (color) {
        const x = (i % size) * scale;
        const y = Math.floor(i / size) * scale;
        ctx.fillStyle = color;
        ctx.fillRect(x, y, scale, scale);
      }
    });

    const link = document.createElement('a');
    link.download = `pixel-art-${Date.now()}.png`;
    link.href = canvas.toDataURL('image/png');
    link.click();
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans flex flex-col items-center py-8 selection:bg-blue-500/30"
         onMouseUp={handleMouseUp}
         onMouseLeave={handleMouseUp}>
      
      {/* Header */}
      <div className="w-full max-w-4xl px-4 mb-8 flex flex-col md:flex-row items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
            Pixel Art Studio
          </h1>
          <p className="text-slate-500 text-sm mt-1">Draw, Create, Export</p>
        </div>

        <div className="flex items-center gap-4 bg-white p-2 rounded-xl border border-slate-200 shadow-lg">
          <div className="flex items-center gap-2 px-2">
            <Settings2 size={16} className="text-slate-400" />
            <span className="text-sm font-medium text-slate-600">Size:</span>
            <select 
              value={size} 
              onChange={handleSizeChange}
              className="bg-slate-50 border border-slate-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-slate-700"
            >
              <option value="8">8 x 8</option>
              <option value="12">12 x 12</option>
              <option value="16">16 x 16</option>
              <option value="24">24 x 24</option>
              <option value="32">32 x 32</option>
            </select>
          </div>
          <div className="h-6 w-px bg-slate-200"></div>
          <button 
            onClick={exportImage}
            className="flex items-center gap-2 bg-blue-600 hover:bg-blue-500 text-white px-4 py-1.5 rounded-lg text-sm font-medium transition-colors"
          >
            <Download size={16} />
            Export PNG
          </button>
        </div>
      </div>

      <div className="flex flex-col lg:flex-row gap-8 items-start w-full max-w-5xl px-4">
        
        {/* Toolbar (Left) */}
        <div className="w-full lg:w-64 flex flex-col gap-6">
          
          {/* Tools */}
          <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-xl">
            <h3 className="text-xs uppercase tracking-wider text-slate-400 font-bold mb-3">Tools</h3>
            <div className="grid grid-cols-2 gap-2">
              <button 
                onClick={() => setIsEraser(false)}
                className={`flex items-center justify-center gap-2 p-3 rounded-lg border transition-all ${!isEraser ? 'bg-blue-600 border-blue-500 text-white' : 'bg-slate-50 border-slate-200 text-slate-600 hover:bg-slate-100'}`}
              >
                <PenTool size={18} />
                <span className="text-sm">Draw</span>
              </button>
              <button 
                onClick={() => setIsEraser(true)}
                className={`flex items-center justify-center gap-2 p-3 rounded-lg border transition-all ${isEraser ? 'bg-rose-500 border-rose-500 text-white' : 'bg-slate-50 border-slate-200 text-slate-600 hover:bg-slate-100'}`}
              >
                <Eraser size={18} />
                <span className="text-sm">Erase</span>
              </button>
            </div>

            <div className="grid grid-cols-3 gap-2 mt-2">
              <button 
                onClick={() => setShowGridLines(!showGridLines)}
                className={`p-2 rounded-lg border flex justify-center items-center transition-all ${showGridLines ? 'bg-slate-600 border-slate-500 text-white' : 'bg-slate-50 border-slate-200 text-slate-400 hover:bg-slate-100'}`}
                title="Toggle Grid Lines"
              >
                <Grid3X3 size={18} />
              </button>
              <button 
                onClick={handleUndo}
                disabled={history.length === 0}
                className="p-2 bg-slate-50 border border-slate-200 rounded-lg text-slate-500 hover:bg-slate-100 disabled:opacity-50 disabled:cursor-not-allowed flex justify-center items-center"
                title="Undo"
              >
                <Undo size={18} />
              </button>
              <button 
                onClick={() => resetGrid(size)}
                className="p-2 bg-slate-50 border border-slate-200 rounded-lg text-rose-500 hover:bg-rose-50 hover:border-rose-300 hover:text-rose-600 flex justify-center items-center transition-colors"
                title="Clear Board"
              >
                <Trash2 size={18} />
              </button>
            </div>
          </div>

          {/* Colors */}
          <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-xl">
            <h3 className="text-xs uppercase tracking-wider text-slate-400 font-bold mb-3">Palette</h3>
            
            <div className="flex items-center gap-2 mb-4">
              <input 
                type="color" 
                value={selectedColor}
                onChange={(e) => {
                  setSelectedColor(e.target.value);
                  setIsEraser(false);
                }}
                className="w-full h-10 rounded cursor-pointer bg-transparent"
              />
            </div>

            <div className="grid grid-cols-4 gap-2">
              {colors.map((c) => (
                <button
                  key={c}
                  onClick={() => {
                    setSelectedColor(c);
                    setIsEraser(false);
                  }}
                  className={`w-full aspect-square rounded-lg border-2 transition-transform hover:scale-105 ${selectedColor === c && !isEraser ? 'border-slate-400 ring-2 ring-blue-500 shadow-lg' : 'border-transparent'}`}
                  style={{ backgroundColor: c }}
                />
              ))}
            </div>
          </div>
        </div>

        {/* Canvas Area */}
        <div className="flex-1 flex justify-center items-start min-h-[500px] bg-slate-200/50 p-8 rounded-xl border border-slate-300/50 backdrop-blur-sm overflow-auto">
          <div 
            className="relative bg-white shadow-2xl select-none cursor-crosshair"
            style={{
              width: 'fit-content',
              display: 'grid',
              gridTemplateColumns: `repeat(${size}, minmax(0, 1fr))`,
              gap: showGridLines ? '1px' : '0px',
              backgroundColor: showGridLines ? '#cbd5e1' : 'transparent', // Grid line color
              backgroundImage: 'linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%)',
              backgroundSize: '20px 20px',
              backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
              border: '1px solid #94a3b8'
            }}
          >
            {grid.map((cellColor, index) => (
              <div
                key={index}
                onMouseDown={() => handleMouseDown(index)}
                onMouseEnter={() => handleMouseEnter(index)}
                // Mobile support
                onTouchStart={() => handleMouseDown(index)} 
                className="transition-colors duration-75"
                style={{
                  width: `${Math.min(30, 600/size)}px`, // Dynamic cell sizing
                  height: `${Math.min(30, 600/size)}px`,
                  backgroundColor: cellColor || 'transparent',
                }}
              />
            ))}
          </div>
        </div>

      </div>

      <div className="mt-8 text-slate-500 text-sm">
        Tip: Click and drag to paint multiple pixels at once.
      </div>
    </div>
  );
}