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

export function SummaryMetrics({
  summary: SUMMARY,
  operatingRate,
  inventoryRate,
  setVehicleSelection: setShowPlateNumbers,
}: SummaryMetricsProps) {
  return (
    <>
      {/* Header Summary - Ultra Compact */}
      <div className="grid grid-cols-2 md:grid-cols-3 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 data-testid="asset-inventory-card" className="col-span-2 md:col-span-1 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" title="异动、待交车属于库存子集，已包含在总库存中">总库存</div>
            <div className="flex items-baseline gap-1">
              <span className="text-base font-bold text-gray-800 leading-none">{SUMMARY.inventory.total}</span>
            </div>
            <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px]">
              <button type="button" data-testid="asset-abnormal-card" className="inline-flex items-center gap-1 text-amber-600 hover:underline"
                onClick={(event) => { event.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', category: 'Abnormal', source: 'asset', title: '库存中的异动车辆' }); }}>
                <TriangleAlert size={12} />其中异动 <strong>{SUMMARY.inventory.abnormal}</strong>
              </button>
              <button type="button" className="inline-flex items-center gap-1 text-blue-600 hover:underline"
                onClick={(event) => { event.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', category: 'Pending', source: 'asset', title: '库存中的待交车' }); }}>
                <PlusCircle size={12} />其中待交车 <strong>{SUMMARY.pendingDelivery}</strong>
              </button>

            </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-2 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>
        </div>
      </div>
    </>
  );
}