import { useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';

const Support = ({ settings }) => {
    const [message, setMessage] = useState('');
    const [email, setEmail] = useState('');
    const [subject, setSubject] = useState('');
    const [sending, setSending] = useState(false);
    const [sent, setSent] = useState(false);

    const pluginUrl = (typeof ironSecuritySettings !== 'undefined' && ironSecuritySettings.pluginUrl) 
        ? ironSecuritySettings.pluginUrl 
        : './wp-content/plugins/iron-security/';
    
    const logoUrl = `${pluginUrl}admin/img/iron-security.svg`;
    
    const handleSubmit = (e) => {
        e.preventDefault();
        

        window.location.href = `mailto:support@wpiron.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(message)}`;
        

        setSent(true);
        

        setTimeout(() => {
            setMessage('');
            setSubject('');
            setSent(false);
        }, 3000);
    };
    
    return (
        <div className="iron-security-support-container">
            <div className="iron-security-support-intro">
                <div className="iron-security-support-logo">
                    <img src={logoUrl} alt={__("Iron Security Logo", "iron-security")} width="80" height="80" />
                </div>
                
                <h2>{__("We're Here to Help Secure Your Website", "iron-security")}</h2>
                
                <p>
                    {__("Thank you for choosing Iron Security to protect your WordPress site. Our mission is to provide you with the most robust security solution while keeping things simple and effective.", "iron-security")}
                </p>
                
                <div className="iron-security-support-cards">
                    <div className="iron-security-support-card">
                        <div className="card-icon">
                            <span className="dashicons dashicons-email-alt"></span>
                        </div>
                        <h3>{__("Email Support", "iron-security")}</h3>
                        <p>{__("Have a question or need help? Our team is ready to assist you.", "iron-security")}</p>
                        <a href="mailto:support@wpiron.com" className="support-card-link">
                            support@wpiron.com
                        </a>
                    </div>
                    
                    <div className="iron-security-support-card">
                        <div className="card-icon">
                            <span className="dashicons dashicons-wordpress"></span>
                        </div>
                        <h3>{__("WordPress.org", "iron-security")}</h3>
                        <p>{__("Get community support on the WordPress.org forums.", "iron-security")}</p>
                        <a href="https://wordpress.org/support/plugin/iron-security/" target="_blank" rel="noopener noreferrer" className="support-card-link">
                            {__("Visit Support Forum", "iron-security")}
                        </a>
                    </div>
                </div>
            </div>
            
            <div className="iron-security-contact-form-container">
                <h3>{__("Send Us a Message", "iron-security")}</h3>
                
                {sent ? (
                    <div className="iron-security-message-sent">
                        <span className="dashicons dashicons-yes-alt"></span>
                        <p>{__("Your email client has been opened with your message. Thank you for reaching out!", "iron-security")}</p>
                    </div>
                ) : (
                    <form onSubmit={handleSubmit} className="iron-security-contact-form">
                        <div className="form-row">
                            <label htmlFor="subject">{__("Subject", "iron-security")}</label>
                            <input 
                                type="text" 
                                id="subject" 
                                value={subject} 
                                onChange={(e) => setSubject(e.target.value)} 
                                required 
                                placeholder={__("What's your inquiry about?", "iron-security")}
                            />
                        </div>
                        
                        <div className="form-row">
                            <label htmlFor="message">{__("Message", "iron-security")}</label>
                            <textarea 
                                id="message" 
                                value={message} 
                                onChange={(e) => setMessage(e.target.value)} 
                                required 
                                rows="6"
                                placeholder={__("Describe your issue or question in detail...", "iron-security")}
                            ></textarea>
                        </div>
                        
                        <button type="submit" className="iron-security-submit-button">
                            <span className="dashicons dashicons-email"></span> {__("Send Message", "iron-security")}
                        </button>
                    </form>
                )}
            </div>
            
            <div className="iron-security-security-guarantee">
                <div className="guarantee-icon">
                    <span className="dashicons dashicons-lock"></span>
                </div>
                <div className="guarantee-content">
                    <h3>{__("Our Security Commitment", "iron-security")}</h3>
                    <p>
                        {__("We're dedicated to keeping your website safe from threats and vulnerabilities. With Iron Security, you get robust protection that works silently in the background, letting you focus on what matters most – running your website.", "iron-security")}
                    </p>
                </div>
            </div>
        </div>
    );
};

export default Support;