import React, { useState, useEffect } from "react";
import { isPro, getNoticeData, systemInfo } from '../../Helpers';
import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
import SettingsSuggestIcon from '@mui/icons-material/SettingsSuggest';
import Tippy from '@tippy.js/react';
import 'tippy.js/dist/tippy.css'
import "./systemInfo.scss"

const SystemInfo = () => {
    const [activeSection, setActiveSection] = useState('wordpress'); // Default open section

    const toggleSection = (section) => {
        setActiveSection(activeSection === section ? null : section);
    };

    const {
        home_url,
        site_url,
        wp_content_path,
        wp_path,
        wp_version,
        multisite,
        memory_limit,
        wp_debug,
        language,
        os,
        server_info,
        php_version,
        post_max_size,
        time_limit,
        mysql_version,
        max_upload_size,
        mbstring,
        xml,
        dom,
        libxml,
        pdo,
        zip,
        curl,
        theme_info,
        plugins_info
    } = systemInfo();

    // Function to decode HTML entities
    const decodeHtml = (html) => {
        const txt = document.createElement("textarea");
        txt.innerHTML = html;
        return txt.value;
    };

    return (
        <div className="system-info" id="systemInfo">
            <div className="acb_left">
                <h3 className="system-header">Advance System Info Panel <SettingsSuggestIcon /> </h3>
                <br />

                <div className="info-section">
                    <div className="section-header" onClick={() => toggleSection('wordpress')}>
                        <h4>WordPress Environment</h4>
                        <span className={`accordion-icon ${activeSection === 'wordpress' ? 'open' : ''}`}><KeyboardDoubleArrowDownIcon /></span>
                    </div>
                    {activeSection === 'wordpress' && (
                        <table className="info-table">
                            <tbody>

                                <tr><td className="wp-env-td">Home URL:</td><td><a href={home_url} target="_blank" rel="noopener noreferrer">{home_url}</a></td></tr>
                                <tr><td className="wp-env-td">Site URL:</td><td><a href={site_url} target="_blank" rel="noopener noreferrer">{site_url}</a></td></tr>


                                <tr><td className="wp-env-td">WP Content Path:</td><td><a href={`file:///${wp_content_path.replace(/\\/g, '/')}`} target="_blank" rel="noopener noreferrer">{wp_content_path}</a></td></tr>
                                <tr><td className="wp-env-td">WP Path:</td><td><a href={`file:///${wp_path.replace(/\\/g, '/')}`} target="_blank" rel="noopener noreferrer">{wp_path}</a></td></tr>

                                <tr><td className="wp-env-td">WP Version:</td><td>{wp_version}</td></tr>
                                <tr><td className="wp-env-td">WP Multisite:</td><td>{multisite}</td></tr>
                                <tr><td className="wp-env-td">PHP Memory Limit:</td><td>{memory_limit}</td></tr>
                                <tr><td className="wp-env-td">WP Debug Mode:</td><td>{wp_debug}</td></tr>
                                <tr><td className="wp-env-td">Language:</td><td>{language}</td></tr>
                            </tbody>
                        </table>
                    )}
                </div>

                <div className="info-section">
                    <div className="section-header" onClick={() => toggleSection('server')}>
                        <h4>Server Environment</h4>
                        <span className={`accordion-icon ${activeSection === 'server' ? 'open' : ''}`}><KeyboardDoubleArrowDownIcon /></span>
                    </div>
                    {activeSection === 'server' && (
                        <table className="info-table">
                            <tbody>
                                <tr><td className="info-section-td">Operating System:</td><td>{os}</td></tr>
                                <tr><td className="info-section-td">Server Info:</td><td>{server_info}</td></tr>
                                <tr><td className="info-section-td">PHP Version:</td><td>{php_version}</td></tr>
                                <tr><td className="info-section-td">PHP Post Max Size:</td><td>{post_max_size}</td></tr>
                                <tr><td className="info-section-td">PHP Time Limit:</td><td>{time_limit} - We recommend setting max execution time to at least 180.</td></tr>
                                <tr><td className="info-section-td">MySQL Version:</td><td>{mysql_version}</td></tr>
                                <tr><td className="info-section-td">Max Upload Size:</td><td>{max_upload_size}</td></tr>
                                <tr><td className="info-section-td">Multibyte String:</td><td>{mbstring}</td></tr>
                                <tr><td className="info-section-td">XML extension:</td><td>{xml}</td></tr>
                                <tr><td className="info-section-td">DOM extension:</td><td>{dom}</td></tr>
                                <tr><td className="info-section-td">Libxml extension:</td><td>{libxml}</td></tr>
                                <tr><td className="info-section-td">PDO extension:</td><td>{pdo}</td></tr>
                                <tr><td className="info-section-td">Zip extension:</td><td>{zip}</td></tr>
                                <tr><td className="info-section-td">Curl extension:</td><td>{curl}</td></tr>
                            </tbody>
                        </table>
                    )}
                </div>

                <div className="info-section">
                    <div className="section-header" onClick={() => toggleSection('theme')}>
                        <h4>Theme</h4>
                        <span className={`accordion-icon ${activeSection === 'theme' ? 'open' : ''}`}><KeyboardDoubleArrowDownIcon /></span>
                    </div>
                    {activeSection === 'theme' && (
                        <table className="info-table">
                            <tbody>
                                <tr><td className="info-theme-td">Name:</td><td>{theme_info.Name}</td></tr>
                                <tr><td className="info-theme-td">Version:</td><td>{theme_info.Version}</td></tr>
                                <tr><td className="info-theme-td">Author:</td><td>{theme_info.Author}</td></tr>
                                <tr><td className="info-theme-td">Author URL:</td><td><a href={theme_info.AuthorURI} target="_blank" rel="noopener noreferrer">{theme_info.AuthorURI}</a></td></tr>
                            </tbody>
                        </table>
                    )}
                </div>

                <div className="info-section">
                    <div className="section-header" onClick={() => toggleSection('plugins')}>
                        <h4>Plugins ({plugins_info.length})</h4>
                        <span className={`accordion-icon ${activeSection === 'plugins' ? 'open' : ''}`}><KeyboardDoubleArrowDownIcon /></span>
                    </div>
                    {activeSection === 'plugins' && (
                        <table className="info-table">
                            <tbody>
                                {plugins_info.map((plugin, index) => (
                                    <tr key={index}>
                                        <td className="info-plugin-td">
                                            <div dangerouslySetInnerHTML={{ __html: plugin.Name }}></div>
                                        </td>
                                        <td className="info-plugin-td">by {plugin.Author} - {plugin.Version}</td>
                                        <td className="info-plugin-td">
                                            <div dangerouslySetInnerHTML={{ __html: decodeHtml(plugin.Description) }}></div>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    )}
                </div>

            </div>

            <div className="acb_video system-info-video">

            </div>
        </div>
    )
}

export default SystemInfo