import {
  Building2,
  Users,
  Skull,
  Bandage,
  Plane,
  Ship,
  Shield,
  Car,
  TrendingDown,
} from 'lucide-react'
import { formatMillions } from '@/utils/formatNumber'
import type { CombatLosses } from '@/data/mockData'

interface CombatLossesPanelProps {
  usLosses: CombatLosses
  iranLosses: CombatLosses
  className?: string
}

const LOSS_ITEMS: {
  key: keyof Omit<CombatLosses, 'bases' | 'personnelCasualties'>
  label: string
  icon: typeof Plane
  iconColor: string
}[] = [
  { key: 'aircraft', label: '战机', icon: Plane, iconColor: 'text-sky-400' },
  { key: 'warships', label: '战舰', icon: Ship, iconColor: 'text-blue-500' },
  { key: 'armor', label: '装甲', icon: Shield, iconColor: 'text-emerald-500' },
  { key: 'vehicles', label: '车辆', icon: Car, iconColor: 'text-slate-400' },
]

export function CombatLossesPanel({ usLosses, iranLosses, className = '' }: CombatLossesPanelProps) {
  return (
    <div
      className={`
        min-w-0 shrink-0 overflow-x-auto overflow-y-hidden border-t border-military-border scrollbar-thin bg-military-panel/95 px-4 py-2 font-orbitron
        ${className}
      `}
    >
      <div className="mb-2 flex items-center gap-1 text-[10px] uppercase tracking-wider text-military-text-secondary">
        <TrendingDown className="h-2.5 w-2.5 shrink-0 text-amber-400" />
        战损数据
      </div>
      <div className="flex min-w-0 flex-wrap gap-x-4 gap-y-3 overflow-x-auto text-xs">
        {/* 基地 */}
        <div className="flex shrink-0 min-w-0 flex-col gap-0.5 overflow-visible">
          <span className="flex shrink-0 items-center gap-1 text-military-text-secondary">
            <Building2 className="h-3 w-3 shrink-0 text-amber-500" />
            基地
          </span>
          <div className="flex flex-col gap-0.5 tabular-nums">
            <div className="flex min-w-0 items-baseline gap-1 overflow-hidden" title={`美 毁${usLosses.bases.destroyed} 损${usLosses.bases.damaged}`}>
              <span className="shrink-0 text-military-us">美</span>
              <span className="truncate">
                毁<strong className="text-amber-400">{usLosses.bases.destroyed}</strong>
                损<strong className="text-amber-300">{usLosses.bases.damaged}</strong>
              </span>
            </div>
            <div className="flex min-w-0 items-baseline gap-1 overflow-hidden" title={`伊 毁${iranLosses.bases.destroyed} 损${iranLosses.bases.damaged}`}>
              <span className="shrink-0 text-military-iran">伊</span>
              <span className="truncate">
                毁<strong className="text-amber-400">{iranLosses.bases.destroyed}</strong>
                损<strong className="text-amber-300">{iranLosses.bases.damaged}</strong>
              </span>
            </div>
          </div>
        </div>

        {/* 人员伤亡 */}
        <div className="flex shrink-0 min-w-0 flex-col gap-0.5 overflow-visible">
          <span className="flex shrink-0 items-center gap-1 text-military-text-secondary">
            <Users className="h-3 w-3 shrink-0 text-slate-400" />
            人员伤亡
          </span>
          <div className="flex flex-col gap-0.5 tabular-nums">
            <div className="flex min-w-0 flex-wrap items-baseline gap-x-1" title={`美 阵亡${formatMillions(usLosses.personnelCasualties.killed)} 受伤${formatMillions(usLosses.personnelCasualties.wounded)}`}>
              <span className="shrink-0 text-military-us">美</span>
              <Skull className="h-2.5 w-2.5 shrink-0 text-red-500" />
              <strong className="text-red-500">{formatMillions(usLosses.personnelCasualties.killed)}</strong>
              <Bandage className="h-2.5 w-2.5 shrink-0 text-amber-500" />
              <strong className="text-amber-500">{formatMillions(usLosses.personnelCasualties.wounded)}</strong>
            </div>
            <div className="flex min-w-0 flex-wrap items-baseline gap-x-1" title={`伊 阵亡${formatMillions(iranLosses.personnelCasualties.killed)} 受伤${formatMillions(iranLosses.personnelCasualties.wounded)}`}>
              <span className="shrink-0 text-military-iran">伊</span>
              <Skull className="h-2.5 w-2.5 shrink-0 text-red-500" />
              <strong className="text-red-500">{formatMillions(iranLosses.personnelCasualties.killed)}</strong>
              <Bandage className="h-2.5 w-2.5 shrink-0 text-amber-500" />
              <strong className="text-amber-500">{formatMillions(iranLosses.personnelCasualties.wounded)}</strong>
            </div>
          </div>
        </div>

        {/* 战机 / 战舰 / 装甲 / 车辆 */}
        {LOSS_ITEMS.map(({ key, label, icon: Icon, iconColor }) => (
          <div key={key} className="flex shrink-0 min-w-0 flex-col gap-0.5 overflow-visible">
            <span className="flex shrink-0 items-center gap-1 text-military-text-secondary">
              <Icon className={`h-3 w-3 shrink-0 ${iconColor}`} />
              {label}
            </span>
            <div className="flex flex-col gap-0.5 tabular-nums">
              <div className="flex min-w-0 items-baseline gap-1">
                <span className="shrink-0 text-military-us">美</span>
                <strong>{usLosses[key]}</strong>
              </div>
              <div className="flex min-w-0 items-baseline gap-1">
                <span className="shrink-0 text-military-iran">伊</span>
                <strong>{iranLosses[key]}</strong>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}