import { AlertTriangle, Bell, Shield, TrendingDown, AlertOctagon } from 'lucide-react';
import type { RiskAlert } from '@/types';

interface RiskAlertsProps {
  alerts: RiskAlert[];
}

// 风险等级徽章
function RiskLevelBadge({ level }: { level: 'high' | 'medium' | 'low' }) {
  const config = {
    high: { text: '高风险', color: 'text-[#ef4444]', bg: 'bg-[#ef4444]/10', icon: AlertOctagon },
    medium: { text: '中风险', color: 'text-[#f59e0b]', bg: 'bg-[#f59e0b]/10', icon: AlertTriangle },
    low: { text: '低风险', color: 'text-[#7dd75a]', bg: 'bg-[#7dd75a]/10', icon: Shield },
  };
  
  const { text, color, bg, icon: Icon } = config[level];
  
  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 RiskAlertsPanel({ alerts }: RiskAlertsProps) {
  if (alerts.length === 0) {
    return (
      <div className="p-4 rounded-xl border border-[#27272a] bg-[#0d0d10]">
        <div className="flex items-center gap-2 mb-4">
          <div className="p-2 rounded-lg bg-[#7dd75a]/10">
            <Shield className="w-4 h-4 text-[#7dd75a]" />
          </div>
          <h3 className="font-semibold text-white">风险提醒</h3>
        </div>
        <div className="text-center py-6 text-[#71717a]">
          <Shield className="w-10 h-10 mx-auto mb-2 opacity-50" />
          <p className="text-sm">当前无重大风险事件</p>
        </div>
      </div>
    );
  }

  return (
    <div className="p-4 rounded-xl border border-[#27272a] bg-[#0d0d10]">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <div className="p-2 rounded-lg bg-[#ef4444]/10">
            <Bell className="w-4 h-4 text-[#ef4444]" />
          </div>
          <h3 className="font-semibold text-white">风险提醒</h3>
        </div>
        <span className="px-2 py-1 rounded-full bg-[#ef4444]/10 text-[#ef4444] text-xs font-medium">
          {alerts.length} 条
        </span>
      </div>
      
      <div className="space-y-3">
        {alerts.map((alert) => (
          <div
            key={alert.id}
            className="p-3 rounded-lg border border-[#27272a] bg-[#09090b] hover:border-[#ef4444]/30 transition-colors"
          >
            <div className="flex items-start justify-between gap-3 mb-2">
              <div className="flex-1">
                <h4 className="text-sm font-medium text-white mb-1">{alert.title}</h4>
                <p className="text-xs text-[#a1a1aa] line-clamp-2">{alert.description}</p>
              </div>
              <RiskLevelBadge level={alert.riskLevel} />
            </div>
            
            <div className="flex items-center justify-between text-xs">
              <div className="flex items-center gap-2">
                <span className="text-[#71717a]">影响品种:</span>
                <div className="flex gap-1">
                  {alert.affectedProducts.slice(0, 2).map((product) => (
                    <span key={product} className="px-1.5 py-0.5 rounded bg-[#27272a] text-[#e6e6e6]">
                      {product}
                    </span>
                  ))}
                  {alert.affectedProducts.length > 2 && (
                    <span className="text-[#71717a]">+{alert.affectedProducts.length - 2}</span>
                  )}
                </div>
              </div>
              <span className="text-[#71717a]">{alert.time}</span>
            </div>
            
            <div className="mt-2 pt-2 border-t border-[#27272a]/50">
              <div className="flex items-center gap-1 text-xs">
                <TrendingDown className="w-3 h-3 text-[#f59e0b]" />
                <span className="text-[#f59e0b]">建议: {alert.suggestion}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
