'use client';

import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { AlertTriangle, X } from 'lucide-react';

export function StagingBanner() {
  const [isVisible, setIsVisible] = React.useState(true);
  const [isStaging, setIsStaging] = React.useState(false);
  
  // Check if we're in staging/dev environment (client-side check)
  React.useEffect(() => {
    if (typeof window !== 'undefined') {
      const hostname = window.location.hostname;
      const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || '';
      
      const staging = 
        hostname.includes('dev') ||
        hostname.includes('staging') ||
        hostname.includes('test') ||
        baseUrl.includes('dev') ||
        baseUrl.includes('staging') ||
        baseUrl.includes('test');
      
      setIsStaging(staging);
    }
  }, []);

  if (!isStaging || !isVisible) {
    return null;
  }

  return (
    <AnimatePresence>
      <motion.div
        initial={{ scale: 0, opacity: 0, x: 20, y: 20 }}
        animate={{ scale: 1, opacity: 1, x: 0, y: 0 }}
        exit={{ scale: 0, opacity: 0 }}
        transition={{ type: "spring", damping: 20, stiffness: 300 }}
        className="fixed bottom-6 right-6 z-50 max-w-sm"
      >
        <div className="bg-gradient-to-br from-yellow-500 via-orange-500 to-red-500 text-white rounded-xl shadow-2xl border-2 border-white/20 backdrop-blur-sm overflow-hidden">
          {/* Header */}
          <div className="bg-black/20 px-4 py-2 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <AlertTriangle className="w-4 h-4 animate-pulse" />
              <span className="font-bold text-xs uppercase tracking-wide">
                Test Environment
              </span>
            </div>
            <button
              onClick={() => setIsVisible(false)}
              className="p-1 hover:bg-white/20 rounded transition-colors"
              aria-label="Close banner"
            >
              <X className="w-3 h-3" />
            </button>
          </div>
          
          {/* Content */}
          <div className="px-4 py-3">
            <p className="text-sm font-semibold mb-1">
              🧪 Development Version
            </p>
            <p className="text-xs text-white/90 leading-relaxed">
              This is a staging environment. Not production-ready. Data may be unstable.
            </p>
          </div>
        </div>
      </motion.div>
    </AnimatePresence>
  );
}