ln-bi/src/modules/assets/components/overview/SummaryMetrics.tsx

import { Activity, PlusCircle, Truck, Warehouse } from 'lucide-react';
import type { SummaryMetricsProps } from './types';

export function SummaryMetrics({
  summary: SUMMARY,
  operatingRate,
  inventoryRate,
  pendingRate,
  setVehicleSelection: setShowPlateNumbers,
}: SummaryMetricsProps) {
  return (
    <>
      {/* Header Summary - Ultra Compact */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mb-2">
        {/* Total Assets */}
        <div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm flex items-center gap-2 cursor-pointer transition-all hover:-translate-y-0.5 hover:shadow-md"
             onClick={() => setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', source: 'asset', title: '资产概览' })}>
          <div className="w-8 h-8 rounded-xl bg-slate-50 flex items-center justify-center text-slate-500">
            <Truck size={14} />
          </div>
          <div>
            <div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5">资产总数</div>
            <div className="text-base font-bold text-gray-800 leading-none">{SUMMARY.totalAssets.toLocaleString()}</div>
          </div>
        </div>

        {/* Operating */}
        <div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm flex items-center gap-2 cursor-pointer transition-all hover:-translate-y-0.5 hover:shadow-md"
             onClick={() => setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', category: 'Operating', source: 'asset', title: '正在运营' })}>
          <div className="w-8 h-8 rounded-xl bg-blue-50 flex items-center justify-center text-blue-500">
            <Activity size={14} />
          </div>
          <div>
            <div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5">总运营</div>
            <div className="flex items-baseline gap-1">
              <span className="text-base font-bold text-blue-600 leading-none">{SUMMARY.operating.total}</span>
              <span className="text-[8px] text-gray-400 leading-none">自{SUMMARY.operating.self} 租{SUMMARY.operating.leased}{SUMMARY.operating.hanging > 0 && ` 挂${SUMMARY.operating.hanging}`}</span>
            </div>
          </div>
        </div>

        {/* Inventory */}
        <div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm flex items-center gap-2 cursor-pointer transition-all hover:-translate-y-0.5 hover:shadow-md"
             onClick={() => setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', category: 'Inventory', source: 'asset', title: '库存总数' })}>
          <div className="w-8 h-8 rounded-xl bg-slate-50 flex items-center justify-center text-slate-500">
            <Warehouse size={14} />
          </div>
          <div>
            <div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5">总库存</div>
            <div className="flex items-baseline gap-1">
              <span className="text-base font-bold text-gray-800 leading-none">{SUMMARY.inventory.total}</span>
              <span className="text-[8px] text-gray-400 leading-none">库{SUMMARY.inventory.inStock} 异{SUMMARY.inventory.abnormal}</span>
            </div>
          </div>
        </div>

        {/* Pending */}
        <div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm flex items-center gap-2 cursor-pointer transition-all hover:-translate-y-0.5 hover:shadow-md"
             onClick={() => setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', category: 'Pending', source: 'asset', title: '待交车' })}>
          <div className="w-8 h-8 rounded-xl bg-blue-50 flex items-center justify-center text-blue-500">
            <PlusCircle size={14} />
          </div>
          <div>
            <div className="text-[9px] text-blue-500 font-bold uppercase leading-none mb-0.5">待交车</div>
            <div className="text-base font-bold text-blue-600 leading-none">{SUMMARY.pendingDelivery}</div>
          </div>
        </div>
      </div>

      <div data-testid="asset-operation-ratio-strip" className="mb-3 rounded-2xl border border-slate-100 bg-white/85 px-4 py-3 shadow-sm">
        <div className="flex items-center justify-between gap-3">
          <div className="shrink-0 text-[11px] font-black text-slate-400">运营概览</div>
          <div className="grid min-w-0 flex-1 grid-cols-3 divide-x divide-slate-100 text-center">
            <div className="px-2">
              <div className="text-[10px] font-black text-slate-400">运营率</div>
              <div className="mt-0.5 text-base font-black text-blue-600">{operatingRate.toFixed(1)}%</div>
            </div>
            <div className="px-2">
              <div className="text-[10px] font-black text-slate-400">库存率</div>
              <div className="mt-0.5 text-base font-black text-slate-700">{inventoryRate.toFixed(1)}%</div>
            </div>
            <div className="px-2">
              <div className="text-[10px] font-black text-slate-400">待交率</div>
              <div className="mt-0.5 text-base font-black text-amber-600">{pendingRate.toFixed(1)}%</div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}