import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Users, Store, ShoppingCart, TrendingUp, Wallet, Check, Smartphone } from "lucide-react";

const GOOGLE_PLAY_BADGE = "https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png";

const merchantMilestones = [
  { milestone: "Merchant Onboarding", commission: "70 KSH", note: "When merchant reaches 30K sales" },
  { milestone: "30-day Sales: 30,000+ KSH", commission: "50 KSH", note: null },
  { milestone: "30-day Sales: 60,000+ KSH", commission: "150 KSH", note: null },
  { milestone: "30-day Sales: 90,000+ KSH", commission: "300 KSH", note: null },
  { milestone: "30-day Sales: 120,000+ KSH", commission: "400 KSH", note: "Highest tier" },
];

const consumerMilestones = [
  { milestone: "Consumer Onboarding", commission: "10 KSH", note: "KYC + first purchase" },
  { milestone: "Online Order (1,000+ KSH)", commission: "10 KSH", note: null },
  { milestone: "SOKO QR (5,000+ KSH)", commission: "50 KSH", note: null },
  { milestone: "SOKO QR (10,000+ KSH)", commission: "100 KSH", note: "Highest tier" },
];

const benefits = [
  {
    icon: Store,
    title: "Refer Merchants",
    description: "Earn up to 470 KSH per merchant you bring to T-kash Soko",
    color: "bg-telkom-orange"
  },
  {
    icon: ShoppingCart,
    title: "Refer Consumers",
    description: "Earn up to 120 KSH per consumer who shops on the platform",
    color: "bg-telkom-turquoise"
  },
  {
    icon: Users,
    title: "Level 2 Earnings",
    description: "Earn 10% of what your recruited affiliates earn from their referrals",
    color: "bg-telkom-yellow"
  },
  {
    icon: Wallet,
    title: "Easy Payouts",
    description: "Withdraw earnings via T-kash mobile money (min. 500 KSH)",
    color: "bg-emerald-500"
  }
];

export default function AffiliateSection() {
  return (
    <section id="affiliate" className="py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white">
      <div className="max-w-7xl mx-auto px-4">
        <div className="text-center mb-16">
          <Badge className="bg-telkom-yellow/20 text-telkom-yellow border-telkom-yellow/30 mb-4">
            Affiliate Programme
          </Badge>
          <h2 className="text-3xl md:text-4xl font-bold mb-4">
            Earn Money by Growing the <span className="text-telkom-turquoise">T-kash Soko</span> Network
          </h2>
          <p className="text-lg text-gray-300 max-w-2xl mx-auto">
            Join our affiliate programme and earn commissions by referring merchants and consumers. 
            Build your network and earn on two levels.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
          {benefits.map((benefit, index) => {
            const Icon = benefit.icon;
            return (
              <Card 
                key={index} 
                className="bg-white/5 border-white/10 p-6 hover:bg-white/10 transition-all"
                data-testid={`card-affiliate-benefit-${index}`}
              >
                <div className={`w-12 h-12 rounded-xl ${benefit.color} flex items-center justify-center mb-4`}>
                  <Icon className="w-6 h-6 text-white" />
                </div>
                <h3 className="text-lg font-semibold text-white mb-2">{benefit.title}</h3>
                <p className="text-gray-400 text-sm">{benefit.description}</p>
              </Card>
            );
          })}
        </div>

        <div className="grid lg:grid-cols-2 gap-8 mb-16">
          <Card className="bg-white/5 border-white/10 p-6" data-testid="card-merchant-commissions">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 rounded-lg bg-telkom-orange flex items-center justify-center">
                <Store className="w-5 h-5 text-white" />
              </div>
              <div>
                <h3 className="text-xl font-bold text-white">Merchant Commissions</h3>
                <p className="text-sm text-gray-400">Earn up to 470 KSH per merchant</p>
              </div>
            </div>
            <div className="space-y-3">
              {merchantMilestones.map((item, index) => (
                <div key={index} className="flex items-center justify-between py-2 border-b border-white/10 last:border-0">
                  <div className="flex items-center gap-2">
                    <Check className="w-4 h-4 text-telkom-orange" />
                    <span className="text-gray-300 text-sm">{item.milestone}</span>
                  </div>
                  <div className="text-right">
                    <span className="font-semibold text-telkom-yellow">{item.commission}</span>
                    {item.note && <p className="text-xs text-gray-500">{item.note}</p>}
                  </div>
                </div>
              ))}
            </div>
          </Card>

          <Card className="bg-white/5 border-white/10 p-6" data-testid="card-consumer-commissions">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 rounded-lg bg-telkom-turquoise flex items-center justify-center">
                <ShoppingCart className="w-5 h-5 text-white" />
              </div>
              <div>
                <h3 className="text-xl font-bold text-white">Consumer Commissions</h3>
                <p className="text-sm text-gray-400">Earn up to 120 KSH per consumer</p>
              </div>
            </div>
            <div className="space-y-3">
              {consumerMilestones.map((item, index) => (
                <div key={index} className="flex items-center justify-between py-2 border-b border-white/10 last:border-0">
                  <div className="flex items-center gap-2">
                    <Check className="w-4 h-4 text-telkom-turquoise" />
                    <span className="text-gray-300 text-sm">{item.milestone}</span>
                  </div>
                  <div className="text-right">
                    <span className="font-semibold text-telkom-yellow">{item.commission}</span>
                    {item.note && <p className="text-xs text-gray-500">{item.note}</p>}
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </div>

        <Card className="bg-gray-800 border-gray-700 p-8" data-testid="card-level2-earnings">
          <div className="flex flex-col lg:flex-row items-center justify-between gap-6">
            <div className="flex items-center gap-4">
              <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-telkom-orange to-telkom-turquoise flex items-center justify-center">
                <TrendingUp className="w-8 h-8 text-white" />
              </div>
              <div>
                <h3 className="text-2xl font-bold text-white">Level 2 Earnings</h3>
                <p className="text-gray-300">
                  Earn <span className="text-telkom-yellow font-semibold">10%</span> of what your recruited affiliates earn from their referrals
                </p>
              </div>
            </div>
            <div className="flex flex-wrap gap-4">
              <div className="bg-white/10 rounded-xl px-6 py-3 text-center">
                <div className="text-2xl font-bold text-telkom-yellow">47 KSH</div>
                <div className="text-xs text-gray-400">Max per merchant</div>
              </div>
              <div className="bg-white/10 rounded-xl px-6 py-3 text-center">
                <div className="text-2xl font-bold text-telkom-yellow">12 KSH</div>
                <div className="text-xs text-gray-400">Max per consumer</div>
              </div>
            </div>
          </div>
        </Card>

        <div className="mt-16 text-center">
          <div className="inline-flex items-center gap-3 bg-white/10 rounded-full px-6 py-3 mb-6">
            <Smartphone className="w-5 h-5 text-telkom-yellow" />
            <span className="text-gray-300">Affiliate features are built into the T-kash Soko app</span>
          </div>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <a
              href="https://play.google.com/store/apps/details?id=com.Blipply.Merchant&hl=en"
              target="_blank"
              rel="noopener noreferrer"
              data-testid="link-affiliate-download"
            >
              <img 
                src={GOOGLE_PLAY_BADGE} 
                alt="Get it on Google Play" 
                className="h-16 w-auto"
              />
            </a>
            <p className="text-gray-400 text-sm">
              Min. payout: 500 KSH via T-kash
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}
