<?php
/**
 * @package     jsvisit_counter
 * @subpackage  tmpl
 * @author      Google Agent
 * @license     GNU/GPL
 */

// no direct access
defined('_JEXEC') or die();

use Joomla\CMS\Uri\Uri;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Factory;

// Load Modern CSS
$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
// dependent on where the file is actually located, we might need to adjust this path
// mimicking existing logic: media/mod_jsvisit_counter/css/modern.css
$wa->registerAndUseStyle("jsvisit-modern", "media/mod_jsvisit_counter/css/modern.css");

$flag_dir = URI::base() . "media/mod_jsvisit_counter/flags/";
?>

<div class="jsvisit-modern-card jsvisit-animate <?php echo htmlspecialchars($moduleclass_sfx); ?>">

    <div class="jsvisit-header">
        <?php if ($totals): ?>
            <!-- Total Counter as Headline -->
            <span class="jsvisit-total-counter count-animate"><?php echo $totals; ?></span>
            <span class="jsvisit-total-label"><?php echo Text::_('MOD_JSVISIT_COUNTER_TOTAL'); ?></span>
        <?php endif; ?>

        <div style="margin-top: 10px;">
            <!-- Main Graphic Counter -->
            <?php echo $counter; ?>
        </div>
    </div>

    <div class="jsvisit-stats-grid">
        <?php if ($today): ?>
            <div class="jsvisit-stat-item">
                <span class="jsvisit-stat-value count-animate"><?php echo $today; ?></span>
                <span class="jsvisit-stat-label"><?php echo Text::_('MOD_JSVISIT_COUNTER_TODAY'); ?></span>
            </div>
        <?php endif; ?>

        <?php if ($yesterday): ?>
            <div class="jsvisit-stat-item">
                <span class="jsvisit-stat-value count-animate"><?php echo $yesterday; ?></span>
                <span class="jsvisit-stat-label"><?php echo Text::_('MOD_JSVISIT_COUNTER_YESTERDAY'); ?></span>
            </div>
        <?php endif; ?>

        <?php if ($this_week): ?>
            <div class="jsvisit-stat-item">
                <span class="jsvisit-stat-value count-animate"><?php echo $this_week; ?></span>
                <span class="jsvisit-stat-label"><?php echo Text::_('MOD_JSVISIT_COUNTER_THIS_WEEK'); ?></span>
            </div>
        <?php endif; ?>

        <?php if ($last_week): ?>
            <div class="jsvisit-stat-item">
                <span class="jsvisit-stat-value count-animate"><?php echo $last_week; ?></span>
                <span class="jsvisit-stat-label"><?php echo Text::_('MOD_JSVISIT_COUNTER_LAST_WEEK'); ?></span>
            </div>
        <?php endif; ?>

        <?php if ($this_month): ?>
            <div class="jsvisit-stat-item">
                <span class="jsvisit-stat-value count-animate"><?php echo $this_month; ?></span>
                <span class="jsvisit-stat-label"><?php echo Text::_('MOD_JSVISIT_COUNTER_THIS_MONTH'); ?></span>
            </div>
        <?php endif; ?>

        <?php if ($last_month): ?>
            <div class="jsvisit-stat-item">
                <span class="jsvisit-stat-value count-animate"><?php echo $last_month; ?></span>
                <span class="jsvisit-stat-label"><?php echo Text::_('MOD_JSVISIT_COUNTER_LAST_MONTH'); ?></span>
            </div>
        <?php endif; ?>

        <?php if ($this_year): ?>
            <div class="jsvisit-stat-item">
                <span class="jsvisit-stat-value count-animate"><?php echo $this_year; ?></span>
                <span class="jsvisit-stat-label"><?php echo Text::_('MOD_JSVISIT_COUNTER_THIS_YEAR'); ?></span>
            </div>
        <?php endif; ?>

        <?php if ($last_year): ?>
            <div class="jsvisit-stat-item">
                <span class="jsvisit-stat-value count-animate"><?php echo $last_year; ?></span>
                <span class="jsvisit-stat-label"><?php echo Text::_('MOD_JSVISIT_COUNTER_LAST_YEAR'); ?></span>
            </div>
        <?php endif; ?>
    </div>

    <?php if (count($countries)): ?>
        <div class="jsvisit-countries-list">
            <?php foreach ($countries as $country): ?>
                <div class="jsvisit-country-row">
                    <div class="jsvisit-country-info">
                        <img class="jsvisit-flag-img" src="<?php echo $flag_dir . $country['flag']; ?>"
                            alt="<?php echo Text::_($country['name']); ?>" title="<?php echo $country['count']; ?> Visitors">
                        <span class="jsvisit-country-name"><?php echo Text::_($country['name']); ?></span>
                    </div>
                    <div class="jsvisit-country-stats">
                        <span class="count-animate"><?php echo $country['count']; ?></span> (<?php echo $country['percent']; ?>)
                    </div>
                </div>
            <?php endforeach; ?>

            <div class="jsvisit-country-row" style="margin-top: 5px; border-top: 1px dashed #e5e7eb;">
                <div class="jsvisit-country-info">
                    <strong><?php echo Text::_('MOD_JSVISIT_COUNTER_TOTAL'); ?>:</strong>
                </div>
                <div class="jsvisit-country-stats">
                    <strong><?php echo $total_countries; ?></strong>
                    <?php echo ($total_countries > 1) ? Text::_('MOD_JSVISIT_COUNTER_COUNTRIES') : Text::_('MOD_JSVISIT_COUNTER_COUNTRY'); ?>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <?php if (!empty($recent_visitors)): ?>
        <div class="jsvisit-header" style="margin-top: 20px; border-bottom: none; padding-bottom: 5px;">
            <span
                class="jsvisit-total-label"><?php echo Text::_('MOD_JSVISIT_COUNTER_RECENT_VISITORS_LABEL') ?: 'Recent Visitors'; ?></span>
        </div>
        <div class="jsvisit-countries-list">
            <div class="jsvisit-country-row" style="background: #eee; font-weight: bold; font-size: 0.8rem;">
                <span style="flex:1">IP</span>
                <span style="flex:1; text-align:right">Time</span>
            </div>
            <?php foreach ($recent_visitors as $visitor): ?>
                <div class="jsvisit-country-row">
                    <span
                        style="flex:1; font-family: monospace; font-size: 0.85rem;"><?php echo htmlspecialchars($visitor->ip); ?></span>
                    <span style="flex:1; text-align:right; font-size: 0.8rem; color: #6b7280;">
                        <?php echo date('H:i', strtotime($visitor->visit_time)); ?>
                        <!-- <small><?php echo date('d/m', strtotime($visitor->visit_time)); ?></small> -->
                    </span>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const animateValue = (obj, start, end, duration) => {
            let startTimestamp = null;
            const step = (timestamp) => {
                if (!startTimestamp) startTimestamp = timestamp;
                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                obj.innerHTML = Math.floor(progress * (end - start) + start).toLocaleString();
                if (progress < 1) {
                    window.requestAnimationFrame(step);
                } else {
                    obj.innerHTML = end.toLocaleString();
                }
            };
            window.requestAnimationFrame(step);
        }

        const elements = document.querySelectorAll('.count-animate');
        elements.forEach(el => {
            // Try to parse number, remove commas/dots
            const text = el.innerText;
            const number = parseInt(text.replace(/[\.,\s]/g, ''), 10);

            if (!isNaN(number) && number > 0) {
                animateValue(el, 0, number, 1500);
            }
        });
    });
</script>