'use client';

import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { QRCodeSVG } from 'qrcode.react';
import { Palette } from 'lucide-react';

const colorPresets = [
  { fg: '#000000', bg: '#FFFFFF' },
  { fg: '#0ea5e9', bg: '#e0f2fe' },
  { fg: '#8b5cf6', bg: '#f3e8ff' },
  { fg: '#f59e0b', bg: '#fef3c7' },
];

export const FeatureCustomizationDemo: React.FC = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  const [hasAnimated, setHasAnimated] = useState(false);

  useEffect(() => {
    if (hasAnimated) return;

    const interval = setInterval(() => {
      setActiveIndex((prev) => {
        const next = prev + 1;
        if (next >= colorPresets.length) {
          clearInterval(interval);
          setHasAnimated(true);
          return 0; // Reset to first
        }
        return next;
      });
    }, 1500);

    return () => clearInterval(interval);
  }, [hasAnimated]);

  const currentPreset = colorPresets[activeIndex];

  return (
    <div className="relative h-full min-h-[300px] bg-gradient-to-br from-purple-50 to-pink-100 rounded-2xl p-8 overflow-hidden">
      <div className="relative z-10 h-full flex flex-col">
        {/* Header */}
        <div className="mb-6">
          <div className="flex items-center gap-2 mb-2">
            <Palette className="w-6 h-6 text-purple-600" />
            <h3 className="text-2xl font-bold text-gray-900">Customization</h3>
          </div>
          <p className="text-gray-600">Brand your QR codes</p>
        </div>

        {/* QR Code with Morphing */}
        <div className="flex-1 flex items-center justify-center">
          <AnimatePresence mode="wait">
            <motion.div
              key={activeIndex}
              initial={{ scale: 0.8, rotate: -10, opacity: 0 }}
              animate={{ scale: 1, rotate: 0, opacity: 1 }}
              exit={{ scale: 0.8, rotate: 10, opacity: 0 }}
              transition={{ duration: 0.5, ease: [0.34, 1.56, 0.64, 1] }}
              className="p-6 bg-white rounded-2xl shadow-lg"
            >
              <QRCodeSVG
                value="https://qrmaster.net"
                size={140}
                fgColor={currentPreset.fg}
                bgColor={currentPreset.bg}
                level="M"
              />
            </motion.div>
          </AnimatePresence>
        </div>

        {/* Color Dots Indicator */}
        <div className="flex justify-center gap-2 mt-6">
          {colorPresets.map((preset, index) => (
            <motion.button
              key={index}
              onClick={() => setActiveIndex(index)}
              className={`w-3 h-3 rounded-full transition-all ${
                index === activeIndex ? 'scale-125' : 'scale-100 opacity-50'
              }`}
              style={{
                background: `linear-gradient(135deg, ${preset.fg}, ${preset.bg})`
              }}
              whileHover={{ scale: 1.3 }}
              whileTap={{ scale: 0.9 }}
            />
          ))}
        </div>
      </div>
    </div>
  );
};