"use client";

import { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
import Link from "next/link";

export default function ReferralBanner() {
  const { data: session } = useSession();
  const [referralCode, setReferralCode] = useState<string | null>(null);
  const [copied, setCopied] = useState(false);
  const [generating, setGenerating] = useState(false);
  const [referrerCount, setReferrerCount] = useState<number>(0);

  useEffect(() => {
    // Fetch referrer count for trust signal
    fetch("/api/referrals/stats")
      .then((res) => res.ok ? res.json() : null)
      .then((data) => {
        if (data?.referrer_count) setReferrerCount(data.referrer_count);
      })
      .catch(() => {});

    // If logged in, fetch existing code
    if (session?.user) {
      fetch("/api/referrals")
        .then((res) => res.ok ? res.json() : null)
        .then((data) => {
          if (data?.referral_code) setReferralCode(data.referral_code);
        })
        .catch(() => {});
    }
  }, [session]);

  async function handleGetLink() {
    if (referralCode) {
      copyLink();
      return;
    }
    setGenerating(true);
    try {
      const res = await fetch("/api/referrals", { method: "POST" });
      if (res.ok) {
        const data = await res.json();
        setReferralCode(data.referral_code);
        // Copy immediately after generating
        const link = `https://adultworld.ai/register?ref=${data.referral_code}`;
        await navigator.clipboard.writeText(link);
        setCopied(true);
        setTimeout(() => setCopied(false), 2500);
      }
    } catch {
      // silent fail
    } finally {
      setGenerating(false);
    }
  }

  function copyLink() {
    if (!referralCode) return;
    const link = `https://adultworld.ai/register?ref=${referralCode}`;
    navigator.clipboard.writeText(link);
    setCopied(true);
    setTimeout(() => setCopied(false), 2500);
  }

  return (
    <section className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-yellow-600 via-amber-500 to-yellow-600 p-[1px]">
      <div className="relative rounded-2xl bg-gradient-to-r from-yellow-600/90 via-amber-500/90 to-yellow-600/90 px-6 py-8 md:px-10 md:py-10 overflow-hidden">
        {/* Decorative sparkle elements */}
        <div className="absolute top-3 left-6 text-white/30 text-2xl select-none pointer-events-none" aria-hidden="true">&#10022;</div>
        <div className="absolute top-5 right-10 text-white/20 text-lg select-none pointer-events-none" aria-hidden="true">&#10022;</div>
        <div className="absolute bottom-4 left-1/3 text-white/15 text-xl select-none pointer-events-none" aria-hidden="true">&#9733;</div>
        <div className="absolute bottom-3 right-1/4 text-white/25 text-sm select-none pointer-events-none" aria-hidden="true">&#10022;</div>

        <div className="relative flex flex-col md:flex-row items-center gap-6 md:gap-10">
          {/* Left: Star icon */}
          <div className="flex-shrink-0 hidden md:flex items-center justify-center w-16 h-16 rounded-full bg-white/20 backdrop-blur-sm">
            <svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
            </svg>
          </div>

          {/* Center: Copy */}
          <div className="flex-1 text-center md:text-left">
            <h2 className="text-xl md:text-2xl lg:text-3xl font-bold text-white mb-2 tracking-tight">
              Refer a Fellow Provider &rarr; Both Get 6 Months FREE Premium
            </h2>
            <p className="text-white/90 text-sm md:text-base mb-1">
              Plus earn <span className="font-bold text-white">5,000 AW Credits</span> for every successful referral
            </p>

            {/* New provider promotion */}
            <div className="mt-3 pt-3 border-t border-white/20">
              <p className="text-white font-semibold text-sm md:text-base flex items-center justify-center md:justify-start gap-2">
                <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                </svg>
                New Providers: Sign Up &amp; Verify for 6 Months FREE Premium
              </p>
            </div>

            {referrerCount > 0 && (
              <p className="text-white/70 text-xs md:text-sm mt-2 flex items-center justify-center md:justify-start gap-1.5">
                <svg className="w-4 h-4 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                </svg>
                Join {referrerCount.toLocaleString()} providers who earned free Premium
              </p>
            )}
          </div>

          {/* Right: CTA */}
          <div className="flex-shrink-0">
            {session?.user ? (
              <button
                onClick={handleGetLink}
                disabled={generating}
                className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl bg-white text-amber-700 font-bold text-sm md:text-base shadow-lg shadow-black/20 hover:bg-white/90 hover:shadow-xl transition-all duration-200 disabled:opacity-60 hover:-translate-y-0.5"
              >
                {generating ? (
                  <>
                    <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                    </svg>
                    Generating...
                  </>
                ) : copied ? (
                  <>
                    <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                    </svg>
                    Link Copied!
                  </>
                ) : (
                  <>
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                    </svg>
                    Get My Referral Link
                  </>
                )}
              </button>
            ) : (
              <Link
                href="/register"
                className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl bg-white text-amber-700 font-bold text-sm md:text-base shadow-lg shadow-black/20 hover:bg-white/90 hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
                </svg>
                Join Now & Start Earning
              </Link>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}