import { useState } from "react";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Check, User, Users, Building2, TrendingUp, Shield, MapPin, CreditCard, Receipt, BarChart3, ChevronDown, ChevronUp } from "lucide-react";
import merchantImage from "@assets/image_1768676299091.png";

const merchantTypes = [
  {
    id: "solo-product",
    icon: User,
    badge: "Solo Owner",
    title: "Owners Selling Products Alone",
    subtitle: "Kiosk owners, market vendors, dukas",
    keyMessage: "T-kash Soko helps you sell more, track your money, and grow without changing how you work.",
    benefits: [
      "Sell to more customers online, not only people who pass by",
      "Accept both cash and digital payments in one app",
      "Track daily sales and profits in real time",
      "No machine needed, just your phone",
      "Every sale builds your credit profile for future loans",
      "Customers are auto-saved, so repeat buyers come back",
      "Very affordable, you only pay 1 percent when you sell",
      "Chance to win up to 1 million bob every month*",
      "Use the same app for personal shopping and paying bills"
    ]
  },
  {
    id: "product-employees",
    icon: Users,
    badge: "With Employees",
    title: "Owners with Employees",
    subtitle: "Retail shops, mini supermarkets, clothing stores",
    keyMessage: "T-kash Soko gives you real time control and visibility over your shop and staff.",
    benefits: [
      "Control all sales even when you are not in the shop",
      "Every employee logs in with their own vetted account",
      "Reduce employee theft and fake reporting",
      "See when employees are working & warns if not selling",
      "Geo-fencing: staff can only sell from your shop location",
      "Pay employee salaries directly through Soko",
      "Accept cash and digital payments in one system",
      "Keep full customer purchase history and receipts",
      "Grow your credit profile using real sales data",
      "Very affordable, pay only when you sell",
      "Chance to win up to 1 million bob monthly*"
    ]
  },
  {
    id: "multi-branch",
    icon: Building2,
    badge: "Multiple Branches",
    title: "Multiple Branches",
    subtitle: "Retail chains, supermarkets, franchises",
    keyMessage: "T-kash Soko gives you full control of a growing business without complexity.",
    benefits: [
      "Manage all branches from one dashboard",
      "See sales per shop, per employee, in real time",
      "Prevent internal fraud across branches",
      "Use geo-fencing to control where sales can happen",
      "Pay salaries across branches easily",
      "Accept cash and digital payments in one system",
      "Central customer database across all shops",
      "Track best-selling products and locations",
      "Build a strong business credit profile",
      "No extra hardware across branches",
      "Simple platform pricing, 1 percent per sale",
      "Monthly owner lottery with prizes up to 1 million bob*"
    ]
  }
];

export default function MerchantBenefits() {
  const [expandedCards, setExpandedCards] = useState<string[]>([]);

  const toggleCard = (id: string) => {
    setExpandedCards(prev => 
      prev.includes(id) 
        ? prev.filter(cardId => cardId !== id)
        : [...prev, id]
    );
  };

  return (
    <section id="merchants" className="py-20 bg-white">
      <div className="max-w-7xl mx-auto px-4">
        <div className="text-center mb-16">
          <Badge className="bg-telkom-orange/10 text-telkom-orange border-telkom-orange/20 mb-4">
            For Product Vendors
          </Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            Grow Your Product Business
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            Whether you work alone or manage multiple branches, T-kash Soko scales with your business.
          </p>
        </div>
        
        <div className="grid lg:grid-cols-2 gap-12 items-start mb-16">
          <div className="relative rounded-2xl overflow-hidden shadow-xl">
            <img
              src={merchantImage}
              alt="African business owner managing inventory"
              className="w-full h-auto object-cover"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-transparent to-transparent" />
            <div className="absolute bottom-0 left-0 right-0 p-6">
              <div className="flex items-center gap-4">
                <div className="flex -space-x-2">
                  <div className="w-10 h-10 rounded-full bg-telkom-orange flex items-center justify-center text-white font-bold text-sm border-2 border-white">KS</div>
                  <div className="w-10 h-10 rounded-full bg-telkom-turquoise flex items-center justify-center text-white font-bold text-sm border-2 border-white">MW</div>
                  <div className="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center text-white font-bold text-sm border-2 border-white">JN</div>
                </div>
                <div className="text-white">
                  <p className="font-semibold">Join thousands of merchants</p>
                  <p className="text-sm text-gray-300">Growing their business daily</p>
                </div>
              </div>
            </div>
          </div>
          
          <div className="space-y-6">
            {merchantTypes.map((type, index) => {
              const Icon = type.icon;
              const isExpanded = expandedCards.includes(type.id);
              const visibleBenefits = isExpanded ? type.benefits : type.benefits.slice(0, 5);
              const hasMoreBenefits = type.benefits.length > 5;
              
              return (
                <Card key={type.id} className="border border-gray-200 hover:border-telkom-orange/50 hover:shadow-lg transition-all" data-testid={`card-merchant-${type.id}`}>
                  <div className="p-6">
                    <div className="flex items-start gap-4">
                      <div className="w-12 h-12 rounded-xl bg-telkom-orange/10 flex items-center justify-center flex-shrink-0">
                        <Icon className="w-6 h-6 text-telkom-orange" />
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <Badge variant="secondary" className="text-xs">{type.badge}</Badge>
                        </div>
                        <h3 className="text-lg font-bold text-gray-900 mb-1">{type.title}</h3>
                        <p className="text-sm text-gray-500 mb-3">{type.subtitle}</p>
                        <p className="text-gray-700 font-medium mb-4 italic">"{type.keyMessage}"</p>
                        <div className="grid gap-2">
                          {visibleBenefits.map((benefit, idx) => (
                            <div key={idx} className="flex items-start gap-2">
                              <Check className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
                              <span className="text-sm text-gray-600">{benefit}</span>
                            </div>
                          ))}
                          {hasMoreBenefits && (
                            <button 
                              onClick={() => toggleCard(type.id)}
                              className="flex items-center gap-1 text-sm text-telkom-turquoise font-medium mt-2 hover:text-telkom-turquoise/80 transition-colors"
                              data-testid={`button-toggle-${type.id}`}
                            >
                              {isExpanded ? (
                                <>
                                  <ChevronUp className="w-4 h-4" />
                                  Show less
                                </>
                              ) : (
                                <>
                                  <ChevronDown className="w-4 h-4" />
                                  +{type.benefits.length - 5} more benefits
                                </>
                              )}
                            </button>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                </Card>
              );
            })}
          </div>
        </div>
        
        <p className="text-center text-sm text-gray-500 mt-8">*Lottery feature will be active from February 2026</p>
      </div>
    </section>
  );
}
