<?php
if (!defined('ABSPATH')) {
    exit;
}

$shopid = sanitize_text_field(get_option('accessibility_shopid'));
$data = ['shopid' => $shopid];

$content = $this->api->call('/NewGetShopData', $data, 'get');
$content = is_array($content) ? $content : [];
$data_array = (isset($content['data']) && is_array($content['data'])) ? $content['data'] : [];

$primary_id = $data_array['id'] ?? null;
$current_plan = sanitize_text_field((string) ($data_array['plan'] ?? ''));

if (!empty($primary_id)) {
    update_option('accessibility_primaryid', $primary_id);
}

if (!empty($current_plan)) {
    update_option('accessibility_plan', $current_plan);
}

$js_url = CDN_URL . "wp_js/{$shopid}.js";
update_option('accessibility_url', $current_plan ? $js_url : '');

$current_lang = get_option('my_plugin_selected_language', 'en_US');
$languages = require plugin_dir_path(__FILE__) . 'language-options.php';

$feature_cards = [
    ['id' => 'totalAaccKeyboardNav', 'label' => __('Keyboard Nav', 'accessibility-assistant'), 'icon' => 'keyboard-nav-black.webp'],
    ['id' => 'totalAaccCursor', 'label' => __('Cursor', 'accessibility-assistant'), 'icon' => 'cursor-black.webp'],
    ['id' => 'totalAaccHighSaturation', 'label' => __('High Saturation', 'accessibility-assistant'), 'icon' => 'high-saturation-black.webp'],
    ['id' => 'totalAaccLowSaturation', 'label' => __('Low Saturation', 'accessibility-assistant'), 'icon' => 'low-saturation-black.webp'],
    ['id' => 'totalAaccDesaturate', 'label' => __('Desaturate', 'accessibility-assistant'), 'icon' => 'desaturate-black.webp'],
    ['id' => 'totalAaccContrast', 'label' => __('Contrast +', 'accessibility-assistant'), 'icon' => 'contrast-plus-black.webp'],
    ['id' => 'totalAaccLightContrast', 'label' => __('Light Contrast', 'accessibility-assistant'), 'icon' => 'light-contrast-black.webp'],
    ['id' => 'totalAaccDarkContrast', 'label' => __('Dark Contrast', 'accessibility-assistant'), 'icon' => 'dark-contrast-black.webp'],
    ['id' => 'totalAaccInvertColors', 'label' => __('Invert Colors', 'accessibility-assistant'), 'icon' => 'invert-colors-black.webp'],
    ['id' => 'totalAaccReadingGuide', 'label' => __('Reading Guide', 'accessibility-assistant'), 'icon' => 'reading-guide-black.webp'],
    ['id' => 'totalAaccBiggerText', 'label' => __('Bigger Text', 'accessibility-assistant'), 'icon' => 'bigger-text-black.webp'],
    ['id' => 'totalAaccHighlightLinks', 'label' => __('Highlight Links', 'accessibility-assistant'), 'icon' => 'highlight-links-black.webp'],
    ['id' => 'totalAaccWordSpacing', 'label' => __('Word Spacing', 'accessibility-assistant'), 'icon' => 'word-spacing-black.webp'],
    ['id' => 'totalAaccLetterSpacing', 'label' => __('Letter Spacing', 'accessibility-assistant'), 'icon' => 'letter-spacing-black.webp'],
    ['id' => 'totalAaccLineHeight', 'label' => __('Line Height', 'accessibility-assistant'), 'icon' => 'line-height-black.webp'],
    ['id' => 'totalAaccAlignment', 'label' => __('Alignment', 'accessibility-assistant'), 'icon' => 'alignment-black.webp'],
    ['id' => 'totalAaccLeftAlignment', 'label' => __('Left Alignment', 'accessibility-assistant'), 'icon' => 'left-alignment-black.webp'],
    ['id' => 'totalAaccRightAlignment', 'label' => __('Right Alignment', 'accessibility-assistant'), 'icon' => 'right-alignment-black.webp'],
    ['id' => 'totalAaccReadableFonts', 'label' => __('Readable Fonts', 'accessibility-assistant'), 'icon' => 'readable-fonts-black.webp'],
    ['id' => 'totalAaccReadingMask', 'label' => __('Reading Mask', 'accessibility-assistant'), 'icon' => 'reading-mask-black.webp'],
    ['id' => 'totalAaccHighlightTitles', 'label' => __('Highlight Titles', 'accessibility-assistant'), 'icon' => 'highlight-titles-black.webp'],
    ['id' => 'totalAaccTextMagnifier', 'label' => __('Text Enhancer', 'accessibility-assistant'), 'icon' => 'text-enhancer-black.webp'],
    ['id' => 'totalAaccImageAltTooltip', 'label' => __('Image Alt Tooltip', 'accessibility-assistant'), 'icon' => 'image-alt-tooltip-black.webp'],
    ['id' => 'totalAaccImageHide', 'label' => __('Image Hide', 'accessibility-assistant'), 'icon' => 'image-hide-black.webp'],
    ['id' => 'totalAaccVideoHide', 'label' => __('Video Hide', 'accessibility-assistant'), 'icon' => 'video-hide-black.webp'],
    ['id' => 'totalAaccTextSpeech', 'label' => __('Text Speech', 'accessibility-assistant'), 'icon' => 'text-speech-black.webp'],
    ['id' => 'totalAaccStopAnimation', 'label' => __('Stop Animation', 'accessibility-assistant'), 'icon' => 'stop-animation-black.webp'],
    ['id' => 'totalAaccTextColors', 'label' => __('Adjust Text Colors', 'accessibility-assistant'), 'icon' => 'adjust-text-colors-black.webp'],
    ['id' => 'totalAaccTitleColors', 'label' => __('Adjust Title Colors', 'accessibility-assistant'), 'icon' => 'adjust-title-colors-black.webp'],
    ['id' => 'totalAaccBackgroundColors', 'label' => __('Adjust Background Colors', 'accessibility-assistant'), 'icon' => 'adjust-background-colors-black.webp'],
    ['id' => 'totalAaccMuteSounds', 'label' => __('Mute Sounds', 'accessibility-assistant'), 'icon' => 'mute-sounds-black.webp'],
    ['id' => 'totalAaccGifHide', 'label' => __('Gif Hide', 'accessibility-assistant'), 'icon' => 'gif-hide-black.webp'],
    ['id' => 'totalAaccReadMode', 'label' => __('Read Mode', 'accessibility-assistant'), 'icon' => 'read-mode-black.webp'],
    ['id' => 'totalAaccUsefulLinks', 'label' => __('Useful Links', 'accessibility-assistant'), 'icon' => 'useful-links-black.webp'],
    ['id' => 'totalAaccHighlightHover', 'label' => __('Highlight Hover', 'accessibility-assistant'), 'icon' => 'highlight-hover-black.webp'],
    ['id' => 'totalAaccHighlightFocus', 'label' => __('Highlight Focus', 'accessibility-assistant'), 'icon' => 'highlight-focus-black.webp'],
    ['id' => 'totalAaccBigblackCursor', 'label' => __('Big Black Cursor', 'accessibility-assistant'), 'icon' => 'big-black-cursor-black.webp'],
    ['id' => 'totalAaccProfileSettings', 'label' => __('Profile Options', 'accessibility-assistant'), 'icon' => 'profile-options-black.webp'],
    ['id' => 'totalAaccVoicecommands', 'label' => __('Voice Navigation', 'accessibility-assistant'), 'icon' => 'voice-navigation-black.webp'],
    ['id' => 'totalAaccTalkAndType', 'label' => __('Talk & Type', 'accessibility-assistant'), 'icon' => 'talk-type-black.webp'],
    ['id' => 'totalAaccVirtualKeyboard', 'label' => __('Virtual Keyboard', 'accessibility-assistant'), 'icon' => 'virtual-keyboard-black.webp'],
    ['id' => 'totalAaccFilterContent', 'label' => __('Filter Content', 'accessibility-assistant'), 'icon' => 'filter-content-black.webp'],
];
?>

<div class="loader" style="display: none;"></div>
<div class="cc-aa-user-admin cc-aa-user-admin-analytics-overview-page">
    <div class="cc-aa-user-admin-header d-flex flex-wrap flex-content-space-between">
        <div class="cc-aa-user-admin-header-left d-flex flex-column flex-content-end">
            <h2 class="cc-aa-user-admin-page-title"><?php esc_html_e('Analytics Overview', 'accessibility-assistant'); ?></h2>
        </div>

        <div class="cc-aa-user-admin-header-right">
            <a href="https://accessibilityassistant.com/wordpress-usage-guide/" class="cc-aa-user-admin-squer-button" target="_blank" rel="noopener noreferrer">
                <?php esc_html_e('Usage Guide', 'accessibility-assistant'); ?>
            </a>
        </div>
    </div>

    <div class="cc-aa-user-admin-content">
        <div class="cc-aa-user-admin-card-background cc-aa-user-admin-analytics-overview">
            <div class="cc-aa-user-admin-gray-cards d-grid">
                <div class="cc-aa-user-admin-gray-card d-flex flex-item-center">
                    <div class="cc-aa-user-admin-gray-card-icon-back">
                        <img src="<?php echo esc_url($this->get_admin_image_url('total-accessibility-scans-icon.webp')); ?>" alt="<?php esc_attr_e('Total Accessibility Scans', 'accessibility-assistant'); ?>" width="30" height="30" class="cc-aa-user-admin-gray-card-icon">
                    </div>
                    <div class="cc-aa-user-admin-gray-card-content">
                        <p class="cc-aa-user-admin-gray-card-text font-medium large-text"><?php esc_html_e('Total Accessibility Scans', 'accessibility-assistant'); ?></p>
                        <h4 class="cc-aa-user-admin-gray-card-number font-bold" id="totalCount">0</h4>
                    </div>
                </div>

                <div class="cc-aa-user-admin-gray-card d-flex flex-item-center">
                    <div class="cc-aa-user-admin-gray-card-icon-back">
                        <img src="<?php echo esc_url($this->get_admin_image_url('widget-engagements-icon.webp')); ?>" alt="<?php esc_attr_e('Widget Engagements', 'accessibility-assistant'); ?>" width="30" height="30" class="cc-aa-user-admin-gray-card-icon">
                    </div>
                    <div class="cc-aa-user-admin-gray-card-content">
                        <p class="cc-aa-user-admin-gray-card-text font-medium large-text"><?php esc_html_e('Widget Engagements', 'accessibility-assistant'); ?></p>
                        <h4 class="cc-aa-user-admin-gray-card-number font-bold" id="totalWidgetOpen">0</h4>
                    </div>
                </div>

                <div class="cc-aa-user-admin-gray-card d-flex flex-item-center">
                    <div class="cc-aa-user-admin-gray-card-icon-back">
                        <img src="<?php echo esc_url($this->get_admin_image_url('accessibility-fixes-applied-icon.webp')); ?>" alt="<?php esc_attr_e('Accessibility Fixes Applied', 'accessibility-assistant'); ?>" width="30" height="30" class="cc-aa-user-admin-gray-card-icon">
                    </div>
                    <div class="cc-aa-user-admin-gray-card-content">
                        <p class="cc-aa-user-admin-gray-card-text font-medium large-text"><?php esc_html_e('Accessibility Fixes Applied', 'accessibility-assistant'); ?></p>
                        <h4 class="cc-aa-user-admin-gray-card-number font-bold" id="totalEventsClick">0</h4>
                    </div>
                </div>
            </div>
        </div>

        <div class="cc-aa-user-admin-card-background cc-aa-user-admin-chart-container">
            <div class="cc-aa-user-admin-card-header d-flex flex-content-space-between flex-item-center flex-wrap">
                <h4 class="cc-aa-user-admin-card-title"><?php esc_html_e('Accessibility Usage Insights', 'accessibility-assistant'); ?></h4>
                <div class="cc-aa-user-admin-chart-controls">
                    <select id="accessibility_usage_insights_rangeSelector" class="cc-aa-user-admin-form-select">
                        <option value="7d"><?php esc_html_e('Last 7 Days', 'accessibility-assistant'); ?></option>
                        <option value="30d"><?php esc_html_e('Last 30 Days', 'accessibility-assistant'); ?></option>
                        <option value="this_month"><?php esc_html_e('This Month', 'accessibility-assistant'); ?></option>
                        <option value="last_month"><?php esc_html_e('Last Month', 'accessibility-assistant'); ?></option>
                    </select>
                    <div id="reportrange-sec" class="reportrange cc-aa-user-admin-none">
                        <i class="fa fa-calendar"></i>
                        <span></span>
                    </div>
                </div>
            </div>

            <div class="cc-aa-user-admin-chart-legend" id="customLegend">
                <div class="cc-aa-user-admin-chart-legend-item" data-dataset="0">
                    <span class="cc-aa-user-admin-chart-legend-item-dot purple"></span>
                    <?php esc_html_e('Widget Opens', 'accessibility-assistant'); ?>
                </div>
                <div class="cc-aa-user-admin-chart-legend-item" data-dataset="1">
                    <span class="cc-aa-user-admin-chart-legend-item-dot pink"></span>
                    <?php esc_html_e('Events Clicked', 'accessibility-assistant'); ?>
                </div>
            </div>

            <canvas id="myLineChart" height="500"></canvas>
        </div>

        <div class="cc-aa-user-admin-card-background cc-aa-user-admin-activity-highlights">
            <h4 class="cc-aa-user-admin-card-title"><?php esc_html_e('Feature Activity Highlights', 'accessibility-assistant'); ?></h4>
            <div class="cc-aa-user-admin-gray-cards d-grid grid-column-4">
                <?php foreach ($feature_cards as $feature_card) : ?>
                    <div class="cc-aa-user-admin-gray-card d-flex flex-item-center">
                        <div class="cc-aa-user-admin-gray-card-icon-back">
                            <img src="<?php echo esc_url($this->get_admin_image_url($feature_card['icon'])); ?>" alt="<?php echo esc_attr($feature_card['label']); ?>" width="30" height="30" class="cc-aa-user-admin-gray-card-icon">
                        </div>
                        <div class="cc-aa-user-admin-gray-card-content">
                            <p class="cc-aa-user-admin-gray-card-text font-medium large-text"><?php echo esc_html($feature_card['label']); ?></p>
                            <h4 class="cc-aa-user-admin-gray-card-number font-bold" id="<?php echo esc_attr($feature_card['id']); ?>">0</h4>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>

    <div class="cc-aa-user-admin-footer font-medium large-text">
        <?php
        printf(
            esc_html__('Have questions or need assistance? %s', 'accessibility-assistant'),
            '<a href="' . esc_url('https://accessibilityassistant.com/report-a-problem/') . '" target="_blank" rel="noopener noreferrer">' . esc_html__('Contact Us', 'accessibility-assistant') . '</a>'
        );
        ?>
    </div>
</div>