import React, { useState } from 'react';
import { Minus, Plus } from 'lucide-react';
import translations from '../translations.json';
import { useLanguage } from '../contexts/LanguageContext';
import {Button} from 'antd';

const DynamicPricing = () => {
  const { language } = useLanguage();
  const t = translations.dynamicPricing[language];
  const [accountCount, setAccountCount] = useState(5);
  const [isAnnual, setIsAnnual] = useState(true);

  // Base prices per plan (for 5 accounts)
  const basePrices = {
    standard: 11.49,
    premium: 13.49,
    advanced: 15.49
  };

  // Additional price per extra account
  const pricePerAccount = {
    standard: 0.5,
    premium: 0.75,
    advanced: 1.0
  };

  const calculatePrice = (plan) => {
    const basePrice = basePrices[plan];
    const extraAccounts = Math.max(0, accountCount - 5);
    const extraCost = extraAccounts * pricePerAccount[plan];
    const totalPrice = basePrice + extraCost;
    
    return isAnnual ? totalPrice : totalPrice * 1.15; // 15% more for monthly
  };

  const decreaseAccounts = () => {
    if (accountCount > 5) {
      setAccountCount(prev => prev - 5);
    }
  };

  const increaseAccounts = () => {
    setAccountCount(prev => prev + 5);
  };

  return (
    <div className="w-full max-w-7xl mx-auto p-6">
      <div className="text-center mb-8">
        <h1 className="text-4xl font-bold mb-4">{t.compare}</h1>
        <p className="text-gray-600 mb-8">{t.choose}</p>
      
        <div className="flex justify-center gap-4">
          <button 
            href="http://app.qwickpost.com/"
            onClick={() => setIsAnnual(false)}
            className={`px-6 py-2 rounded-full border ${
              !isAnnual 
                ? 'border-green-500 bg-white text-black' 
                : 'border-gray-200 text-gray-500'
            }`}
          >
            {t.monthly}
          </button>
          <button 
            href="http://app.qwickpost.com/"
            onClick={() => setIsAnnual(true)}
            className={`px-6 py-2 rounded-full border ${
              isAnnual 
                ? 'border-green-500 bg-green-500 text-white' 
                : 'border-gray-200 text-gray-500'
            }`}
          >
            {t.annual}
          </button>
        </div>
      </div>

      <div className="flex items-center justify-center mb-12">
        <div className="flex items-center bg-gray-100 rounded-full p-2">
          <div className="flex items-center">
            <span className="mr-2">{t.accounts}</span>
            <button
              onClick={decreaseAccounts}
              className="p-1 rounded-full hover:bg-white transition-colors"
              disabled={accountCount <= 5}
            >
              <Minus className="h-5 w-5" />
            </button>
            <span className="mx-4 font-semibold">{accountCount}</span>
            <button 
              onClick={increaseAccounts}
              className="p-1 rounded-full hover:bg-white transition-colors"
            >
              <Plus className="h-5 w-5" />
            </button>
          </div>
        </div>
      </div>

      <div className="grid md:grid-cols-3 gap-8">
        {['standard', 'premium', 'advanced'].map((plan) => (
          <div key={plan} className="relative rounded-lg border border-gray-200 p-6">
            {plan === 'premium' && (
              <div className="absolute -top-3 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm">
                {t.features.premium.popular}
              </div>
            )}
            <h3 className="text-2xl font-bold mb-2">
              {t.features[plan].title}
            </h3>
            <p className="text-gray-600 mb-6">
              {t.features[plan].description}
            </p>
            <div className="text-4xl font-bold mb-4">
              {calculatePrice(plan).toFixed(2)} $
              <span className="text-base font-normal text-gray-500 ml-1">
                {/* /{language === 'ru' ? 'мес' : 'month'} */}
                /{t.mounth}
              </span>
            </div>
            <Button 
              href="http://app.qwickpost.com/"
              className="w-full py-3 px-4 rounded-lg bg-green-500 text-white font-medium mb-8"
            >
              {plan === 'premium' ? t.startButton : t.tryButton}
            </Button>
            <ul className="space-y-3">
              {t.features[plan].features.map((feature, index) => (
                <li key={index} className="flex items-center gap-2">
                  <svg className="w-5 h-5 text-green-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                  </svg>
                  <span className="text-sm">{feature}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      
      {/* <h1 className="text-3xl text-center font-bold mb-4">{t.compareList}</h1> */}
    </div>
  );
};

export default DynamicPricing;