<?php
/**
 * Analytics Page
 *
 * @package ReplyIt_Chat_Widget
 */

// Exit if accessed directly
if (!defined('ABSPATH')) {
    exit;
}

$widget_id = get_option('replyit_widget_id', '');
$api_secret = get_option('replyit_api_secret', '');
$api_url = get_option('replyit_api_url', 'https://replyit.ai');

// Check if configured
if (empty($widget_id) || empty($api_secret)) {
    ?>
    <div class="wrap">
        <h1><?php esc_html_e('Analytics', 'replyit-chat-widget'); ?></h1>
        <div class="notice notice-warning">
            <p>
                <?php esc_html_e('Please configure your widget settings first.', 'replyit-chat-widget'); ?>
                <a href="<?php echo esc_url( admin_url('options-general.php?page=replyit-chat-settings') ); ?>">
                    <?php esc_html_e('Go to Settings', 'replyit-chat-widget'); ?>
                </a>
            </p>
        </div>
    </div>
    <?php
    return;
}

// Get selected period
$period = isset($_GET['period']) ? intval($_GET['period']) : 30;
?>

<div class="wrap">
    <h1><?php esc_html_e('Widget Analytics', 'replyit-chat-widget'); ?></h1>

    <!-- Period Selector -->
    <div class="replyit-analytics-header">
        <div class="replyit-period-selector">
            <label><?php esc_html_e('Time Period:', 'replyit-chat-widget'); ?></label>
            <select id="replyit-analytics-period" onchange="window.location.href='?page=replyit-chat-analytics&period='+this.value">
                <option value="7" <?php selected($period, 7); ?>><?php esc_html_e('Last 7 Days', 'replyit-chat-widget'); ?></option>
                <option value="30" <?php selected($period, 30); ?>><?php esc_html_e('Last 30 Days', 'replyit-chat-widget'); ?></option>
                <option value="90" <?php selected($period, 90); ?>><?php esc_html_e('Last 90 Days', 'replyit-chat-widget'); ?></option>
            </select>
        </div>
        <button class="button" id="replyit-refresh-analytics">
            <span class="dashicons dashicons-update"></span>
            <?php esc_html_e('Refresh', 'replyit-chat-widget'); ?>
        </button>
    </div>

    <!-- Loading State -->
    <div id="replyit-analytics-loading" class="replyit-analytics-loading">
        <div class="spinner is-active"></div>
        <p><?php esc_html_e('Loading analytics...', 'replyit-chat-widget'); ?></p>
    </div>

    <!-- Analytics Content -->
    <div id="replyit-analytics-content" class="replyit-analytics-content" style="display: none;">

        <!-- Summary Cards -->
        <div class="replyit-stats-grid">
            <div class="replyit-stat-card">
                <div class="replyit-stat-icon">
                    <span class="dashicons dashicons-admin-comments"></span>
                </div>
                <div class="replyit-stat-content">
                    <h3 id="stat-total-conversations">-</h3>
                    <p><?php esc_html_e('Total Conversations', 'replyit-chat-widget'); ?></p>
                </div>
            </div>

            <div class="replyit-stat-card">
                <div class="replyit-stat-icon">
                    <span class="dashicons dashicons-email"></span>
                </div>
                <div class="replyit-stat-content">
                    <h3 id="stat-total-messages">-</h3>
                    <p><?php esc_html_e('Total Messages', 'replyit-chat-widget'); ?></p>
                </div>
            </div>

            <div class="replyit-stat-card">
                <div class="replyit-stat-icon">
                    <span class="dashicons dashicons-download"></span>
                </div>
                <div class="replyit-stat-content">
                    <h3 id="stat-inbound-messages">-</h3>
                    <p><?php esc_html_e('Inbound Messages', 'replyit-chat-widget'); ?></p>
                </div>
            </div>

            <div class="replyit-stat-card">
                <div class="replyit-stat-icon">
                    <span class="dashicons dashicons-upload"></span>
                </div>
                <div class="replyit-stat-content">
                    <h3 id="stat-outbound-messages">-</h3>
                    <p><?php esc_html_e('Outbound Messages', 'replyit-chat-widget'); ?></p>
                </div>
            </div>
        </div>

        <!-- Chart -->
        <div class="replyit-chart-container">
            <h2><?php esc_html_e('Message Activity', 'replyit-chat-widget'); ?></h2>
            <canvas id="replyit-messages-chart"></canvas>
        </div>

        <!-- Recent Conversations -->
        <div class="replyit-recent-conversations">
            <h2><?php esc_html_e('Recent Conversations', 'replyit-chat-widget'); ?></h2>
            <table class="wp-list-table widefat fixed striped">
                <thead>
                    <tr>
                        <th><?php esc_html_e('Session ID', 'replyit-chat-widget'); ?></th>
                        <th><?php esc_html_e('Last Message', 'replyit-chat-widget'); ?></th>
                        <th><?php esc_html_e('Messages', 'replyit-chat-widget'); ?></th>
                        <th><?php esc_html_e('Last Activity', 'replyit-chat-widget'); ?></th>
                    </tr>
                </thead>
                <tbody id="replyit-conversations-table">
                    <tr>
                        <td colspan="4" class="text-center"><?php esc_html_e('Loading...', 'replyit-chat-widget'); ?></td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>

    <!-- Error State -->
    <div id="replyit-analytics-error" class="notice notice-error" style="display: none;">
        <p id="replyit-analytics-error-message"></p>
    </div>
</div>

