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-semantic-green', bg: 'bg-semantic-green/10', border: 'border-semantic-green/30' },
    down: { icon: TrendingDown, color: 'text-semantic-red', bg: 'bg-semantic-red/10', border: 'border-semantic-red/30' },
    sideways: { icon: Minus, color: 'text-text-slate', bg: 'bg-text-slate/10', border: 'border-text-slate/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-semibold ${color}`}>{label}</span>
    </div>
  );
}

function RecommendationBadge({ recommendation }: { recommendation: 'long' | 'short' | 'wait' }) {
  const config = {
    long: { text: '逢低做多', color: 'text-semantic-green', bg: 'bg-semantic-green/10' },
    short: { text: '逢高做空', color: 'text-semantic-red', bg: 'bg-semantic-red/10' },
    wait: { text: '观望等待', color: 'text-text-slate', bg: 'bg-text-slate/10' },
  };
  
  const { text, color, bg } = config[recommendation];
  
  return (
    <span className={`px-2 py-1 rounded-md text-xs font-semibold ${color} ${bg}`}>
      {text}
    </span>
  );
}

function SuccessRateBar({ rate }: { rate: number }) {
  const getColor = (r: number) => {
    if (r >= 70) return 'bg-semantic-green';
    if (r >= 50) return 'bg-binance-gold';
    return 'bg-semantic-red';
  };
  
  return (
    <div className="flex items-center gap-2">
      <div className="flex-1 h-2 bg-border-light 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-semibold ${rate >= 70 ? 'text-semantic-green' : rate >= 50 ? 'text-binance-gold' : 'text-semantic-red'}`}>
        {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-card border border-border-light bg-white hover:border-binance-yellow/50 transition-all duration-300 cursor-pointer group hover:shadow-card-hover"
    >
      <div className="flex items-start justify-between mb-space-3">
        <div>
          <div className="flex items-center gap-2 mb-1">
            <h4 className="font-bold text-text-ink">{product.name}</h4>
            <span className="text-xs text-text-slate">({product.code})</span>
          </div>
          <RecommendationBadge recommendation={product.recommendation} />
        </div>
        <div className="text-right">
          <div className={`text-xl font-bold font-mono ${isUp ? 'text-semantic-green' : 'text-semantic-red'}`}>
            ¥{product.price.toLocaleString()}
          </div>
          <div className={`flex items-center justify-end gap-1 text-sm ${isUp ? 'text-semantic-green' : 'text-semantic-red'}`}>
            {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-space-3">
        <div className="flex items-center gap-1 text-xs text-text-slate 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-space-3">
        <div className="flex items-center justify-between text-xs">
          <span className="text-text-slate 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-text-slate">趋势评分</span>
          <span className={`font-semibold ${product.trendScore >= 80 ? 'text-semantic-green' : product.trendScore >= 60 ? 'text-binance-gold' : 'text-semantic-red'}`}>
            {product.trendScore}/100
          </span>
        </div>
        <div className="h-1.5 bg-border-light rounded-full overflow-hidden">
          <div
            className={`h-full rounded-full transition-all duration-500 ${
              product.trendScore >= 80 ? 'bg-semantic-green' : product.trendScore >= 60 ? 'bg-binance-gold' : 'bg-semantic-red'
            }`}
            style={{ width: `${product.trendScore}%` }}
          />
        </div>
      </div>
      
      <div className="pt-space-3 border-t border-binanceBorder-light">
        <div className="flex items-center gap-1 text-xs text-text-slate mb-2">
          <Target className="w-3 h-3" />
          <span>关键点位</span>
        </div>
        <div className="flex justify-between text-xs">
          <div>
            <span className="text-text-slate">压力: </span>
            <span className="text-semantic-red font-mono">{product.keyLevels.resistance[0]?.toLocaleString() || '-'}</span>
          </div>
          <div>
            <span className="text-text-slate">支撑: </span>
            <span className="text-semantic-green font-mono">{product.keyLevels.support[0]?.toLocaleString() || '-'}</span>
          </div>
        </div>
      </div>
      
      <div className="flex items-center justify-end mt-space-3 pt-2 border-t border-binanceBorder-light/50">
        <span className="text-xs text-text-slate group-hover:text-binance-yellow transition-colors flex items-center gap-1">
          查看详情
          <ChevronRight className="w-3 h-3 group-hover:translate-x-1 transition-transform" />
        </span>
      </div>
    </div>
  );
}