import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Copy, RefreshCw, Download, Sliders, Palette, Code, Check } from 'lucide-react';

// --- MATH UTILS ---

/**
 * Converts polar coordinates to cartesian
 */
const toCartesian = (radius, angle) => {
  const rad = (angle * Math.PI) / 180;
  return {
    x: radius * Math.cos(rad),
    y: radius * Math.sin(rad),
  };
};

/**
 * Catmull-Rom to Cubic Bezier conversion.
 * Calculates control points for a smooth curve passing through points.
 */
const getControlPoints = (p0, p1, p2, p3, tension = 0.5) => {
  const d1 = Math.sqrt(Math.pow(p1.x - p0.x, 2) + Math.pow(p1.y - p0.y, 2));
  const d2 = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
  const d3 = Math.sqrt(Math.pow(p3.x - p2.x, 2) + Math.pow(p3.y - p2.y, 2));

  // Scaling factors can be used here for non-uniform knot vectors, 
  // but for a blob generator, uniform or simple tension works well enough.
  // Using simplified derivative approach for uniform spacing approximation:
  
  const cp1 = {
    x: p1.x + (p2.x - p0.x) / 6 * tension,
    y: p1.y + (p2.y - p0.y) / 6 * tension,
  };

  const cp2 = {
    x: p2.x - (p3.x - p1.x) / 6 * tension,
    y: p2.y - (p3.y - p1.y) / 6 * tension,
  };

  return { cp1, cp2 };
};

/**
 * Generates the SVG Path string from a set of points using Spline interpolation
 */
const generateBlobPath = (points) => {
  if (points.length === 0) return "";

  // Duplicate points to handle the closed loop smoothing
  // We need context of previous and next points for the start/end indices
  const len = points.length;
  const loopPoints = [
    points[len - 1],
    ...points,
    points[0],
    points[1]
  ];

  let path = `M ${points[0].x} ${points[0].y}`;

  // We iterate from the first actual point to the last actual point
  for (let i = 1; i <= len; i++) {
    const p0 = loopPoints[i - 1]; // Prev
    const p1 = loopPoints[i];     // Start
    const p2 = loopPoints[i + 1]; // End
    const p3 = loopPoints[i + 2]; // Next

    const { cp1, cp2 } = getControlPoints(p0, p1, p2, p3, 1); // Tension 1 for roundness

    path += ` C ${cp1.x.toFixed(2)} ${cp1.y.toFixed(2)}, ${cp2.x.toFixed(2)} ${cp2.y.toFixed(2)}, ${p2.x.toFixed(2)} ${p2.y.toFixed(2)}`;
  }

  return path + " Z";
};

const App = () => {
  // --- STATE ---
  const [complexity, setComplexity] = useState(8); // Number of points
  const [contrast, setContrast] = useState(6); // Randomness (Difference between min/max radius)
  const [size, setSize] = useState(300); // Canvas size
  const [fillColor, setFillColor] = useState('#6366f1');
  const [gradient, setGradient] = useState(true);
  const [secondaryColor, setSecondaryColor] = useState('#a855f7');
  const [blobPath, setBlobPath] = useState('');
  const [seed, setSeed] = useState(Date.now());
  const [copied, setCopied] = useState(false);

  // --- LOGIC ---

  const generateBlob = useCallback(() => {
    const numPoints = complexity;
    const minRadius = (size / 2) * 0.5; // Ensure blob doesn't get too small
    const maxVariation = (size / 2) * (contrast / 10) * 0.5; 
    
    const points = [];
    const angleStep = 360 / numPoints;

    for (let i = 0; i < numPoints; i++) {
      const angle = (i * angleStep);
      // Add some random noise to the angle to make it less perfectly radial
      // const angleNoise = (Math.random() - 0.5) * (angleStep * 0.5); 
      
      const randomRadius = minRadius + (Math.random() * maxVariation);
      
      const pos = toCartesian(randomRadius, angle);
      
      // Offset to center of viewBox
      points.push({
        x: pos.x + size / 2,
        y: pos.y + size / 2
      });
    }

    setBlobPath(generateBlobPath(points));
  }, [complexity, contrast, size, seed]);

  // Regenerate when params change
  useEffect(() => {
    generateBlob();
  }, [generateBlob]);

  // --- HANDLERS ---

  const handleCopy = () => {
    const svgString = getSvgString();
    navigator.clipboard.writeText(svgString);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const handleDownload = () => {
    const svgString = getSvgString();
    const blob = new Blob([svgString], { type: 'image/svg+xml' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `blob-${Date.now()}.svg`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const getSvgString = () => {
    const gradId = "blobGradient";
    const defs = gradient ? `
  <defs>
    <linearGradient id="${gradId}" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:${fillColor};stop-opacity:1" />
      <stop offset="100%" style="stop-color:${secondaryColor};stop-opacity:1" />
    </linearGradient>
  </defs>` : '';

    const fillAttr = gradient ? `url(#${gradId})` : fillColor;

    return `<svg viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
  ${defs}
  <path d="${blobPath}" fill="${fillAttr}" />
</svg>`;
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans p-4 md:p-8 flex items-center justify-center">
      <div className="max-w-6xl w-full grid grid-cols-1 lg:grid-cols-12 gap-8">
        
        {/* --- LEFT COLUMN: CONTROLS --- */}
        <div className="lg:col-span-4 space-y-6">
          
          <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xl">
            <h1 className="text-2xl font-bold mb-1 bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
              Blob Generator
            </h1>
            <p className="text-slate-500 text-sm mb-6">Create organic SVG shapes.</p>

            <div className="space-y-6">
              
              {/* Complexity Slider */}
              <div>
                <div className="flex justify-between mb-2">
                  <label className="flex items-center gap-2 text-sm font-medium text-slate-700">
                    <Sliders size={16} /> Complexity
                  </label>
                  <span className="text-xs bg-slate-100 px-2 py-1 rounded text-slate-700 font-semibold">{complexity} points</span>
                </div>
                <input
                  type="range"
                  min="3"
                  max="20"
                  value={complexity}
                  onChange={(e) => setComplexity(parseInt(e.target.value))}
                  className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-indigo-600"
                />
              </div>

              {/* Contrast Slider */}
              <div>
                <div className="flex justify-between mb-2">
                  <label className="flex items-center gap-2 text-sm font-medium text-slate-700">
                    <RefreshCw size={16} /> Randomness
                  </label>
                  <span className="text-xs bg-slate-100 px-2 py-1 rounded text-slate-700 font-semibold">{contrast}</span>
                </div>
                <input
                  type="range"
                  min="0"
                  max="10"
                  value={contrast}
                  onChange={(e) => setContrast(parseInt(e.target.value))}
                  className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-purple-600"
                />
              </div>

              {/* Color Pickers */}
              <div>
                <div className="flex justify-between items-center mb-3">
                  <label className="flex items-center gap-2 text-sm font-medium text-slate-700">
                    <Palette size={16} /> Appearance
                  </label>
                  <button 
                    onClick={() => setGradient(!gradient)}
                    className={`text-xs px-2 py-1 rounded transition-colors font-medium ${gradient ? 'bg-indigo-600 text-white' : 'bg-slate-200 text-slate-500'}`}
                  >
                    Gradient
                  </button>
                </div>
                
                <div className="flex gap-4">
                  <div className="flex-1">
                    <label className="text-xs text-slate-500 block mb-1">Primary</label>
                    <div className="flex items-center bg-slate-100 border border-slate-200 rounded-lg p-1">
                      <input
                        type="color"
                        value={fillColor}
                        onChange={(e) => setFillColor(e.target.value)}
                        className="w-8 h-8 rounded cursor-pointer border-none bg-transparent"
                      />
                      <span className="text-xs ml-2 font-mono text-slate-600">{fillColor}</span>
                    </div>
                  </div>
                  
                  {gradient && (
                    <div className="flex-1">
                      <label className="text-xs text-slate-500 block mb-1">Secondary</label>
                      <div className="flex items-center bg-slate-100 border border-slate-200 rounded-lg p-1">
                        <input
                          type="color"
                          value={secondaryColor}
                          onChange={(e) => setSecondaryColor(e.target.value)}
                          className="w-8 h-8 rounded cursor-pointer border-none bg-transparent"
                        />
                        <span className="text-xs ml-2 font-mono text-slate-600">{secondaryColor}</span>
                      </div>
                    </div>
                  )}
                </div>
              </div>

              {/* Generate Button */}
              <button
                onClick={() => setSeed(Date.now())}
                className="w-full py-3 bg-slate-900 hover:bg-slate-800 text-white rounded-xl font-medium transition-all active:scale-95 flex items-center justify-center gap-2 shadow-lg shadow-slate-900/10"
              >
                <RefreshCw size={18} />
                Regenerate Shape
              </button>

            </div>
          </div>
          
        </div>

        {/* --- RIGHT COLUMN: PREVIEW --- */}
        <div className="lg:col-span-8 flex flex-col gap-6">
          
          {/* Canvas Area */}
          <div className="flex-1 bg-white rounded-3xl border border-slate-200 shadow-2xl relative overflow-hidden flex items-center justify-center min-h-[400px]">
            {/* Checkerboard background for transparency */}
            <div className="absolute inset-0 opacity-10" 
                 style={{
                    backgroundImage: `linear-gradient(45deg, #000 25%, transparent 25%), 
                                      linear-gradient(-45deg, #000 25%, transparent 25%), 
                                      linear-gradient(45deg, transparent 75%, #000 75%), 
                                      linear-gradient(-45deg, transparent 75%, #000 75%)`,
                    backgroundSize: '20px 20px',
                    backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px'
                 }}>
            </div>

            <div className="relative z-10 transition-all duration-500 ease-in-out">
               <svg 
                  viewBox={`0 0 ${size} ${size}`} 
                  width={size} 
                  height={size} 
                  xmlns="http://www.w3.org/2000/svg"
                  className="drop-shadow-2xl"
                >
                  <defs>
                    <linearGradient id="blobGradientPreview" x1="0%" y1="0%" x2="100%" y2="100%">
                      <stop offset="0%" style={{stopColor: fillColor, stopOpacity: 1}} />
                      <stop offset="100%" style={{stopColor: secondaryColor, stopOpacity: 1}} />
                    </linearGradient>
                  </defs>
                  
                  <path 
                    d={blobPath} 
                    fill={gradient ? "url(#blobGradientPreview)" : fillColor} 
                    className="transition-all duration-300 ease-out"
                  />
               </svg>
            </div>
          </div>

          {/* Export Actions */}
          <div className="bg-white p-4 rounded-xl border border-slate-200 flex flex-col md:flex-row gap-4 justify-between items-center shadow-sm">
             <div className="flex items-center gap-3 text-slate-500">
               <Code size={20} />
               <span className="text-sm font-mono">SVG Code</span>
             </div>

             <div className="flex gap-3 w-full md:w-auto">
                <button 
                  onClick={handleCopy}
                  className={`flex-1 md:flex-none px-4 py-2 rounded-lg font-medium text-sm flex items-center justify-center gap-2 transition-all ${copied ? 'bg-green-100 text-green-700 border border-green-200' : 'bg-slate-100 hover:bg-slate-200 text-slate-700'}`}
                >
                  {copied ? <Check size={16} /> : <Copy size={16} />}
                  {copied ? 'Copied!' : 'Copy Code'}
                </button>

                <button 
                  onClick={handleDownload}
                  className="flex-1 md:flex-none px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg font-medium text-sm flex items-center justify-center gap-2 transition-all shadow-lg shadow-indigo-500/20"
                >
                  <Download size={16} />
                  Download SVG
                </button>
             </div>
          </div>
          
          {/* Quick Code Preview (Collapsed) */}
          <div className="bg-slate-50 rounded-lg border border-slate-200 p-4 overflow-x-auto">
             <pre className="text-xs text-slate-600 font-mono whitespace-pre-wrap break-all">
                {getSvgString()}
             </pre>
          </div>

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

export default App;