import React, { useState } from 'react';
import type { ProfitSummary } from '../types/index';
import { useIsMobile } from '@/client/hooks/use-mobile';

interface ProfitDisplayProps {
  profitSummary: ProfitSummary;
}

export const ProfitDisplay: React.FC<ProfitDisplayProps> = ({
  profitSummary
}: ProfitDisplayProps) => {
  const { totalProfit, dailyStats } = profitSummary;
  const isMobile = useIsMobile();
  const [isExpanded, setIsExpanded] = useState(false);

  // 移动端点击展开/收起详细信息
  const handleToggleExpand = () => {
    if (isMobile) {
      setIsExpanded(!isExpanded);
    }
  };

  // 移动端优先显示的关键信息
  const keyInfo = (
    <div className="flex items-center justify-between w-full">
      {/* 累计收益率 */}
      <div className="flex items-center space-x-2">
        <span className="text-gray-400 text-sm md:text-base">累计收益率</span>
        <span className={`text-lg md:text-xl font-bold ${totalProfit >= 0 ? 'text-red-500' : 'text-green-500'}`}>
          {totalProfit >= 0 ? '+' : ''}{(totalProfit * 100).toFixed(2)}%
        </span>
      </div>

      {/* 移动端：日期和涨跌幅 */}
      {isMobile && (
        <div className="flex items-center space-x-4">
          <div className="flex flex-col items-center">
            <span className="text-gray-400 text-xs">日期</span>
            <span className="font-medium text-sm">{dailyStats.date}</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-gray-400 text-xs">涨跌幅</span>
            <span className={`font-medium text-sm ${dailyStats.change >= 0 ? 'text-red-500' : 'text-green-500'}`}>
              {dailyStats.change >= 0 ? '+' : ''}{dailyStats.change.toFixed(2)}%
            </span>
          </div>
        </div>
      )}

      {/* 桌面端：完整行情数据 */}
      {!isMobile && (
        <div className="flex items-center space-x-6">
          <div className="flex flex-col items-center">
            <span className="text-gray-400 text-sm">日期</span>
            <span className="font-medium">{dailyStats.date}</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-gray-400 text-sm">开</span>
            <span className="font-medium">{dailyStats.open.toFixed(2)}</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-gray-400 text-sm">高</span>
            <span className="font-medium text-red-500">{dailyStats.high.toFixed(2)}</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-gray-400 text-sm">收</span>
            <span className="font-medium">{dailyStats.close.toFixed(2)}</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-gray-400 text-sm">低</span>
            <span className="font-medium text-green-500">{dailyStats.low.toFixed(2)}</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-gray-400 text-sm">涨跌幅</span>
            <span className={`font-medium ${dailyStats.change >= 0 ? 'text-red-500' : 'text-green-500'}`}>
              {dailyStats.change >= 0 ? '+' : ''}{dailyStats.change.toFixed(2)}%
            </span>
          </div>
        </div>
      )}
    </div>
  );

  // 移动端展开时的详细信息
  const expandedInfo = isMobile && isExpanded && (
    <div className="mt-3 pt-3 border-t border-gray-700">
      <div className="grid grid-cols-3 gap-4">
        <div className="flex flex-col items-center">
          <span className="text-gray-400 text-xs">开盘</span>
          <span className="font-medium text-sm">{dailyStats.open.toFixed(2)}</span>
        </div>
        <div className="flex flex-col items-center">
          <span className="text-gray-400 text-xs">最高</span>
          <span className="font-medium text-sm text-red-500">{dailyStats.high.toFixed(2)}</span>
        </div>
        <div className="flex flex-col items-center">
          <span className="text-gray-400 text-xs">最低</span>
          <span className="font-medium text-sm text-green-500">{dailyStats.low.toFixed(2)}</span>
        </div>
        <div className="flex flex-col items-center">
          <span className="text-gray-400 text-xs">收盘</span>
          <span className="font-medium text-sm">{dailyStats.close.toFixed(2)}</span>
        </div>
      </div>
    </div>
  );

  return (
    <div
      className={`bg-gray-800 text-white shadow-lg ${isMobile ? 'p-3 cursor-pointer active:bg-gray-700 transition-colors' : 'p-4'}`}
      onClick={handleToggleExpand}
    >
      {keyInfo}
      {expandedInfo}

      {/* 移动端展开/收起指示器 */}
      {isMobile && (
        <div className="flex justify-center mt-2">
          <span className="text-gray-400 text-xs">
            {isExpanded ? '收起' : '展开查看更多'}
          </span>
        </div>
      )}
    </div>
  );
}; 