interface MeshInfoPanelProps {
  fileName: string;
  fileSize: number;
  vertexCount: number;
  faceCount: number;
  boundingBox: number[];
  source: 'wasm' | 'js';
}

function formatSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

export function MeshInfoPanel({
  fileName,
  fileSize,
  vertexCount,
  faceCount,
  boundingBox,
  source,
}: MeshInfoPanelProps) {
  const dimX = (boundingBox[3] - boundingBox[0]).toFixed(3);
  const dimY = (boundingBox[4] - boundingBox[1]).toFixed(3);
  const dimZ = (boundingBox[5] - boundingBox[2]).toFixed(3);

  return (
    <div
      style={{
        position: 'absolute',
        top: 8,
        right: 8,
        background: 'rgba(0,0,0,0.75)',
        color: '#eee',
        padding: '10px 14px',
        borderRadius: 6,
        fontSize: 12,
        fontFamily: 'monospace',
        lineHeight: 1.6,
        minWidth: 180,
        zIndex: 20,
      }}
      data-testid="mesh-info"
    >
      <div style={{ fontWeight: 'bold', marginBottom: 4, fontSize: 13 }}>{fileName}</div>
      <div data-testid="file-size">Size: {formatSize(fileSize)}</div>
      <div data-testid="vertex-count">Vertices: {vertexCount}</div>
      <div data-testid="face-count">Faces: {faceCount}</div>
      <div style={{ marginTop: 6, borderTop: '1px solid #555', paddingTop: 6 }}>
        <div>Dimensions:</div>
        <div data-testid="dimensions">&nbsp; {dimX} x {dimY} x {dimZ}</div>
      </div>
      <div data-testid="mesh-source" style={{ marginTop: 4, color: '#888' }}>
        Source: {source}
      </div>
    </div>
  );
}
