import React, { useState } from 'react';

const PluginDashboard = () => {
    const { 
        dashboard_stats = {},
        assets_path = '',
    } = window.mhubMeetingsData || {};

    const {
        total_meetings = 0,
        upcoming_meetings = 0,
        woo_stats = { active: false, count: 0 },
        platform_stats = {},
        pro_modules_count = 12
    } = dashboard_stats;

    const [showVideo, setShowVideo] = useState(false);

    // Hardcoded Links from User Feedback
    const docs_url = 'https://sovlix.com/docs/';
    const community_url = 'https://www.facebook.com/groups/sovlixcommunityofficial';
    const support_url = 'https://sovlix.com/support/';
    const tutorial_url = 'https://youtube.com/playlist?list=PLxhrje-lzZsR5LRZnZu6OrhTKQTAByIwh';
    const embed_url = 'https://www.youtube.com/embed/videoseries?list=PLxhrje-lzZsR5LRZnZu6OrhTKQTAByIwh&autoplay=1&rel=0';
    const whats_new_url = 'https://wordpress.org/plugins/meetinghub/#developers';
    const review_url = 'https://wordpress.org/support/plugin/meetinghub/reviews/';

    const brandColor = '#7856fb'; // MeetingHub Primary Violet

    const stats = [
        { label: 'Total Meetings', count: total_meetings, icon: 'dashicons-groups', color: brandColor },
        { label: 'Upcoming Meetings', count: upcoming_meetings, icon: 'dashicons-calendar-alt', color: brandColor },
        { 
            label: 'WooCommerce', 
            count: woo_stats.active ? woo_stats.count : 'Off', 
            icon: 'dashicons-cart', 
            color: woo_stats.active ? '#22c55e' : '#94a3b8' 
        },
        { label: 'Pro Modules', count: pro_modules_count, icon: 'dashicons-awards', color: brandColor }
    ];

    const platformLabels = {
        zoom: 'Zoom',
        google_meet: 'Google Meet',
        webex: 'Webex',
        msteams: 'MS Teams',
        jitsi_meet: 'Jitsi Meet'
    };

    const proFeatures = [
        'Monetize Webinars with WooCommerce',
        'LMS Integration (TutorLMS, LearnDash, LifterLMS, etc.)',
        'Marketplace Support (Dokan, WCFM, MultivendorX)',
        'Enterprise Teams & Webex Integration',
        'Zoom Recording Archive & Shortcodes',
        'Detailed Analytics & CSV Exports',
        'Woocommerce Booking Integration',
        'Recurring Meeting',
        'Should Register Meeting',
        'User List Feature'
    ];

    const footerResources = [
        {
            label: 'Documentation',
            desc: 'Get started by spending some time with the documentation to get familiar with MeetingHub. Build an awesome Meeting solution for your customers.',
            url: docs_url,
            icon: 'dashicons-media-document',
            actionText: 'Documentation'
        },
        {
            label: 'Join Our Community',
            desc: 'Join the Facebook community and discuss with fellow developers and users. Best way to connect with people and get feedback.',
            url: community_url,
            icon: 'dashicons-groups',
            actionText: 'Join Now'
        },
        {
            label: 'Need Help?',
            desc: 'Stuck with something? Get help from live chat or support ticket. Our team is ready to assist you with any questions.',
            url: support_url,
            icon: 'dashicons-sos',
            actionText: 'Initiate a Chat'
        },
        {
            label: 'Show Your Love',
            desc: 'We love to have you in the MeetingHub family. We are making it more awesome everyday. Take your 2 minutes to review the plugin.',
            url: review_url,
            icon: 'dashicons-heart', 
            actionText: 'Leave a Review'
        }
    ];

    return (
        <div className="mhub-plugin-dashboard">
            <div className="mhub-dashboard-container">
                {/* Fixed Header */}
                <div className="mhub-dashboard-header-bar">
                    <div className="mhub-header-left">
                        <h1>Dashboard</h1>
                    </div>
                    <div className="mhub-header-right">
                        <a href="admin.php?page=meetinghub-all-meetings" className="mhub-btn-outline">+ Add New Meeting</a>
                        <a href="admin.php?page=meetinghub-settings" className="mhub-btn-primary">
                            <span className="dashicons dashicons-admin-settings"></span> Configure Settings
                        </a>
                    </div>
                </div>

                {/* Stats Row */}
                <div className="mhub-dashboard-stats-row">
                    {stats.map((stat, index) => (
                        <div className="mhub-stat-card" key={index}>
                            <div className="mhub-stat-data">
                                <div className="mhub-stat-value">{stat.count}</div>
                                <div className="mhub-stat-label">{stat.label}</div>
                            </div>
                            <div className="mhub-stat-icon-wrap" style={{ color: stat.color }}>
                                <span className={`dashicons ${stat.icon}`}></span>
                            </div>
                        </div>
                    ))}
                </div>

                {/* Platform Breakdown Row */}
                <div className="mhub-dashboard-platform-breakdown">
                    <div className="mhub-card">
                        <h3>Meeting Platform Usage</h3>
                        <div className="mhub-platform-grid">
                            {Object.entries(platform_stats).map(([key, count]) => (
                                <div className="mhub-platform-item" key={key}>
                                    <div className="mhub-platform-name">{platformLabels[key] || key}</div>
                                    <div className="mhub-platform-bar-wrap">
                                        <div 
                                            className="mhub-platform-bar" 
                                            style={{ 
                                                width: `${total_meetings > 0 ? (count / total_meetings) * 100 : 0}%`,
                                                backgroundColor: brandColor 
                                            }}
                                        ></div>
                                    </div>
                                    <div className="mhub-platform-count">{count}</div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>

                {/* Middle Content Grid */}
                <div className="mhub-dashboard-middle-grid">
                    <div className="mhub-middle-main">
                        {/* Welcome Banner */}
                        <div className="mhub-dashboard-banner-card">
                            <div className="mhub-banner-text">
                                <h2>Welcome To MeetingHub</h2>
                                <p>600+ businesses are accelerating their growth by creating content-rich virtual meetings and webinars with MeetingHub.</p>
                                <a href={tutorial_url} target="_blank" rel="noopener noreferrer" className="mhub-banner-link">
                                    <span className="dashicons dashicons-controls-play"></span>
                                    Watch Tutorials
                                </a>
                            </div>
                            <div className="mhub-banner-vid-placeholder" onClick={() => setShowVideo(true)} style={{ background: '#fff' }}>
                                <img src={`${assets_path}/img/tutorial-illustration.png`} alt="MeetingHub Tutorial" style={{width: '100%', height: '100%', objectFit: 'cover', borderRadius: '4px', opacity: 1}} />
                                <div className="mhub-play-button-overlay">
                                    <span className="dashicons dashicons-controls-play"></span>
                                </div>
                            </div>
                        </div>

                        {/* Highlighted Addon: Frontend Meeting */}
                        <div className="mhub-dashboard-promo-card">
                            <div className="mhub-promo-text">
                                <h3>Frontend Meeting Addon</h3>
                                <p>Empower your users to schedule and manage their own meetings directly from the frontend of your website.</p>
                                <a href="admin.php?page=meetinghub-addons" className="mhub-btn-brand-small">Get Frontend Addon</a>
                            </div>
                            <div className="mhub-promo-image">
                                <span className="dashicons dashicons-welcome-view-site"></span>
                            </div>
                        </div>

                        {/* Highlighted Addon: Multi-Vendor */}
                        <div className="mhub-dashboard-promo-card">
                            <div className="mhub-promo-text">
                                <h3>Multi-Vendor Support Addon</h3>
                                <p>Enable marketplace vendors (Dokan, WCFM, etc.) to host meetings and webinars directly from their vendor dashboards.</p>
                                <a href="admin.php?page=meetinghub-addons" className="mhub-btn-brand-small">Get Multi-Vendor Addon</a>
                            </div>
                            <div className="mhub-promo-image">
                                <span className="dashicons dashicons-store"></span>
                            </div>
                        </div>
                    </div>

                    <div className="mhub-middle-sidebar">
                        {/* Pro Sidebar */}
                        <div className="mhub-card mhub-pro-sidebar-card">
                            <div className="mhub-pro-badge">
                                <span className="dashicons dashicons-awards"></span>
                            </div>
                            <h3>Want Advanced Features?</h3>
                            <ul className="mhub-pro-features-simple">
                                {proFeatures.map((f, i) => (
                                    <li key={i}>
                                        <span className="dashicons dashicons-yes"></span> {f}
                                    </li>
                                ))}
                            </ul>
                            <div className="mhub-upgrade-btn-wrapper">
                                <a href="https://sovlix.com/meetinghub-pricing/" target="_blank" rel="noopener noreferrer" className="mhub-btn-pro-gold" style={{ display: 'flex' }}>
                                    <span style={{ display: 'inline-flex', alignItems: 'center' }}>
                                        <svg width="22" height="17" viewBox="0 0 17 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M15.9067 3.57281C15.757 3.44156 15.5715 3.358 15.3739 3.33283C15.1764 3.30767 14.9758 3.34205 14.798 3.43157L11.8667 4.89274L9.36672 0.737339C9.27716 0.588656 9.15068 0.46565 8.99955 0.380261C8.84843 0.294872 8.6778 0.25 8.50422 0.25C8.33064 0.25 8.16 0.294872 8.00888 0.380261C7.85776 0.46565 7.73128 0.588656 7.64172 0.737339L5.14172 4.89274L2.20984 3.4322C2.03215 3.34344 1.83217 3.30925 1.63508 3.33393C1.43799 3.35862 1.25262 3.44108 1.10232 3.57093C0.952016 3.70077 0.843505 3.8722 0.790457 4.0636C0.737409 4.255 0.742197 4.45782 0.804217 4.64651L3.11672 11.7305C3.15155 11.8372 3.20989 11.9348 3.28745 12.0159C3.36501 12.0971 3.4598 12.1598 3.56484 12.1995C3.66987 12.2391 3.78247 12.2547 3.89432 12.245C4.00617 12.2354 4.11442 12.2007 4.21109 12.1436C4.22609 12.1349 5.77734 11.2493 8.50297 11.2493C11.2286 11.2493 12.7798 12.1361 12.7917 12.143C12.8884 12.2008 12.9969 12.2361 13.109 12.2463C13.2212 12.2565 13.3343 12.2412 13.4398 12.2017C13.5453 12.1622 13.6405 12.0994 13.7184 12.0181C13.7964 11.9367 13.8549 11.8389 13.8898 11.7318L16.2023 4.65151C16.2662 4.46272 16.2721 4.25916 16.2195 4.06696C16.1668 3.87477 16.0579 3.70269 15.9067 3.57281ZM12.7236 10.4693C11.8892 10.1493 10.453 9.74936 8.50297 9.74936C6.55297 9.74936 5.11672 10.1506 4.28234 10.4706L2.59484 5.30147L4.87797 6.43704C5.10484 6.54915 5.36551 6.57213 5.60851 6.50144C5.8515 6.43074 6.05916 6.27151 6.19047 6.05518L8.50297 2.21226L10.8155 6.05581C10.9469 6.27203 11.1546 6.43113 11.3976 6.5017C11.6405 6.57228 11.9012 6.54921 12.128 6.43704L14.4105 5.2996L12.7236 10.4693ZM11.4942 8.53193C11.4669 8.70892 11.3772 8.87029 11.2412 8.98687C11.1052 9.10344 10.9321 9.16752 10.753 9.16752C10.7143 9.16738 10.6756 9.16445 10.6373 9.15877C9.22158 8.94544 7.78185 8.94544 6.36609 9.15877C6.1695 9.1891 5.96891 9.1401 5.80845 9.02254C5.64799 8.90499 5.5408 8.72851 5.51047 8.53193C5.48013 8.33534 5.52914 8.13477 5.6467 7.97431C5.76426 7.81386 5.94075 7.70668 6.13734 7.67635C7.70471 7.4397 9.29873 7.4397 10.8661 7.67635C10.9635 7.69122 11.0571 7.72515 11.1414 7.77621C11.2258 7.82727 11.2992 7.89446 11.3575 7.97392C11.4159 8.05338 11.458 8.14357 11.4814 8.23932C11.5049 8.33507 11.5092 8.4345 11.4942 8.53193Z" fill="currentColor"></path>
                                        </svg>
                                    </span> Upgrade to PRO
                                </a>
                            </div>
                        </div>

                        {/* What's New Sidebar */}
                        <div className="mhub-card mhub-whats-new-sidebar">
                            <h3>
                                <span className="dashicons dashicons-megaphone" style={{ color: brandColor }}></span>
                                What's New?
                            </h3>
                            <ul className="mhub-changelog-list">
                                <li><span className="dashicons dashicons-yes"></span> LifterLMS Integration</li>
                                <li><span className="dashicons dashicons-yes"></span> Tutor LMS "Live Meeting" Tab</li>
                                <li><span className="dashicons dashicons-yes"></span> Automatic Registrations</li>
                                <li><span className="dashicons dashicons-yes"></span> MS Teams Enterprise</li>
                            </ul>
                            <a href={whats_new_url} target="_blank" rel="noopener noreferrer" className="mhub-learn-more-link">
                                Full Changelog <span className="dashicons dashicons-arrow-right-alt2"></span>
                            </a>
                        </div>
                    </div>
                </div>

                {/* Footer Resources */}
                <div className="mhub-dashboard-footer-grid">
                    {footerResources.map((res, i) => (
                        <div className="mhub-footer-card" key={i}>
                            <div className="mhub-footer-icon" style={{ color: brandColor }}>
                                <span className={`dashicons ${res.icon}`}></span>
                            </div>
                            <h4>{res.label}</h4>
                            <p>{res.desc}</p>
                            <a href={res.url} target="_blank" rel="noopener noreferrer" className="mhub-footer-link">
                                {res.actionText} <span className="dashicons dashicons-arrow-right-alt2"></span>
                            </a>
                        </div>
                    ))}
                </div>
            </div>

            {/* Video Modal Overlay */}
            {showVideo && (
                <div className="mhub-video-modal-overlay" onClick={() => setShowVideo(false)}>
                    <div className="mhub-video-modal-container" onClick={(e) => e.stopPropagation()}>
                        <button className="mhub-modal-close" onClick={() => setShowVideo(false)}>
                            <span className="dashicons dashicons-no-alt"></span>
                        </button>
                        <div className="mhub-video-iframe-wrapper">
                            <iframe 
                                src={embed_url}
                                title="YouTube video player" 
                                frameBorder="0" 
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                allowFullScreen>
                            </iframe>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default PluginDashboard;
