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-revolut-teal', bg: 'bg-revolut-teal/10' },
    down: { icon: TrendingDown, color: 'text-revolut-danger', bg: 'bg-revolut-danger/10' },
    sideways: { icon: Minus, color: 'text-revolut-midSlate', bg: 'bg-revolut-midSlate/10' },
  };
  
  const { icon: Icon, color, bg } = config[direction];
  
  return (
    <div className={`flex items-center gap-1 px-2 py-1 rounded-pill ${bg}`}>
      <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-revolut-teal', bg: 'bg-revolut-teal/10' },
    short: { text: '逢高做空', color: 'text-revolut-danger', bg: 'bg-revolut-danger/10' },
    wait: { text: '观望等待', color: 'text-revolut-midSlate', bg: 'bg-revolut-midSlate/10' },
  };
  
  const { text, color, bg } = config[recommendation];
  
  return (
    <span className={`px-2 py-1 rounded-pill text-xs font-medium ${color} ${bg}`}>
      {text}
    </span>
  );
}

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