<?php defined( 'ABSPATH' ) || exit; ?>

<div class="tailwind-scope p-8 bg-gray-50 min-h-screen">
    <?php require PageVICO_PLUGIN_DIR . 'templates/header.php'; ?>

    <main class="space-y-8">
        <section class="flex flex-col gap-2">
            <div>
                <p class="text-xs font-semibold uppercase tracking-widest text-[#ff3c00]">
                    <?php esc_html_e( 'Analytics Dashboard', 'page-visit-counter-analytics' ); ?>
                </p>
                <h1 class="text-3xl font-semibold text-gray-900">
                    <?php esc_html_e( 'Analytics Overview', 'page-visit-counter-analytics' ); ?>
                </h1>
            </div>
            <p class="text-sm text-gray-500">
                <?php esc_html_e( 'Modern overview of your visit trends and audience insights.', 'page-visit-counter-analytics' ); ?>
            </p>
        </section>

        <section class="space-y-6">
            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
                <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-6">
                    <p class="text-sm text-gray-500 uppercase tracking-wide">
                        <?php esc_html_e( 'All Time Pageviews', 'page-visit-counter-analytics' ); ?>
                    </p>
                    <p class="mt-3 text-3xl font-bold text-gray-900">
                        <?php echo esc_html( \PageVICO\Utils\NumberFormatter::formatShort( PageVICO\Admin\AdminPage::getAllTimePageviews() ) ); ?>
                    </p>
                    <p class="mt-2 text-xs text-gray-400">
                        <?php esc_html_e( 'Today', 'page-visit-counter-analytics' ); ?>:
                        <?php echo esc_html( \PageVICO\Utils\NumberFormatter::formatShort( PageVICO\Admin\AdminPage::getTodayPageviews() ) ); ?>
                    </p>
                </div>

                <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-6">
                    <p class="text-sm text-gray-500 uppercase tracking-wide">
                        <?php esc_html_e( 'All Time Sessions', 'page-visit-counter-analytics' ); ?>
                    </p>
                    <p class="mt-3 text-3xl font-bold text-gray-900">
                        <?php echo esc_html( \PageVICO\Utils\NumberFormatter::formatShort( PageVICO\Admin\AdminPage::getAllTimeSessions() ) ); ?>
                    </p>
                    <p class="mt-2 text-xs text-gray-400">
                        <?php esc_html_e( 'Today', 'page-visit-counter-analytics' ); ?>:
                        <?php echo esc_html( \PageVICO\Utils\NumberFormatter::formatShort( PageVICO\Admin\AdminPage::getTodaySessions() ) ); ?>
                    </p>
                </div>

                <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-6">
                    <p class="text-sm text-gray-500 uppercase tracking-wide">
                        <?php esc_html_e( 'Real-Time Visitors', 'page-visit-counter-analytics' ); ?>
                    </p>
                    <p class="mt-3 text-3xl font-bold text-gray-900" id="pagevico-realtime-count">0</p>
                    <p class="mt-2 text-xs text-gray-400">
                        <?php esc_html_e( 'Active Now', 'page-visit-counter-analytics' ); ?>
                    </p>
                </div>

                <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-6">
                    <p class="text-sm text-gray-500 uppercase tracking-wide">
                        <?php esc_html_e( 'Pageviews per Visitor', 'page-visit-counter-analytics' ); ?>
                    </p>
                    <p class="mt-3 text-3xl font-bold text-gray-900">
                        <?php
                        $visitors  = PageVICO\Admin\AdminPage::getTodaySessions();
                        $pageviews = PageVICO\Admin\AdminPage::getTodayPageviews();
                        echo esc_html( \PageVICO\Utils\NumberFormatter::formatDecimal( $visitors > 0 ? $pageviews / $visitors : 0, 1 ) );
                        ?>
                    </p>
                    <p class="mt-2 text-xs text-gray-400">
                        <?php esc_html_e( 'Today', 'page-visit-counter-analytics' ); ?>
                    </p>
                </div>

                <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-6">
                    <p class="text-sm text-gray-500 uppercase tracking-wide">
                        <?php esc_html_e( 'Today\'s Pageviews', 'page-visit-counter-analytics' ); ?>
                    </p>
                    <p class="mt-3 text-3xl font-bold text-gray-900">
                        <?php echo esc_html( \PageVICO\Utils\NumberFormatter::formatShort( PageVICO\Admin\AdminPage::getTodayPageviews() ) ); ?>
                    </p>
                    <p class="mt-2 text-xs text-gray-400">
                        <?php esc_html_e( 'Last 24 Hours', 'page-visit-counter-analytics' ); ?>
                    </p>
                </div>

                <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-6">
                    <p class="text-sm text-gray-500 uppercase tracking-wide">
                        <?php esc_html_e( 'Avg. Session Duration', 'page-visit-counter-analytics' ); ?>
                    </p>
                    <p class="mt-3 text-3xl font-bold text-gray-900">
                        <?php
                        $avg_duration = PageVICO\Admin\AdminPage::getAverageSessionDuration();
                        echo esc_html( \PageVICO\Utils\NumberFormatter::formatDuration( $avg_duration ) );
                        ?>
                    </p>
                    <p class="mt-2 text-xs text-gray-400">
                        <?php esc_html_e( 'Today', 'page-visit-counter-analytics' ); ?>
                    </p>
                </div>

                <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-6">
                    <p class="text-sm text-gray-500 uppercase tracking-wide">
                        <?php esc_html_e( 'Bounce Rate', 'page-visit-counter-analytics' ); ?>
                    </p>
                    <p class="mt-3 text-3xl font-bold text-gray-900">
                        <?php
                        $bounce_rate = PageVICO\Admin\AdminPage::getBounceRate();
                        echo esc_html( \PageVICO\Utils\NumberFormatter::formatPercentage( $bounce_rate ) );
                        ?>
                    </p>
                    <p class="mt-2 text-xs text-gray-400">
                        <?php esc_html_e( 'Today', 'page-visit-counter-analytics' ); ?>
                    </p>
                </div>

                <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-6">
                    <p class="text-sm text-gray-500 uppercase tracking-wide">
                        <?php esc_html_e( 'Countries Reached', 'page-visit-counter-analytics' ); ?>
                    </p>
                    <p class="mt-3 text-3xl font-bold text-gray-900">
                        <?php echo esc_html( PageVICO\Admin\AdminPage::getCountriesCount() ); ?>
                    </p>
                    <p class="mt-2 text-xs text-gray-400">
                        <?php esc_html_e( 'Global Presence', 'page-visit-counter-analytics' ); ?>
                    </p>
                </div>
            </div>

            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                <?php do_action( 'pagevico_dashboard_content_stats_widgets' ); ?>
            </div>
        </section>

        <section class="grid grid-cols-1 gap-6">
            <div class="bg-white border border-gray-200 shadow-sm rounded-lg p-6">
                <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <p class="text-xs uppercase tracking-wide text-gray-500">
                            <?php esc_html_e( 'Traffic Overview', 'page-visit-counter-analytics' ); ?>
                        </p>
                        <h2 class="text-xl font-semibold text-gray-900">
                            <?php esc_html_e( 'Traffic Trends', 'page-visit-counter-analytics' ); ?>
                        </h2>
                    </div>
                    <span class="text-xs font-semibold uppercase tracking-wider" style="color:#ff3c00;">
                        <?php esc_html_e( 'Last 7 days', 'page-visit-counter-analytics' ); ?>
                    </span>
                </div>
                <div class="mt-6 h-72">
                    <canvas id="pagevicoPageviewsChart"></canvas>
                </div>
            </div>
        </section>

        <section class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            <div class="bg-white border border-gray-200 shadow-sm rounded-lg p-6 flex flex-col gap-4">
                <div>
                    <p class="text-xs uppercase tracking-wide text-gray-500">
                        <?php esc_html_e( 'Realtime Activity', 'page-visit-counter-analytics' ); ?>
                    </p>
                    <h2 class="text-lg font-semibold text-gray-900">
                        <?php esc_html_e( 'Live Visitors', 'page-visit-counter-analytics' ); ?>
                    </h2>
                </div>
                <div class="h-60">
                    <canvas id="pagevicoRealtimeChart"></canvas>
                </div>
                <p class="text-xs text-gray-500">
                    <?php esc_html_e( 'Showing activity in the last 5 minutes, updates every 10 seconds', 'page-visit-counter-analytics' ); ?>
                </p>
            </div>

            <div class="bg-white border border-gray-200 shadow-sm rounded-lg p-6 space-y-6">
                <div>
                    <p class="text-xs uppercase tracking-wide text-gray-500">
                        <?php esc_html_e( 'Visitor Analytics', 'page-visit-counter-analytics' ); ?>
                    </p>
                    <h2 class="text-lg font-semibold text-gray-900">
                        <?php esc_html_e( 'Audience Snapshot', 'page-visit-counter-analytics' ); ?>
                    </h2>
                </div>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4">
                        <p class="text-xs uppercase tracking-wide text-gray-500">
                            <?php esc_html_e( 'Top Country', 'page-visit-counter-analytics' ); ?>
                        </p>
                        <p class="mt-2 text-2xl font-semibold text-gray-900">
                            <?php $top_country = PageVICO\Admin\AdminPage::getTopCountries(); ?>
                            <?php echo ! empty( $top_country ) ? esc_html( $top_country[0]['country'] ) : esc_html__( 'Unknown', 'page-visit-counter-analytics' ); ?>
                        </p>
                        <p class="text-sm text-gray-500">
                            <?php echo ! empty( $top_country ) ? esc_html( $top_country[0]['total'] ) : '0'; ?>
                            <?php esc_html_e( 'Sessions', 'page-visit-counter-analytics' ); ?>
                        </p>
                    </div>
                    <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4">
                        <p class="text-xs uppercase tracking-wide text-gray-500">
                            <?php esc_html_e( 'Top Device', 'page-visit-counter-analytics' ); ?>
                        </p>
                        <p class="mt-2 text-2xl font-semibold text-gray-900">
                            <?php $top_device = PageVICO\Admin\AdminPage::getTopDevices(); ?>
                            <?php echo ! empty( $top_device ) ? esc_html( ucfirst( $top_device[0]['device_type'] ?: 'Unknown' ) ) : esc_html__( 'Unknown', 'page-visit-counter-analytics' ); ?>
                        </p>
                        <p class="text-sm text-gray-500">
                            <?php echo ! empty( $top_device ) ? esc_html( $top_device[0]['total'] ) : '0'; ?>
                            <?php esc_html_e( 'Sessions', 'page-visit-counter-analytics' ); ?>
                        </p>
                    </div>
                    <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4">
                        <p class="text-xs uppercase tracking-wide text-gray-500">
                            <?php esc_html_e( 'Top Browser', 'page-visit-counter-analytics' ); ?>
                        </p>
                        <p class="mt-2 text-2xl font-semibold text-gray-900">
                            <?php $top_browser = PageVICO\Admin\AdminPage::getTopBrowsers(); ?>
                            <?php echo ! empty( $top_browser ) ? esc_html( $top_browser[0]['browser'] ) : esc_html__( 'Unknown', 'page-visit-counter-analytics' ); ?>
                        </p>
                        <p class="text-sm text-gray-500">
                            <?php echo ! empty( $top_browser ) ? esc_html( $top_browser[0]['total'] ) : '0'; ?>
                            <?php esc_html_e( 'Sessions', 'page-visit-counter-analytics' ); ?>
                        </p>
                    </div>
                </div>

                <div class="space-y-5">
                    <div class="space-y-3">
                        <div class="flex items-center justify-between">
                            <p class="text-sm font-semibold text-gray-700">
                                <?php esc_html_e( 'Top 5 Countries', 'page-visit-counter-analytics' ); ?>
                            </p>
                        </div>
                        <?php $countries = array_slice( PageVICO\Admin\AdminPage::getTopCountries(), 0, 5 ); $max = ! empty( $countries ) ? $countries[0]['total'] : 1; ?>
                        <div class="space-y-2">
                            <?php foreach ( $countries as $row ) : ?>
                                <div class="flex items-center gap-3">
                                    <span class="w-28 text-sm text-gray-600">
                                        <?php echo esc_html( $row['country'] ); ?>
                                    </span>
                                    <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                                        <div class="h-full" style="background:#ff3c00;width: <?php echo esc_attr( round( ( $row['total'] / $max ) * 100 ) ); ?>%;"></div>
                                    </div>
                                    <span class="text-sm font-semibold text-gray-900">
                                        <?php echo esc_html( $row['total'] ); ?>
                                    </span>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>

                    <div class="space-y-3">
                        <div class="flex items-center justify-between">
                            <p class="text-sm font-semibold text-gray-700">
                                <?php esc_html_e( 'Top 5 Devices', 'page-visit-counter-analytics' ); ?>
                            </p>
                        </div>
                        <?php $devices = array_slice( PageVICO\Admin\AdminPage::getTopDevices(), 0, 5 ); $max = ! empty( $devices ) ? $devices[0]['total'] : 1; ?>
                        <div class="space-y-2">
                            <?php foreach ( $devices as $row ) : ?>
                                <div class="flex items-center gap-3">
                                    <span class="w-28 text-sm text-gray-600">
                                        <?php echo esc_html( ucfirst( $row['device_type'] ?: 'Unknown' ) ); ?>
                                    </span>
                                    <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                                        <div class="h-full" style="background:#ff3c00;width: <?php echo esc_attr( round( ( $row['total'] / $max ) * 100 ) ); ?>%;"></div>
                                    </div>
                                    <span class="text-sm font-semibold text-gray-900">
                                        <?php echo esc_html( $row['total'] ); ?>
                                    </span>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>

                    <div class="space-y-3">
                        <div class="flex items-center justify-between">
                            <p class="text-sm font-semibold text-gray-700">
                                <?php esc_html_e( 'Top 5 Browsers', 'page-visit-counter-analytics' ); ?>
                            </p>
                        </div>
                        <?php $browsers = array_slice( PageVICO\Admin\AdminPage::getTopBrowsers(), 0, 5 ); $max = ! empty( $browsers ) ? $browsers[0]['total'] : 1; ?>
                        <div class="space-y-2">
                            <?php foreach ( $browsers as $row ) : ?>
                                <div class="flex items-center gap-3">
                                    <span class="w-28 text-sm text-gray-600">
                                        <?php echo esc_html( $row['browser'] ?: 'Unknown' ); ?>
                                    </span>
                                    <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                                        <div class="h-full" style="background:#ff3c00;width: <?php echo esc_attr( round( ( $row['total'] / $max ) * 100 ) ); ?>%;"></div>
                                    </div>
                                    <span class="text-sm font-semibold text-gray-900">
                                        <?php echo esc_html( $row['total'] ); ?>
                                    </span>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="grid grid-cols-1 gap-6 ">
            <?php do_action( 'pagevico_dashboard_pro_features' ); ?>
        </section>
    </main>

    <?php require PageVICO_PLUGIN_DIR . 'templates/footer.php'; ?>
</div>
