import { TrendingUp, TrendingDown, Minus, Clock, Target, BarChart3, ChevronRight } from 'lucide-react';
import type { FuturesProduct, TrendDirection } from '@/types';

interface ProductCardProps {
  product: FuturesProduct;
  onClick?: () => void;
}

// 趋势标签
function TrendBadge({ direction, label }: { direction: TrendDirection; label: string }) {
  const config = {
    up: { icon: TrendingUp, color: 'text-[#7dd75a]', bg: 'bg-[#7dd75a]/10', border: 'border-[#7dd75a]/30' },
    down: { icon: TrendingDown, color: 'text-[#ef4444]', bg: 'bg-[#ef4444]/10', border: 'border-[#ef4444]/30' },
    sideways: { icon: Minus, color: 'text-[#a1a1aa]', bg: 'bg-[#a1a1aa]/10', border: 'border-[#a1a1aa]/30' },
  };
  
  const { icon: Icon, color, bg, border } = config[direction];
  
  return (
    <div className={`flex items-center gap-1 px-2 py-1 rounded-md ${bg} ${border} border`}>
      <Icon className={`w-3 h-3 ${color}`} />
      <span className={`text-xs font-medium ${color}`}>{label}</span>
    </div>
  );
}

// 建议标签
function RecommendationBadge({ recommendation }: { recommendation: 'long' | 'short' | 'wait' }) {
  const config = {
    long: { text: '逢低做多', color: 'text-[#7dd75a]', bg: 'bg-[#7dd75a]/10' },
    short: { text: '逢高做空', color: 'text-[#ef4444]', bg: 'bg-[#ef4444]/10' },
    wait: { text: '观望等待', color: 'text-[#a1a1aa]', bg: 'bg-[#a1a1aa]/10' },
  };
  
  const { text, color, bg } = config[recommendation];
  
  return (
    <span className={`px-2 py-1 rounded-md text-xs font-medium ${color} ${bg}`}>
      {text}
    </span>
  );
}

// 成功率进度条
function SuccessRateBar({ rate }: { rate: number }) {
  const getColor = (r: number) => {
    if (r >= 70) return 'bg-[#7dd75a]';
    if (r >= 50) return 'bg-[#f59e0b]';
    return 'bg-[#ef4444]';
  };
  
  return (
    <div className="flex items-center gap-2">
      <div className="flex-1 h-2 bg-[#27272a] rounded-full overflow-hidden">
        <div
          className={`h-full rounded-full transition-all duration-500 ${getColor(rate)}`}
          style={{ width: `${rate}%` }}
        />
      </div>
      <span className={`text-xs font-medium ${rate >= 70 ? 'text-[#7dd75a]' : rate >= 50 ? 'text-[#f59e0b]' : 'text-[#ef4444]'}`}>
        {rate}%
      </span>
    </div>
  );
}

export function ProductCard({ product, onClick }: ProductCardProps) {
  const isUp = product.change >= 0;
  
  const cycleLabels: Record<string, string> = {
    m5: '5分',
    m15: '15分',
    m30: '30分',
    m60: '60分',
  };

  return (
    <div
      onClick={onClick}
      className="p-4 rounded-xl border border-[#27272a] bg-[#0d0d10] hover:border-[#7dd75a]/50 transition-all duration-300 cursor-pointer group hover:shadow-lg hover:shadow-[#7dd75a]/5"
    >
      {/* 头部 */}
      <div className="flex items-start justify-between mb-3">
        <div>
          <div className="flex items-center gap-2 mb-1">
            <h4 className="font-semibold text-white">{product.name}</h4>
            <span className="text-xs text-[#71717a]">({product.code})</span>
          </div>
          <RecommendationBadge recommendation={product.recommendation} />
        </div>
        <div className="text-right">
          <div className={`text-xl font-bold font-mono ${isUp ? 'text-[#7dd75a]' : 'text-[#ef4444]'}`}>
            ¥{product.price.toLocaleString()}
          </div>
          <div className={`flex items-center justify-end gap-1 text-sm ${isUp ? 'text-[#7dd75a]' : 'text-[#ef4444]'}`}>
            {isUp ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
            <span>{isUp ? '+' : ''}{product.change.toFixed(2)} ({isUp ? '+' : ''}{product.changePercent}%)</span>
          </div>
        </div>
      </div>
      
      {/* 多周期趋势 */}
      <div className="mb-3">
        <div className="flex items-center gap-1 text-xs text-[#a1a1aa] mb-2">
          <Clock className="w-3 h-3" />
          <span>多周期趋势</span>
        </div>
        <div className="flex gap-2">
          {Object.entries(product.cycles).map(([key, trend]) => (
            <TrendBadge key={key} direction={trend} label={cycleLabels[key]} />
          ))}
        </div>
      </div>
      
      {/* 成功率和趋势评分 */}
      <div className="space-y-2 mb-3">
        <div className="flex items-center justify-between text-xs">
          <span className="text-[#a1a1aa] flex items-center gap-1">
            <BarChart3 className="w-3 h-3" />
            交易成功率
          </span>
        </div>
        <SuccessRateBar rate={product.successRate} />
        
        <div className="flex items-center justify-between text-xs">
          <span className="text-[#a1a1aa]">趋势评分</span>
          <span className={`font-medium ${product.trendScore >= 80 ? 'text-[#7dd75a]' : product.trendScore >= 60 ? 'text-[#f59e0b]' : 'text-[#ef4444]'}`}>
            {product.trendScore}/100
          </span>
        </div>
        <div className="h-1.5 bg-[#27272a] rounded-full overflow-hidden">
          <div
            className={`h-full rounded-full transition-all duration-500 ${
              product.trendScore >= 80 ? 'bg-[#7dd75a]' : product.trendScore >= 60 ? 'bg-[#f59e0b]' : 'bg-[#ef4444]'
            }`}
            style={{ width: `${product.trendScore}%` }}
          />
        </div>
      </div>
      
      {/* 关键点位 */}
      <div className="pt-3 border-t border-[#27272a]">
        <div className="flex items-center gap-1 text-xs text-[#a1a1aa] mb-2">
          <Target className="w-3 h-3" />
          <span>关键点位</span>
        </div>
        <div className="flex justify-between text-xs">
          <div>
            <span className="text-[#71717a]">压力: </span>
            <span className="text-[#ef4444] font-mono">{product.keyLevels.resistance[0]?.toLocaleString() || '-'}</span>
          </div>
          <div>
            <span className="text-[#71717a]">支撑: </span>
            <span className="text-[#7dd75a] font-mono">{product.keyLevels.support[0]?.toLocaleString() || '-'}</span>
          </div>
        </div>
      </div>
      
      {/* 悬停指示 */}
      <div className="flex items-center justify-end mt-3 pt-2 border-t border-[#27272a]/50">
        <span className="text-xs text-[#71717a] group-hover:text-[#7dd75a] transition-colors flex items-center gap-1">
          查看详情
          <ChevronRight className="w-3 h-3 group-hover:translate-x-1 transition-transform" />
        </span>
      </div>
    </div>
  );
}
