import { StatCard } from './StatCard'
import {
  Ship,
  Plane,
  Users,
  Target,
  Rocket,
  Shield,
  Crosshair,
  Plus,
  TrendingUp,
  Globe,
  Gauge,
} from 'lucide-react'
import { formatMillions, formatTenThousands } from '@/utils/formatNumber'
import type { ReactNode } from 'react'
import type { ForceSummary, PowerIndex, ForceAsset } from '@/data/mockData'

const ASSET_TYPE_ICONS: Record<string, ReactNode> = {
  航母: <Ship className="h-2.5 w-2.5 shrink-0 text-blue-500" />,
  驱逐舰: <Ship className="h-2.5 w-2.5 shrink-0 text-blue-500" />,
  护卫舰: <Ship className="h-2.5 w-2.5 shrink-0 text-blue-400" />,
  水面舰艇: <Ship className="h-2.5 w-2.5 shrink-0 text-blue-400" />,
  海军: <Ship className="h-2.5 w-2.5 shrink-0 text-blue-500" />,
  战机: <Plane className="h-2.5 w-2.5 shrink-0 text-sky-400" />,
  轰炸机: <Plane className="h-2.5 w-2.5 shrink-0 text-sky-500" />,
  防空: <Shield className="h-2.5 w-2.5 shrink-0 text-emerald-500" />,
  导弹: <Rocket className="h-2.5 w-2.5 shrink-0 text-amber-500" />,
  无人机: <Plus className="h-2.5 w-2.5 shrink-0 text-violet-400" />,
  准军事: <Crosshair className="h-2.5 w-2.5 shrink-0 text-slate-400" />,
}

interface ForcePanelProps {
  side: 'us' | 'iran'
  summary: ForceSummary
  powerIndex: PowerIndex
  assets: ForceAsset[]
}

const sideConfig = {
  us: {
    title: '美国/盟军',
    accentColor: 'us',
    borderClass: 'border-military-us/30',
  },
  iran: {
    title: '伊朗军力',
    accentColor: 'iran',
    borderClass: 'border-military-iran/30',
  },
} as const

function getPowerTier(value: number): { label: string; color: string } {
  if (value >= 90) return { label: '顶尖', color: 'text-violet-400' }
  if (value >= 70) return { label: '强', color: 'text-blue-400' }
  if (value >= 50) return { label: '中等', color: 'text-emerald-400' }
  if (value >= 30) return { label: '较弱', color: 'text-amber-400' }
  return { label: '弱', color: 'text-gray-400' }
}

export function ForcePanel({ side, summary, powerIndex, assets }: ForcePanelProps) {
  const config = sideConfig[side]
  const statVariant = config.accentColor as 'us' | 'iran'
  const powerTier = getPowerTier(powerIndex.overall)

  return (
    <div
      className={`
        flex min-h-0 w-full min-w-0 flex-col rounded-lg border bg-military-panel/90
        font-orbitron lg:min-w-[300px] lg:max-w-[340px] ${config.borderClass}
      `}
    >
      <div
        className={`
          shrink-0 border-b px-3 py-2 text-xs font-bold uppercase tracking-wider
          ${side === 'us' ? 'border-military-us/30 text-military-us' : 'border-military-iran/30 text-military-iran'}
        `}
      >
        {config.title}
      </div>

      <div className="grid shrink-0 grid-cols-3 gap-1.5 p-2 [&>*]:min-w-0">
        <StatCard
          label="资产"
          value={formatMillions(summary.totalAssets)}
          variant={statVariant}
          icon={<Target className="h-2.5 w-2.5 shrink-0 text-sky-400" />}
          className="min-w-0"
          valueSize="base"
        />
        <StatCard
          label="人员"
          value={formatMillions(summary.personnel)}
          variant={statVariant}
          icon={<Users className="h-2.5 w-2.5 shrink-0 text-slate-400" />}
          className="min-w-0"
          valueSize="base"
        />
        <StatCard
          label="海军"
          value={formatTenThousands(summary.navalShips)}
          variant={statVariant}
          icon={<Ship className="h-2.5 w-2.5 shrink-0 text-blue-500" />}
          className="min-w-0"
          valueSize="lg"
        />
        <StatCard
          label="航空"
          value={formatTenThousands(summary.aircraft)}
          variant={statVariant}
          icon={<Plane className="h-2.5 w-2.5 shrink-0 text-sky-400" />}
          className="min-w-0"
          valueSize="lg"
        />
        <StatCard
          label="无人机"
          value={formatTenThousands(summary.uav)}
          variant={statVariant}
          icon={<Plus className="h-2.5 w-2.5 shrink-0 text-violet-400" />}
          className="min-w-0"
          valueSize="lg"
        />
        <StatCard
          label="导弹消耗"
          value={formatMillions(summary.missileConsumed)}
          variant={statVariant}
          icon={<Rocket className="h-2.5 w-2.5 shrink-0 text-amber-500" />}
          className="min-w-0"
          valueSize="base"
        />
        <StatCard
          label="导弹库存"
          value={formatMillions(summary.missileStock)}
          variant={statVariant}
          icon={<Rocket className="h-2.5 w-2.5 shrink-0 text-amber-500" />}
          className="min-w-0"
          valueSize="base"
        />
      </div>

      <div className="shrink-0 border-t border-military-border px-3 py-2">
        <div className="mb-2 flex items-baseline justify-between">
          <span className="flex items-center gap-1 text-[10px] uppercase tracking-wider text-military-neutral">
            <Gauge className="h-2.5 w-2.5 shrink-0 text-emerald-500" />
            综合国力
          </span>
          <div className="flex items-baseline gap-1.5">
            <span className={`text-base font-bold tabular-nums ${side === 'us' ? 'text-military-us' : 'text-military-iran'}`}>
              {powerIndex.overall}
              <span className="ml-0.5 text-[10px] font-normal text-military-neutral">/100</span>
            </span>
            <span className={`rounded bg-military-border px-1.5 py-0.5 text-[9px] font-medium ${powerTier.color}`}>
              {powerTier.label}
            </span>
          </div>
        </div>
        <div className="space-y-2">
          {[
            { key: 'military', label: '军事', value: powerIndex.militaryStrength, icon: Shield },
            { key: 'economic', label: '经济', value: powerIndex.economicPower, icon: TrendingUp },
            { key: 'influence', label: '影响力', value: powerIndex.geopoliticalInfluence, icon: Globe },
          ].map(({ key, label, value, icon: Icon }) => (
            <div key={key} className="flex items-center gap-2">
              <Icon
                className={`h-3 w-3 shrink-0 ${
                  key === 'military' ? 'text-emerald-500' : key === 'economic' ? 'text-blue-400' : 'text-amber-400'
                }`}
              />
              <div className="min-w-0 flex-1">
                <div className="mb-0.5 flex justify-between text-[10px]">
                  <span className="text-military-neutral">{label}</span>
                  <span className={`tabular-nums font-semibold ${side === 'us' ? 'text-military-us' : 'text-military-iran'}`}>{value}</span>
                </div>
                <div className="h-1 overflow-hidden rounded-full bg-military-border">
                  <div
                    className={`h-full rounded-full transition-all ${side === 'us' ? 'bg-military-us' : 'bg-military-iran'}`}
                    style={{ width: `${value}%` }}
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="flex min-h-0 flex-1 flex-col overflow-hidden border-t border-military-border">
        <div className="shrink-0 flex items-center gap-1 border-b border-military-border bg-military-panel px-3 py-1.5 text-[10px] uppercase tracking-wider text-military-neutral">
          <Target className="h-2.5 w-2.5 shrink-0 text-sky-400" />
          主要资产
        </div>
        <div className="min-h-0 flex-1 overflow-hidden px-3 py-1.5">
          <div className="animate-vert-marquee will-change-transform">
            {[0, 1].map((i) => (
              <ul key={i} className="space-y-1 text-xs text-military-text-primary">
              {assets.map((asset) => (
                <li
                  key={`${i}-${asset.id}`}
                  className="flex items-center justify-between gap-2 border-b border-military-border/50 pb-1 last:border-0"
                >
                  <span className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden" title={asset.name}>
                    {ASSET_TYPE_ICONS[asset.type] ?? <Target className="h-2.5 w-2.5 shrink-0" />}
                    <span className="block min-w-0 break-words">{asset.name}</span>
                  </span>
                  <span
                    className={`
                      ml-2 shrink-0 min-w-[2ch] text-right font-semibold tabular-nums
                      ${asset.status === 'alert' ? 'text-amber-400' : ''}
                      ${asset.status === 'standby' ? 'text-military-text-secondary' : ''}
                      ${asset.status === 'active' ? (side === 'us' ? 'text-military-us' : 'text-military-iran') : ''}
                    `}
                  >
                    {asset.count}
                  </span>
                </li>
              ))}
              </ul>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
