import { useState } from 'react';
import { Flame, TrendingUp, TrendingDown, Minus, AlertTriangle, ChevronRight, Calendar, Target } from 'lucide-react';
import type { HotEvent } from '@/types';

interface HotEventsProps {
  events: HotEvent[];
}

// 影响等级星级
function ImpactStars({ level }: { level: number }) {
  return (
    <div className="flex gap-0.5">
      {Array.from({ length: 5 }).map((_, i) => (
        <div
          key={i}
          className={`w-4 h-4 rounded-sm ${i < level ? 'bg-[#7dd75a]' : 'bg-[#3f3f46]'}`}
        />
      ))}
    </div>
  );
}

// 影响方向图标
function ImpactBadge({ impact }: { impact: 'bullish' | 'bearish' | 'neutral' }) {
  const config = {
    bullish: { icon: TrendingUp, text: '利多', color: 'text-[#7dd75a]', bg: 'bg-[#7dd75a]/10' },
    bearish: { icon: TrendingDown, text: '利空', color: 'text-[#ef4444]', bg: 'bg-[#ef4444]/10' },
    neutral: { icon: Minus, text: '中性', color: 'text-[#a1a1aa]', bg: 'bg-[#a1a1aa]/10' },
  };
  
  const { icon: Icon, text, color, bg } = config[impact];
  
  return (
    <div className={`flex items-center gap-1 px-2 py-1 rounded-md ${bg}`}>
      <Icon className={`w-3 h-3 ${color}`} />
      <span className={`text-xs font-medium ${color}`}>{text}</span>
    </div>
  );
}

export function HotEventsPanel({ events }: HotEventsProps) {
  const [selectedEvent, setSelectedEvent] = useState<HotEvent>(events[0]);

  return (
    <div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
      {/* 事件列表 */}
      <div className="lg:col-span-3 space-y-3">
        <div className="flex items-center gap-2 mb-4">
          <Flame className="w-5 h-5 text-[#7dd75a]" />
          <h3 className="text-lg font-semibold text-white">热点事件</h3>
          <span className="text-xs text-[#a1a1aa] ml-auto">共 {events.length} 条</span>
        </div>
        
        {events.map((event) => (
          <div
            key={event.id}
            onClick={() => setSelectedEvent(event)}
            className={`p-4 rounded-xl border cursor-pointer transition-all duration-200 ${
              selectedEvent?.id === event.id
                ? 'border-[#7dd75a] bg-[#7dd75a]/5'
                : 'border-[#27272a] bg-[#0d0d10] hover:border-[#3f3f46]'
            }`}
          >
            <div className="flex items-start justify-between gap-4">
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-2">
                  <h4 className="font-medium text-white">{event.title}</h4>
                  <ImpactBadge impact={event.impact} />
                </div>
                
                <p className="text-sm text-[#a1a1aa] mb-3 line-clamp-2">{event.summary}</p>
                
                <div className="flex items-center gap-4 text-xs">
                  <div className="flex items-center gap-1 text-[#71717a]">
                    <Calendar className="w-3 h-3" />
                    <span>{event.time}</span>
                  </div>
                  
                  <div className="flex items-center gap-2">
                    <Target className="w-3 h-3 text-[#71717a]" />
                    <span className="text-[#71717a]">影响:</span>
                    <div className="flex gap-1">
                      {event.affectedProducts.slice(0, 3).map((product) => (
                        <span
                          key={product}
                          className="px-1.5 py-0.5 rounded bg-[#27272a] text-[#e6e6e6]"
                        >
                          {product}
                        </span>
                      ))}
                      {event.affectedProducts.length > 3 && (
                        <span className="text-[#71717a]">+{event.affectedProducts.length - 3}</span>
                      )}
                    </div>
                  </div>
                </div>
              </div>
              
              <div className="flex flex-col items-end gap-2">
                <ImpactStars level={event.impactLevel} />
                <ChevronRight className={`w-4 h-4 transition-transform ${
                  selectedEvent?.id === event.id ? 'text-[#7dd75a] rotate-90' : 'text-[#71717a]'
                }`} />
              </div>
            </div>
          </div>
        ))}
      </div>
      
      {/* 事件分析面板 */}
      <div className="lg:col-span-2">
        <div className="sticky top-4 p-5 rounded-xl border border-[#27272a] bg-[#0d0d10]">
          {selectedEvent ? (
            <>
              <div className="flex items-center gap-2 mb-4">
                <div className="p-2 rounded-lg bg-[#7dd75a]/10">
                  <AlertTriangle className="w-4 h-4 text-[#7dd75a]" />
                </div>
                <h3 className="font-semibold text-white">智能分析</h3>
              </div>
              
              <div className="space-y-4">
                <div>
                  <h4 className="text-sm text-[#a1a1aa] mb-2">事件解读</h4>
                  <p className="text-sm text-white leading-relaxed">{selectedEvent.analysis}</p>
                </div>
                
                <div>
                  <h4 className="text-sm text-[#a1a1aa] mb-2">影响品种</h4>
                  <div className="flex flex-wrap gap-2">
                    {selectedEvent.affectedProducts.map((product) => (
                      <span
                        key={product}
                        className={`px-3 py-1.5 rounded-lg text-sm font-medium ${
                          selectedEvent.impact === 'bullish'
                            ? 'bg-[#7dd75a]/10 text-[#7dd75a]'
                            : selectedEvent.impact === 'bearish'
                            ? 'bg-[#ef4444]/10 text-[#ef4444]'
                            : 'bg-[#a1a1aa]/10 text-[#a1a1aa]'
                        }`}
                      >
                        {product}
                      </span>
                    ))}
                  </div>
                </div>
                
                <div>
                  <h4 className="text-sm text-[#a1a1aa] mb-2">风险提示</h4>
                  <ul className="space-y-2">
                    {selectedEvent.risks.map((risk, index) => (
                      <li key={index} className="flex items-start gap-2 text-sm text-[#e6e6e6]">
                        <span className="w-1.5 h-1.5 rounded-full bg-[#f59e0b] mt-1.5 flex-shrink-0" />
                        <span>{risk}</span>
                      </li>
                    ))}
                  </ul>
                </div>
                
                <div className="pt-4 border-t border-[#27272a]">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-[#a1a1aa]">影响强度</span>
                    <ImpactStars level={selectedEvent.impactLevel} />
                  </div>
                </div>
              </div>
            </>
          ) : (
            <div className="text-center py-8 text-[#71717a]">
              <AlertTriangle className="w-8 h-8 mx-auto mb-2 opacity-50" />
              <p>选择事件查看分析</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
