import React, { useState } from 'react';
import translations from '../translations.json';
import { useLanguage } from '../contexts/LanguageContext';

const PricingFeatures = () => {
  const [isAnnual, setIsAnnual] = useState(true);
  const { language } = useLanguage();
  const t = translations.pricingFeatures[language];

  const features = {
    publications: {
      title: t.categories.publications.title,
      items: [
        {
          name: t.categories.publications.features.postsAndStories.name,
          description: t.categories.publications.features.postsAndStories.description,
          standard: true,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.publications.features.postVersions.name,
          description: t.categories.publications.features.postVersions.description,
          standard: true,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.publications.features.firstComment.name,
          description: t.categories.publications.features.firstComment.description,
          standard: true,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.publications.features.categories.name,
          description: t.categories.publications.features.categories.description,
          standard: true,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.publications.features.contentPlan.name,
          description: t.categories.publications.features.contentPlan.description,
          standard: true,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.publications.features.captions.name,
          description: t.categories.publications.features.captions.description,
          standard: true,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.publications.features.sharePublication.name,
          description: t.categories.publications.features.sharePublication.description,
          standard: true,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.publications.features.preview.name,
          description: t.categories.publications.features.preview.description,
          standard: true,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.publications.features.templates.name,
          description: t.categories.publications.features.templates.description,
          standard: true,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.publications.features.typography.name,
          description: t.categories.publications.features.typography.description,
          standard: false,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.publications.features.autoHashtags.name,
          description: t.categories.publications.features.autoHashtags.description,
          standard: false,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.publications.features.autoGeo.name,
          description: t.categories.publications.features.autoGeo.description,
          standard: false,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.publications.features.utmTags.name,
          description: t.categories.publications.features.utmTags.description,
          standard: false,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.publications.features.shortLinks.name,
          description: t.categories.publications.features.shortLinks.description,
          standard: false,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.publications.features.spellcheck.name,
          description: t.categories.publications.features.spellcheck.description,
          standard: false,
          premium: false,
          advanced: true
        },
        {
          name: t.categories.publications.features.coverChoice.name,
          description: t.categories.publications.features.coverChoice.description,
          standard: false,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.publications.features.watermarks.name,
          description: t.categories.publications.features.watermarks.description,
          standard: false,
          premium: false,
          advanced: true
        },
        {
          name: t.categories.publications.features.reposts.name,
          description: t.categories.publications.features.reposts.description,
          standard: false,
          premium: false,
          advanced: true
        },
        {
          name: t.categories.publications.features.repeatingPosts.name,
          description: t.categories.publications.features.repeatingPosts.description,
          standard: false,
          premium: false,
          advanced: true
        }
      ]
    },
    analytics: {
      title: t.categories.analytics.title,
      items: [
        {
          name: t.categories.analytics.features.basicAnalytics.name,
          description: t.categories.analytics.features.basicAnalytics.description,
          standard: true,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.analytics.features.detailedEngagement.name,
          description: t.categories.analytics.features.detailedEngagement.description,
          standard: false,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.analytics.features.reachAnalytics.name,
          description: t.categories.analytics.features.reachAnalytics.description,
          standard: false,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.analytics.features.audienceAnalytics.name,
          description: t.categories.analytics.features.audienceAnalytics.description,
          standard: false,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.analytics.features.postsAnalytics.name,
          description: t.categories.analytics.features.postsAnalytics.description,
          standard: false,
          premium: true,
          advanced: true
        }
      ]
    },
    team: {
      title: t.categories.team.title,
      items: [
        {
          name: t.categories.team.features.addUsers.name,
          description: t.categories.team.features.addUsers.description,
          standard: true,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.team.features.accessControl.name,
          description: t.categories.team.features.accessControl.description,
          standard: false,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.team.features.postApproval.name,
          description: t.categories.team.features.postApproval.description,
          standard: false,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.team.features.discussPosts.name,
          description: t.categories.team.features.discussPosts.description,
          standard: false,
          premium: true,
          advanced: true
        }
      ]
    },
    modules: {
      title: t.categories.modules.title,
      items: [
        {
          name: t.categories.modules.features.yandexDisk.name,
          description: t.categories.modules.features.yandexDisk.description,
          standard: true,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.modules.features.templates.name,
          description: t.categories.modules.features.templates.description,
          standard: false,
          premium: false,
          advanced: true
        },
        {
          name: t.categories.modules.features.leads.name,
          description: t.categories.modules.features.leads.description,
          standard: false,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.modules.features.tasks.name,
          description: t.categories.modules.features.tasks.description,
          standard: false,
          premium: false,
          advanced: true
        },
        {
          name: t.categories.modules.features.aiAssistant.name,
          description: t.categories.modules.features.aiAssistant.description,
          standard: false,
          premium: false,
          advanced: true
        },
        {
          name: t.categories.modules.features.rssPublishing.name,
          description: t.categories.modules.features.rssPublishing.description,
          standard: false,
          premium: false,
          advanced: true
        }
      ]
    },
    monitoring: {
      title: t.categories.monitoring.title,
      items: [
        {
          name: t.categories.monitoring.features.monitoring.name,
          description: t.categories.monitoring.features.monitoring.description,
          standard: true,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.monitoring.features.quickReplies.name,
          description: t.categories.monitoring.features.quickReplies.description,
          standard: false,
          premium: true,
          advanced: true
        },
        {
          name: t.categories.monitoring.features.notifications.name,
          description: t.categories.monitoring.features.notifications.description,
          standard: false,
          premium: false,
          advanced: true
        },
        {
          name: t.categories.monitoring.features.telegramReplies.name,
          description: t.categories.monitoring.features.telegramReplies.description,
          standard: false,
          premium: false,
          advanced: true
        }
      ]
    }
  };

  const plans = [
    {
      name: t.plans.standard.name,
      description: t.plans.standard.description,
      monthlyPrice: t.plans.standard.monthlyPrice,
      annualPrice: t.plans.standard.annualPrice,
      features: t.plans.standard.features
    },
    {
      name: t.plans.premium.name,
      description: t.plans.premium.description,
      monthlyPrice: t.plans.premium.monthlyPrice,
      annualPrice: t.plans.premium.annualPrice,
      features: t.plans.premium.features,
      popular: true
    },
    {
      name: t.plans.advanced.name,
      description: t.plans.advanced.description,
      monthlyPrice: t.plans.advanced.monthlyPrice,
      annualPrice: t.plans.advanced.annualPrice,
      features: t.plans.advanced.features
    }
  ];

  return (
    <div className="max-w-7xl mx-auto px-4 py-10">
      <div className="text-center mb-10">
        {/* <h2 className="text-3xl font-bold mb-4">{t.title}</h2> */}
        {/* <p className="text-lg text-gray-600 mb-6">{t.subtitle}</p>
        <div className="flex justify-center gap-2 mb-10">
          <button
            onClick={() => setIsAnnual(true)}
            className={`px-5 py-2 rounded-lg border ${
              isAnnual ? 'bg-green-500 text-white border-green-500' : 'bg-white text-gray-700 border-green-300'
            }`}
          >
            {t.paymentButtons.annual}
          </button>
          <button
            onClick={() => setIsAnnual(false)}
            className={`px-5 py-2 rounded-lg border ${
              !isAnnual ? 'bg-green-500 text-white border-green-500' : 'bg-white text-gray-700 border-green-300'
            }`}
          >
            {t.paymentButtons.monthly}
          </button>
        </div> */}
      </div>

      {/* <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
        {plans.map((plan) => (
          <div
            key={plan.name}
            className={`relative p-6 rounded-lg border ${
              plan.popular ? 'border-green-500' : 'border-green-200'
            }`}
          >
            {plan.popular && (
              <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-3 py-1 rounded-full text-sm">
                {t.popular}
              </div>
            )}
            <h3 className="text-2xl font-bold mb-2">{plan.name}</h3>
            <p className="text-gray-600 mb-4">{plan.description}</p>
            <div className="text-4xl font-bold mb-6">
              {isAnnual ? plan.annualPrice : plan.monthlyPrice} {t.cash}
              <span className="text-base font-normal text-gray-600">/{t.month}</span>
            </div>
            <button className="w-full py-3 px-4 rounded-lg bg-green-500 text-white font-medium hover:bg-green-600">
              {plan.popular ? t.startButton : t.tryButton}
            </button>
          </div>
        ))}
      </div> */}

      <div className="overflow-x-auto">
        <table className="w-full border-collapse">
          <tbody>
            {Object.entries(features).map(([key, category]) => (
              <React.Fragment key={key}>
                <tr className="bg-gray-50">
                  <th className="w-1/2 px-6 py-4 text-left text-lg font-bold">
                    {category.title}
                  </th>
                  {plans.map((plan) => (
                    <th key={plan.name} className="px-6 py-4 text-gray-400 text-center font-medium">
                      {plan.name}
                    </th>
                  ))}
                </tr>
                {category.items.map((item, itemIndex) => (
                  <tr key={itemIndex} className="border-b hover:bg-gray-50">
                    <td className="px-6 py-4">
                      <div className="flex items-center group">
                        <span className="font-medium">{item.name}</span>
                        <div className="relative ml-2">
                          <div className="cursor-help w-5 h-5 bg-gray-200 rounded-full flex items-center justify-center text-gray-600 text-xs">
                            ?
                          </div>
                          <div className="hidden group-hover:block absolute z-10 left-full ml-2 w-64 bg-gray-800 text-white text-sm rounded-lg p-3">
                            {item.description}
                          </div>
                        </div>
                      </div>
                    </td>
                    {plans.map((plan) => (
                      <td key={`${itemIndex}-${plan.name}`} className="px-6 py-4 text-center">
                        {item[plan.features] ? (
                          <span className="text-green-500 text-xl">✓</span>
                        ) : (
                          <span className="text-gray-400 text-xl">−</span>
                        )}
                      </td>
                    ))}
                  </tr>
                ))}
              </React.Fragment>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default PricingFeatures;