{% extends "base.html" %}
{% block title %}历史记录 - Augur{% endblock %}
{% block extra_head %}
<style>
/* Calendar heatmap */
.hist-cal-wrap { overflow-x: auto; padding: 8px 0 4px; }
.hist-cal-grid {
    display: inline-grid;
    grid-template-rows: repeat(7, 10px);
    grid-auto-flow: column;
    gap: 2px;
    min-width: max-content;
}
.hist-cal-cell {
    width: 10px; height: 10px;
    border-radius: 2px;
    background: var(--bg-secondary);
    cursor: default;
    transition: opacity 0.1s;
}
.hist-cal-cell:hover { opacity: 0.75; }
.hist-cal-cell.bull  { background: var(--signal-buy); }
.hist-cal-cell.bear  { background: var(--signal-sell); }
.hist-cal-cell.neut  { background: var(--signal-neutral); }
.hist-cal-cell.active-date { outline: 2px solid var(--accent-orange); }
.hist-cal-month-labels { display:flex; gap:0; min-width:max-content; margin-bottom:2px; }
.hist-cal-month-label { font-size:0.6rem; color:var(--text-muted); width:auto; }
.hist-cal-legend { display:flex; align-items:center; gap:6px; font-size:0.68rem; color:var(--text-muted); margin-top:6px; }
.hist-cal-legend .dot { width:9px; height:9px; border-radius:2px; display:inline-block; }

.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.history-table th {
    text-align: left;
    padding: 10px 12px;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}
.history-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-data);
}
.history-table tr:hover {
    background: var(--bg-card-hover);
    cursor: pointer;
}
.history-table tr.expanded {
    background: var(--bg-card-hover);
}
.history-table .col-date { white-space: nowrap; }
.history-detail {
    display: none;
    padding: 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}
.history-detail.show { display: table-row; }
.history-detail td { padding: 16px; }
.detail-agents {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.detail-agent-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 0.75rem;
}
@media (max-width: 768px) {
    .detail-agents { grid-template-columns: 1fr; }
}
.ticker-cell {
    font-weight: 600;
    color: var(--accent-orange);
}
</style>
{% endblock %}
{% block content %}

<header class="page-header mb-16">
    <div class="page-header__text">
        <h1 class="page-title" data-i18n="history-title">历史记录</h1>
        <p class="page-lead" data-i18n="history-desc">查看所有分析历史</p>
    </div>
    <div class="page-actions">
        <button type="button" class="btn btn-sm" onclick="clearAllHistory()" id="clear-btn" style="display:none;" data-i18n="history-clear">清除历史</button>
    </div>
</header>

<!-- Calendar heatmap -->
<div class="card mb-12" id="hist-cal-card" style="padding:12px 16px; margin-bottom:0.75rem; display:none;">
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;">
        <span class="data-label" style="font-size:0.72rem;" data-i18n="history-cal-title">分析日历</span>
        <button type="button" class="btn btn-sm btn-ghost" onclick="clearCalFilter()" id="cal-clear-filter" style="display:none; font-size:0.68rem;" data-i18n="history-cal-clear">清除日期筛选</button>
    </div>
    <div class="hist-cal-month-labels" id="hist-cal-months"></div>
    <div class="hist-cal-wrap"><div class="hist-cal-grid" id="hist-cal-grid"></div></div>
    <div class="hist-cal-legend">
        <span class="dot" style="background:var(--signal-buy);"></span>看多
        <span class="dot" style="background:var(--signal-sell);"></span>看空
        <span class="dot" style="background:var(--signal-neutral);"></span>中性
        <span class="dot" style="background:var(--bg-secondary); border:1px solid var(--border-color);"></span>无记录
    </div>
</div>

<div class="card" style="margin-bottom:0.75rem; padding:10px 16px;">
    <div style="display:flex; gap:10px; align-items:center; flex-wrap:wrap;">
        <input type="text" id="history-search" placeholder="搜索股票代码…" data-i18n="history-search-ph"
               style="flex:1; min-width:120px; max-width:220px; padding:5px 10px; border-radius:var(--r-sm); border:1px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); font-family:var(--font-mono); font-size:0.85rem;"
               aria-label="搜索历史记录" oninput="debounceSearch()">
        <div style="display:flex; gap:6px;" role="group" aria-label="信号筛选">
            <button type="button" class="btn btn-sm history-sig-btn" data-sig="" onclick="setSigFilter(this)" style="opacity:1;" data-i18n="history-filter-all">全部</button>
            <button type="button" class="btn btn-sm history-sig-btn" data-sig="bullish" onclick="setSigFilter(this)" data-i18n="history-filter-bullish">看多</button>
            <button type="button" class="btn btn-sm history-sig-btn" data-sig="neutral" onclick="setSigFilter(this)" data-i18n="history-filter-neutral">中性</button>
            <button type="button" class="btn btn-sm history-sig-btn" data-sig="bearish" onclick="setSigFilter(this)" data-i18n="history-filter-bearish">看空</button>
        </div>
        <span id="history-filter-hint" style="font-size:0.75rem; color:var(--text-muted); display:none;"></span>
    </div>
</div>
<div class="card">
    <div id="history-content">
        <div class="empty-state" id="empty-state" style="display:none;">
            <span class="empty-state-icon" aria-hidden="true"><svg viewBox="0 0 52 52"><circle cx="26" cy="26" r="18"/><path d="M26 14v12l9 6"/><path d="M8 26h4M40 26h4"/><path d="M7 14l3 2M42 36l3 2"/><path d="M7 38l3-2M42 16l3-2"/></svg></span>
            <div class="empty-state-title" data-i18n="history-empty-title">暂无分析历史</div>
            <p class="empty-state-desc" data-i18n="history-empty-desc">运行首次分析后将自动保存在此</p>
            <div class="empty-state-action">
                <a href="/stocks" class="btn btn-primary" style="text-decoration:none;" data-i18n="history-start">开始分析</a>
                <a href="/compare" class="btn btn-sm btn-ghost" style="text-decoration:none;" data-i18n="history-empty-compare">对比分析</a>
            </div>
        </div>
        <!-- Skeleton loading -->
        <div id="history-skeleton" style="display:block;">
            <div class="skeleton-table-row"><div class="skeleton"></div><div class="skeleton" style="width:60%"></div><div class="skeleton" style="width:50px"></div><div class="skeleton" style="width:40px"></div></div>
            <div class="skeleton-table-row"><div class="skeleton"></div><div class="skeleton" style="width:60%"></div><div class="skeleton" style="width:50px"></div><div class="skeleton" style="width:40px"></div></div>
            <div class="skeleton-table-row"><div class="skeleton"></div><div class="skeleton" style="width:60%"></div><div class="skeleton" style="width:50px"></div><div class="skeleton" style="width:40px"></div></div>
            <div class="skeleton-table-row"><div class="skeleton"></div><div class="skeleton" style="width:60%"></div><div class="skeleton" style="width:50px"></div><div class="skeleton" style="width:40px"></div></div>
        </div>
        <!-- Error state -->
        <div id="history-error" class="error-panel" style="display:none;" role="alert">
            <div class="error-panel-title"><span class="error-panel-icon" aria-hidden="true">&#x26A0;</span><span data-i18n="history-error-title">加载失败</span></div>
            <div class="error-panel-msg" id="history-error-msg"></div>
            <div class="error-panel-retry">
                <button type="button" class="btn btn-sm" onclick="loadHistory()" data-i18n="history-error-retry">重试</button>
            </div>
        </div>
        <div class="md-table-wrap">
        <table class="history-table" id="history-table" style="display:none;">
            <caption class="sr-only" data-i18n="history-title">历史记录</caption>
            <thead>
                <tr>
                    <th scope="col" data-i18n="history-col-date">日期</th>
                    <th scope="col" data-i18n="history-col-ticker">股票</th>
                    <th scope="col" data-i18n="history-col-signal">信号</th>
                    <th scope="col" data-i18n="history-col-score">评分</th>
                    <th scope="col" data-i18n="history-col-actions">操作</th>
                </tr>
            </thead>
            <tbody id="history-body"></tbody>
        </table>
        <p class="table-scroll-hint" data-i18n="table-scroll-hint">左右滑动查看完整表格</p>
        </div>
        <!-- Pagination controls -->
        <div id="pagination-controls" style="display:none; padding:12px 0; border-top:1px solid var(--border-color); margin-top:8px;">
            <div class="flex items-center justify-between">
                <button type="button" class="btn btn-sm" id="prev-page-btn" onclick="goToPage(currentPage - 1)" disabled data-i18n="history-prev">上一页</button>
                <span id="page-indicator" class="text-muted text-mono" style="font-size:0.78rem;" aria-live="polite">Page 1 / 1</span>
                <button type="button" class="btn btn-sm" id="next-page-btn" onclick="goToPage(currentPage + 1)" disabled data-i18n="history-next">下一页</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}
{% block extra_scripts %}
<script>
var currentPage = 1;
var totalPages = 1;
var perPage = 20;
var _searchTicker = '';
var _sigFilter = '';
var _searchTimer = null;
function _t(key, fb) { return (typeof window.t === 'function') ? window.t(key, fb) : (fb || key); }

function _historyLocale() {
    var lang = typeof getCurrentLang === 'function' ? getCurrentLang() : 'zh';
    if (lang === 'en') return 'en-US';
    if (lang === 'ja') return 'ja-JP';
    if (lang === 'ko') return 'ko-KR';
    return 'zh-CN';
}

function formatHistoryDate(ts) {
    if (!ts) return '--';
    var d = new Date(ts);
    var loc = _historyLocale();
    return window.innerWidth <= 768
        ? d.toLocaleDateString(loc, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
        : d.toLocaleString(loc);
}

function debounceSearch() {
    clearTimeout(_searchTimer);
    _searchTimer = setTimeout(function() {
        _searchTicker = (document.getElementById('history-search').value || '').trim();
        currentPage = 1;
        loadHistory();
    }, 300);
}

function setSigFilter(btn) {
    _sigFilter = btn.getAttribute('data-sig') || '';
    document.querySelectorAll('.history-sig-btn').forEach(function(b) {
        b.style.opacity = (b === btn) ? '1' : '0.45';
        b.style.borderColor = (b === btn) ? 'var(--accent-orange)' : '';
    });
    currentPage = 1;
    loadHistory();
}

function _buildHistoryUrl() {
    var url = '/api/history?page=' + currentPage + '&per_page=' + perPage;
    if (_searchTicker) url += '&ticker=' + encodeURIComponent(_searchTicker);
    if (_sigFilter) url += '&signal=' + encodeURIComponent(_sigFilter);
    return url;
}

function loadHistory() {
    document.getElementById('history-error').style.display = 'none';
    fetch(_buildHistoryUrl())
        .then(function(r) { return r.json(); })
        .then(function(data) {
            document.getElementById('history-skeleton').style.display = 'none';
            var records = data.items || [];
            totalPages = data.pages || 1;
            var total = data.total || 0;

            if (total === 0) {
                var es = document.getElementById('empty-state');
                es.style.display = 'block';
                // If filter active, update empty state message inline
                if (_searchTicker || _sigFilter) {
                    var desc = es.querySelector('.empty-state-desc');
                    if (desc) desc.textContent = _t('history-no-results', '没有符合条件的记录');
                }
                document.getElementById('history-table').style.display = 'none';
                document.getElementById('clear-btn').style.display = 'none';
                document.getElementById('pagination-controls').style.display = 'none';
                document.getElementById('history-filter-hint').style.display = 'none';
                return;
            }
            document.getElementById('empty-state').style.display = 'none';
            document.getElementById('history-table').style.display = 'table';
            document.getElementById('history-table').classList.add('fade-in');
            document.getElementById('clear-btn').style.display = 'inline-block';
            // Show filter hint when active
            var hint = document.getElementById('history-filter-hint');
            if (_searchTicker || _sigFilter) {
                hint.textContent = total + ' ' + _t('history-filter-results', '条结果');
                hint.style.display = 'inline';
            } else {
                hint.style.display = 'none';
            }
            renderHistory(records);
            updatePagination();
        })
        .catch(function(err) {
            document.getElementById('history-skeleton').style.display = 'none';
            document.getElementById('history-error').style.display = 'block';
            document.getElementById('history-error-msg').textContent = err.message || _t('history-load-failed');
            showToast(_t('history-load-failed'), 'error');
        });
}

function updatePagination() {
    var controls = document.getElementById('pagination-controls');
    if (totalPages <= 1) {
        controls.style.display = 'none';
        return;
    }
    controls.style.display = 'block';
    document.getElementById('page-indicator').textContent = _t('history-page-indicator', '第 {page} / {total} 页')
        .replace('{page}', currentPage).replace('{total}', totalPages);
    document.getElementById('prev-page-btn').disabled = (currentPage <= 1);
    document.getElementById('next-page-btn').disabled = (currentPage >= totalPages);
}

function goToPage(page) {
    if (page < 1 || page > totalPages) return;
    currentPage = page;
    loadHistory();
}

function signalBadgeClass(s) {
    if (!s) return 'signal-badge-neutral';
    var m = {'bullish':'signal-badge-buy','neutral':'signal-badge-neutral','bearish':'signal-badge-sell'};
    return m[s.toLowerCase()] || 'signal-badge-neutral';
}

function signalLabel(s) {
    var m = {'bullish':'BUY','neutral':'HOLD','bearish':'SELL'};
    return m[(s||'').toLowerCase()] || s;
}

function renderHistory(records) {
    var tbody = document.getElementById('history-body');
    tbody.innerHTML = '';
    records.forEach(function(rec) {
        var tr = document.createElement('tr');
        tr.setAttribute('data-id', rec.id);
        var ts = formatHistoryDate(rec.timestamp);
        tr.innerHTML = '<td class="col-date">' + ts + '</td>' +
            '<td class="ticker-cell"><a href="/stocks?ticker=' + encodeURIComponent(rec.ticker) + '" onclick="event.stopPropagation();" style="color:var(--accent-orange,#d4a017);text-decoration:none;font-weight:600;" onmouseover="this.style.textDecoration=\'underline\'" onmouseout="this.style.textDecoration=\'none\'">' + escapeHtml(rec.ticker) + '</a></td>' +
            '<td><span class="signal-badge ' + signalBadgeClass(rec.signal) + '" style="font-size:0.7rem;">' + signalLabel(rec.signal) + '</span></td>' +
            '<td>' + (rec.score || 0).toFixed(1) + '/10</td>' +
            '<td><button class="btn btn-sm btn-ghost" onclick="event.stopPropagation(); deleteRecord(\'' + rec.id + '\', this)">' + escapeHtml(_t('history-delete-btn')) + '</button></td>';
        tr.onclick = function() { toggleDetail(rec.id, tr, rec.ticker); };
        tbody.appendChild(tr);
    });
}

function toggleDetail(id, rowEl, tickerHint) {
    var existing = document.getElementById('detail-' + id);
    if (existing) {
        existing.remove();
        rowEl.classList.remove('expanded');
        return;
    }
    // Remove other open details
    document.querySelectorAll('.history-detail-row').forEach(function(el) { el.remove(); });
    document.querySelectorAll('.history-table tr.expanded').forEach(function(el) { el.classList.remove('expanded'); });

    rowEl.classList.add('expanded');
    fetch('/api/history/' + id)
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (!data || !data.result) return;
            var detailTr = document.createElement('tr');
            detailTr.id = 'detail-' + id;
            detailTr.className = 'history-detail-row';
            var td = document.createElement('td');
            td.colSpan = 5;
            td.style.padding = '16px';
            td.style.background = 'var(--bg-secondary)';

            var agents = data.result.agents || [];
            var ticker = data.ticker || tickerHint || '';
            var html = '<div style="font-size:0.78rem; color:var(--text-secondary); margin-bottom:8px;">' +
                escapeHtml(_t('history-detail-agents').replace('{n}', agents.length)) + '</div>';
            html += '<div class="flex gap-8 mb-12" style="flex-wrap:wrap;">';
            html += '<a href="/stocks?ticker=' + encodeURIComponent(ticker) + '&report=1" class="btn btn-sm btn-primary" style="text-decoration:none;">' +
                escapeHtml(_t('history-view-report')) + '</a>';
            html += '<a href="/compare?ticker=' + encodeURIComponent(ticker) + '" class="btn btn-sm btn-ghost" style="text-decoration:none;">' +
                escapeHtml(_t('history-empty-compare')) + '</a>';
            html += '<a href="/debate?ticker=' + encodeURIComponent(ticker) + '" class="btn btn-sm btn-ghost" style="text-decoration:none;">' +
                escapeHtml(_t('history-debate-link')) + '</a>';
            html += '</div>';
            html += '<div class="detail-agents">';
            agents.forEach(function(a) {
                html += '<div class="detail-agent-card">' +
                    '<div style="font-weight:600;">' + escapeHtml(a.agent_name || a.agent_id) + '</div>' +
                    '<div><span class="signal-badge ' + signalBadgeClass(a.signal) + '" style="font-size:0.65rem;">' + signalLabel(a.signal) + '</span> ' + (a.score||0).toFixed(1) + '/10</div>' +
                    '</div>';
            });
            html += '</div>';
            td.innerHTML = html;
            detailTr.appendChild(td);
            rowEl.parentNode.insertBefore(detailTr, rowEl.nextSibling);
        });
}

function deleteRecord(id, btn) {
    if (!confirm(_t('history-delete-confirm'))) return;
    fetch('/api/history/' + id, { method: 'DELETE' })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.status === 'ok') {
                showToast(_t('history-deleted'));
                loadHistory();
            }
        });
}

function clearAllHistory() {
    if (!confirm(_t('history-clear-confirm'))) return;
    fetch('/api/history', { method: 'DELETE' })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.status === 'ok') {
                showToast(_t('history-cleared'));
                loadHistory();
            }
        });
}

document.addEventListener('DOMContentLoaded', function() {
    loadHistory();
    loadCalendarData();
});

// ===================== Calendar Heatmap =====================
var _calDateFilter = '';

function loadCalendarData() {
    // Fetch up to 365 recent history entries to build calendar
    // Uses the unpaginated `limit` mode (cap 500), not page/per_page (cap 100)
    fetch('/api/history?limit=365')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var items = data.records || [];
            if (items.length === 0) return;
            buildCalendar(items);
            document.getElementById('hist-cal-card').style.display = '';
        })
        .catch(function() {});
}

function buildCalendar(items) {
    // Group by date
    var byDate = {};
    items.forEach(function(item) {
        var ts = item.timestamp || 0;
        if (!ts) return;
        var d = new Date(typeof ts === 'number' ? ts * 1000 : ts);
        var key = d.getFullYear() + '-' + _pad(d.getMonth()+1) + '-' + _pad(d.getDate());
        if (!byDate[key]) byDate[key] = {bull:0, bear:0, neut:0};
        var sig = (item.signal || '').toLowerCase();
        if (sig === 'bullish') byDate[key].bull++;
        else if (sig === 'bearish') byDate[key].bear++;
        else byDate[key].neut++;
    });

    // Build 52-week grid (364 days ending today)
    var today = new Date();
    today.setHours(0,0,0,0);
    var startDate = new Date(today);
    startDate.setDate(startDate.getDate() - 363);
    // Align to Sunday
    startDate.setDate(startDate.getDate() - startDate.getDay());

    var grid = document.getElementById('hist-cal-grid');
    grid.innerHTML = '';
    var monthLabels = document.getElementById('hist-cal-months');
    monthLabels.innerHTML = '';

    var lastMonth = -1;
    var colCount = 0;
    var cur = new Date(startDate);

    while (cur <= today) {
        var key = cur.getFullYear() + '-' + _pad(cur.getMonth()+1) + '-' + _pad(cur.getDate());
        var d = byDate[key];
        var cls = 'hist-cal-cell';
        if (d) {
            if (d.bull >= d.bear && d.bull >= d.neut) cls += ' bull';
            else if (d.bear >= d.bull && d.bear >= d.neut) cls += ' bear';
            else cls += ' neut';
        }
        var cell = document.createElement('div');
        cell.className = cls;
        cell.setAttribute('data-date', key);
        var total = d ? (d.bull + d.bear + d.neut) : 0;
        cell.title = key + (total ? (' — ' + total + ' 条') : '');
        if (total > 0) {
            cell.style.cursor = 'pointer';
            (function(dk) {
                cell.addEventListener('click', function() { setCalDateFilter(dk); });
            })(key);
        }
        grid.appendChild(cell);

        // Month label at start of each month
        if (cur.getDate() === 1 || cur.getMonth() !== lastMonth) {
            if (cur.getDay() === 0 && cur.getDate() <= 7) {
                var lbl = document.createElement('span');
                lbl.className = 'hist-cal-month-label';
                var colWidth = 12 * (colCount) + 'px';
                lbl.style.paddingLeft = colWidth;
                lbl.textContent = cur.toLocaleDateString('zh-CN', {month:'short'});
                lastMonth = cur.getMonth();
                colCount = 0;
            }
        }
        if (cur.getDay() === 6) colCount++;
        cur.setDate(cur.getDate() + 1);
    }
}

function _pad(n) { return n < 10 ? '0' + n : '' + n; }

function setCalDateFilter(dateStr) {
    _calDateFilter = dateStr;
    // Highlight selected cell
    document.querySelectorAll('.hist-cal-cell').forEach(function(c) {
        c.classList.toggle('active-date', c.getAttribute('data-date') === dateStr);
    });
    document.getElementById('cal-clear-filter').style.display = '';
    // Filter search to show that date — set ticker filter to empty and reload
    // We'll add date as a search hint; actually we filter by re-querying with date info
    // Since backend doesn't support date filter, we fetch all and filter client-side
    _searchTicker = '';
    document.getElementById('history-search').value = '';
    currentPage = 1;
    _sigFilter = '';
    document.querySelectorAll('.history-sig-btn').forEach(function(b) {
        b.style.opacity = (b.getAttribute('data-sig') === '') ? '1' : '0.45';
        b.style.borderColor = (b.getAttribute('data-sig') === '') ? 'var(--accent-orange)' : '';
    });
    loadHistoryForDate(dateStr);
}

function clearCalFilter() {
    _calDateFilter = '';
    document.querySelectorAll('.hist-cal-cell').forEach(function(c) { c.classList.remove('active-date'); });
    document.getElementById('cal-clear-filter').style.display = 'none';
    currentPage = 1;
    loadHistory();
}

function loadHistoryForDate(dateStr) {
    // Fetch a large page and filter client-side by date
    document.getElementById('history-error').style.display = 'none';
    document.getElementById('history-skeleton').style.display = 'block';
    document.getElementById('history-table').style.display = 'none';
    document.getElementById('pagination-controls').style.display = 'none';

    fetch('/api/history?limit=365')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var allRecs = data.records || [];
            var items = allRecs.filter(function(item) {
                var ts = item.timestamp || 0;
                if (!ts) return false;
                var d = new Date(typeof ts === 'number' ? ts * 1000 : ts);
                var key = d.getFullYear() + '-' + _pad(d.getMonth()+1) + '-' + _pad(d.getDate());
                return key === dateStr;
            });
            document.getElementById('history-skeleton').style.display = 'none';
            document.getElementById('empty-state').style.display = 'none';
            document.getElementById('history-table').style.display = 'table';
            var hint = document.getElementById('history-filter-hint');
            renderHistory(items);
            if (hint) {
                hint.textContent = dateStr + ' — ' + items.length + ' 条';
                hint.style.display = 'inline';
            }
        })
        .catch(function() { document.getElementById('history-skeleton').style.display = 'none'; });
}
</script>
{% endblock %}