import {
  Skull,
  Bandage,
  TrendingDown,
  UserCircle,
  Activity,
} from 'lucide-react'
import { formatMillions } from '@/utils/formatNumber'
import type { CombatLosses, ConflictStats } from '@/data/mockData'

interface CombatLossesPanelProps {
  usLosses: CombatLosses
  iranLosses: CombatLosses
  conflictStats?: ConflictStats | null
  /** 平民伤亡合计（不区分阵营） */
  civilianTotal?: { killed: number; wounded: number }
  className?: string
}

export function CombatLossesPanel({ usLosses, iranLosses, conflictStats, civilianTotal, className = '' }: CombatLossesPanelProps) {
  const civ = civilianTotal ?? { killed: 0, wounded: 0 }

  return (
    <div className={`flex min-h-0 min-w-0 flex-1 flex-col overflow-visible rounded border border-military-border bg-military-panel/95 font-orbitron ${className}`}>
      <div className="mb-1.5 flex shrink-0 items-center justify-center gap-2 text-[10px] uppercase tracking-wider text-military-text-secondary">
        <TrendingDown className="h-2.5 w-2.5 shrink-0 text-amber-400" />
        战损
        {conflictStats && conflictStats.total_events > 0 && (
          <span className="flex items-center gap-0.5 rounded bg-cyan-950/50 px-1 py-0.5 text-[9px] text-cyan-400">
            <Activity className="h-2 w-2" />
            {conflictStats.total_events}
          </span>
        )}
      </div>

      <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-visible px-3 pb-2">
        {/* 人员伤亡 - 单独容器 */}
        <div className="flex shrink-0 flex-col justify-center overflow-hidden rounded-lg border border-red-900/50 bg-red-950/40 px-3 py-2">
          <div className="mb-1 flex shrink-0 items-center justify-center gap-3 text-[9px] text-military-text-secondary">
            <span className="flex items-center gap-0.5"><Skull className="h-3 w-3 text-red-500" /> 阵亡</span>
            <span className="flex items-center gap-0.5"><Bandage className="h-3 w-3 text-amber-500" /> 受伤</span>
            <span className="text-military-text-secondary/70">|</span>
            <span>美 vs 伊</span>
          </div>
          <div className="grid min-w-0 grid-cols-2 gap-x-2 gap-y-1 overflow-hidden text-center tabular-nums sm:gap-x-4">
            <div className="min-w-0 truncate text-military-us" title={`美: ${formatMillions(usLosses.personnelCasualties.killed)} / ${formatMillions(usLosses.personnelCasualties.wounded)}`}>
              <span className="text-sm font-bold text-red-500 sm:text-base">{formatMillions(usLosses.personnelCasualties.killed)}</span>
              <span className="mx-0.5 text-military-text-secondary">/</span>
              <span className="text-sm font-semibold text-amber-500 sm:text-base">{formatMillions(usLosses.personnelCasualties.wounded)}</span>
            </div>
            <div className="min-w-0 truncate text-military-iran" title={`伊: ${formatMillions(iranLosses.personnelCasualties.killed)} / ${formatMillions(iranLosses.personnelCasualties.wounded)}`}>
              <span className="text-sm font-bold text-red-500 sm:text-base">{formatMillions(iranLosses.personnelCasualties.killed)}</span>
              <span className="mx-0.5 text-military-text-secondary">/</span>
              <span className="text-sm font-semibold text-amber-500 sm:text-base">{formatMillions(iranLosses.personnelCasualties.wounded)}</span>
            </div>
          </div>
        </div>

        {/* 平民伤亡：合计显示，不区分阵营 */}
        <div className="flex shrink-0 flex-col justify-center overflow-hidden rounded-lg border border-amber-900/50 bg-amber-950/40 px-3 py-2">
          <div className="mb-1 flex shrink-0 items-center justify-center gap-2 text-[9px] text-military-text-secondary">
            <UserCircle className="h-3 w-3 text-amber-400" />
            平民伤亡（合计）
          </div>
          <div className="flex flex-wrap items-center justify-center gap-2 text-center tabular-nums sm:gap-3">
            <span className="flex items-center gap-0.5">
              <Skull className="h-3 w-3 text-red-500" />
              <span className="text-sm font-bold text-red-500 sm:text-base">{formatMillions(civ.killed)}</span>
            </span>
            <span className="text-military-text-secondary/60">/</span>
            <span className="flex items-center gap-0.5">
              <Bandage className="h-3 w-3 text-amber-500" />
              <span className="text-sm font-semibold text-amber-500 sm:text-base">{formatMillions(civ.wounded)}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  )
}
