import { useState, useEffect, useCallback } from 'react';
import { Loader2, Sliders, RefreshCw, Download, Plus, Preset, Save, Trash2, Edit2 } from 'lucide-react';

export default function HolographicShapes() {
  const [shapes, setShapes] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [complexity, setComplexity] = useState(5);
  const [animationSpeed, setAnimationSpeed] = useState(1);
  const [showCustomModal, setShowCustomModal] = useState(false);
  const [customShape, setCustomShape] = useState({
    type: 'circle',
    size: 30,
    color: '#00ff00',
    position: { x: 50, y: 50 },
    rotation: 0
  });
  const [savedPresets, setSavedPresets] = useState([]);
  const [activePreset, setActivePreset] = useState(null);
  const [blurEffect, setBlurEffect] = useState(5);
  const [audioEnabled, setAudioEnabled] = useState(false);
  const [audio] = useState(new Audio('https://cdn.sitebrew.ai/sounds/ambient.mp3')); // Replace with actual ambient sound URL

  const presetEffects = {
    cyberpunk: { colors: ['#ff00ff', '#00ffff', '#ff0000'], blur: 8, speed: 1.5 },
    ethereal: { colors: ['#4facfe', '#00f2fe', '#a8edea'], blur: 3, speed: 0.8 },
    neon: { colors: ['#ff0000', '#00ff00', '#0000ff'], blur: 6, speed: 1.2 }
  };

  const generateShapes = useCallback(async () => {
    setIsLoading(true);
    try {
      const response = await fetch('https://www.sitebrew.ai/api/genai', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          messages: [
            {
              role: "system",
              content: "Generate holographic shapes with advanced properties including glow effects and movement patterns"
            },
            {
              role: "user",
              content: `Generate ${complexity} shapes with ${activePreset || 'default'} style`
            }
          ]
        })
      });
      
      const data = await response.json();
      const newShapes = JSON.parse(data.message.content);
      setShapes(newShapes);
    } catch (error) {
      console.error('Error:', error);
    } finally {
      setIsLoading(false);
    }
  }, [complexity, activePreset]);

  const savePreset = async () => {
    try {
      await fetch(`https://www.sitebrew.ai/api/dpfdMW/presets`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          document: {
            shapes,
            complexity,
            animationSpeed,
            blurEffect
          }
        })
      });
      loadPresets();
    } catch (error) {
      console.error('Error saving preset:', error);
    }
  };

  const loadPresets = async () => {
    try {
      const response = await fetch(`https://www.sitebrew.ai/api/dpfdMW/presets`);
      const data = await response.json();
      setSavedPresets(data.document || []);
    } catch (error) {
      console.error('Error loading presets:', error);
    }
  };

  const addCustomShape = () => {
    setShapes([...shapes, customShape]);
    setShowCustomModal(false);
  };

  const toggleAudio = () => {
    if (audioEnabled) {
      audio.pause();
    } else {
      audio.loop = true;
      audio.play();
    }
    setAudioEnabled(!audioEnabled);
  };

  useEffect(() => {
    generateShapes();
    loadPresets();
    return () => audio.pause();
  }, [generateShapes]);

  return (
    <div className="min-h-screen bg-black text-white font-inter">
      <div className="max-w-7xl mx-auto px-4 py-8">
        <header className="text-center mb-12">
          <h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-cyan-400 via-purple-500 to-pink-500 text-transparent bg-clip-text">
            Holographic Shape Generator
          </h1>
          <p className="text-gray-400 text-lg">
            Create mesmerizing holographic animations with AI
          </p>
        </header>

        <div className="flex flex-col md:flex-row gap-8">
          {/* Control Panel */}
          <div className="w-full md:w-1/4 space-y-6">
            {/* Main Controls */}
            <div className="bg-gray-900 rounded-xl p-6 space-y-6">
              <div>
                <label className="block text-sm font-medium mb-2">Complexity</label>
                <input
                  type="range"
                  min="1"
                  max="10"
                  value={complexity}
                  onChange={(e) => setComplexity(parseInt(e.target.value))}
                  className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
                />
                <div className="text-right text-sm text-gray-400">{complexity}</div>
              </div>

              <div>
                <label className="block text-sm font-medium mb-2">Animation Speed</label>
                <input
                  type="range"
                  min="0.1"
                  max="2"
                  step="0.1"
                  value={animationSpeed}
                  onChange={(e) => setAnimationSpeed(parseFloat(e.target.value))}
                  className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
                />
                <div className="text-right text-sm text-gray-400">{animationSpeed}x</div>
              </div>

              <div>
                <label className="block text-sm font-medium mb-2">Blur Effect</label>
                <input
                  type="range"
                  min="0"
                  max="20"
                  value={blurEffect}
                  onChange={(e) => setBlurEffect(parseInt(e.target.value))}
                  className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
                />
                <div className="text-right text-sm text-gray-400">{blurEffect}px</div>
              </div>

              <button
                onClick={toggleAudio}
                className={`w-full ${audioEnabled ? 'bg-purple-600' : 'bg-gray-700'} hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition-all`}
              >
                {audioEnabled ? 'Disable Audio' : 'Enable Audio'}
              </button>
            </div>

            {/* Preset Controls */}
            <div className="bg-gray-900 rounded-xl p-6 space-y-4">
              <h3 className="font-medium">Preset Effects</h3>
              <div className="space-y-2">
                {Object.keys(presetEffects).map((preset) => (
                  <button
                    key={preset}
                    onClick={() => setActivePreset(preset)}
                    className={`w-full py-2 px-4 rounded-lg text-sm ${
                      activePreset === preset ? 'bg-purple-600' : 'bg-gray-700'
                    } hover:bg-purple-700 transition-all`}
                  >
                    {preset.charAt(0).toUpperCase() + preset.slice(1)}
                  </button>
                ))}
              </div>
            </div>

            {/* Action Buttons */}
            <div className="space-y-3">
              <button
                onClick={generateShapes}
                disabled={isLoading}
                className="w-full bg-gradient-to-r from-cyan-500 to-purple-500 hover:from-cyan-600 hover:to-purple-600 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-all"
              >
                {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <RefreshCw className="w-4 h-4" />}
                Generate New Shapes
              </button>

              <button
                onClick={() => setShowCustomModal(true)}
                className="w-full bg-gray-700 hover:bg-gray-600 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-all"
              >
                <Plus className="w-4 h-4" />
                Add Custom Shape
              </button>

              <button
                onClick={savePreset}
                className="w-full bg-gray-700 hover:bg-gray-600 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-all"
              >
                <Save className="w-4 h-4" />
                Save Current Preset
              </button>
            </div>
          </div>

          {/* Main Display */}
          <div className="w-full md:w-3/4 bg-gray-900 rounded-xl p-6 relative min-h-[600px] overflow-hidden">
            <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-cyan-500/10" />
            {shapes.map((shape, index) => (
              <div
                key={index}
                className="absolute transform -translate-x-1/2 -translate-y-1/2 animate-float"
                style={{
                  left: `${shape.position.x}%`,
                  top: `${shape.position.y}%`,
                  width: `${shape.size}px`,
                  height: `${shape.size}px`,
                  backgroundColor: shape.color,
                  borderRadius: shape.type === 'circle' ? '50%' : '0',
                  clipPath: shape.type === 'triangle' ? 'polygon(50% 0%, 0% 100%, 100% 100%)' : 'none',
                  transform: `rotate(${shape.rotation}deg)`,
                  animation: `float ${3 / animationSpeed}s infinite ease-in-out`,
                  opacity: 0.6,
                  boxShadow: `0 0 ${blurEffect * 2}px ${shape.color}`,
                  filter: `blur(${blurEffect}px)`,
                  transition: 'all 0.5s ease-in-out',
                }}
              />
            ))}
          </div>
        </div>
      </div>

      {/* Custom Shape Modal */}
      {showCustomModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4">
          <div className="bg-gray-900 rounded-xl p-6 max-w-md w-full">
            <h3 className="text-xl font-bold mb-4">Create Custom Shape</h3>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium mb-2">Shape Type</label>
                <select
                  value={customShape.type}
                  onChange={(e) => setCustomShape({...customShape, type: e.target.value})}
                  className="w-full bg-gray-800 rounded-lg p-2"
                >
                  <option value="circle">Circle</option>
                  <option value="triangle">Triangle</option>
                  <option value="rectangle">Rectangle</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium mb-2">Size</label>
                <input
                  type="range"
                  min="10"
                  max="100"
                  value={customShape.size}
                  onChange={(e) => setCustomShape({...customShape, size: parseInt(e.target.value)})}
                  className="w-full"
                />
              </div>

              <div>
                <label className="block text-sm font-medium mb-2">Color</label>
                <input
                  type="color"
                  value={customShape.color}
                  onChange={(e) => setCustomShape({...customShape, color: e.target.value})}
                  className="w-full h-10 rounded-lg"
                />
              </div>

              <div className="flex gap-4">
                <button
                  onClick={addCustomShape}
                  className="flex-1 bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg"
                >
                  Add Shape
                </button>
                <button
                  onClick={() => setShowCustomModal(false)}
                  className="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg"
                >
                  Cancel
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      <style jsx global>{`
        @keyframes float {
          0%, 100% {
            transform: translateY(0) rotate(${Math.random() * 360}deg);
          }
          50% {
            transform: translateY(-20px) rotate(${Math.random() * 360}deg);
          }
        }
        .animate-float {
          animation: float 3s infinite ease-in-out;
        }
      `}</style>
    </div>
  );
}