import { useState } from "react";
import { Card } from "@/components/ui/card";
import { Check, X, Zap, Calculator, Clock, DollarSign, TrendingDown } from "lucide-react";

const traditionalTools = [
  "POS System",
  "Inventory Management",
  "Online Sales Platform",
  "Accounting Software",
  "CRM System",
  "Employee & Salary Management"
];

const tkashFeatures = [
  "Cashier System (Catalogue, Express, Voice)",
  "Automated Inventory with Real-time Updates",
  "Online Shop for Products & Services",
  "Automated Accounting Reports",
  "Customer Directory & Purchase History",
  "Multi-employee Management with Geo-fencing",
  "Salary Payments to Employees",
  "AI-driven Credit Profile",
  "Pay Later Option for Customers",
  "In-app AI Support"
];

export default function ComparisonTable() {
  const [monthlySales, setMonthlySales] = useState<string>("");
  
  const salesAmount = parseFloat(monthlySales.replace(/,/g, "")) || 0;
  const tkashFee = salesAmount * 0.01;
  const traditionalMin = 18000;
  const traditionalMax = 55000;
  const traditionalAvg = (traditionalMin + traditionalMax) / 2;
  
  const savingsVsMin = traditionalMin - tkashFee;
  const savingsVsMax = traditionalMax - tkashFee;
  const timesCheaperMin = tkashFee > 0 ? Math.round(traditionalMin / tkashFee) : 0;
  const timesCheaperMax = tkashFee > 0 ? Math.round(traditionalMax / tkashFee) : 0;

  const formatNumber = (num: number) => {
    return num.toLocaleString("en-KE", { maximumFractionDigits: 0 });
  };

  return (
    <section id="pricing" className="py-20 bg-white">
      <div className="max-w-7xl mx-auto px-4">
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-2 bg-green-100 rounded-full px-4 py-2 mb-6">
            <Zap className="w-4 h-4 text-green-600" />
            <span className="text-sm font-medium text-green-700">Save Up to 55,000 KSH/month</span>
          </div>
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            All-in-One Platform vs Traditional Systems
          </h2>
          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
            Why pay for 6 different software subscriptions when T-kash Soko gives you everything in one app for just 1% per sale?
          </p>
        </div>
        
        <div className="grid lg:grid-cols-2 gap-8 max-w-5xl mx-auto">
          <Card className="border-2 border-telkom-turquoise/50 bg-gradient-to-br from-cyan-50 to-white overflow-hidden shadow-xl relative" data-testid="card-tkash-pricing">
            <div className="absolute top-4 right-4">
              <span className="bg-telkom-orange text-white text-xs font-bold px-3 py-1 rounded-full">RECOMMENDED</span>
            </div>
            <div className="bg-telkom-turquoise px-6 py-4 border-b border-telkom-turquoise/30">
              <div className="flex items-center justify-between">
                <h3 className="text-xl font-bold text-white">T-kash Soko</h3>
                <Check className="w-6 h-6 text-white" />
              </div>
              <p className="text-sm text-white/80 mt-1">All-in-one merchant platform</p>
            </div>
            
            <div className="p-6">
              <div className="mb-8">
                <div className="flex items-baseline gap-2 mb-2">
                  <span className="text-5xl font-bold text-telkom-turquoise">1%</span>
                  <span className="text-lg text-gray-600">per sale</span>
                </div>
                <p className="text-sm text-gray-500">No subscription fees. Pay only when you sell.</p>
              </div>
              
              <div className="space-y-3">
                {tkashFeatures.map((feature, index) => (
                  <div key={index} className="flex items-center gap-3">
                    <div className="w-5 h-5 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
                      <Check className="w-3 h-3 text-green-600" />
                    </div>
                    <span className="text-gray-700 text-sm">{feature}</span>
                  </div>
                ))}
              </div>
              
              <div className="mt-6 p-4 bg-telkom-yellow/10 rounded-xl border border-telkom-yellow/30">
                <p className="text-sm font-medium text-gray-800">
                  <span className="text-telkom-orange font-bold">Bonus:</span> Every user gets 50 KSH in platform fee credits for cash payments!
                </p>
              </div>

              <div className="mt-6 p-4 bg-green-50 rounded-xl border border-green-200">
                <div className="flex items-center gap-2 mb-2">
                  <Clock className="w-4 h-4 text-green-600" />
                  <span className="text-sm font-semibold text-green-800">Setup Time</span>
                </div>
                <p className="text-2xl font-bold text-green-600">Under 1 Minute</p>
                <p className="text-xs text-gray-500 mt-1">Download, register, and start selling immediately</p>
              </div>
            </div>
          </Card>
          
          <Card className="border-2 border-gray-200 bg-gray-50 overflow-hidden" data-testid="card-traditional-comparison">
            <div className="bg-gray-200 px-6 py-4 border-b border-gray-300">
              <div className="flex items-center justify-between">
                <h3 className="text-xl font-bold text-gray-700">Traditional Shop Management</h3>
                <X className="w-6 h-6 text-red-400" />
              </div>
              <p className="text-sm text-gray-500 mt-1">Multiple subscriptions required</p>
            </div>
            
            <div className="p-6">
              <div className="mb-6">
                <p className="text-sm text-gray-500 mb-3">To get all the features T-kash Soko offers, you'd need:</p>
                <div className="space-y-2">
                  {traditionalTools.map((tool, index) => (
                    <div key={index} className="flex items-center gap-2">
                      <X className="w-4 h-4 text-red-400 flex-shrink-0" />
                      <span className="text-gray-600 text-sm">{tool}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div className="p-4 bg-red-50 rounded-xl border border-red-200 mb-6">
                <p className="text-sm text-gray-600 mb-1">Combined monthly cost:</p>
                <p className="text-2xl font-bold text-red-600">18,000 - 55,000 KSH</p>
                <p className="text-xs text-gray-500">per shop per month</p>
              </div>

              <div className="p-4 bg-red-50 rounded-xl border border-red-200 mb-6">
                <div className="flex items-center gap-2 mb-2">
                  <Clock className="w-4 h-4 text-red-500" />
                  <span className="text-sm font-semibold text-red-700">Setup Time</span>
                </div>
                <p className="text-2xl font-bold text-red-600">1-3 Months</p>
                <p className="text-xs text-gray-500">Research, quotes, purchase, delivery, install, integrate, train staff</p>
              </div>

              <div className="bg-white rounded-xl border border-gray-200 p-4">
                <div className="flex items-center gap-2 mb-4">
                  <Calculator className="w-5 h-5 text-telkom-turquoise" />
                  <span className="font-semibold text-gray-800">Savings Calculator</span>
                </div>
                
                <div className="mb-4">
                  <label className="text-sm text-gray-600 block mb-2">
                    Enter your monthly sales (KSH):
                  </label>
                  <input
                    type="text"
                    value={monthlySales}
                    onChange={(e) => setMonthlySales(e.target.value.replace(/[^0-9,]/g, ""))}
                    placeholder="e.g. 500,000"
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-telkom-turquoise focus:border-telkom-turquoise outline-none text-lg"
                    data-testid="input-monthly-sales"
                  />
                </div>

                {salesAmount > 0 && (
                  <div className="space-y-3">
                    <div className="flex items-center justify-between py-2 border-b border-gray-100">
                      <span className="text-sm text-gray-600">Your T-kash Soko fee:</span>
                      <span className="font-bold text-telkom-turquoise">{formatNumber(tkashFee)} KSH</span>
                    </div>
                    
                    {savingsVsMax > 0 ? (
                      <div className="p-3 bg-green-50 rounded-lg border border-green-200">
                        <div className="flex items-center gap-2 mb-2">
                          <TrendingDown className="w-4 h-4 text-green-600" />
                          <span className="text-sm font-semibold text-green-700">Your Savings</span>
                        </div>
                        {savingsVsMin > 0 ? (
                          <>
                            <p className="text-lg font-bold text-green-600">
                              {formatNumber(savingsVsMin)} - {formatNumber(savingsVsMax)} KSH/month
                            </p>
                            {timesCheaperMin > 1 && (
                              <p className="text-sm text-green-600 mt-1">
                                T-kash Soko is <span className="font-bold">{timesCheaperMin}x - {timesCheaperMax}x cheaper</span> than traditional systems!
                              </p>
                            )}
                          </>
                        ) : (
                          <>
                            <p className="text-lg font-bold text-green-600">
                              Up to {formatNumber(savingsVsMax)} KSH/month
                            </p>
                            {timesCheaperMax > 1 && (
                              <p className="text-sm text-green-600 mt-1">
                                T-kash Soko is up to <span className="font-bold">{timesCheaperMax}x cheaper</span> than premium traditional systems!
                              </p>
                            )}
                          </>
                        )}
                      </div>
                    ) : (
                      <div className="p-3 bg-telkom-turquoise/10 rounded-lg border border-telkom-turquoise/30">
                        <div className="flex items-center gap-2 mb-2">
                          <Zap className="w-4 h-4 text-telkom-turquoise" />
                          <span className="text-sm font-semibold text-telkom-turquoise">Your Advantage</span>
                        </div>
                        <p className="text-sm text-gray-700">
                          With your sales volume, you're paying a fair 1% fee for an <span className="font-bold">all-in-one platform</span> that includes 10+ features, gets you selling in <span className="font-bold">under 1 minute</span>, and helps you <span className="font-bold">build credit for bank loans</span>.
                        </p>
                      </div>
                    )}

                    <div className="p-3 bg-blue-50 rounded-lg border border-blue-200">
                      <div className="flex items-center gap-2 mb-1">
                        <Clock className="w-4 h-4 text-blue-600" />
                        <span className="text-sm font-semibold text-blue-700">Time Saved</span>
                      </div>
                      <p className="text-sm text-blue-700">
                        Start selling in <span className="font-bold">1 minute</span> vs <span className="font-bold">1-3 months</span> for traditional setup
                      </p>
                    </div>
                  </div>
                )}

                {salesAmount === 0 && (
                  <p className="text-sm text-gray-400 text-center py-2">
                    Enter your shop's monthly sales to see savings
                  </p>
                )}
              </div>
            </div>
          </Card>
        </div>
      </div>
    </section>
  );
}
