<?php
// 預設股票代號 (3704 合勤控)
$ticker = isset($_GET['ticker']) ? trim($_GET['ticker']) : '3704';

// 判斷是否帶有後綴，若無則預設加上 .TW (上市)。若為上櫃股票請手動輸入 .TWO (例如 3105.TWO)
$symbol = $ticker;
if (strpos($symbol, '.') === false) {
    $symbol .= '.TW';
}

// 設定 Yahoo Finance API URL (抓取近 6 個月的日 K 線數據)
$url = "https://query1.finance.yahoo.com/v8/finance/chart/{$symbol}?range=6mo&interval=1d";

// 使用 cURL 獲取數據 (加入 User-Agent 避免被 Yahoo 阻擋)
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36');
$response = curl_exec($ch);
curl_close($ch);

$data = json_decode($response, true);

// 準備給前端 ECharts 的數據陣列
$categoryData = []; // 日期
$values = [];       // K線數據 [Open, Close, Lowest, Highest]
$volumes = [];      // 成交量

if (isset($data['chart']['result'][0])) {
    $result = $data['chart']['result'][0];
    $timestamps = $result['timestamp'];
    $quote = $result['indicators']['quote'][0];

    for ($i = 0; $i < count($timestamps); $i++) {
        // 排除 Yahoo API 偶爾出現的空數據 (假日或暫停交易)
        if ($quote['open'][$i] === null) continue;

        // 轉換時間戳為 YYYY-MM-DD
        $date = date('Y-m-d', $timestamps[$i]);
        $categoryData[] = $date;

        // ECharts 要求的 K 線格式: [開盤價, 收盤價, 最低價, 最高價]
        $open = round($quote['open'][$i], 2);
        $close = round($quote['close'][$i], 2);
        $low = round($quote['low'][$i], 2);
        $high = round($quote['high'][$i], 2);
        $values[] = [$open, $close, $low, $high];

        // 成交量 (判斷紅綠棒：收盤 >= 開盤 為紅(漲)，否則為綠(跌))
        $color = $close >= $open ? 1 : -1;
        $volumes[] = [$i, $quote['volume'][$i], $color];
    }
} else {
    $error_msg = "無法獲取 {$symbol} 的數據，請確認代號是否正確。上櫃股票請加上 .TWO (例如：3105.TWO)";
}

// 將 PHP 陣列轉為 JSON 供 JS 使用
$jsCategoryData = json_encode($categoryData);
$jsValues = json_encode($values);
$jsVolumes = json_encode($volumes);
?>

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>台股專業 K 線圖系統</title>
    <!-- 引入 Apache ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
    <style>
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f6f9; margin: 0; padding: 20px; }
        .container { max-width: 1200px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        h2 { text-align: center; color: #333; }
        .search-box { text-align: center; margin-bottom: 20px; }
        input[type="text"] { padding: 10px; width: 200px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; }
        button { padding: 10px 20px; background-color: #0056b3; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: 0.3s; }
        button:hover { background-color: #004494; }
        #chart-container { width: 100%; height: 600px; }
        .error { color: red; text-align: center; font-weight: bold; }
    </style>
</head>
<body>

<div class="container">
    <h2>📈 台股 K 線圖分析</h2>
    
    <div class="search-box">
        <form method="GET" action="">
            <input type="text" name="ticker" value="<?php echo htmlspecialchars($ticker); ?>" placeholder="輸入台股代號 (如: 3704)">
            <button type="submit">繪製圖表</button>
        </form>
    </div>

    <?php if(isset($error_msg)): ?>
        <p class="error"><?php echo $error_msg; ?></p>
    <?php else: ?>
        <!-- 圖表容器 -->
        <div id="chart-container"></div>

        <script>
            // 獲取 PHP 傳遞過來的數據
            const categoryData = <?php echo $jsCategoryData; ?>;
            const values = <?php echo $jsValues; ?>;
            const volumes = <?php echo $jsVolumes; ?>;

            // 計算移動平均線 (MA) 的函數
            function calculateMA(dayCount, data) {
                var result = [];
                for (var i = 0, len = data.length; i < len; i++) {
                    if (i < dayCount) {
                        result.push('-');
                        continue;
                    }
                    var sum = 0;
                    for (var j = 0; j < dayCount; j++) {
                        sum += data[i - j][1]; // 取收盤價
                    }
                    result.push((sum / dayCount).toFixed(2));
                }
                return result;
            }

            // 台灣股市習慣：紅漲綠跌
            const upColor = '#ef232a';
            const upBorderColor = '#8A0000';
            const downColor = '#14b143';
            const downBorderColor = '#008F28';

            // 初始化 ECharts 實例
            var myChart = echarts.init(document.getElementById('chart-container'));

            // 設定圖表配置
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'cross' }
                },
                legend: {
                    data: ['日K', 'MA5', 'MA10', 'MA20'],
                    top: 10
                },
                grid: [
                    { left: '10%', right: '8%', height: '50%' }, // 上半部：K線圖
                    { left: '10%', right: '8%', top: '65%', height: '16%' } // 下半部：成交量
                ],
                xAxis: [
                    {
                        type: 'category',
                        data: categoryData,
                        boundaryGap: false,
                        axisLine: { onZero: false },
                        splitLine: { show: false },
                        min: 'dataMin',
                        max: 'dataMax'
                    },
                    {
                        type: 'category',
                        gridIndex: 1,
                        data: categoryData,
                        axisLabel: { show: false }
                    }
                ],
                yAxis: [
                    { scale: true, splitArea: { show: true } },
                    { scale: true, gridIndex: 1, splitNumber: 2, axisLabel: { show: false }, axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: false } }
                ],
                dataZoom: [
                    { type: 'inside', xAxisIndex: [0, 1], start: 50, end: 100 },
                    { show: true, xAxisIndex: [0, 1], type: 'slider', top: '85%', start: 50, end: 100 }
                ],
                series: [
                    {
                        name: '日K',
                        type: 'candlestick',
                        data: values,
                        itemStyle: {
                            color: upColor,
                            color0: downColor,
                            borderColor: upBorderColor,
                            borderColor0: downBorderColor
                        }
                    },
                    {
                        name: 'MA5',
                        type: 'line',
                        data: calculateMA(5, values),
                        smooth: true,
                        lineStyle: { opacity: 0.5 }
                    },
                    {
                        name: 'MA10',
                        type: 'line',
                        data: calculateMA(10, values),
                        smooth: true,
                        lineStyle: { opacity: 0.5 }
                    },
                    {
                        name: 'MA20',
                        type: 'line',
                        data: calculateMA(20, values),
                        smooth: true,
                        lineStyle: { opacity: 0.5 }
                    },
                    {
                        name: 'Volume',
                        type: 'bar',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        data: volumes.map(function (item) {
                            return {
                                value: item[1],
                                itemStyle: { color: item[2] > 0 ? upColor : downColor }
                            };
                        })
                    }
                ]
            };

            // 繪製圖表
            myChart.setOption(option);
            
            // 讓圖表隨視窗縮放
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        </script>
    <?php endif; ?>
</div>

</body>
</html>