<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>📈 股票数据分析工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: #fff;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        h1 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5em;
            background: linear-gradient(90deg, #00d2ff, #3a7bd5);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* 搜索框 */
        .search-box {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .search-box input {
            flex: 1;
            padding: 15px;
            border-radius: 8px;
            border: 2px solid #3a7bd5;
            background: rgba(255,255,255,0.1);
            color: #fff;
            font-size: 16px;
            outline: none;
        }

        .search-box input:focus {
            border-color: #00d2ff;
        }

        .search-box button {
            padding: 15px 30px;
            border: none;
            border-radius: 8px;
            background: linear-gradient(90deg, #00d2ff, #3a7bd5);
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .search-box button:hover {
            transform: scale(1.05);
        }

        /* 股票列表 */
        .stock-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stock-card {
            background: rgba(255,255,255,0.05);
            border-radius: 12px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .stock-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            border-color: #00d2ff;
        }

        .stock-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .stock-symbol {
            font-size: 1.5em;
            font-weight: bold;
            color: #00d2ff;
        }

        .stock-name {
            font-size: 0.9em;
            color: #aaa;
            margin-bottom: 10px;
        }

        .stock-price {
            font-size: 1.8em;
            font-weight: bold;
        }

        .stock-change {
            font-size: 1.2em;
        }

        .stock-change.positive {
            color: #00ff88;
        }

        .stock-change.negative {
            color: #ff4757;
        }

        .stock-metrics {
            margin-top: 15px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            font-size: 0.85em;
        }

        .metric {
            background: rgba(255,255,255,0.05);
            padding: 8px;
            border-radius: 6px;
        }

        .metric-label {
            color: #888;
            margin-bottom: 3px;
        }

        .metric-value {
            font-weight: bold;
        }

        /* 详情页面 */
        .detail-view {
            display: none;
        }

        .detail-header {
            background: rgba(255,255,255,0.05);
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 20px;
        }

        .detail-price {
            font-size: 3em;
            font-weight: bold;
        }

        .detail-change {
            font-size: 1.5em;
        }

        .detail-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .tab {
            padding: 12px 25px;
            border: none;
            border-radius: 8px;
            background: rgba(255,255,255,0.1);
            color: #fff;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s;
        }

        .tab.active {
            background: linear-gradient(90deg, #00d2ff, #3a7bd5);
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .chart-container {
            background: rgba(255,255,255,0.05);
            border-radius: 12px;
            padding: 20px;
            height: 400px;
            position: relative;
        }

        /* 简单的CSS图表 */
        .simple-chart {
            width: 100%;
            height: 350px;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
        }

        .data-table th {
            background: rgba(255,255,255,0.1);
            padding: 12px;
            text-align: left;
            position: sticky;
            top: 0;
        }

        .data-table td {
            padding: 10px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .refresh-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            background: #00ff88;
            color: #1a1a2e;
            font-weight: bold;
            cursor: pointer;
            margin-top: 20px;
        }

        .loading {
            text-align: center;
            padding: 50px;
            font-size: 1.2em;
            color: #00d2ff;
        }

        .loading::after {
            content: '...';
            animation: dots 1.5s steps(4, end) infinite;
        }

        @keyframes dots {
            0%, 20% { content: '.'; }
            40% { content: '..'; }
            60%, 100% { content: '...'; }
        }

        @media (max-width: 768px) {
            .stock-list {
                grid-template-columns: 1fr;
            }

            h1 {
                font-size: 1.8em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📈 股票数据分析工具</h1>

        <!-- 搜索框 -->
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="输入股票代码或公司名称...">
            <button onclick="searchStocks()">🔍 搜索</button>
        </div>

        <!-- 股票列表 -->
        <div id="stockList" class="stock-list"></div>

        <!-- 详情页面 -->
        <div id="detailView" class="detail-view">
            <div class="detail-header">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <div>
                        <h2 id="detailSymbol" style="color: #00d2ff; margin-bottom: 5px;"></h2>
                        <p id="detailName" style="color: #888;"></p>
                    </div>
                    <button class="refresh-btn" onclick="refreshCurrentStock()">🔄 刷新数据</button>
                </div>
                <div style="display: flex; align-items: baseline; gap: 20px;">
                    <span id="detailPrice" class="detail-price"></span>
                    <span id="detailChange" class="detail-change"></span>
                </div>
            </div>

            <div class="detail-tabs">
                <button class="tab active" onclick="switchTab('kline')">📊 K线图</button>
                <button class="tab" onclick="switchTab('indicators')">📈 技术指标</button>
                <button class="tab" onclick="switchTab('financials')">💰 基本面</button>
            </div>

            <div id="klineTab" class="tab-content active">
                <div class="chart-container">
                    <canvas id="klineChart"></canvas>
                </div>
            </div>

            <div id="indicatorsTab" class="tab-content">
                <div class="chart-container">
                    <canvas id="indicatorsChart"></canvas>
                </div>
            </div>

            <div id="financialsTab" class="tab-content">
                <div class="chart-container">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>指标</th>
                                <th>数值</th>
                                <th>说明</th>
                            </tr>
                        </thead>
                        <tbody id="financialsTable"></tbody>
                    </table>
                </div>
            </div>
        </div>

        <div id="loading" class="loading"></div>
    </div>

    <script>
        let currentSymbol = '';

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            loadStocks();
        });

        // 加载股票列表
        async function loadStocks() {
            try {
                const response = await fetch('/api/stocks');
                const stocks = await response.json();
                displayStocks(stocks);
            } catch (error) {
                console.error('加载失败:', error);
            }
        }

        // 显示股票列表
        function displayStocks(stocks) {
            const container = document.getElementById('stockList');
            container.innerHTML = '';

            stocks.forEach(stock => {
                const card = document.createElement('div');
                card.className = 'stock-card';
                card.onclick = () => showDetail(stock.symbol);

                const changeClass = stock.change_percent >= 0 ? 'positive' : 'negative';
                const changeSymbol = stock.change_percent >= 0 ? '↑' : '↓';

                card.innerHTML = `
                    <div class="stock-header">
                        <span class="stock-symbol">${stock.symbol}</span>
                        <span class="stock-change ${changeClass}">${changeSymbol} ${Math.abs(stock.change_percent).toFixed(2)}%</span>
                    </div>
                    <p class="stock-name">${stock.name}</p>
                    <p class="stock-price">$${stock.current_price.toFixed(2)}</p>
                    <div class="stock-metrics">
                        <div class="metric">
                            <div class="metric-label">市值</div>
                            <div class="metric-value">${stock.market_cap || 'N/A'}</div>
                        </div>
                        <div class="metric">
                            <div class="metric-label">市盈率</div>
                            <div class="metric-value">${stock.pe_ratio ? stock.pe_ratio.toFixed(2) : 'N/A'}</div>
                        </div>
                        <div class="metric">
                            <div class="metric-label">ROE</div>
                            <div class="metric-value">${stock.roe ? stock.roe.toFixed(2) : 'N/A'}%</div>
                        </div>
                        <div class="metric">
                            <div class="metric-label">负债率</div>
                            <div class="metric-value">${stock.debt_ratio ? stock.debt_ratio.toFixed(2) : 'N/A'}%</div>
                        </div>
                    </div>
                `;
                container.appendChild(card);
            });
        }

        // 搜索股票
        async function searchStocks() {
            const query = document.getElementById('searchInput').value.trim();
            if (!query) {
                alert('请输入搜索关键词');
                return;
            }

            showLoading();
            try {
                const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
                const results = await response.json();

                if (results.length === 0) {
                    alert('未找到相关股票');
                } else {
                    showDetail(results[0].symbol);
                }
            } catch (error) {
                console.error('搜索失败:', error);
            }
        }

        // 显示详情
        async function showDetail(symbol) {
            currentSymbol = symbol;
            document.getElementById('stockList').style.display = 'none';
            document.getElementById('detailView').style.display = 'block';
            document.getElementById('loading').style.display = 'block';

            try {
                // 加载股票信息
                const stockResponse = await fetch(`/api/stock/${symbol}`);
                const stock = await stockResponse.json();

                document.getElementById('detailSymbol').textContent = stock.symbol;
                document.getElementById('detailName').textContent = stock.name;
                document.getElementById('detailPrice').textContent = `$${stock.current_price.toFixed(2)}`;

                const changeClass = stock.change_percent >= 0 ? 'positive' : 'negative';
                const changeSymbol = stock.change_percent >= 0 ? '↑' : '↓';
                document.getElementById('detailChange').innerHTML =
                    `<span class="${changeClass}">${changeSymbol} ${Math.abs(stock.change_percent).toFixed(2)}%</span>`;

                // 加载K线数据
                loadKLineData(symbol);
                loadIndicatorData(symbol);
                loadFinancials(symbol);
            } catch (error) {
                console.error('加载失败:', error);
            }

            document.getElementById('loading').style.display = 'none';
        }

        // 加载K线数据
        async function loadKLineData(symbol) {
            try {
                const response = await fetch(`/api/stock/${symbol}/kline`);
                const klines = await response.json();
                drawKlineChart(klines);
            } catch (error) {
                console.error('加载K线失败:', error);
            }
        }

        // 加载技术指标
        async function loadIndicatorData(symbol) {
            try {
                const response = await fetch(`/api/stock/${symbol}/indicators`);
                const indicators = await response.json();
                drawIndicatorsChart(indicators);
            } catch (error) {
                console.error('加载指标失败:', error);
            }
        }

        // 加载财务数据
        async function loadFinancials(symbol) {
            try {
                const response = await fetch(`/api/stock/${symbol}/financials`);
                const financials = await response.json();

                const tbody = document.getElementById('financialsTable');
                tbody.innerHTML = `
                    <tr><td>营业收入</td><td>${financials.revenue ? '$' + financials.revenue.toFixed(2) : 'N/A'}</td><td>年度总收入</td></tr>
                    <tr><td>净利润</td><td>${financials.profit ? '$' + financials.profit.toFixed(2) : 'N/A'}</td><td>年度净利润</td></tr>
                    <tr><td>ROE</td><td>${financials.roe ? financials.roe.toFixed(2) : 'N/A'}%</td><td>净资产收益率</td></tr>
                    <tr><td>负债权益比</td><td>${financials.debt_to_equity ? financials.debt_to_equity.toFixed(2) : 'N/A'}</td><td>杠杆率</td></tr>
                `;
            } catch (error) {
                console.error('加载财务数据失败:', error);
            }
        }

        // 绘制K线图
        function drawKlineChart(klines) {
            const canvas = document.getElementById('klineChart');
            const ctx = canvas.getContext('2d');
            canvas.width = canvas.parentElement.clientWidth - 40;
            canvas.height = 350;

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            if (klines.length < 2) return;

            const data = klines.slice().reverse();
            const prices = data.map(d => d.close);
            const minPrice = Math.min(...prices) * 0.99;
            const maxPrice = Math.max(...prices) * 1.01;
            const priceRange = maxPrice - minPrice;
            const candleWidth = (canvas.width - 60) / data.length;

            // 绘制网格
            ctx.strokeStyle = 'rgba(255,255,255,0.1)';
            ctx.lineWidth = 1;
            for (let i = 0; i < 5; i++) {
                const y = 30 + (i * (canvas.height - 60) / 4);
                ctx.beginPath();
                ctx.moveTo(30, y);
                ctx.lineTo(canvas.width, y);
                ctx.stroke();
            }

            // 绘制蜡烛图
            data.forEach((candle, i) => {
                const x = 30 + i * candleWidth + candleWidth / 2;
                const yOpen = 30 + (maxPrice - candle.open) / priceRange * (canvas.height - 60);
                const yClose = 30 + (maxPrice - candle.close) / priceRange * (canvas.height - 60);
                const yHigh = 30 + (maxPrice - candle.high) / priceRange * (canvas.height - 60);
                const yLow = 30 + (maxPrice - candle.low) / priceRange * (canvas.height - 60);

                const isUp = candle.close >= candle.open;
                ctx.fillStyle = isUp ? '#00ff88' : '#ff4757';
                ctx.strokeStyle = ctx.fillStyle;

                // 绘制影线
                ctx.beginPath();
                ctx.moveTo(x, yHigh);
                ctx.lineTo(x, yLow);
                ctx.stroke();

                // 绘制实体
                const bodyHeight = Math.max(Math.abs(yClose - yOpen), 1);
                ctx.fillRect(x - candleWidth / 2 + 2, Math.min(yOpen, yClose), candleWidth - 4, bodyHeight);
            });
        }

        // 绘制技术指标图
        function drawIndicatorsChart(indicators) {
            const canvas = document.getElementById('indicatorsChart');
            const ctx = canvas.getContext('2d');
            canvas.width = canvas.parentElement.clientWidth - 40;
            canvas.height = 350;

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            if (indicators.length < 2) return;

            const data = indicators.slice().reverse();
            const values = data.map(d => d.rsi);
            const min = Math.min(...values) * 0.9;
            const max = Math.max(...values) * 1.1;
            const valueRange = max - min;
            const stepX = (canvas.width - 40) / data.length;

            // 绘制RSI中线（70和30）
            ctx.strokeStyle = 'rgba(255,255,255,0.3)';
            ctx.setLineDash([5, 5]);
            ctx.beginPath();
            ctx.moveTo(30, 30 + (70 - min) / valueRange * (canvas.height - 60));
            ctx.lineTo(canvas.width, 30 + (70 - min) / valueRange * (canvas.height - 60));
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(30, 30 + (30 - min) / valueRange * (canvas.height - 60));
            ctx.lineTo(canvas.width, 30 + (30 - min) / valueRange * (canvas.height - 60));
            ctx.stroke();
            ctx.setLineDash([]);

            // 绘制RSI曲线
            ctx.strokeStyle = '#00d2ff';
            ctx.lineWidth = 2;
            ctx.beginPath();
            data.forEach((ind, i) => {
                const x = 30 + i * stepX;
                const y = 30 + (ind.rsi - min) / valueRange * (canvas.height - 60);
                if (i === 0) ctx.moveTo(x, y);
                else ctx.lineTo(x, y);
            });
            ctx.stroke();
        }

        // 切换标签页
        function switchTab(tab) {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));

            event.target.classList.add('active');
            document.getElementById(tab + 'Tab').classList.add('active');
        }

        // 刷新数据
        async function refreshCurrentStock() {
            showLoading();
            try {
                const response = await fetch(`/api/refresh/${currentSymbol}`);
                const result = await response.json();
                alert(result.message);

                // 重新加载当前页面
                await loadStocks();
                showDetail(currentSymbol);
            } catch (error) {
                console.error('刷新失败:', error);
            }
            document.getElementById('loading').style.display = 'none';
        }

        function showLoading() {
            document.getElementById('loading').style.display = 'block';
            document.getElementById('stockList').style.display = 'none';
            document.getElementById('detailView').style.display = 'none';
        }
    </script>
</body>
</html>
