import { Activity, ChevronUp, MemoryStick, TriangleAlert } from 'lucide-react';
import { Badge, Popover, PropertyRow, Separator } from '../../components/ui';
export function PerformancePopover({
  fps,
  stepMs,
  memoryMb,
  overBudget,
  loaded,
}: {
  fps: number;
  stepMs: number;
  memoryMb?: number;
  overBudget: boolean;
  loaded?: boolean;
}) {
  return (
    <Popover
      label="性能详情"
      placement="bottom-left"
      trigger={({ open, toggle }) => (
        <button
          type="button"
          aria-haspopup="dialog"
          aria-expanded={open}
          onClick={toggle}
          className="flex h-7 items-center gap-3 rounded px-1.5 hover:bg-element-hover focus-visible:ring-2 focus-visible:ring-accent/30"
        >
          <span className="flex items-center gap-1.5">
            <Activity className="h-3 w-3" />
            FPS {fps.toFixed(0)}
          </span>
          <ChevronUp className={`h-3 w-3 transition-transform ${open ? 'rotate-180' : ''}`} />
        </button>
      )}
    >
      {() => (
        <div className="w-72 rounded-lg border border-border bg-surface-elevated p-3 text-xs text-text-secondary shadow-xl">
          <div className="mb-2 flex items-center justify-between">
            <h2 className="font-semibold text-text-primary">运行性能</h2>
            <Badge tone={overBudget ? 'warning' : 'success'}>
              {overBudget ? '预算超限' : '运行正常'}
            </Badge>
          </div>
          {loaded !== undefined && (
            <PropertyRow label="WASM" value={loaded ? '已加载' : '未加载'} />
          )}
          <PropertyRow label="渲染帧率" value={`${fps.toFixed(0)} FPS`} />
          <PropertyRow label="物理步进" value={`${stepMs.toFixed(2)} ms`} />
          <PropertyRow
            label="浏览器内存"
            value={memoryMb === undefined ? '不可用' : `${memoryMb.toFixed(1)} MiB`}
          />
          <Separator className="my-2" />
          {overBudget ? (
            <p className="flex gap-2 text-warning">
              <TriangleAlert className="mt-0.5 h-3.5 w-3.5 shrink-0" />
              主线程超出步进预算，平台已限制追帧以保持交互响应。
            </p>
          ) : (
            <p className="flex gap-2 text-text-tertiary">
              <MemoryStick className="mt-0.5 h-3.5 w-3.5 shrink-0" />
              指标来自浏览器运行时，仅用于当前会话诊断。
            </p>
          )}
        </div>
      )}
    </Popover>
  );
}