import { useState } from "react";

const tiers = [
  {
    name: "Bronze",
    icon: "ri-medal-line",
    color: "#cd7f32",
    bg: "#cd7f3215",
    border: "#cd7f3230",
    referrals: "1–4 referrals",
    bonus: "5%",
    perInvestor: "Up to $250/referral",
    perks: ["5% of referee's first deposit", "Dashboard access", "Email support"],
  },
  {
    name: "Silver",
    icon: "ri-medal-2-line",
    color: "#9ca3af",
    bg: "#9ca3af15",
    border: "#9ca3af30",
    referrals: "5–14 referrals",
    bonus: "8%",
    perInvestor: "Up to $400/referral",
    perks: ["8% of referee's first deposit", "Priority payouts", "Dedicated manager"],
  },
  {
    name: "Gold",
    icon: "ri-trophy-line",
    color: "#f59e0b",
    bg: "#f59e0b15",
    border: "#f59e0b35",
    referrals: "15–29 referrals",
    bonus: "12%",
    perInvestor: "Up to $600/referral",
    perks: ["12% of referee's first deposit", "VIP withdrawals", "Weekly bonus payouts"],
    featured: true,
  },
  {
    name: "Platinum",
    icon: "ri-vip-crown-line",
    color: "#e879f9",
    bg: "#e879f915",
    border: "#e879f930",
    referrals: "30+ referrals",
    bonus: "15%",
    perInvestor: "Unlimited earnings",
    perks: ["15% of referee's first deposit", "Lifetime commissions", "Exclusive VIP events"],
  },
];

const stats = [
  { label: "Total Referral Payouts", value: "$1.2M+", icon: "ri-money-dollar-circle-line", color: "#f59e0b" },
  { label: "Active Referrers", value: "8,400+", icon: "ri-group-line", color: "#10b981" },
  { label: "Avg. Referral Earning", value: "$320", icon: "ri-line-chart-line", color: "#e879f9" },
  { label: "Max Single Referral", value: "$7,500", icon: "ri-trophy-line", color: "#f59e0b" },
];

const steps = [
  { num: "01", icon: "ri-user-add-line", color: "#f59e0b", title: "Sign Up & Get Your Link", desc: "Register below and receive your unique referral link instantly — shareable anywhere." },
  { num: "02", icon: "ri-share-line", color: "#10b981", title: "Share with Friends", desc: "Post your link on social media, WhatsApp, Telegram or email to your network." },
  { num: "03", icon: "ri-money-dollar-circle-line", color: "#e879f9", title: "Earn on Every Deposit", desc: "Get paid automatically when your referrals invest — up to 15% commission per deposit." },
];

const topReferrers = [
  { name: "Marcus T.", location: "Dubai", earned: "$14,200", referrals: 47, avatar: "https://readdy.ai/api/search-image?query=professional%20confident%20young%20man%20headshot%20portrait%20dark%20background%20studio%20lighting%20clean%20minimal&width=80&height=80&seq=ref001&orientation=squarish" },
  { name: "Priya S.", location: "Singapore", earned: "$9,850", referrals: 31, avatar: "https://readdy.ai/api/search-image?query=professional%20woman%20headshot%20portrait%20smiling%20dark%20background%20studio%20lighting%20minimal%20clean&width=80&height=80&seq=ref002&orientation=squarish" },
  { name: "Carlos M.", location: "Mexico City", earned: "$7,600", referrals: 24, avatar: "https://readdy.ai/api/search-image?query=professional%20businessman%20headshot%20portrait%20dark%20background%20studio%20lighting%20minimal&width=80&height=80&seq=ref003&orientation=squarish" },
  { name: "Aisha K.", location: "London", earned: "$6,300", referrals: 20, avatar: "https://readdy.ai/api/search-image?query=professional%20young%20woman%20smiling%20headshot%20dark%20background%20studio%20clean&width=80&height=80&seq=ref004&orientation=squarish" },
  { name: "Liam W.", location: "Sydney", earned: "$5,100", referrals: 17, avatar: "https://readdy.ai/api/search-image?query=confident%20young%20professional%20man%20headshot%20dark%20background%20studio%20portrait&width=80&height=80&seq=ref005&orientation=squarish" },
];

export default function ReferralSection() {
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");
  const [generatedLink, setGeneratedLink] = useState("");
  const [linkCopied, setLinkCopied] = useState(false);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setError("");
    const form = e.currentTarget;
    const data = new FormData(form);
    const body = new URLSearchParams();
    data.forEach((val, key) => body.append(key, val as string));

    setSubmitting(true);
    try {
      const res = await fetch("https://readdy.ai/api/form/d72h3b2aegmdqoca7ua0", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: body.toString(),
      });
      if (res.ok) {
        const username = (data.get("full_name") as string)?.toLowerCase().replace(/\s+/g, "") || "user";
        setGeneratedLink(`https://cryptovault.io/ref/${username}${Math.floor(1000 + Math.random() * 9000)}`);
        setSubmitted(true);
        form.reset();
      } else {
        setError("Submission failed. Please try again.");
      }
    } catch {
      setError("Network error. Please check your connection.");
    } finally {
      setSubmitting(false);
    }
  };

  const handleCopyLink = () => {
    navigator.clipboard.writeText(generatedLink).then(() => {
      setLinkCopied(true);
      setTimeout(() => setLinkCopied(false), 2000);
    });
  };

  return (
    <section id="referral" className="py-20 bg-[#0a0a0f] relative overflow-hidden">
      {/* Ambient glow */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[400px] rounded-full pointer-events-none"
        style={{ background: "radial-gradient(ellipse, #f59e0b08 0%, transparent 70%)" }} />

      <div className="max-w-7xl mx-auto px-4 md:px-6 relative z-10">

        {/* Header */}
        <div className="text-center mb-14">
          <div className="inline-flex items-center gap-2 bg-amber-400/10 border border-amber-400/20 rounded-full px-4 py-1.5 text-xs text-amber-400 mb-4">
            <i className="ri-gift-line" /> Referral Program
          </div>
          <h2 className="text-4xl md:text-5xl font-black text-white mb-4 leading-tight">
            Earn While You <span style={{ color: "#f59e0b" }}>Sleep</span>
          </h2>
          <p className="text-gray-500 max-w-2xl mx-auto text-base leading-relaxed">
            Invite friends to Crypto Vault and earn up to <span className="text-amber-400 font-bold">15% commission</span> on every deposit they make — forever, with no cap on earnings.
          </p>
        </div>

        {/* Stats row */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-14">
          {stats.map((s, i) => (
            <div key={i} className="bg-[#111118] border border-white/8 rounded-2xl p-5 flex items-center gap-3">
              <div className="w-11 h-11 flex items-center justify-center rounded-xl flex-shrink-0" style={{ background: `${s.color}18`, color: s.color }}>
                <i className={`${s.icon} text-xl`} />
              </div>
              <div>
                <p className="text-white font-black text-lg leading-tight">{s.value}</p>
                <p className="text-gray-500 text-xs mt-0.5">{s.label}</p>
              </div>
            </div>
          ))}
        </div>

        {/* How it works */}
        <div className="mb-14">
          <h3 className="text-white font-black text-2xl text-center mb-8">How It Works</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 relative">
            {/* Connector line */}
            <div className="hidden md:block absolute top-8 left-[20%] right-[20%] h-px"
              style={{ background: "linear-gradient(90deg, #f59e0b40, #10b98140, #e879f940)" }} />
            {steps.map((step) => (
              <div key={step.num} className="relative flex flex-col items-center text-center bg-[#111118] border border-white/8 rounded-2xl p-7">
                <div className="w-14 h-14 flex items-center justify-center rounded-2xl mb-4 relative z-10"
                  style={{ background: `${step.color}18`, border: `2px solid ${step.color}35` }}>
                  <i className={`${step.icon} text-2xl`} style={{ color: step.color }} />
                </div>
                <span className="text-xs font-black tracking-widest mb-2" style={{ color: step.color }}>STEP {step.num}</span>
                <h4 className="text-white font-bold text-base mb-2">{step.title}</h4>
                <p className="text-gray-500 text-sm leading-relaxed">{step.desc}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Tier cards */}
        <div className="mb-14">
          <h3 className="text-white font-black text-2xl text-center mb-3">Commission Tiers</h3>
          <p className="text-gray-500 text-sm text-center mb-8">The more people you refer, the higher your commission rate climbs</p>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {tiers.map((tier) => (
              <div key={tier.name}
                className="relative rounded-2xl p-6 transition-all hover:-translate-y-1"
                style={{ background: tier.bg, border: `1px solid ${tier.border}` }}>
                {tier.featured && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full text-[10px] font-black text-black whitespace-nowrap"
                    style={{ background: tier.color }}>
                    ★ Most Popular
                  </div>
                )}
                <div className="w-12 h-12 flex items-center justify-center rounded-xl mb-4"
                  style={{ background: `${tier.color}20`, border: `1px solid ${tier.border}` }}>
                  <i className={`${tier.icon} text-2xl`} style={{ color: tier.color }} />
                </div>
                <h4 className="text-white font-black text-lg mb-0.5">{tier.name}</h4>
                <p className="text-xs mb-4" style={{ color: tier.color }}>{tier.referrals}</p>

                {/* Big ROI */}
                <div className="text-center py-3 rounded-xl mb-4" style={{ background: `${tier.color}12` }}>
                  <span className="font-black text-4xl" style={{ color: tier.color }}>{tier.bonus}</span>
                  <p className="text-white/40 text-[11px] mt-1">Commission per deposit</p>
                </div>

                <p className="text-xs text-white/50 text-center mb-4">{tier.perInvestor}</p>

                <ul className="space-y-2">
                  {tier.perks.map((perk) => (
                    <li key={perk} className="flex items-start gap-2 text-xs text-gray-400">
                      <i className="ri-check-line mt-0.5 flex-shrink-0" style={{ color: tier.color }} />
                      {perk}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        {/* Two-col: top earners + signup form */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">

          {/* Top Referrers Leaderboard */}
          <div className="bg-[#111118] border border-white/8 rounded-3xl p-6">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-9 h-9 flex items-center justify-center bg-amber-400/15 rounded-xl">
                <i className="ri-trophy-line text-amber-400 text-lg" />
              </div>
              <div>
                <h3 className="text-white font-bold text-base">Top Earners This Month</h3>
                <p className="text-gray-500 text-xs">Real investors, real commissions</p>
              </div>
            </div>
            <div className="space-y-4">
              {topReferrers.map((r, i) => (
                <div key={i} className="flex items-center gap-4">
                  {/* Rank */}
                  <span className="w-6 text-center font-black text-sm flex-shrink-0"
                    style={{ color: i === 0 ? "#f59e0b" : i === 1 ? "#9ca3af" : i === 2 ? "#cd7f32" : "#4b5563" }}>
                    {i + 1}
                  </span>
                  {/* Avatar */}
                  <div className="w-10 h-10 rounded-full overflow-hidden flex-shrink-0">
                    <img src={r.avatar} alt={r.name} className="w-full h-full object-cover object-top" />
                  </div>
                  {/* Info */}
                  <div className="flex-1 min-w-0">
                    <p className="text-white font-semibold text-sm truncate">{r.name}</p>
                    <p className="text-gray-500 text-xs">{r.location} · {r.referrals} referrals</p>
                  </div>
                  {/* Earned */}
                  <span className="text-emerald-400 font-black text-sm flex-shrink-0">{r.earned}</span>
                </div>
              ))}
            </div>

            {/* Testimonial */}
            <div className="mt-6 rounded-2xl p-4"
              style={{ background: "linear-gradient(135deg, #f59e0b0a, #10b9810a)", border: "1px solid #f59e0b20" }}>
              <div className="flex gap-2">
                <i className="ri-double-quotes-l text-amber-400 text-lg flex-shrink-0 mt-0.5" />
                <div>
                  <p className="text-white/70 text-sm italic leading-relaxed">
                    "I referred 12 friends last month and made over $4,200 in commissions without investing a single dollar myself."
                  </p>
                  <p className="text-amber-400/70 text-xs mt-2">— Marcus T., Dubai · Gold Tier</p>
                </div>
              </div>
            </div>
          </div>

          {/* Signup Form */}
          <div className="bg-[#111118] border border-amber-400/25 rounded-3xl overflow-hidden">
            <div className="px-6 py-4 border-b border-white/5"
              style={{ background: "linear-gradient(90deg, #f59e0b0a, transparent)" }}>
              <div className="flex items-center gap-3">
                <div className="w-9 h-9 flex items-center justify-center bg-amber-400/15 rounded-xl">
                  <i className="ri-user-add-line text-amber-400 text-lg" />
                </div>
                <div>
                  <h3 className="text-white font-bold text-base">Join the Referral Program</h3>
                  <p className="text-gray-500 text-xs">Get your unique link in seconds</p>
                </div>
              </div>
            </div>

            {submitted ? (
              <div className="p-8 flex flex-col items-center text-center">
                <div className="w-20 h-20 flex items-center justify-center rounded-full mb-5"
                  style={{ background: "#f59e0b18", border: "2px solid #f59e0b30" }}>
                  <i className="ri-gift-2-line text-4xl text-amber-400" />
                </div>
                <h3 className="text-white text-xl font-black mb-2">You're In! 🎉</h3>
                <p className="text-gray-400 text-sm mb-5 leading-relaxed">
                  Welcome to the Crypto Vault referral program! Share your unique link and start earning commissions.
                </p>
                {/* Generated link box */}
                <div className="w-full bg-white/5 border border-amber-400/25 rounded-xl p-4 mb-5">
                  <p className="text-gray-500 text-xs mb-2 font-semibold uppercase tracking-wider">Your Referral Link</p>
                  <div className="flex items-center gap-2">
                    <p className="text-amber-400 text-xs font-mono flex-1 truncate text-left">{generatedLink}</p>
                    <button
                      onClick={handleCopyLink}
                      className="w-8 h-8 flex items-center justify-center rounded-lg cursor-pointer flex-shrink-0 transition-colors"
                      style={{ background: linkCopied ? "#10b98120" : "#f59e0b18" }}>
                      <i className={`${linkCopied ? "ri-check-line text-emerald-400" : "ri-file-copy-line text-amber-400"} text-sm`} />
                    </button>
                  </div>
                </div>
                {/* Share buttons */}
                <div className="flex gap-3 flex-wrap justify-center mb-5">
                  {[
                    { icon: "ri-telegram-line", label: "Telegram", color: "#0088cc" },
                    { icon: "ri-whatsapp-line", label: "WhatsApp", color: "#25d366" },
                    { icon: "ri-twitter-x-line", label: "Twitter/X", color: "#ffffff" },
                  ].map((s) => (
                    <button key={s.label}
                      className="flex items-center gap-1.5 px-4 py-2 rounded-xl text-xs font-semibold cursor-pointer transition-all hover:scale-105 whitespace-nowrap"
                      style={{ background: `${s.color}18`, color: s.color, border: `1px solid ${s.color}30` }}>
                      <i className={s.icon} /> {s.label}
                    </button>
                  ))}
                </div>
                <button onClick={() => setSubmitted(false)}
                  className="text-gray-500 text-xs hover:text-gray-300 cursor-pointer transition-colors">
                  Register another account
                </button>
              </div>
            ) : (
              <form data-readdy-form onSubmit={handleSubmit} className="p-6 space-y-4">
                {/* Name */}
                <div className="flex flex-col gap-1.5">
                  <label className="text-gray-400 text-xs font-semibold uppercase tracking-wider">
                    Full Name <span className="text-amber-400">*</span>
                  </label>
                  <div className="relative">
                    <i className="ri-user-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm" />
                    <input required type="text" name="full_name" placeholder="John Smith"
                      className="w-full bg-white/5 border border-white/10 rounded-xl pl-9 pr-4 py-3 text-white text-sm focus:outline-none focus:border-amber-400/50 placeholder-gray-600 transition-colors" />
                  </div>
                </div>

                {/* Email */}
                <div className="flex flex-col gap-1.5">
                  <label className="text-gray-400 text-xs font-semibold uppercase tracking-wider">
                    Email Address <span className="text-amber-400">*</span>
                  </label>
                  <div className="relative">
                    <i className="ri-mail-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm" />
                    <input required type="email" name="email" placeholder="you@example.com"
                      className="w-full bg-white/5 border border-white/10 rounded-xl pl-9 pr-4 py-3 text-white text-sm focus:outline-none focus:border-amber-400/50 placeholder-gray-600 transition-colors" />
                  </div>
                </div>

                {/* Country */}
                <div className="flex flex-col gap-1.5">
                  <label className="text-gray-400 text-xs font-semibold uppercase tracking-wider">
                    Country <span className="text-amber-400">*</span>
                  </label>
                  <div className="relative">
                    <i className="ri-map-pin-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm" />
                    <input required type="text" name="country" placeholder="United States"
                      className="w-full bg-white/5 border border-white/10 rounded-xl pl-9 pr-4 py-3 text-white text-sm focus:outline-none focus:border-amber-400/50 placeholder-gray-600 transition-colors" />
                  </div>
                </div>

                {/* How will you promote */}
                <div className="flex flex-col gap-1.5">
                  <label className="text-gray-400 text-xs font-semibold uppercase tracking-wider">
                    How will you promote? <span className="text-amber-400">*</span>
                  </label>
                  <div className="relative">
                    <i className="ri-share-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm" />
                    <select required name="promotion_method"
                      className="w-full bg-[#0f0f1a] border border-white/10 rounded-xl pl-9 pr-4 py-3 text-white text-sm focus:outline-none focus:border-amber-400/50 cursor-pointer appearance-none transition-colors">
                      <option value="" disabled>Select method</option>
                      <option value="Social Media (Instagram/TikTok/X)">Social Media (Instagram / TikTok / X)</option>
                      <option value="Telegram/WhatsApp Groups">Telegram / WhatsApp Groups</option>
                      <option value="YouTube/Content Creation">YouTube / Content Creation</option>
                      <option value="Blog/Website">Blog / Website</option>
                      <option value="Personal Network (Friends & Family)">Personal Network (Friends &amp; Family)</option>
                      <option value="Email Marketing">Email Marketing</option>
                      <option value="Other">Other</option>
                    </select>
                    <i className="ri-arrow-down-s-line absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm pointer-events-none" />
                  </div>
                </div>

                {/* Referral code (optional) */}
                <div className="flex flex-col gap-1.5">
                  <label className="text-gray-400 text-xs font-semibold uppercase tracking-wider">
                    Referral Code <span className="text-gray-600 font-normal normal-case">(if referred by someone)</span>
                  </label>
                  <div className="relative">
                    <i className="ri-coupon-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm" />
                    <input type="text" name="referral_code" placeholder="Enter code (optional)"
                      className="w-full bg-white/5 border border-white/10 rounded-xl pl-9 pr-4 py-3 text-white text-sm focus:outline-none focus:border-amber-400/50 placeholder-gray-600 transition-colors" />
                  </div>
                </div>

                {/* Perks highlight */}
                <div className="rounded-xl p-4 flex flex-wrap gap-3"
                  style={{ background: "linear-gradient(135deg, #f59e0b08, #10b98108)", border: "1px solid #f59e0b18" }}>
                  {["5%–15% commission", "Instant payouts", "No earnings cap", "Free to join"].map((perk) => (
                    <span key={perk} className="flex items-center gap-1.5 text-xs text-gray-400">
                      <i className="ri-check-line text-amber-400" /> {perk}
                    </span>
                  ))}
                </div>

                {error && (
                  <div className="flex items-center gap-2 bg-red-500/10 border border-red-500/20 rounded-xl p-3">
                    <i className="ri-error-warning-line text-red-400 text-sm" />
                    <p className="text-red-400 text-xs">{error}</p>
                  </div>
                )}

                <button type="submit" disabled={submitting}
                  className="w-full py-4 rounded-2xl font-black text-base text-black cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed transition-all hover:scale-[1.02] active:scale-100 whitespace-nowrap"
                  style={{ background: "linear-gradient(135deg, #f59e0b, #d97706)" }}>
                  {submitting ? (
                    <span className="flex items-center justify-center gap-2">
                      <i className="ri-loader-4-line animate-spin" /> Processing...
                    </span>
                  ) : (
                    <span className="flex items-center justify-center gap-2">
                      <i className="ri-gift-line" /> Get My Referral Link →
                    </span>
                  )}
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}