'use client';

import { useGameStore } from '@/store/gameStore';

interface StockHeaderProps {
  cursorData?: any;
}

export default function StockHeader({ cursorData }: StockHeaderProps) {
  const { isRevealed, realCode, realName, allKlines, currentIndex } = useGameStore();
  const currentKLine = allKlines[currentIndex];
  
  if (!currentKLine) return <div className="h-20 bg-[#191B28] border-b border-[#2A2D3C]"></div>;
  
  // 优先使用光标数据，否则使用当前进度数据
  const data = cursorData || currentKLine;
  
  const { open, high, low, close, volume, pct_chg, date, volume_ratio, turnover_rate } = data;
  
  // 如果是光标数据，可能没有 pct_chg，需要计算（相对于前一根K线，或者简化处理）
  // 这里简化处理：如果是光标数据，pct_chg 可能不准确，除非我们传入了完整对象
  // 为了展示一致性，我们假设 data 包含了必要字段
  
  // 注意：Chart 传回来的 cursorData 可能只包含 OHLCV，没有 pct_chg
  // 如果没有 pct_chg，我们可以根据 open/close 计算一个近似值，或者不显示涨跌幅
  const isUp = close >= open; // 简化判断：阳线为红，阴线为绿
  const colorClass = isUp ? 'text-[#FD1050]' : 'text-[#00F0F0]';
  const change = close - open; // 这是一个近似值，实际上应该是 close - prevClose
  const changePercent = (change / open) * 100; // 近似涨跌幅

  // 如果是真实数据（非光标），使用精确值
  const displayChange = cursorData ? change : (close - (close / (1 + (pct_chg || 0) / 100)));
  const displayPercent = cursorData ? changePercent : pct_chg;
  
  // 日期显示
  const displayDate = date || (cursorData?.time ? cursorData.time.toString() : '--');

  // 日期显示格式化: 2026-02-23 -> 2026/02/23
  const formattedDate = (displayDate && displayDate !== '--') ? displayDate.replace(/-/g, '/') : '--';

  return (
    <div className="bg-[#191B28] px-2 lg:px-6 py-1.5 lg:py-3 border-b border-[#2A2D3C] flex flex-col shadow-md z-10 gap-1 lg:gap-2">
      {/* 第一行：股票名称、价格、日期、日K */}
      <div className="flex items-center justify-between w-full">
        <div className="flex items-center gap-3 lg:gap-8">
          {/* 股票名称代码 */}
          <div className="flex items-baseline gap-1.5">
            <span className="text-base lg:text-2xl font-bold text-white tracking-tight">
              {isRevealed ? realName : '盲盒股票'}
            </span>
            <span className="text-[10px] lg:text-sm text-gray-500 font-mono">
              {isRevealed ? realCode : '******'}
            </span>
          </div>
          
          {/* 当前价格 & 涨跌幅 */}
          <div className="flex items-baseline gap-2">
            <span className={`text-xl lg:text-4xl font-bold font-mono ${colorClass}`}>
              {close?.toFixed(2)}
            </span>
            <span className={`text-[10px] lg:text-lg font-mono ${colorClass}`}>
              {displayPercent ? (displayPercent > 0 ? '+' : '') + displayPercent.toFixed(2) + '%' : '--'}
            </span>
          </div>
        </div>

        {/* 日期 & 日K */}
        <div className="text-right flex items-center gap-3">
          <span className="text-gray-300 font-mono text-xs lg:text-lg hidden xs:inline">{formattedDate}</span>
          <div className="flex items-center">
            <span className="text-gray-500 text-[10px] lg:text-xs mr-1">日K:</span>
            <span className="text-white font-mono text-xs lg:text-lg">
              {currentIndex + 1}<span className="text-gray-600 mx-0.5">/</span>{allKlines.length}
            </span>
          </div>
        </div>
      </div>

      {/* 第二行：今开、成交量、量比、换手率 */}
      <div className="flex flex-wrap items-center gap-x-3 lg:gap-x-6 text-[10px] lg:text-sm text-gray-400">
        <span className="font-mono text-gray-300 mr-1 xs:hidden">{formattedDate}</span>
        
        <div className="flex items-center gap-1">
          <span>今开</span>
          <span className={`font-mono ${open >= close ? 'text-[#00F0F0]' : 'text-[#FD1050]'}`}>{open?.toFixed(2)}</span>
        </div>
        
        <div className="flex items-center gap-1">
          <span>成交量</span>
          <span className="text-yellow-400 font-mono">
            {volume ? (volume >= 100000000 ? (volume / 100000000).toFixed(1) + '亿' : (volume / 10000).toFixed(1) + '万') : '--'}
          </span>
        </div>
        
        <div className="flex items-center gap-1">
          <span>量比</span>
          <span className="text-purple-400 font-mono">{volume_ratio?.toFixed(2) || '--'}</span>
        </div>
        
        <div className="flex items-center gap-1">
          <span>换手率</span>
          <span className="text-cyan-400 font-mono">{turnover_rate?.toFixed(2) || '--'}%</span>
        </div>
      </div>
    </div>
  );
}