import React, { useState, useEffect } from "react";
import { Gift, Copy, Check, X } from "lucide-react";

const PromoPopup = () => {
  const [isVisible, setIsVisible] = useState(false);
  const [hasCopied, setHasCopied] = useState(false);
  const PROMO_CODE = "SPRING40";
  const STORAGE_KEY = "promoPopupExpiry";

  useEffect(() => {
    const checkPromoStatus = () => {
      const expiryTime = window.localStorage.getItem(STORAGE_KEY);
      const now = new Date().getTime();

      if (!expiryTime || now > parseInt(expiryTime)) {
        setIsVisible(true);
        document.body.style.overflow = "hidden";
      }
    };

    checkPromoStatus();

    return () => {
      document.body.style.overflow = "unset";
    };
  }, []);

  const copyPromoCode = async () => {
    try {
      await navigator.clipboard.writeText(PROMO_CODE);
      setHasCopied(true);
      setTimeout(() => setHasCopied(false), 2000);
    } catch (err) {
      console.error("Failed to copy:", err);
    }
  };

  const handleClose = () => {
    // expiry time to 24 hours from now
    const expiryTime = new Date().getTime() + 24 * 60 * 60 * 1000;
    window.localStorage.setItem(STORAGE_KEY, expiryTime.toString());

    document.body.style.overflow = "unset";
    setIsVisible(false);
  };

  if (!isVisible) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950 bg-opacity-90">
      <div className="relative w-full max-w-md bg-slate-900 rounded-lg shadow-xl">
        <button
          onClick={handleClose}
          className="absolute right-4 top-4 p-2 text-gray-400 hover:text-white"
        >
          <X className="w-5 h-5" />
        </button>

        <div className="p-6">
          <div className="mx-auto w-16 h-16 bg-blue-500 bg-opacity-10 rounded-full flex items-center justify-center mb-6">
            <Gift className="w-8 h-8 text-blue-500" />
          </div>

          <h2 className="text-2xl font-bold text-white text-center mb-2">
            Spring Sale!
          </h2>
          <p className="text-gray-400 text-center mb-6">
            Get 40% off your first 3 months!
          </p>

          <div className="bg-slate-950 p-6 rounded-lg border border-gray-800 mb-6">
            <div className="text-center mb-2 text-sm text-gray-400">
              Your Promo Code:
            </div>
            <div className="flex items-center justify-between bg-gray-800 p-3 rounded-md">
              <span className="text-xl font-mono text-white">{PROMO_CODE}</span>
              <button
                onClick={copyPromoCode}
                className="flex items-center gap-2 text-sm text-blue-500 hover:text-blue-400"
              >
                {hasCopied ? (
                  <>
                    <Check className="w-4 h-4" />
                    <span>Copied!</span>
                  </>
                ) : (
                  <>
                    <Copy className="w-4 h-4" />
                    <span>Copy</span>
                  </>
                )}
              </button>
            </div>
          </div>

          <button
            onClick={handleClose}
            className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700"
          >
            Back
          </button>
        </div>
      </div>
    </div>
  );
};

export default PromoPopup;
