<div class="ads">
    <?= $settings['dashboard_top_ad'] ?>
</div>

<style>
/* ===== Activity History — ledger redesign ===== */
.ah-wrap{
    background:var(--surface);border:1px solid var(--line);border-radius:20px;
    overflow:hidden;position:relative;
}
.ah-wrap::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent, var(--acc-cyan,#22D3EE) 20%, var(--acc-indigo,#6366F1) 55%, transparent 85%);
    opacity:.6;
}
.ah-body{padding:28px 26px 24px;}

/* header */
.ah-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px;}
.ah-eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--text-dim);text-transform:uppercase;margin-bottom:6px;}
.ah-title{
    font-family:var(--font-display,inherit);font-size:24px;color:var(--text);margin:0;
    display:flex;align-items:center;gap:10px;
}
.ah-title .ah-icon{
    width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
    font-size:14px;color:#04101a;background:linear-gradient(135deg, var(--acc-cyan,#22D3EE), var(--acc-indigo,#6366F1));
}
.ah-search{position:relative;}
.ah-search input{
    background:var(--surface-2);border:1px solid var(--line);border-radius:11px;
    padding:9px 14px 9px 36px;font-size:13px;color:var(--text);min-width:220px;outline:none;
    transition:border-color .15s ease;
}
.ah-search input:focus{border-color:var(--acc-cyan,#22D3EE);}
.ah-search i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-dim);font-size:12px;}

/* summary strip */
.ah-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px;}
.ah-stat{
    background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
    display:flex;align-items:center;gap:12px;
}
.ah-stat .ah-stat-ic{
    width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;
}
.ah-stat .ah-stat-num{font-family:var(--font-mono,monospace);font-weight:700;font-size:16px;color:var(--text);line-height:1.1;}
.ah-stat .ah-stat-lbl{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}

/* segmented filter control */
.ah-filters{
    display:inline-flex;gap:4px;padding:4px;background:var(--surface-2);border:1px solid var(--line);
    border-radius:13px;margin-bottom:20px;
}
.ah-filters .nav-item{list-style:none;}
.ah-filters .nav-link{
    border:none !important;background:transparent !important;color:var(--text-dim) !important;
    font-weight:700;font-size:12.5px;letter-spacing:.02em;border-radius:9px !important;
    padding:9px 16px !important;display:flex;align-items:center;gap:7px;transition:all .15s ease;
}
.ah-filters .nav-link i{font-size:12px;}
.ah-filters .nav-link:hover{color:var(--text) !important;}
.ah-filters .nav-link.active{color:#04101a !important;background:linear-gradient(120deg,var(--acc-cyan,#22D3EE),var(--acc-indigo,#6366F1)) !important;}

/* feed */
.ah-feed{display:flex;flex-direction:column;gap:8px;}
.ah-row{
    display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:14px;
    padding:12px 14px;border-radius:13px;border:1px solid transparent;background:var(--surface-2);
    transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.ah-row:hover{border-color:var(--line);transform:translateX(2px);}
.ah-avatar{
    width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;
}
.ah-main{min-width:0;}
.ah-name{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ah-meta{font-size:11.5px;color:var(--text-dim);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ah-meta .sep{opacity:.5;}
.ah-side{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.ah-amount{font-family:var(--font-mono,monospace);font-weight:700;font-size:14px;color:var(--acc-emerald,#34D399);white-space:nowrap;}
.ah-id{font-family:var(--font-mono,monospace);font-size:10.5px;color:var(--text-dim);opacity:.7;}

/* status pills (kept) */
.st-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:999px;font-size:11px;font-weight:700;}
.st-pill.ok{background:var(--acc-emerald-dim,rgba(52,211,153,.14));color:var(--acc-emerald,#34D399);}
.st-pill.pending{background:var(--acc-amber-dim,rgba(251,191,36,.14));color:var(--acc-amber,#FBBF24);}
.st-pill.bad{background:var(--acc-rose-dim,rgba(251,113,133,.14));color:var(--acc-rose,#FB7185);}
.st-pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

/* per-category avatar tints */
.ah-avatar.tasks{background:var(--acc-indigo-dim,rgba(99,102,241,.14));color:var(--acc-indigo,#6366F1);}
.ah-avatar.lottery{background:var(--acc-amber-dim,rgba(251,191,36,.14));color:var(--acc-amber,#FBBF24);}
.ah-avatar.offerwall{background:var(--acc-cyan-dim,rgba(34,211,238,.14));color:var(--acc-cyan,#22D3EE);}
.ah-avatar.withdrawals{background:var(--acc-emerald-dim,rgba(52,211,153,.14));color:var(--acc-emerald,#34D399);}

/* empty state */
.ah-empty{text-align:center;padding:46px 16px;color:var(--text-dim);font-size:13.5px;}
.ah-empty .ah-empty-ic{
    width:52px;height:52px;border-radius:14px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
    background:var(--surface-2);border:1px solid var(--line);font-size:20px;color:var(--acc-cyan,#22D3EE);opacity:.85;
}

@media (max-width:768px){
    .ah-stats{grid-template-columns:repeat(2,1fr);}
    .ah-row{grid-template-columns:36px 1fr auto;}
    .ah-search input{min-width:0;width:100%;}
}
</style>

<?php
// --- lightweight totals for the summary strip ---
$ah_task_count   = count($task_history);
$ah_task_total   = array_sum(array_column($task_history, 'usd_reward'));
$ah_lottery_count = count($lottery_history);
$ah_offerwall_count = count($offerwall_history);
$ah_withdrawal_total = array_sum(array_column($withdrawals_history, 'amount'));
?>

<div class="row">
    <div class="col-lg-12">
        <div class="ah-wrap">
            <div class="ah-body">

                <div class="ah-head">
                    <div>
                        <div class="ah-eyebrow">Your account</div>
                        <h4 class="ah-title"><span class="ah-icon"><i class="fas fa-history"></i></span> Activity History</h4>
                    </div>
                    <div class="ah-search">
                        <i class="fas fa-search"></i>
                        <input type="text" id="ahSearch" placeholder="Search this list…">
                    </div>
                </div>

                <?php
                if (isset($_SESSION['message'])) {
                    echo $_SESSION['message'];
                } ?>

                <div class="ah-stats">
                    <div class="ah-stat">
                        <div class="ah-stat-ic" style="background:var(--acc-indigo-dim,rgba(99,102,241,.14));color:var(--acc-indigo,#6366F1);"><i class="fas fa-tasks"></i></div>
                        <div>
                            <div class="ah-stat-num"><?= $ah_task_count ?></div>
                            <div class="ah-stat-lbl">Tasks Done</div>
                        </div>
                    </div>
                    <div class="ah-stat">
                        <div class="ah-stat-ic" style="background:var(--acc-amber-dim,rgba(251,191,36,.14));color:var(--acc-amber,#FBBF24);"><i class="fas fa-ticket-alt"></i></div>
                        <div>
                            <div class="ah-stat-num"><?= $ah_lottery_count ?></div>
                            <div class="ah-stat-lbl">Lottery Entries</div>
                        </div>
                    </div>
                    <div class="ah-stat">
                        <div class="ah-stat-ic" style="background:var(--acc-cyan-dim,rgba(34,211,238,.14));color:var(--acc-cyan,#22D3EE);"><i class="far fa-newspaper"></i></div>
                        <div>
                            <div class="ah-stat-num"><?= $ah_offerwall_count ?></div>
                            <div class="ah-stat-lbl">Offerwall Actions</div>
                        </div>
                    </div>
                    <div class="ah-stat">
                        <div class="ah-stat-ic" style="background:var(--acc-emerald-dim,rgba(52,211,153,.14));color:var(--acc-emerald,#34D399);"><i class="fas fa-download"></i></div>
                        <div>
                            <div class="ah-stat-num"><?= format_money($ah_withdrawal_total) ?></div>
                            <div class="ah-stat-lbl">Withdrawn</div>
                        </div>
                    </div>
                </div>

                <ul class="nav ah-filters" id="iconTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="tasks-tab" data-toggle="tab" href="#tasks" role="tab" aria-controls="tasks" aria-selected="true">
                            <i class="fas fa-tasks"></i> Tasks</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="lottery-tab" data-toggle="tab" href="#lottery" role="tab" aria-controls="lottery" aria-selected="false">
                            <i class="fas fa-ticket-alt"></i> Lottery</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="offerwall-tab" data-toggle="tab" href="#offerwall" role="tab" aria-controls="offerwall" aria-selected="false">
                            <i class="far fa-newspaper"></i> Offerwalls</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="withdrawals-tab" data-toggle="tab" href="#withdrawals" role="tab" aria-controls="withdrawals" aria-selected="false">
                            <i class="fas fa-download"></i> Withdrawals</a>
                    </li>
                </ul>

                <div class="tab-content" id="iconTabContent-1">

                    <!-- TASKS -->
                    <div class="tab-pane fade active show" id="tasks" role="tabpanel" aria-labelledby="tasks-tab">
                        <?php if ($ah_task_count > 0) { ?>
                            <div class="ah-feed">
                                <?php foreach ($task_history as $value) { ?>
                                    <div class="ah-row" data-search="<?= strtolower(htmlspecialchars($value['name'])) ?>">
                                        <div class="ah-avatar tasks"><i class="fas fa-check"></i></div>
                                        <div class="ah-main">
                                            <div class="ah-name"><?= $value['name'] ?></div>
                                            <div class="ah-meta"><?= timespan($value["claim_time"], time(), 2) ?> ago <span class="sep">·</span> <span class="ah-id">#<?= $value["id"] ?></span></div>
                                        </div>
                                        <div class="ah-side">
                                            <div class="ah-amount">+<?= currency($value["usd_reward"], $settings['currency_rate']) ?></div>
                                        </div>
                                    </div>
                                <?php } ?>
                            </div>
                        <?php } else { ?>
                            <div class="ah-empty"><div class="ah-empty-ic"><i class="fas fa-tasks"></i></div>No completed tasks yet.</div>
                        <?php } ?>
                    </div>

                    <!-- LOTTERY -->
                    <div class="tab-pane fade" id="lottery" role="tabpanel" aria-labelledby="lottery-tab">
                        <?php if ($ah_lottery_count > 0) { ?>
                            <div class="ah-feed">
                                <?php foreach ($lottery_history as $value) { ?>
                                    <div class="ah-row" data-search="lottery entry #<?= $value['id'] ?>">
                                        <div class="ah-avatar lottery"><i class="fas fa-ticket-alt"></i></div>
                                        <div class="ah-main">
                                            <div class="ah-name">Lottery Entry</div>
                                            <div class="ah-meta"><?= timespan($value["create_time"], time(), 2) ?> ago <span class="sep">·</span> <span class="ah-id">#<?= $value["id"] ?></span></div>
                                        </div>
                                        <div class="ah-side">
                                            <div class="ah-amount">+<?= format_money($value["amount"]) ?></div>
                                        </div>
                                    </div>
                                <?php } ?>
                            </div>
                        <?php } else { ?>
                            <div class="ah-empty"><div class="ah-empty-ic"><i class="fas fa-ticket-alt"></i></div>No lottery entries yet.</div>
                        <?php } ?>
                    </div>

                    <!-- OFFERWALLS -->
                    <div class="tab-pane fade" id="offerwall" role="tabpanel" aria-labelledby="offerwall-tab">
                        <?php if ($ah_offerwall_count > 0) { ?>
                            <div class="ah-feed">
                                <?php foreach ($offerwall_history as $value) {
                                    $release = timespan(time(), $value["available_at"], 2);
                                    $release_html = ($release == '1 Second')
                                        ? '<span class="st-pill ok"><span class="dot"></span>Released</span>'
                                        : '<span class="ah-meta" style="display:inline-flex;">Releases in ' . $release . '</span>';

                                    switch ($value['status']) {
                                        case 0: $status_html = '<span class="st-pill pending"><span class="dot"></span>Pending</span>'; break;
                                        case 1: $status_html = '<span class="st-pill bad"><span class="dot"></span>Cancelled</span>'; break;
                                        case 2: $status_html = '<span class="st-pill ok"><span class="dot"></span>Approved</span>'; break;
                                        default: $status_html = ''; break;
                                    }
                                    ?>
                                    <div class="ah-row" data-search="<?= strtolower(htmlspecialchars($value['offerwall'])) ?>">
                                        <div class="ah-avatar offerwall"><i class="far fa-newspaper"></i></div>
                                        <div class="ah-main">
                                            <div class="ah-name"><?= ucfirst($value["offerwall"]) ?></div>
                                            <div class="ah-meta">
                                                <?= timespan($value["claim_time"], time(), 2) ?> ago
                                                <span class="sep">·</span> <span class="ah-id">#<?= $value["id"] ?></span>
                                                <span class="sep">·</span> <?= $release_html ?>
                                            </div>
                                        </div>
                                        <div class="ah-side">
                                            <div class="ah-amount">+<?= format_money($value["amount"]) ?></div>
                                            <?= $status_html ?>
                                        </div>
                                    </div>
                                <?php } ?>
                            </div>
                        <?php } else { ?>
                            <div class="ah-empty"><div class="ah-empty-ic"><i class="far fa-newspaper"></i></div>No offerwall activity yet.</div>
                        <?php } ?>
                    </div>

                    <!-- WITHDRAWALS -->
                    <div class="tab-pane fade" id="withdrawals" role="tabpanel" aria-labelledby="withdrawals-tab">
                        <?php if (count($withdrawals_history) > 0) { ?>
                            <div class="ah-feed">
                                <?php foreach ($withdrawals_history as $value) {
                                    switch ($value['type']) {
                                        case 0: $status_html = '<span class="st-pill pending"><span class="dot"></span>Pending</span>'; break;
                                        case 1: $status_html = '<span class="st-pill ok"><span class="dot"></span>Approved</span>'; break;
                                        case 2: $status_html = '<span class="st-pill bad"><span class="dot"></span>Denied</span>'; break;
                                        default: $status_html = ''; break;
                                    }
                                    ?>
                                    <div class="ah-row" data-search="withdrawal #<?= $value['id'] ?>">
                                        <div class="ah-avatar withdrawals"><i class="fas fa-download"></i></div>
                                        <div class="ah-main">
                                            <div class="ah-name">Withdrawal Request</div>
                                            <div class="ah-meta"><?= timespan($value["claim_time"], time(), 2) ?> ago <span class="sep">·</span> <span class="ah-id">#<?= $value["id"] ?></span></div>
                                        </div>
                                        <div class="ah-side">
                                            <div class="ah-amount">-<?= format_money($value["amount"]) ?></div>
                                            <?= $status_html ?>
                                        </div>
                                    </div>
                                <?php } ?>
                            </div>
                        <?php } else { ?>
                            <div class="ah-empty"><div class="ah-empty-ic"><i class="fas fa-download"></i></div>No withdrawals yet.</div>
                        <?php } ?>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function(){
    var input = document.getElementById('ahSearch');
    if (!input) return;
    input.addEventListener('input', function(){
        var q = this.value.trim().toLowerCase();
        var activePane = document.querySelector('#iconTabContent-1 .tab-pane.active');
        if (!activePane) return;
        activePane.querySelectorAll('.ah-row').forEach(function(row){
            var hay = row.getAttribute('data-search') || '';
            row.style.display = hay.indexOf(q) !== -1 ? '' : 'none';
        });
    });
    // reset search box when switching tabs
    document.querySelectorAll('#iconTab .nav-link').forEach(function(tab){
        tab.addEventListener('shown.bs.tab', function(){ input.value=''; });
    });
})();
</script>