'use client';

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

export const FeatureBulkDemo: React.FC = () => {
  const [showQRs, setShowQRs] = useState(false);
  const [hasAnimated, setHasAnimated] = useState(false);

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

    const timer = setTimeout(() => {
      setShowQRs(true);
      setHasAnimated(true);
    }, 500);

    return () => clearTimeout(timer);
  }, [hasAnimated]);

  const qrCodes = [
    { id: 1, url: 'product-1', delay: 0 },
    { id: 2, url: 'product-2', delay: 0.1 },
    { id: 3, url: 'product-3', delay: 0.2 },
    { id: 4, url: 'product-4', delay: 0.3 },
    { id: 5, url: 'product-5', delay: 0.4 },
    { id: 6, url: 'product-6', delay: 0.5 },
  ];

  return (
    <div className="relative h-full min-h-[300px] bg-gradient-to-br from-emerald-50 to-teal-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">
            <FileSpreadsheet className="w-6 h-6 text-emerald-600" />
            <h3 className="text-2xl font-bold text-gray-900">Bulk Creation</h3>
          </div>
          <p className="text-gray-600">Generate hundreds at once</p>
        </div>

        {/* Animation */}
        <div className="flex-1 flex items-center justify-center gap-8">
          {/* CSV Icon */}
          <motion.div
            animate={{
              scale: showQRs ? 0.8 : 1,
              opacity: showQRs ? 0.5 : 1,
            }}
            transition={{ duration: 0.5 }}
            className="flex flex-col items-center"
          >
            <div className="w-20 h-24 bg-white rounded-lg shadow-md flex items-center justify-center border-2 border-emerald-200">
              <FileSpreadsheet className="w-10 h-10 text-emerald-600" />
            </div>
            <p className="text-xs text-gray-600 mt-2 font-medium">products.csv</p>
          </motion.div>

          {/* Arrow */}
          <motion.div
            animate={{
              x: showQRs ? [0, 10, 0] : 0,
              opacity: showQRs ? 1 : 0.3,
            }}
            transition={{ duration: 0.5, repeat: showQRs ? Infinity : 0, repeatDelay: 1 }}
          >
            <ArrowRight className="w-8 h-8 text-emerald-600" />
          </motion.div>

          {/* QR Codes Grid */}
          <div className="grid grid-cols-3 gap-2">
            {qrCodes.map((qr) => (
              <motion.div
                key={qr.id}
                initial={{ scale: 0, opacity: 0 }}
                animate={{
                  scale: showQRs ? 1 : 0,
                  opacity: showQRs ? 1 : 0,
                }}
                transition={{
                  duration: 0.4,
                  delay: showQRs ? qr.delay : 0,
                  ease: [0.34, 1.56, 0.64, 1]
                }}
                className="p-1.5 bg-white rounded shadow-sm"
              >
                <QRCodeSVG
                  value={`https://qrmaster.net/${qr.url}`}
                  size={32}
                  level="L"
                />
              </motion.div>
            ))}
          </div>
        </div>

        {/* Counter */}
        <motion.div
          animate={{ opacity: showQRs ? 1 : 0 }}
          className="text-center"
        >
          <p className="text-sm font-semibold text-emerald-700">
            ✓ 6 QR codes generated
          </p>
        </motion.div>
      </div>
    </div>
  );
};