import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Loader from '../../components/core/Loader';
import { translate } from '../../Helper';

const NoWooCommerceComponent = () => {
  const [loading, setLoading] = useState(false);
  const [buttonText, setButtonText] = useState(translate('install_activate_woocommerce') || 'Install & Activate WooCommerce');
  const [isInstalled, setIsInstalled] = useState(false);
  
  useEffect(() => {
    // Check if WooCommerce is installed but not activated
    if (window.ecreAdmin && window.ecreAdmin.woocommerce_installed) {
      setIsInstalled(true);
      setButtonText(translate('activate_woocommerce') || 'Activate WooCommerce');
    } else {
      setIsInstalled(false);
      setButtonText(translate('install_activate_woocommerce') || 'Install & Activate WooCommerce');
    }
  }, []);

  const handleWooCommerceAction = (e) => {
    e.preventDefault();
    setLoading(true);
    
    const action = isInstalled ? 'activate_woocommerce' : 'install_activate_woocommerce';
    
    axios({
      method: 'post',
      url: window.ecreAdmin.ajaxurl,
      data: new URLSearchParams({
        action: action,
        security: window.ecreAdmin.nonce
      }),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
    .then(response => {
      if (response.data.success) {
        // Redirect to Echo Rewards page
        window.location.href = 'admin.php?page=echo-rewards';
      } else {
        console.error('Error:', response.data.data);
        setLoading(false);
      }
    })
    .catch(error => {
      console.error('AJAX Error:', error);
      setLoading(false);
    });
  };


  return (
    <div className="ecre-fixed ecre-inset-0 ecre-flex ecre-items-center ecre-justify-center ecre-z-40">
      {/* Semi-transparent overlay */}
      <div className="ecre-fixed ecre-inset-0 ecre-bg-gray-800 ecre-bg-opacity-50"></div>
      
      {/* Content box */}
      <div className="ecre-bg-white ecre-p-10 ecre-rounded ecre-shadow-md ecre-max-w-xl ecre-w-full ecre-mx-8 ecre-text-center ecre-z-50 ecre-relative">
        <div className="ecre-flex ecre-flex-col ecre-items-center">
          {/* Image from plugin directory */}
          <div className="ecre-mb-8">
            <img src={`${window.ecreAdmin.imgdir}/no-woocommerce.png`} alt="WooCommerce"  />
          </div>
          
          <h2 className="ecre-text-xl ecre-font-semibold ecre-text-gray-800 ecre-mb-2">
            { window.ecreAdmin.woocommerce_installed ? translate('activate_woocommerce') || 'Please activate WooCommerce' : translate('install_activate_woocommerce') || 'Install and activate WooCommerce' }          
          </h2>
          
          <p className="ecre-text-gray-600 ecre-mb-6">
            { translate('woo_not_activated_message') } <span className="ecre-font-medium ecre-text-gray-800">{ translate('activated') }</span>
          </p>
          
          <a 
            href="#" 
            className="ecre-bg-[#6a40d5] ecre-text-white ecre-font-medium ecre-py-2 ecre-px-6 ecre-rounded-md ecre-transition ecre-duration-200 hover:ecre-bg-violet-800 hover:ecre-text-white ecre-no-underline focus:ecre-text-white"
            onClick={handleWooCommerceAction}
            disabled={loading}
          >
            {buttonText}
          </a>
          
          {loading && (
            <div className="ecre-mt-8">
              <Loader />
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default NoWooCommerceComponent;