"use client";

import { useState } from "react";
import { useUser } from "@/lib/context";
import { Share2, ClipboardCheck, Sparkles } from "lucide-react";

export default function ReferToEarn() {
  const { profile, addLyts } = useUser();
  const [referralCopied, setReferralCopied] = useState(false);
  const referralCode = `lytsup.com/invite/${profile.name.toLowerCase().replace(/\s+/g, "")}-77`;

  const handleCopyReferral = () => {
    navigator.clipboard.writeText(referralCode);
    setReferralCopied(true);
    addLyts(50); // Give user 50 LYTs bonus for checking/testing referral copy!
    setTimeout(() => setReferralCopied(false), 3000);
  };

  return (
    <section className="py-24 bg-dark relative overflow-hidden">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        <div className="glassmorphism rounded-3xl p-8 sm:p-12 border border-accent-orange/10 shadow-[0_0_50px_rgba(255,107,53,0.05)]">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
            
            {/* Referral Widget */}
            <div className="bg-[#0b0b0b] border border-white/5 rounded-2xl p-6 space-y-4 order-2 md:order-1">
              <div>
                <label className="text-[9px] font-bold text-white/40 uppercase tracking-widest block mb-2">
                  Your Referral Link:
                </label>
                <div className="relative flex">
                  <input
                    type="text"
                    readOnly
                    value={referralCode}
                    className="w-full bg-white/3 border border-white/10 rounded-xl px-3 py-3 text-xs text-white/80 font-mono focus:outline-none select-all pr-10"
                  />
                  <div className="absolute right-3 top-1/2 -translate-y-1/2 text-white/40">
                    <Share2 className="w-4 h-4" />
                  </div>
                </div>
              </div>

              <div className="text-xs text-white/50 leading-relaxed bg-white/3 p-3.5 rounded-xl border border-white/5">
                🔥 <span className="text-white font-semibold">Invite Code Bonus:</span> Friends start with <span className="text-primary font-bold">50 LYTs</span> and you get <span className="text-primary font-bold">50 LYTs</span> immediately on activation!
              </div>

              <button
                onClick={handleCopyReferral}
                className={`w-full py-3.5 rounded-xl font-extrabold text-xs tracking-wider flex items-center justify-center gap-2 cursor-pointer transition-all ${
                  referralCopied
                    ? "bg-accent-lime text-dark shadow-[0_0_20px_rgba(200,255,55,0.3)]"
                    : "bg-white/5 hover:bg-accent-orange hover:text-white text-white border border-white/10 hover:border-accent-orange"
                }`}
              >
                {referralCopied ? (
                  <>
                    <ClipboardCheck className="w-4.5 h-4.5 animate-bounce" />
                    <span>Invite Copied! +50 LYT</span>
                  </>
                ) : (
                  <span>Copy Invitation Link</span>
                )}
              </button>
            </div>

            {/* Information */}
            <div className="space-y-6 text-left order-1 md:order-2 md:pl-6">
              <div className="w-12 h-12 rounded-2xl bg-accent-orange/10 border border-accent-orange/20 flex items-center justify-center text-accent-orange">
                <Share2 className="w-6 h-6" />
              </div>

              <div className="space-y-2">
                <span className="text-accent-orange font-bold text-xs uppercase tracking-wider">Section 09 • Refer-to-Earn</span>
                <h3 className="text-2xl sm:text-4xl font-extrabold font-sora text-white">
                  Squad Invites & <br />
                  <span className="text-glow-purple text-accent-orange">Growth Loops</span>
                </h3>
                <p className="text-white/60 text-sm leading-relaxed">
                  Earn bonuses by inviting your friends. Create shared earning pools, unlock group level multipliers, and dominate leaderboards together.
                </p>
              </div>
            </div>

          </div>
        </div>

      </div>
    </section>
  );
}
