import type { SituationUpdate, ConflictEvent } from '@/data/mockData'
import { Newspaper, AlertTriangle } from 'lucide-react'

interface RecentUpdatesPanelProps {
  updates: SituationUpdate[]
  conflictEvents?: ConflictEvent[]
  className?: string
}

const CAT_LABELS: Record<string, string> = {
  deployment: '部署',
  alert: '警报',
  intel: '情报',
  diplomatic: '外交',
  other: '其他',
}
const SEV_COLORS: Record<string, string> = {
  low: 'text-military-text-secondary',
  medium: 'text-amber-400',
  high: 'text-orange-500',
  critical: 'text-red-500',
}

function formatTime(iso: string): string {
  const d = new Date(iso)
  const now = new Date()
  const diff = now.getTime() - d.getTime()
  if (diff < 60000) return '刚刚'
  if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
  if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`
  return d.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
}

export function RecentUpdatesPanel({ updates, conflictEvents = [], className = '' }: RecentUpdatesPanelProps) {
  // 优先展示 GDELT 冲突事件（最新 10 条），无则用 updates
  const fromConflict = (conflictEvents || [])
    .slice(0, 10)
    .map((e) => ({ id: e.event_id, summary: e.title, timestamp: e.event_time, category: 'alert' as const, severity: (e.impact_score >= 7 ? 'high' : e.impact_score >= 4 ? 'medium' : 'low') as const }))
  const list = fromConflict.length > 0 ? fromConflict : (updates || []).slice(0, 8)

  return (
    <div className={`flex min-w-0 flex-1 flex-col overflow-hidden rounded border border-military-border bg-military-panel/80 ${className}`}>
      <div className="flex shrink-0 items-center gap-1.5 border-b border-military-border px-3 py-1.5">
        <Newspaper className="h-3.5 w-3.5 shrink-0 text-military-accent" />
        <span className="truncate text-[10px] font-semibold uppercase tracking-wider text-military-text-secondary">
          近期动态
        </span>
      </div>
      <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-2 py-1">
        {list.length === 0 ? (
          <p className="py-4 text-center text-[11px] text-military-text-secondary">暂无动态</p>
        ) : (
          <ul className="space-y-2">
            {list.map((u) => (
              <li key={u.id} className="flex gap-2 border-b border-military-border/50 pb-2 last:border-0 last:pb-0">
                <span className={`shrink-0 text-[9px] ${SEV_COLORS[u.severity] ?? 'text-military-text-secondary'}`}>
                  {u.severity === 'critical' && <AlertTriangle className="inline h-2.5 w-2.5" />}
                  {CAT_LABELS[u.category] ?? u.category}
                </span>
                <div className="min-w-0 flex-1 text-right">
                  <p className="text-[11px] leading-tight text-military-text-primary line-clamp-2">{u.summary}</p>
                  <span className="mt-0.5 block text-[9px] text-military-text-secondary">{formatTime(u.timestamp)}</span>
                </div>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  )
}
