{% extends "base.html" %}
{% block title %}自选股 - Augur{% endblock %}
{% block extra_head %}
<style>
.watchlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.watchlist-add-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.watchlist-add-form input {
    width: 160px;
    text-transform: uppercase;
}
.watchlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.watchlist-card {
    padding: 14px;
    position: relative;
    transition: border-color 0.2s;
}
.watchlist-card:hover {
    border-color: var(--accent-orange);
}
.watchlist-card .wl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.watchlist-card .wl-ticker {
    font-family: var(--font-data);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    cursor: pointer;
}
.watchlist-card .wl-ticker:hover {
    color: var(--accent-orange);
}
.watchlist-card .wl-name {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.watchlist-card .wl-metrics {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.78rem;
}
.watchlist-card .wl-price {
    font-family: var(--font-data);
    font-weight: 600;
    color: var(--text-primary);
}
.watchlist-card .wl-change {
    font-family: var(--font-data);
    font-weight: 600;
}
.watchlist-card .wl-change.up { color: var(--signal-buy); }
.watchlist-card .wl-change.down { color: var(--signal-sell); }
.watchlist-card .wl-change.flat { color: var(--signal-neutral); }
.watchlist-card .wl-score {
    font-family: var(--font-data);
    color: var(--accent-orange);
    font-weight: 600;
}
.watchlist-card .wl-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: 3px;
    transition: color 0.2s, background 0.2s;
}
.watchlist-card .wl-remove:hover {
    color: var(--signal-sell);
    background: rgba(255,23,68,0.1);
}
.sparkline-wrapper {
    margin-top: 6px;
}
@media (max-width: 768px) {
    .watchlist-header .flex { width: 100%; justify-content: stretch; }
    .watchlist-header .flex .btn { flex: 1; }
}
</style>
{% endblock %}
{% block content %}

<header class="page-header mb-16">
    <div class="page-header__text">
        <h1 class="page-title" data-i18n="watchlist-title">自选股</h1>
        <p class="page-lead" data-i18n="watchlist-desc">管理您的关注标的，一键批量分析所有自选股</p>
    </div>
</header>

<!-- Add Ticker Form + Batch Analyze -->
<div class="card mb-24">
    <div class="watchlist-header">
        <form class="watchlist-add-form" onsubmit="event.preventDefault(); addToWatchlist();" aria-label="Add ticker">
            <label for="wl-add-input" class="sr-only" data-i18n="watchlist-add-placeholder">输入股票代码</label>
            <input id="wl-add-input" type="text" class="form-input" data-i18n="watchlist-add-placeholder" placeholder="输入股票代码 (如 AAPL)"
                   aria-describedby="wl-add-hint"
                   oninput="clearTickerInvalid('wl-add-input', 'wl-add-hint')"
                   onkeydown="if(event.key==='Enter'){event.preventDefault();addToWatchlist();}" autocomplete="off" aria-required="true">
            <p id="wl-add-hint" class="field-hint" role="alert" style="display:none; font-size:0.72rem; color:var(--signal-sell);"></p>
            <button type="submit" class="btn btn-primary" data-i18n="watchlist-add">添加</button>
        </form>
        <div class="flex gap-8" style="flex-wrap:wrap;">
            <a href="/portfolio?import=watchlist" class="btn btn-sm btn-ghost" style="text-decoration:none;" data-i18n="watchlist-to-portfolio">导入到持仓</a>
            <button type="button" class="btn btn-sm" onclick="batchAnalyzeAll()" id="batch-btn" data-i18n="watchlist-batch">一键全部分析</button>
            <button type="button" class="btn btn-sm btn-ghost" onclick="exportWatchlistCSV()" data-i18n="watchlist-export-csv">导出</button>
            <label class="btn btn-sm btn-ghost" style="cursor:pointer;" title="从 CSV 导入标的">
                <span data-i18n="watchlist-import-csv">CSV 导入</span>
                <input type="file" accept=".csv,.txt" style="display:none;" onchange="importWatchlistCSV(event)">
            </label>
            <button type="button" class="btn btn-sm btn-ghost" onclick="clearWatchlist()" data-i18n="watchlist-clear">清空</button>
        </div>
    </div>
</div>

<!-- Watchlist Grid -->
<div class="watchlist-grid" id="watchlist-grid">
    <!-- Rendered by JS -->
</div>

<!-- Empty State -->
<div class="empty-state card" id="watchlist-empty" style="display:none;">
    <span class="empty-state-icon" aria-hidden="true"><svg viewBox="0 0 52 52"><rect x="10" y="10" width="32" height="36" rx="3"/><path d="M18 22h16M18 30h12M18 38h8"/><path d="M20 6h12v8H20z"/></svg></span>
    <div class="empty-state-title" data-i18n="wl-empty-title">暂无自选股</div>
    <p class="empty-state-desc" data-i18n="wl-empty-desc">添加关注标的，一键批量分析</p>
    <div class="empty-state-action">
        <button type="button" class="btn btn-primary btn-sm" onclick="document.getElementById('wl-add-input').focus()" data-i18n="wl-empty-add-cta">添加第一只标的</button>
        <a href="/stocks" class="btn btn-sm btn-ghost" style="text-decoration:none;" data-i18n="wl-empty-cta">去分析股票</a>
    </div>
</div>

<!-- Batch Results -->
<div id="batch-results" style="display:none;" class="card mb-24">
    <div class="section-title spaced" data-i18n="watchlist-batch-results">批量分析结果</div>
    <div class="md-table-wrap">
        <div id="batch-results-content"></div>
    </div>
    <p class="table-scroll-hint" data-i18n="table-scroll-hint">左右滑动查看完整表格</p>
</div>

{% endblock %}
{% block extra_scripts %}
<script>
var WL_KEY = 'augur-watchlist';

function getWatchlist() {
    try {
        return JSON.parse(localStorage.getItem(WL_KEY)) || [];
    } catch(e) { return []; }
}

function saveWatchlist(list) {
    localStorage.setItem(WL_KEY, JSON.stringify(list));
}

function addToWatchlist() {
    var input = document.getElementById('wl-add-input');
    var ticker = validateTickerInput('wl-add-input', 'wl-add-hint');
    if (!ticker) return;

    var list = getWatchlist();
    if (list.some(function(item) { return item.ticker === ticker; })) {
        showToast(ticker + ' 已在自选股中', 'warning');
        return;
    }

    list.push({ ticker: ticker, name: '', addedAt: Date.now() });
    saveWatchlist(list);
    input.value = '';
    renderWatchlist();
    showToast(ticker + ' 已添加到自选股');

    // Fetch company name in background
    fetchTickerInfo(ticker);
}

function removeFromWatchlist(ticker) {
    var list = getWatchlist();
    list = list.filter(function(item) { return item.ticker !== ticker; });
    saveWatchlist(list);
    renderWatchlist();
    showToast(ticker + ' 已移除');
}

function clearWatchlist() {
    if (!confirm('确定要清空所有自选股吗？')) return;
    saveWatchlist([]);
    renderWatchlist();
    showToast('自选股已清空');
}

function exportWatchlistCSV() {
    var list = getWatchlist();
    if (!list.length) { showToast(_t('wl-empty-title', '列表为空'), 'warning'); return; }
    var rows = list.map(function(item) { return item.ticker; });
    var csv = 'Ticker\n' + rows.join('\n');
    var blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = 'augur-watchlist-' + new Date().toISOString().slice(0, 10) + '.csv';
    a.click();
    URL.revokeObjectURL(url);
    showToast(_t('watchlist-export-done', '已导出 ' + rows.length + ' 只标的'), 'success');
}

function importWatchlistCSV(evt) {
    var file = evt.target.files[0];
    if (!file) return;
    var reader = new FileReader();
    reader.onload = function(e) {
        var text = e.target.result || '';
        var tickers = [];
        text.split(/[\r\n,;]+/).forEach(function(raw) {
            var t = raw.trim().toUpperCase().replace(/[^A-Z0-9.\-]/g, '');
            if (t && t.length >= 1 && t.length <= 15 && t !== 'TICKER') {
                tickers.push(t);
            }
        });
        var list = getWatchlist();
        var existing = list.map(function(x) { return x.ticker; });
        var added = 0;
        tickers.forEach(function(t) {
            if (!existing.includes(t)) {
                list.push({ ticker: t, addedAt: new Date().toISOString() });
                existing.push(t);
                added++;
            }
        });
        if (added > 0) {
            saveWatchlist(list);
            renderWatchlist();
            showToast(_t('watchlist-import-done', '已导入 ' + added + ' 只标的').replace('{n}', added), 'success');
        } else {
            showToast(_t('watchlist-import-dup', '无新增标的（均已存在）'), 'warning');
        }
        evt.target.value = '';
    };
    reader.readAsText(file, 'utf-8');
}

function fetchTickerInfo(ticker) {
    fetch('/api/fetch/' + ticker)
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.status === 'ok' && data.data) {
                var list = getWatchlist();
                for (var i = 0; i < list.length; i++) {
                    if (list[i].ticker === ticker) {
                        list[i].name = data.data.sector || '';
                        list[i].price = data.data.price || 0;
                        list[i].change_pct = data.data.revenue_growth || 0;
                        break;
                    }
                }
                saveWatchlist(list);
                renderWatchlist();
            }
        })
        .catch(function() {});
}

function createSparklineSVG(prices, trend) {
    var w = 80, h = 28, pad = 2;
    var min = Math.min.apply(null, prices);
    var max = Math.max.apply(null, prices);
    var range = max - min || 1;
    var points = prices.map(function(p, i) {
        var x = pad + (i / (prices.length - 1)) * (w - 2 * pad);
        var y = pad + (1 - (p - min) / range) * (h - 2 * pad);
        return x.toFixed(1) + ',' + y.toFixed(1);
    }).join(' ');
    var color = trend === 'up' ? '#00c853' : trend === 'down' ? '#ff1744' : '#ffab00';
    return '<svg width="' + w + '" height="' + h + '" viewBox="0 0 ' + w + ' ' + h + '" style="display:block;">' +
        '<polyline points="' + points + '" fill="none" stroke="' + color + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>' +
        '</svg>';
}

function loadSparkline(ticker, container) {
    fetch('/api/sparkline/' + ticker)
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.prices && data.prices.length >= 1) {
                var prices = data.prices;
                // If only 1 data point, duplicate to create a flat line
                if (prices.length === 1) prices = [prices[0], prices[0]];
                var svg = createSparklineSVG(prices, data.trend);
                var wrapper = document.createElement('div');
                wrapper.className = 'sparkline-wrapper';
                wrapper.innerHTML = svg;
                container.appendChild(wrapper);
            }
        })
        .catch(function() {});
}

function renderWatchlist() {
    var list = getWatchlist();
    var grid = document.getElementById('watchlist-grid');
    var empty = document.getElementById('watchlist-empty');

    var batchBtn = document.getElementById('batch-btn');
    if (!list.length) {
        grid.innerHTML = '';
        empty.style.display = 'block';
        if (batchBtn) batchBtn.disabled = true;
        return;
    }

    empty.style.display = 'none';
    if (batchBtn) batchBtn.disabled = false;
    grid.innerHTML = '';

    list.forEach(function(item) {
        var card = document.createElement('div');
        card.className = 'card watchlist-card';

        // Get cached analysis score
        var cached = augurCache.get();
        var cachedItem = cached.find(function(c) { return c.ticker === item.ticker; });
        var scoreHtml = cachedItem ? '<span class="wl-score">' + (cachedItem.result.score || 0).toFixed(1) + '/10</span>' : '';

        var priceHtml = item.price ? '<span class="wl-price">$' + item.price.toFixed(2) + '</span>' : '';

        card.innerHTML =
            '<button class="wl-remove" onclick="removeFromWatchlist(\'' + escapeHtml(item.ticker) + '\')" title="移除">&times;</button>' +
            '<div class="wl-head">' +
                '<span class="wl-ticker" onclick="window.location.href=\'/stocks?ticker=' + escapeHtml(item.ticker) + '\'">' + escapeHtml(item.ticker) + '</span>' +
            '</div>' +
            (item.name ? '<div class="wl-name">' + escapeHtml(item.name) + '</div>' : '') +
            '<div class="wl-metrics">' +
                priceHtml +
                scoreHtml +
            '</div>';

        grid.appendChild(card);

        // Load sparkline
        loadSparkline(item.ticker, card);
    });
}

function batchAnalyzeAll() {
    var list = getWatchlist();
    if (!list.length) { showToast('自选股列表为空', 'warning'); return; }

    var tickers = list.map(function(item) { return item.ticker; });
    var btn = document.getElementById('batch-btn');
    if (btn) { btn.disabled = true; btn.textContent = '分析中...'; }

    showProgress();

    fetchWithTimeout('/api/scanner/run', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ tickers: tickers })
    }, 120000)
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (btn) { btn.disabled = false; btn.textContent = '\u{1F680} 一键全部分析'; }
        if (data.status === 'ok' && data.results) {
            renderBatchResults(data.results);
            // Cache results
            data.results.forEach(function(r) {
                if (r.consensus_signal && r.consensus_signal !== 'error') {
                    augurCache.add(r.ticker, {
                        signal: r.consensus_signal,
                        score: r.consensus_score || 0,
                        confidence: 0
                    });
                }
            });
            renderWatchlist();
            showToast('批量分析完成: ' + data.results.length + ' 只标的');
        }
    })
    .catch(function(err) {
        if (btn) { btn.disabled = false; btn.textContent = '\u{1F680} 一键全部分析'; }
        showToast('批量分析失败: ' + (err.message || err), 'error');
    });
}

function renderBatchResults(results) {
    var section = document.getElementById('batch-results');
    var content = document.getElementById('batch-results-content');
    if (!section || !content) return;

    section.style.display = 'block';
    var html = '<table class="md-table" style="width:100%;"><thead><tr>' +
        '<th>标的</th><th>信号</th><th>评分</th><th>操作</th>' +
        '</tr></thead><tbody>';

    results.forEach(function(r) {
        var signal = r.consensus_signal || 'neutral';
        var signalLabel = signal === 'bullish' ? 'BUY' : signal === 'bearish' ? 'SELL' : 'HOLD';
        var sigClass = signal === 'bullish' ? 'signal-badge-buy' : signal === 'bearish' ? 'signal-badge-sell' : 'signal-badge-neutral';
        html += '<tr>' +
            '<td style="font-weight:600; font-family:var(--font-data);">' + escapeHtml(r.ticker) + '</td>' +
            '<td><span class="signal-badge ' + sigClass + '">' + signalLabel + '</span></td>' +
            '<td style="font-family:var(--font-data); color:var(--accent-orange);">' + (r.consensus_score || 0).toFixed(1) + '</td>' +
            '<td><a href="/stocks?ticker=' + escapeHtml(r.ticker) + '" class="btn btn-sm">详情</a></td>' +
            '</tr>';
    });

    html += '</tbody></table>';
    content.innerHTML = html;
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    renderWatchlist();
});
</script>
{% endblock %}