import React from 'react';
import PropTypes from 'prop-types';
import Modal from './Modal';
import ecreIcons from './icons';
import { translate } from '../../Helper';

const SupportPopup = ({ isOpen, onClose, onEmailRedirect, onCopy, copiedItemIndex, error, onClearError, className = '' }) => {
    return (
        <Modal 
            className={`support-modal ${className}`} 
            openModal={isOpen} 
            toggleModal={onClose}
        >
            {{
                header: (
                    <div className="logo">
                        {ecreIcons.wppool}
                        <p className="ecre-text-gray-500 ecre-text-xs ecre-font-normal ecre-leading-normal">
                            {translate('connect_option')}
                        </p>
                    </div>
                ),
                body: (
                    <>
                        {error && (
                            <div className="ecre-mb-4 ecre-p-3 ecre-bg-red-50 ecre-border ecre-border-red-200 ecre-rounded-md">
                                <div className="ecre-flex ecre-justify-between ecre-items-start">
                                    <p className="ecre-text-red-800 ecre-text-sm ecre-font-medium">
                                        {error}
                                    </p>
                                    {onClearError && (
                                        <button
                                            onClick={onClearError}
                                            className="ecre-ml-2 ecre-text-red-600 hover:ecre-text-red-800 ecre-text-sm"
                                            aria-label="Dismiss error"
                                        >
                                            ×
                                        </button>
                                    )}
                                </div>
                            </div>
                        )}
                        
                        <div className="support-us ecre-grid ecre-grid-cols-1 ecre-gap-y-3">
                            {/* Gmail */}
                            <a 
                                onClick={() => onEmailRedirect('gmail')} 
                                className="ecre-w-full ecre-group ecre-cursor-pointer ecre-rounded-[10px] ecre-pl-4 sm:ecre-pl-5 ecre-py-3 ecre-pr-4 ecre-outline-none ecre-shadow-none lg:ecre-pr-12 ecre-bg-[#F9FAFB] ecre-flex ecre-justify-between ecre-items-center"
                            >
                                <div className="ecre-gap-2.5 ecre-flex ecre-items-center">
                                    <div className="ecre-w-14 ecre-h-12 ecre-px-2.5 ecre-py-2.5 ecre-bg-white ecre-rounded-sm ecre-justify-center ecre-items-center ecre-inline-flex">
                                        {ecreIcons.gmail}
                                    </div>
                                    <div className="text">
                                        <h6 className="ecre-text-[#1F2937] ecre-text-xs ecre-font-semibold ecre-leading-normal ecre-mb-1">
                                            {translate('gmail')}
                                        </h6>
                                        <p className="ecre-text-[#6B7280] ecre-text-xs ecre-font-normal ecre-leading-normal">
                                            {translate('open_gmail')}
                                        </p>
                                    </div>
                                </div>
                                <div className="icon ecre-opacity-[0] ecre-transition-all group-hover:ecre-opacity-[1] group-hover:ecre-translate-x-1">
                                    {ecreIcons.rightArrowThree}
                                </div>
                            </a>
                            
                            {/* Outlook */}
                            <a 
                                onClick={() => onEmailRedirect('outlook')} 
                                className="ecre-w-full ecre-group ecre-cursor-pointer ecre-rounded-[10px] ecre-pl-4 sm:ecre-pl-5 ecre-py-3 ecre-pr-4 ecre-outline-none ecre-shadow-none lg:ecre-pr-12 ecre-bg-[#F9FAFB] ecre-flex ecre-justify-between ecre-items-center"
                            >
                                <div className="ecre-gap-2.5 ecre-flex ecre-items-center">
                                    <div className="ecre-w-14 ecre-h-12 ecre-px-2.5 ecre-py-2.5 ecre-bg-white ecre-rounded-sm ecre-justify-center ecre-items-center ecre-inline-flex">
                                        {ecreIcons.outlook}
                                    </div>
                                    <div className="text">
                                        <h6 className="ecre-text-[#1F2937] ecre-text-xs ecre-font-semibold ecre-leading-normal ecre-mb-1">
                                            {translate('outlook')}
                                        </h6>
                                        <p className="ecre-text-[#6B7280] ecre-text-xs ecre-font-normal ecre-leading-normal">
                                            {translate('open_outlook')}
                                        </p>
                                    </div>
                                </div>
                                <div className="icon ecre-opacity-[0] ecre-transition-all group-hover:ecre-opacity-[1] group-hover:ecre-translate-x-1">
                                    {ecreIcons.rightArrowThree}
                                </div>
                            </a>
                            
                            {/* Yahoo */}
                            <a 
                                onClick={() => onEmailRedirect('yahoo')} 
                                className="ecre-w-full ecre-group ecre-cursor-pointer ecre-rounded-[10px] ecre-pl-4 sm:ecre-pl-5 ecre-py-3 ecre-pr-4 ecre-outline-none ecre-shadow-none lg:ecre-pr-12 ecre-bg-[#F9FAFB] ecre-flex ecre-justify-between ecre-items-center"
                            >
                                <div className="ecre-gap-2.5 ecre-flex ecre-items-center">
                                    <div className="ecre-w-14 ecre-h-12 ecre-px-2.5 ecre-py-2.5 ecre-bg-white ecre-rounded-sm ecre-justify-center ecre-items-center ecre-inline-flex">
                                        {ecreIcons.yahoo}
                                    </div>
                                    <div className="text">
                                        <h6 className="ecre-text-[#1F2937] ecre-text-xs ecre-font-semibold ecre-leading-normal ecre-mb-1">
                                            {translate('yahoo')}
                                        </h6>
                                        <p className="ecre-text-[#6B7280] ecre-text-xs ecre-font-normal ecre-leading-normal">
                                            {translate('open_yahoo')}
                                        </p>
                                    </div>
                                </div>
                                <div className="icon ecre-opacity-[0] ecre-transition-all group-hover:ecre-opacity-[1] group-hover:ecre-translate-x-1">
                                    {ecreIcons.rightArrowThree}
                                </div>
                            </a>
                            
                            {/* Default Email */}
                            <a 
                                onClick={() => onEmailRedirect('default')} 
                                className="ecre-w-full ecre-group ecre-cursor-pointer ecre-rounded-[10px] ecre-pl-4 sm:ecre-pl-5 ecre-py-3 ecre-pr-4 ecre-outline-none ecre-shadow-none lg:ecre-pr-12 ecre-bg-[#F9FAFB] ecre-flex ecre-justify-between ecre-items-center"
                            >
                                <div className="ecre-gap-2.5 ecre-flex ecre-items-center">
                                    <div className="ecre-w-14 ecre-h-12 ecre-px-2.5 ecre-py-2.5 ecre-bg-white ecre-rounded-sm ecre-justify-center ecre-items-center ecre-inline-flex">
                                        {ecreIcons.defaultEmail}
                                    </div>
                                    <div className="text">
                                        <h6 className="ecre-text-[#1F2937] ecre-text-xs ecre-font-semibold ecre-leading-normal ecre-mb-1">
                                            {translate('default_email')}
                                        </h6>
                                        <p className="ecre-text-[#6B7280] ecre-text-xs ecre-font-normal ecre-leading-normal">
                                            {translate('open_default_email')}
                                        </p>
                                    </div>
                                </div>
                                <div className="icon ecre-opacity-[0] ecre-transition-all group-hover:ecre-opacity-[1] group-hover:ecre-translate-x-1">
                                    {ecreIcons.rightArrowThree}
                                </div>
                            </a>
                            
                            {/* Copy Email Address */}
                            <a className="ecre-w-full ecre-group ecre-rounded-[10px] ecre-pl-4 sm:ecre-pl-5 ecre-py-3 ecre-pr-4 ecre-outline-none ecre-shadow-none ecre-bg-[#F9FAFB] ecre-flex ecre-justify-between ecre-items-center">
                                <div className="ecre-gap-2.5 ecre-flex ecre-items-center">
                                    <div className="ecre-w-14 ecre-h-12 ecre-px-2.5 ecre-py-2.5 ecre-bg-white ecre-rounded-sm ecre-justify-center ecre-items-center ecre-inline-flex">
                                        {ecreIcons.support}
                                    </div>
                                    <div className="text">
                                        <h6 className="ecre-text-[#1F2937] ecre-text-xs ecre-font-semibold ecre-leading-normal ecre-mb-1">
                                            support@wppool.dev
                                        </h6>
                                        <p className="ecre-text-[#6B7280] ecre-text-xs ecre-font-normal ecre-leading-normal">
                                            {translate('copy_email_dec')}
                                        </p>
                                    </div>
                                </div>
                                <button
                                    onClick={() => onCopy('support@wppool.dev', 0)}
                                    className="copy ecre-min-w-[88px] ecre-opacity-[0] ecre-whitespace-nowrap group-hover:ecre-opacity-[1] ecre-text-xs ecre-border ecre-border-solid ecre-border-[#3858E9] ecre-rounded-[8px] ecre-px-[12px] ecre-py-[10px] ecre-flex ecre-items-center ecre-justify-center ecre-transition-all ecre-text-[#3858E9]"
                                >
                                    {copiedItemIndex === 0 ? translate('btn_copied') : translate('copy_email')}
                                </button>
                            </a>
                        </div>

                        <div className="text-center ecre-flex ecre-justify-center ecre-items-center ecre-gap-1 ecre-mt-5">
                            <span className="ecre-text-gray-500 ecre-text-xs ecre-font-normal ecre-leading-none">
                                {translate('powered_by')}
                            </span>
                            <a className="ecre-cursor-pointer ecre-text-blue-600 ecre-text-xs ecre-font-medium ecre-leading-none">
                                {translate('wppool')}
                            </a>
                        </div>
                    </>
                )
            }}
        </Modal>
    );
};

SupportPopup.propTypes = {
    isOpen: PropTypes.bool.isRequired,
    onClose: PropTypes.func.isRequired,
    onEmailRedirect: PropTypes.func.isRequired,
    onCopy: PropTypes.func.isRequired,
    copiedItemIndex: PropTypes.number,
    error: PropTypes.string,
    onClearError: PropTypes.func,
    className: PropTypes.string,
};

export default SupportPopup;